:root{
  --bg: #0B0A0C;
  --surface: #151317;
  --surface-2: #1B181D;
  --ink: #F3EDEA;
  --ink-muted: #A79AA0;
  --primary: #D62839;
  --accent: #FF4D5E;
  --accent-soft: #2E1219;
  --secondary: #FF7A59;
  --line: #2B262C;
  --radius: 16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(214,40,57,0.16), transparent 42%),
    radial-gradient(circle at 90% 15%, rgba(255,77,94,0.08), transparent 40%);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px;}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(11,10,12,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  max-width:1100px;margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:'Sora',sans-serif;font-weight:800;font-size:1.15rem;}
.logo span{color:var(--accent);}
nav.links{display:flex;gap:26px;}
nav.links a{font-size:0.9rem;color:var(--ink-muted);font-weight:500;transition:.15s;}
nav.links a:hover{color:var(--ink);}
nav.links a.active{color:var(--accent);}

/* ---------- HERO ---------- */
.hero{
  max-width:1100px;margin:0 auto;padding:72px 28px 40px;
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:center;
}
.photo-wrap{order:-1;}
.w-hello{
  font-family:'Inter',sans-serif;font-size:1.1rem;color:var(--ink-muted);margin:0 0 6px;
}
.w-hello #typewriter{color:var(--ink-muted);}
.w-hello .cursor{
  color:var(--accent);font-weight:600;
}
h1.hero-title{
  font-family:'Sora',sans-serif;font-weight:800;font-size:3rem;line-height:1.1;
  margin:0 0 10px;letter-spacing:-0.02em;
}
p.hero-role{
  font-family:'Sora',sans-serif;font-weight:600;font-size:1.05rem;color:var(--accent);
  margin:0 0 18px;
}
p.hero-desc{color:var(--ink-muted);font-size:1rem;max-width:480px;margin:0 0 30px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{
  font-family:'Sora',sans-serif;font-weight:600;font-size:0.88rem;
  padding:13px 24px;border-radius:10px;transition:.15s;
}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:0 10px 26px -10px rgba(214,40,57,0.55);}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{border:1px solid var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--accent);}

/* circular photo + info below (not overlaid, so nothing overflows the circle) */
.photo-wrap{
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.photo-frame{
  width:100%;max-width:300px;aspect-ratio:1/1;border-radius:50%;
  margin:0 auto;position:relative;overflow:hidden;
  box-shadow:0 0 60px 8px rgba(214,40,57,0.4), 0 0 0 3px var(--accent);
}
.photo-frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.05);
}
.photo-info{
  width:100%;max-width:300px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;
}
.photo-name{font-family:'Sora',sans-serif;font-weight:700;font-size:1.05rem;color:#fff;}
.photo-role{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--ink-muted);margin-bottom:12px;}
.photo-status-row{display:flex;align-items:center;justify-content:center;}
.status-dot{
  display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--ink-muted);
}
.status-dot::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#3ED598;
  box-shadow:0 0 0 3px rgba(62,213,152,0.18);
}
.contact-pill{
  font-family:'Sora',sans-serif;font-size:0.75rem;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:99px;padding:7px 14px;
}

/* ---------- SECTION SHELL ---------- */
section{max-width:1100px;margin:0 auto;padding:60px 28px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:0.74rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--accent);margin:0 0 8px;
}
h2.sec-title{font-family:'Sora',sans-serif;font-weight:700;font-size:1.7rem;margin:0 0 30px;}

/* ---------- ABOUT ---------- */
.about-box{
  background:var(--surface);
  border:1px solid var(--primary);
  box-shadow:0 0 0 1px rgba(214,40,57,0.15), 0 30px 60px -30px rgba(214,40,57,0.4);
  border-radius:var(--radius);
  padding:38px;
}
.about-box p{color:var(--ink-muted);font-size:0.98rem;margin:0 0 26px;}
.stat-row{display:flex;gap:40px;flex-wrap:wrap;}
.stat b{font-family:'Sora',sans-serif;font-size:1.9rem;color:var(--accent);}
.stat span{display:block;font-size:0.8rem;color:var(--ink-muted);margin-top:2px;}

/* ---------- TOOLS ---------- */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.tool-card{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:16px;display:flex;align-items:center;gap:12px;
}
.tool-icon{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;font-size:0.85rem;flex-shrink:0;color:#0B0A0C;
}
.tool-name{font-size:0.85rem;font-weight:600;}
.tool-cat{font-size:0.72rem;color:var(--ink-muted);}

/* ---------- JOURNEY / PROJECTS ---------- */
.sec-subtitle{
  color:var(--ink-muted);font-size:0.92rem;margin:-20px 0 30px;max-width:560px;
}
.journey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.journey-card{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  aspect-ratio:4/3;border:1px solid var(--line);transition:.18s;
}
.journey-card:hover{
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 20px 40px -20px rgba(214,40,57,0.5);
}
.journey-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.j-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;
  background:linear-gradient(180deg, transparent, rgba(6,5,6,0.94) 78%);
}
.j-status{
  display:inline-block;font-size:0.65rem;font-family:'JetBrains Mono',monospace;
  padding:3px 9px;border-radius:99px;margin-bottom:8px;
}
.status-progress{background:rgba(214,40,57,0.85);color:#fff;}
.status-plan{background:var(--surface-2);color:var(--ink-muted);border:1px solid var(--line);}
.j-title{font-family:'Sora',sans-serif;font-weight:700;font-size:0.95rem;color:#fff;margin:0 0 4px;line-height:1.2;}
.j-stack{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--secondary);}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.chat-card, .form-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
.chat-title{font-family:'Sora',sans-serif;font-weight:700;margin:0 0 16px;}
.msg{
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:10px;font-size:0.85rem;max-width:85%;
}
.msg b{display:block;font-size:0.72rem;color:var(--accent);margin-bottom:3px;font-family:'JetBrains Mono',monospace;}
label{display:block;font-size:0.8rem;color:var(--ink-muted);margin:14px 0 6px;}
input, textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;color:var(--ink);font-family:'Inter',sans-serif;font-size:0.88rem;resize:vertical;
}
input:focus, textarea:focus{outline:2px solid var(--accent);outline-offset:1px;}
.send-btn{
  margin-top:18px;width:100%;background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;border:none;border-radius:8px;padding:12px;font-family:'Sora',sans-serif;font-weight:600;font-size:0.9rem;cursor:pointer;
}
.form-status{
  margin-top:10px;font-size:0.8rem;color:var(--accent);min-height:1.2em;
}

footer{
  text-align:center;padding:34px 20px;font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;color:var(--ink-muted);border-top:1px solid var(--line);
}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;}
  .about-box{grid-template-columns:1fr;}
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .journey-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
}