/* =========================================================
   Malwinder Singh — AI-First Developer
   Hand-written stylesheet. No framework, no build step.
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --bg:            #0a0b10;
  --bg-alt:        #0e0f16;
  --surface:       #12141c;
  --surface-2:     #171a24;
  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.16);

  --text:          #eef1f7;
  --text-mid:      #a8b0c2;
  --text-dim:      #6e778c;

  --accent:        #64e9ff;
  --accent-2:      #8b7cff;
  --accent-3:      #ff9f6e;
  --accent-soft:   rgba(100,233,255,.12);
  --accent-line:   rgba(100,233,255,.32);

  --radius:   16px;
  --radius-lg:24px;
  --radius-sm:10px;

  --wrap: 1180px;
  --nav-h: 68px;

  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:   'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  --ease: cubic-bezier(.22,.68,.24,1);
}

html[data-theme="light"]{
  --bg:            #fbfbfd;
  --bg-alt:        #f3f4f8;
  --surface:       #ffffff;
  --surface-2:     #f6f7fb;
  --line:          rgba(10,12,20,.10);
  --line-strong:   rgba(10,12,20,.18);

  --text:          #10131c;
  --text-mid:      #4b5468;
  --text-dim:      #79839a;

  --accent:        #0c7f97;
  --accent-2:      #5b4bd6;
  --accent-3:      #c25a25;
  --accent-soft:   rgba(12,127,151,.10);
  --accent-line:   rgba(12,127,151,.30);

  --shadow: 0 20px 50px -24px rgba(16,19,28,.28);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; flex:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; letter-spacing:-.02em; margin:0; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:#04070c; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--accent); color:#04070c; padding:10px 16px; border-radius:8px; font-weight:600;
}
.skip-link:focus{ top:16px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Chrome: progress, cursor ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:120; transition:width .1s linear;
}
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; z-index:0; opacity:0;
  background:radial-gradient(circle, rgba(100,233,255,.10), transparent 62%);
  transition:opacity .5s var(--ease);
}
html[data-theme="light"] .cursor-glow{ background:radial-gradient(circle, rgba(12,127,151,.10), transparent 62%); }
@media (hover:hover) and (pointer:fine){ .cursor-glow.on{ opacity:1; } }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-inner{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; gap:24px; min-width:0;
}
.nav{ overflow:hidden; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; font-size:1.05rem; }
.brand-mark{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04070c; font-size:19px; }
.brand-dot{ color:var(--accent); }
.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  position:relative; padding:8px 14px; border-radius:8px; font-size:.9rem; font-weight:500; color:var(--text-mid);
  transition:color .2s, background .2s;
}
.nav-links a:hover{ color:var(--text); background:var(--surface-2); }
.nav-links a.active{ color:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.nav-links + .nav-actions{ margin-left:0; }

.cmd-hint{
  display:inline-flex; align-items:center; gap:9px; padding:7px 10px 7px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  color:var(--text-dim); font-size:.82rem; transition:border-color .2s, color .2s;
}
.cmd-hint:hover{ border-color:var(--accent-line); color:var(--text); }
.cmd-hint svg{ font-size:14px; }
kbd{
  font-family:var(--font-mono); font-size:.7rem; padding:2px 6px; border-radius:5px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text-mid);
}
.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); font-size:17px; color:var(--text-mid);
  transition:border-color .2s, color .2s, transform .2s;
}
.icon-btn:hover{ color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); }
.ico-moon{ display:none; }
html[data-theme="light"] .ico-sun{ display:none; }
html[data-theme="light"] .ico-moon{ display:block; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:12px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.btn svg{ font-size:17px; }
.btn-solid{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04070c; box-shadow:0 8px 24px -10px var(--accent); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px var(--accent); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:var(--surface); }
.btn-ghost:hover{ border-color:var(--accent-line); color:var(--accent); transform:translateY(-2px); }
.btn-lg{ padding:15px 26px; font-size:.98rem; border-radius:14px; }
.btn-sm{ padding:9px 15px; font-size:.85rem; border-radius:10px; }

/* ---------- Mobile menu ---------- */
.menu-btn{ display:none; flex-direction:column; gap:5px; }
.menu-btn span{ display:block; width:17px; height:2px; background:currentColor; border-radius:2px; transition:transform .25s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.mobile-menu{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
  background:color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  padding:16px 24px 26px; display:flex; flex-direction:column; gap:4px;
  animation:slideDown .3s var(--ease);
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu a{ padding:13px 4px; font-size:1.05rem; font-weight:500; color:var(--text-mid); border-bottom:1px solid var(--line); }
.mobile-menu a:last-child{ border:0; margin-top:14px; justify-content:center; color:#04070c; }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-10px);} to{ opacity:1; transform:none;} }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
.reveal[data-delay="5"]{ transition-delay:.45s; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--nav-h) + 60px) 0 100px; overflow:hidden;
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-glow{
  position:absolute; z-index:0; top:-30%; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:800px; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 45% at 40% 45%, rgba(100,233,255,.16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 65% 55%, rgba(139,124,255,.14), transparent 70%);
  filter:blur(30px);
}
html[data-theme="light"] .hero-glow{
  background:
    radial-gradient(ellipse 50% 45% at 40% 45%, rgba(12,127,151,.13), transparent 70%),
    radial-gradient(ellipse 45% 40% at 65% 55%, rgba(91,75,214,.11), transparent 70%);
}
.hero-inner{ position:relative; z-index:2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:7px 16px 7px 12px; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter:blur(8px);
  font-size:.83rem; color:var(--text-mid); font-weight:500;
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(100,233,255,0);} 100%{ box-shadow:0 0 0 0 rgba(100,233,255,0);} }

.hero-title{ font-size:clamp(3.2rem,11vw,7.4rem); font-weight:700; letter-spacing:-.045em; margin-bottom:18px; }
.hero-title .line{ display:block; }
.accent-line{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent-3) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:shimmer 7s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

.hero-role{
  font-family:var(--font-mono); font-size:clamp(.95rem,2.4vw,1.22rem);
  color:var(--accent); margin-bottom:26px; display:flex; align-items:center; gap:10px; min-height:1.8em;
}
.mono-tag{ color:var(--text-dim); }
.caret{ display:inline-block; width:9px; height:1.05em; background:var(--accent); animation:blink 1.1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.hero-copy{ max-width:64ch; font-size:clamp(1rem,1.9vw,1.13rem); color:var(--text-mid); margin-bottom:36px; }
.hero-copy strong{ color:var(--text); font-weight:600; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.socials{ display:flex; flex-wrap:wrap; gap:12px; }
.socials a,.socials button{
  position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text-mid); font-size:19px;
  transition:transform .22s var(--ease), color .22s, border-color .22s, background .22s;
}
.socials a:hover,.socials button:hover{ transform:translateY(-4px); color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }
.socials a::after,.socials button::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%) translateY(4px);
  padding:5px 10px; border-radius:7px; background:var(--surface-2); border:1px solid var(--line);
  font-size:.72rem; font-family:var(--font-body); color:var(--text); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
.socials a:hover::after,.socials button:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.socials.big a,.socials.big button{ width:50px; height:50px; font-size:21px; }

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  width:24px; height:38px; border:1.5px solid var(--line-strong); border-radius:14px; display:grid; place-items:start center; padding-top:7px;
}
.scroll-cue span{ width:3px; height:7px; border-radius:2px; background:var(--accent); animation:cue 1.7s var(--ease) infinite; }
@keyframes cue{ 0%{opacity:0; transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0; transform:translateY(13px);} }

/* ---------- Stats ---------- */
.stats{ border-block:1px solid var(--line); background:var(--bg-alt); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:38px 20px; text-align:center; border-left:1px solid var(--line); }
.stat:first-child{ border-left:0; }
.stat-num{
  display:block; font-family:var(--font-display); font-size:clamp(2rem,4.4vw,2.9rem); font-weight:700; letter-spacing:-.03em;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-label{ display:block; font-size:.83rem; color:var(--text-dim); margin-top:6px; letter-spacing:.01em; }

/* ---------- Section shell ---------- */
.section{ padding:clamp(80px,11vw,140px) 0; position:relative; }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.kicker{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:20px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.kicker span{
  display:grid; place-items:center; min-width:30px; height:24px; padding-inline:7px; border-radius:6px;
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:.72rem; letter-spacing:.06em;
}
.section-title{ font-size:clamp(1.9rem,4.4vw,3.1rem); max-width:19ch; margin-bottom:20px; }
.section-title.big{ max-width:14ch; font-size:clamp(2.2rem,5.4vw,3.8rem); }
.section-sub{ max-width:62ch; color:var(--text-mid); font-size:1.03rem; margin-bottom:48px; }
.link{ color:var(--accent); border-bottom:1px solid var(--accent-line); }
.link:hover{ border-bottom-color:var(--accent); }

/* ---------- About ---------- */
.about-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:start; }
.about-copy p{ color:var(--text-mid); font-size:1.03rem; }
.about-copy strong{ color:var(--text); font-weight:600; }
.about-facts{ margin-top:32px; border-top:1px solid var(--line); }
.about-facts li{ display:flex; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:.93rem; }
.fact-k{ min-width:64px; color:var(--text-dim); font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.09em; padding-top:3px; }
.fact-v{ color:var(--text); }

.about-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); position:sticky; top:calc(var(--nav-h) + 30px);
}
.card-header{ display:flex; align-items:center; gap:7px; padding:13px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.r{ background:#ff5f57; } .dot.y{ background:#febc2e; } .dot.g{ background:#28c840; }
.card-file{ margin-left:8px; font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim); }
.code{ margin:0; padding:20px; overflow-x:auto; font-family:var(--font-mono); font-size:.79rem; line-height:1.75; color:var(--text-mid); }
.c-key{ color:var(--accent-2); } .c-cls{ color:var(--accent); } .c-str{ color:#7ee0a8; }
.c-num{ color:var(--accent-3); } .c-fn{ color:#ffd479; } .c-com{ color:var(--text-dim); font-style:italic; }
html[data-theme="light"] .c-str{ color:#1a7f4b; }

.awards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:56px; }
.award{
  display:flex; gap:16px; align-items:center; padding:22px 24px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .25s, transform .25s var(--ease);
}
.award:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.award svg{ font-size:28px; color:var(--accent-3); }
.award h4{ font-size:1rem; margin-bottom:2px; }
.award p{ margin:0; font-size:.86rem; color:var(--text-dim); }

/* ---------- AI-First ---------- */
.ai-section{ position:relative; overflow:hidden; }
.ai-section::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 78% 12%, rgba(139,124,255,.10), transparent 70%);
}
.ai-section .wrap{ position:relative; }
.ai-tools{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:64px; }
.ai-tool{
  position:relative; padding:26px 24px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.ai-tool::after{
  content:''; position:absolute; inset:0 auto auto 0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .45s var(--ease);
}
.ai-tool:hover{ transform:translateY(-5px); border-color:var(--accent-line); box-shadow:var(--shadow); }
.ai-tool:hover::after{ width:100%; }
.ai-badge{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px; margin-bottom:16px;
  border:1px solid var(--line-strong); background:var(--surface-2); font-size:23px; color:var(--accent);
  transition:transform .3s var(--ease), color .3s, background .3s;
}
.ai-tool:hover .ai-badge{ transform:scale(1.08) rotate(-4deg); background:var(--accent-soft); }
.ai-badge[data-brand="gpt"]{ color:#4bd6a4; }
.ai-badge[data-brand="gemini"]{ color:#8ab4ff; }
.ai-badge[data-brand="antigravity"]{ color:var(--accent-2); }
.ai-badge[data-brand="firebase"]{ color:#ffbe4d; }
.ai-badge[data-brand="mlkit"]{ color:var(--accent-3); }
html[data-theme="light"] .ai-badge[data-brand="gpt"]{ color:#0f8f63; }
html[data-theme="light"] .ai-badge[data-brand="gemini"]{ color:#2f68d8; }
html[data-theme="light"] .ai-badge[data-brand="firebase"]{ color:#b47700; }
.ai-tool h3{ font-size:1.12rem; margin-bottom:9px; }
.ai-tool p{ font-size:.91rem; color:var(--text-mid); margin-bottom:16px; }
.ai-use{
  display:inline-block; padding:4px 11px; border-radius:999px; font-size:.72rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono);
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
}

.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.flow li{ padding:26px 24px; border-left:1px solid var(--line); position:relative; transition:background .25s; }
.flow li:first-child{ border-left:0; }
.flow li:hover{ background:var(--surface-2); }
.flow-n{ font-family:var(--font-mono); font-size:.75rem; color:var(--accent); letter-spacing:.1em; }
.flow h4{ font-size:1.05rem; margin:8px 0 7px; }
.flow p{ margin:0; font-size:.87rem; color:var(--text-dim); }

/* ---------- Timeline ---------- */
.timeline{ position:relative; padding-left:2px; }
.timeline::before{ content:''; position:absolute; left:7px; top:12px; bottom:12px; width:1px; background:var(--line); }
.tl-item{ position:relative; }
.tl-head{
  width:100%; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:20px;
  padding:24px 4px 24px 34px; text-align:left; border-bottom:1px solid var(--line);
  transition:padding-left .3s var(--ease);
}
.tl-head:hover{ padding-left:40px; }
.tl-node{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:15px; height:15px; border-radius:50%; border:2px solid var(--line-strong); background:var(--bg-alt);
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.tl-item.is-open .tl-node,.tl-head:hover .tl-node{ border-color:var(--accent); background:var(--accent); box-shadow:0 0 0 5px var(--accent-soft); }
.tl-meta{ display:flex; flex-direction:column; gap:3px; }
.tl-role{ font-family:var(--font-display); font-size:1.16rem; font-weight:600; letter-spacing:-.015em; }
.tl-co{ font-size:.9rem; color:var(--text-dim); }
.tl-date{ font-family:var(--font-mono); font-size:.79rem; color:var(--text-dim); white-space:nowrap; }
.tl-chev{ width:11px; height:11px; border-right:2px solid var(--text-dim); border-bottom:2px solid var(--text-dim); transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease), border-color .3s; }
.tl-item.is-open .tl-chev{ transform:rotate(-135deg) translateY(-2px); border-color:var(--accent); }
.tl-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease); }
.tl-item.is-open .tl-body{ grid-template-rows:1fr; }
.tl-inner{ overflow:hidden; }
.tl-item.is-open .tl-inner{ padding:4px 4px 30px 34px; }
.tl-body p{ max-width:74ch; color:var(--text-mid); font-size:.97rem; }
.tl-badge{
  display:inline-flex; align-items:center; gap:8px; margin:14px 0 0 !important; padding:7px 14px; border-radius:999px;
  background:rgba(255,159,110,.12); border:1px solid rgba(255,159,110,.3); color:var(--accent-3);
  font-size:.82rem; font-weight:600;
}
.tl-badge::before{ content:'★'; }

/* ---------- Chips ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chips li{
  padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface-2);
  font-size:.79rem; color:var(--text-mid); transition:border-color .2s, color .2s, transform .2s, background .2s;
}
.chips li:hover{ border-color:var(--accent-line); color:var(--accent); transform:translateY(-2px); background:var(--accent-soft); }
.chips.big li{ padding:8px 15px; font-size:.87rem; }

/* ---------- Work ---------- */
.work-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:44px; }
.work-head .section-title{ margin-bottom:0; }
.filters{ display:flex; gap:6px; padding:5px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.filter{ padding:8px 16px; border-radius:8px; font-size:.86rem; font-weight:500; color:var(--text-dim); transition:color .2s, background .2s; }
.filter:hover{ color:var(--text); }
.filter.is-active{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04070c; font-weight:600; }

.feature{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
  padding:44px; margin-bottom:34px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--surface), var(--bg-alt));
  position:relative; overflow:hidden;
}
.feature::before{
  content:''; position:absolute; top:-40%; right:-10%; width:520px; height:520px; pointer-events:none;
  background:radial-gradient(circle, rgba(139,124,255,.14), transparent 65%);
}
.feature-body{ position:relative; }
.feature-tag{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.feature h3{ font-size:clamp(2rem,4vw,2.7rem); letter-spacing:-.035em; margin-bottom:6px; }
.feature-sub{ font-family:var(--font-display); font-size:1.15rem; color:var(--text-mid); margin-bottom:18px; }
.feature-body > p{ color:var(--text-mid); font-size:1rem; max-width:52ch; }
.feature-list{ margin:20px 0; display:grid; gap:11px; }
.feature-list li{ display:flex; gap:11px; font-size:.93rem; color:var(--text-mid); }
.feature-list li::before{ content:'→'; color:var(--accent); flex:none; }
.feature-list b{ color:var(--text); font-weight:600; }
.feature-cta{ margin-top:26px; }

/* Phone mock */
.feature-visual{ display:grid; place-items:center; position:relative; }
.phone{
  width:266px; height:544px; border-radius:38px; padding:11px; position:relative;
  background:linear-gradient(160deg,#22252f,#0d0f15); border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotate(-3deg); transition:transform .55s var(--ease);
}
.feature:hover .phone{ transform:rotate(0deg) translateY(-8px); }
.phone-notch{ position:absolute; top:11px; left:50%; transform:translateX(-50%); width:96px; height:22px; border-radius:0 0 14px 14px; background:#0d0f15; z-index:3; }
.phone-screen{ width:100%; height:100%; border-radius:28px; background:#0f1117; overflow:hidden; padding:34px 14px 14px; display:flex; flex-direction:column; gap:9px; }
.wn-top{ display:flex; justify-content:space-between; align-items:center; }
.wn-logo{ font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#eef1f7; }
.wn-signin{ font-size:.68rem; color:#6e778c; }
.wn-search{ display:flex; align-items:center; gap:7px; padding:9px 11px; border-radius:10px; background:#171a24; border:1px solid rgba(255,255,255,.07); font-size:.75rem; color:#a8b0c2; }
.wn-pin{ width:7px; height:7px; border-radius:50%; background:#64e9ff; box-shadow:0 0 0 3px rgba(100,233,255,.18); }
.wn-radius{ display:flex; gap:5px; }
.wn-r{ padding:4px 8px; border-radius:6px; font-size:.6rem; color:#6e778c; border:1px solid rgba(255,255,255,.07); }
.wn-r.on{ background:rgba(100,233,255,.14); border-color:rgba(100,233,255,.35); color:#64e9ff; }
.wn-filters{ display:flex; flex-wrap:wrap; gap:5px; }
.wn-f{ padding:4px 9px; border-radius:999px; font-size:.6rem; color:#6e778c; border:1px solid rgba(255,255,255,.07); }
.wn-f.on{ background:rgba(139,124,255,.16); border-color:rgba(139,124,255,.4); color:#b9aeff; }
.wn-card{ display:flex; gap:9px; align-items:center; padding:9px; border-radius:11px; background:#171a24; border:1px solid rgba(255,255,255,.05); animation:wnFloat 3.4s var(--ease) infinite; }
.wn-card:nth-child(6){ animation-delay:.25s; } .wn-card:nth-child(7){ animation-delay:.5s; }
@keyframes wnFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
.wn-thumb{ width:38px; height:38px; border-radius:8px; background:linear-gradient(135deg,rgba(100,233,255,.3),rgba(139,124,255,.3)); flex:none; }
.wn-info{ flex:1; display:flex; flex-direction:column; gap:6px; }
.wn-info b{ height:7px; width:66%; border-radius:4px; background:rgba(255,255,255,.16); }
.wn-info i{ height:6px; width:42%; border-radius:4px; background:rgba(255,255,255,.08); }

.grid-work{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{
  position:relative; padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); display:flex; flex-direction:column;
  transition:border-color .3s, box-shadow .3s, opacity .35s, transform .35s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.card:hover{ border-color:var(--accent-line); box-shadow:var(--shadow); }
.card.hidden{ display:none; }
.card-top{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.badge{
  padding:4px 11px; border-radius:999px; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; font-family:var(--font-mono);
  background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent);
}
.badge.alt{ background:rgba(139,124,255,.13); border-color:rgba(139,124,255,.32); color:var(--accent-2); }
.badge.ghost{ background:transparent; border-color:var(--line); color:var(--text-dim); }
.card h3{ font-size:1.22rem; margin-bottom:10px; }
.card p{ font-size:.92rem; color:var(--text-mid); flex:1; margin-bottom:0; }
.card-cta{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--accent);
  opacity:.75; transition:opacity .25s, gap .25s var(--ease);
}
.card-cta i{ font-style:normal; transition:transform .25s var(--ease); }
.card:hover .card-cta{ opacity:1; gap:10px; }
.card:hover .card-cta i{ transform:translate(2px,-2px); }

/* ---------- Skills ---------- */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.skill-group{
  padding:26px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .3s, transform .3s var(--ease);
}
.skill-group:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.skill-group.highlight{
  border-color:var(--accent-line);
  background:linear-gradient(150deg, var(--accent-soft), var(--surface) 60%);
}
.skill-group h3{ display:flex; align-items:center; gap:11px; font-size:1.05rem; margin-bottom:6px; }
.sg-ico{ font-size:1.15rem; }
.skill-group.highlight .sg-ico{ color:var(--accent); }

/* ---------- Community ---------- */
.community{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.comm-card{
  display:block; padding:30px 26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  transition:border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.comm-card:hover{ border-color:var(--accent-line); transform:translateY(-5px); box-shadow:var(--shadow); }
.comm-ico{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--surface-2); border:1px solid var(--line); font-size:22px; color:var(--accent); margin-bottom:18px; }
.comm-card h3{ font-size:1.15rem; margin-bottom:8px; }
.comm-card p{ font-size:.91rem; color:var(--text-mid); }
.comm-stat{ font-family:var(--font-mono); font-size:.8rem; color:var(--accent); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-direct{ margin:34px 0 30px; border-top:1px solid var(--line); }
.copy-row{
  width:100%; display:grid; grid-template-columns:80px 1fr auto; align-items:center; gap:16px; text-align:left;
  padding:16px 4px; border-bottom:1px solid var(--line); transition:padding-left .25s var(--ease);
}
button.copy-row:hover{ padding-left:10px; }
.cr-k{ font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.09em; color:var(--text-dim); }
.cr-v{ font-size:.96rem; color:var(--text); word-break:break-all; }
.cr-v.masked{ color:var(--text-dim); font-style:italic; letter-spacing:.01em; }
.cr-a{ font-size:.78rem; color:var(--accent); opacity:.65; transition:opacity .2s, color .2s; }
button.copy-row:hover .cr-a{ opacity:1; color:var(--accent); }

.contact-form{ padding:32px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.8rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:8px; }
.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--line);
  background:var(--bg-alt); color:var(--text); font-size:.95rem; resize:vertical;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-dim); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.field.invalid input,.field.invalid textarea{ border-color:#ff6b6b; }
.contact-form .btn{ width:100%; position:relative; }
.form-note{ margin:14px 0 0; font-size:.82rem; color:var(--text-dim); text-align:center; }

/* honeypot — kept out of view and out of the tab order */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* sending state */
.spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:#04070c; animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.is-sending .btn-arrow{ display:none; }
.btn.is-sending .spinner{ display:block; }
.btn.is-sending .btn-label{ font-size:0; }                       /* hide "Send message"… */
.btn.is-sending .btn-label::before{ content:'Sending…'; font-size:.98rem; }  /* …show this */
.btn:disabled{ opacity:.75; cursor:progress; transform:none !important; }

.form-status{ margin-top:12px; font-size:.87rem; line-height:1.55; text-align:center; }
.form-status:empty{ display:none; }
.form-status.ok{
  padding:12px 16px; border-radius:11px; color:#5fdca0;
  background:rgba(95,220,160,.10); border:1px solid rgba(95,220,160,.28);
}
.form-status.err{
  padding:12px 16px; border-radius:11px; color:#ff8f8f;
  background:rgba(255,143,143,.09); border:1px solid rgba(255,143,143,.28);
}
.form-status a{ color:inherit; text-decoration:underline; font-weight:600; }
html[data-theme="light"] .form-status.ok{ color:#0f7a4d; }
html[data-theme="light"] .form-status.err{ color:#b83232; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:34px 0; background:var(--bg-alt); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.footer p{ margin:0; font-size:.86rem; color:var(--text-dim); }
.footer-meta kbd{ margin-inline:2px; }

/* ---------- Command palette ---------- */
.cmdk{ position:fixed; inset:0; z-index:200; display:grid; place-items:start center; padding-top:14vh; }
.cmdk[hidden]{ display:none; }
.cmdk-backdrop{ position:absolute; inset:0; background:rgba(4,6,12,.62); backdrop-filter:blur(6px); animation:fade .2s; }
@keyframes fade{ from{opacity:0;} }
.cmdk-panel{
  position:relative; width:min(600px,92vw); border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface); box-shadow:0 40px 90px -25px rgba(0,0,0,.7); overflow:hidden;
  animation:pop .25s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(-12px) scale(.98);} }
.cmdk-input{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--text-dim); }
.cmdk-input svg{ font-size:18px; }
.cmdk-input input{ flex:1; border:0; background:none; font-size:1rem; outline:none; }
.cmdk-list{ max-height:min(52vh,420px); overflow-y:auto; padding:8px; }
.cmdk-item{
  display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:10px; cursor:pointer;
  font-size:.93rem; color:var(--text-mid);
}
.cmdk-item .ci-ico{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:14px; flex:none; }
.cmdk-item .ci-label{ flex:1; color:var(--text); }
.cmdk-item .ci-kind{ font-family:var(--font-mono); font-size:.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.08em; }
.cmdk-item.sel{ background:var(--accent-soft); color:var(--text); }
.cmdk-item.sel .ci-ico{ border-color:var(--accent-line); color:var(--accent); }
.cmdk-empty{ padding:28px; text-align:center; color:var(--text-dim); font-size:.9rem; }
.cmdk-foot{ padding:11px 16px; border-top:1px solid var(--line); font-size:.75rem; color:var(--text-dim); background:var(--surface-2); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px); z-index:220;
  padding:12px 22px; border-radius:12px; background:var(--surface); border:1px solid var(--accent-line);
  color:var(--text); font-size:.9rem; font-weight:500; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .about-grid,.contact-grid,.feature{ grid-template-columns:1fr; gap:40px; }
  .about-card{ position:static; }
  .ai-tools,.grid-work,.skills-grid,.community{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow li:nth-child(3){ border-left:0; }
  .flow li:nth-child(n+3){ border-top:1px solid var(--line); }
  .feature-visual{ order:-1; }
  .nav-links{ display:none; }
  .menu-btn{ display:flex; }
  .cmd-hint span,.cmd-key{ display:none; }
  .cmd-hint{ padding:9px; }
}
@media (max-width:720px){
  /* let the hero size to its content so the social links stay above the fold */
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 34px) 0 68px; }
  .eyebrow{ margin-bottom:20px; }
  .hero-copy{ margin-bottom:28px; }
  .hero-cta{ margin-bottom:30px; gap:11px; }
  .hero-cta .btn{ width:100%; }
  .scroll-cue{ display:none; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-left:0; border-top:1px solid var(--line); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(even){ border-left:1px solid var(--line); }
  .ai-tools,.grid-work,.skills-grid,.community,.awards{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .flow li{ border-left:0; border-top:1px solid var(--line); }
  .flow li:first-child{ border-top:0; }
  .tl-head{ grid-template-columns:1fr auto; gap:10px 14px; padding-left:30px; }
  .tl-date{ grid-column:1; font-size:.75rem; }
  .tl-chev{ grid-row:1; grid-column:2; }
  .tl-item.is-open .tl-inner{ padding-left:30px; }
  .feature{ padding:28px 22px; }
  .contact-form{ padding:24px 20px; }
  .work-head{ flex-direction:column; align-items:flex-start; }
  .filters{ width:100%; overflow-x:auto; }
  .footer-inner{ justify-content:center; text-align:center; }
  .phone{ width:236px; height:484px; }
  .hero-glow{ width:100vw; }
}
@media (max-width:460px){
  .wrap,.nav-inner{ padding-inline:18px; }
  .cmd-hint{ display:none; }          /* palette lives on desktop; mobile uses the menu */
  .resume-btn span{ display:none; }
  .resume-btn{ padding-inline:11px; }
  .nav-actions{ gap:7px; }
  .brand-text{ font-size:.95rem; }
  .socials a{ width:40px; height:40px; font-size:17px; }
  .socials.big a{ width:44px; height:44px; font-size:19px; }
  .copy-row{ grid-template-columns:1fr; gap:4px; }
  .cr-a{ display:none; }
}
@media (max-width:330px){
  .resume-btn{ display:none; }        /* still reachable from the menu and hero CTA */
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}
@media print{
  .nav,.mobile-menu,.cmdk,.toast,.scroll-cue,.hero-canvas,.cursor-glow,.scroll-progress{ display:none !important; }
}