@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0d0618;
  --ink-soft:#170b2b;
  --paper:#ede9f7;
  --muted:#9c8fc4;
  --line:rgba(237,233,247,0.1);
  --accent:#a855f7;      /* full-time: violet */
  --accent2:#6366f1;     /* secondary indigo */
  --accent-soft:rgba(168,85,247,0.14);
  --radius:3px;
}
[data-mode="freelance"]{
  --accent:#e64ee0;      /* freelance: violet-magenta */
  --accent2:#a855f7;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:16.5px;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

canvas#bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 20% 0%, rgba(168,85,247,0.16), transparent 55%),
             radial-gradient(ellipse at 85% 30%, rgba(99,102,241,0.12), transparent 50%),
             var(--ink);
}

.wrap{position:relative; z-index:1;}

/* ---------- Nav ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 6vw;
  background:rgba(13,6,24,0.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  height:64px;
}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:1.05rem; letter-spacing:-0.01em;
  color:var(--paper); text-decoration:none;
}
.switcher a{
  color:var(--muted); text-decoration:none; font-size:0.92rem;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.switcher a:hover{ color:var(--accent); border-color:var(--accent); }
.switcher .divider{ color:var(--line); margin:0 10px; }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:150px 6vw 0; position:relative;
}
.avatar{
  width:96px; height:96px; border-radius:50%;
  object-fit:cover; object-position:center 18%;
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 6px var(--accent-soft);
  margin-bottom:28px;
}
.hero .kicker{
  font-size:0.92rem; color:var(--accent); margin-bottom:16px;
  max-width:520px; font-weight:500;
}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(2.2rem, 5.2vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  max-width:17ch;
  background:linear-gradient(100deg, var(--paper) 40%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .sub{
  margin-top:22px; max-width:56ch;
  font-size:1.08rem; color:var(--paper); opacity:0.78;
}
.hero .scroll-hint{
  position:absolute; bottom:38px; left:6vw;
  font-size:0.8rem; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.hero .scroll-hint .bar{
  width:1px; height:34px; background:var(--muted);
  position:relative; overflow:hidden;
}
.hero .scroll-hint .bar::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent);
  animation:scrolldrip 1.8s ease-in-out infinite;
}
@keyframes scrolldrip{ to{ top:100%; } }

.growth-svg{
  position:absolute; right:4vw; top:56%; transform:translateY(-50%);
  width:min(34vw, 420px); opacity:0.85;
}
.growth-svg path{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.growth-svg circle{ fill:var(--accent); }

/* ---------- Marquee (client logos) ---------- */
.marquee-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; overflow:hidden; position:relative;
}
.marquee-label{
  font-size:0.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.12em;
  padding:0 6vw 16px;
}
.marquee-track{
  display:flex; gap:64px; white-space:nowrap;
  animation:marquee 32s linear infinite;
  width:max-content;
}
.marquee-track span{
  font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:500;
  color:var(--muted); opacity:0.75; letter-spacing:0.01em;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- Chapters ---------- */
.chapter{
  padding:11vh 6vw; max-width:1100px; margin:0 auto;
  border-top:1px solid var(--line);
}
.chapter .num{
  font-family:'Space Grotesk',sans-serif;
  color:var(--accent); font-size:0.85rem; margin-bottom:12px;
}
.chapter h2{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:clamp(1.6rem,3.2vw,2.4rem);
  letter-spacing:-0.01em; max-width:24ch; margin-bottom:16px;
}
.chapter .lede{
  font-size:1.05rem; max-width:62ch; opacity:0.78; margin-bottom:6px;
}
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- Services ---------- */
.services{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px; background:var(--line); margin-top:40px;
  border:1px solid var(--line);
}
.service{ background:var(--ink); padding:28px 24px; }
.service .icon{
  font-family:'Space Grotesk',sans-serif; color:var(--accent);
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px;
}
.service h3{
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.12rem; margin-bottom:8px;
}
.service p{ font-size:0.92rem; opacity:0.72; }

/* ---------- Case studies ---------- */
.cases{ display:flex; flex-direction:column; gap:0; margin-top:44px; }
.case{
  display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line);
}
.case:last-child{ border-bottom:1px solid var(--line); }
.case .tag{
  font-family:'Space Grotesk',sans-serif; font-size:0.82rem; color:var(--muted);
  white-space:nowrap;
}
.case .body h3{
  font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:1.25rem;
  margin-bottom:6px; transition:color .2s;
}
.case:hover .body h3{ color:var(--accent); }
.case .body p{ opacity:0.72; max-width:60ch; font-size:0.96rem; }
.case .metric{
  font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700;
  color:var(--accent); white-space:nowrap;
}
.case .metric small{ display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:0.7rem; color:var(--muted); margin-top:2px; }

/* ---------- Results grid (stat counters) ---------- */
.results{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1px; background:var(--line); margin-top:40px;
  border:1px solid var(--line);
}
.result{ background:var(--ink); padding:30px 24px; }
.result .figure{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(2rem,3.2vw,2.6rem); color:var(--accent);
}
.result .label{ margin-top:6px; font-size:0.88rem; color:var(--muted); }

/* ---------- Proof gallery (real screenshots) ---------- */
.proof-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px; margin-top:40px;
}
.proof{
  border:1px solid var(--line); background:var(--ink-soft);
  overflow:hidden; border-radius:var(--radius);
}
.proof img{ width:100%; display:block; }
.proof .cap{
  padding:14px 16px; font-size:0.85rem; color:var(--muted);
  border-top:1px solid var(--line);
}

/* ---------- Industries ---------- */
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.tag-pill{
  border:1px solid var(--line); padding:8px 14px;
  font-size:0.86rem; color:var(--paper); opacity:0.82;
  border-radius:100px;
}

/* ---------- Skills ---------- */
.skills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.skill{
  border:1px solid var(--line); padding:8px 15px;
  font-size:0.88rem; color:var(--paper); opacity:0.82;
  border-radius:var(--radius);
}

/* ---------- Contact ---------- */
.contact{ padding:14vh 6vw 12vh; text-align:left; }
.contact h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(1.9rem,4.4vw,3.2rem); max-width:16ch; letter-spacing:-0.02em;
}
.contact .avail{ margin-top:18px; color:var(--accent); font-size:0.98rem; }
.contact .links{ margin-top:30px; display:flex; gap:26px; flex-wrap:wrap; }
.contact .links a{
  color:var(--paper); text-decoration:none; font-size:1.02rem;
  border-bottom:1px solid var(--line); padding-bottom:4px;
  transition:color .2s, border-color .2s;
}
.contact .links a:hover{ color:var(--accent); border-color:var(--accent); }

footer{
  padding:26px 6vw; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; color:var(--muted);
  font-size:0.8rem; flex-wrap:wrap; gap:10px;
}

@media (max-width:760px){
  .case{ grid-template-columns:1fr; gap:6px; }
  .growth-svg{ display:none; }
  header{ padding:16px 5vw; }
  .hero{ padding-top:130px; }
}