/* =====================================================================
   ALI HUSSEIN — SYSTEMS ENGINEERING INTERFACE
   Design system / global stylesheet
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* base palette — deep space engineering */
  --bg:        #05070d;
  --bg-2:      #080b14;
  --panel:     rgba(18, 23, 36, 0.55);
  --panel-2:   rgba(12, 16, 26, 0.72);
  --line:      rgba(150, 170, 210, 0.12);
  --line-2:    rgba(150, 170, 210, 0.22);

  /* text */
  --ink:       #eef2fb;
  --ink-soft:  #aeb7cc;
  --ink-dim:   #6f7891;

  /* accents — A&M maroon + electric steel */
  --maroon:    #7a0f1e;
  --maroon-2:  #b51d35;
  --maroon-glow: rgba(181, 29, 53, 0.55);
  --steel:     #58b6ff;
  --steel-2:   #7fe3ff;
  --steel-glow: rgba(88, 182, 255, 0.40);
  --good:      #43e08a;

  --radius:    18px;
  --radius-lg: 26px;
  --shadow:    0 24px 70px rgba(0,0,0,.55);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.4);

  --maxw: 1240px;
  --ease: cubic-bezier(.16,.84,.34,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  cursor:auto;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--maroon-2); color:#fff; }

/* ---------- atmosphere / background layers ---------- */
#bg-canvas{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
}
.bg-aura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(122,15,30,.20), transparent 60%),
    radial-gradient(55% 45% at 85% 8%,  rgba(88,182,255,.10), transparent 60%),
    radial-gradient(80% 60% at 50% 110%, rgba(122,15,30,.16), transparent 60%);
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(150,170,210,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,170,210,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 35%, #000 0%, transparent 78%);
}
.bg-noise{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.shell{ position:relative; z-index:2; }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{ display:none !important;
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
.cursor-dot{ width:6px; height:6px; background:var(--steel-2);
  box-shadow:0 0 12px var(--steel-glow); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(127,227,255,.5);
  transition:width .25s var(--ease), height .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease); }
.cursor-ring.hot{ width:54px; height:54px; border-color:var(--maroon-2);
  background:rgba(181,29,53,.10); }
@media (max-width:860px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- loader / boot ---------- */
#boot{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; transition:opacity .7s var(--ease), visibility .7s;
}
#boot.done{ opacity:0; visibility:hidden; }
.boot-mark{
  font-family:var(--font-mono); letter-spacing:.5em; font-size:.7rem;
  color:var(--steel-2); text-transform:uppercase;
}
.boot-ring{
  width:64px; height:64px; border-radius:50%;
  border:2px solid rgba(150,170,210,.15);
  border-top-color:var(--maroon-2); border-right-color:var(--steel);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.boot-log{
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dim);
  min-height:1.2em; letter-spacing:.04em;
}
.boot-bar{ width:240px; height:2px; background:rgba(150,170,210,.12);
  border-radius:2px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--maroon-2),var(--steel));
  box-shadow:0 0 14px var(--steel-glow); transition:width .2s linear; }

/* ---------- navbar ---------- */
.nav{
  position:fixed; top:18px; left:50%; transform:translateX(-50%);
  width:min(var(--maxw), calc(100% - 32px)); z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 12px 18px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:999px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-sm);
  transition:padding .4s var(--ease), top .4s var(--ease),
             background .4s var(--ease), width .4s var(--ease);
}
.nav.shrink{ top:10px; padding:7px 12px 7px 16px; width:min(980px, calc(100% - 24px));
  background:rgba(8,11,20,.82); }
.nav .brand{ display:flex; align-items:center; gap:11px; }
.nav .logo{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:radial-gradient(circle at 30% 25%, var(--maroon-2), var(--maroon) 55%, #2b060d);
  display:grid; place-items:center; position:relative;
  box-shadow:0 0 18px var(--maroon-glow), inset 0 0 12px rgba(0,0,0,.5);
}
.nav .logo span{ font-family:var(--font-display); font-weight:800; font-size:.95rem;
  color:#fff; }
.nav .logo::after{ content:''; position:absolute; inset:-2px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); }
.nav .who .n{ font-family:var(--font-display); font-weight:700; font-size:.95rem;
  letter-spacing:.01em; line-height:1; }
.nav .who .r{ font-family:var(--font-mono); font-size:.62rem; color:var(--steel-2);
  letter-spacing:.18em; text-transform:uppercase; margin-top:3px; }
@media(max-width:520px){ .nav .who{ display:none; } }

.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  position:relative; font-size:.86rem; font-weight:500; color:var(--ink-soft);
  padding:8px 13px; border-radius:999px; transition:color .25s, background .25s;
}
.nav-links a::before{
  content:''; position:absolute; left:13px; right:13px; bottom:5px; height:1px;
  background:var(--steel); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease); opacity:.8;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::before{ transform:scaleX(1); }
.nav-links a.active{ color:#fff; background:rgba(181,29,53,.16); }
.nav-links a.active::before{ transform:scaleX(1); background:var(--maroon-2); }
.nav-cta{
  margin-left:8px; padding:9px 16px !important; border-radius:999px;
  background:linear-gradient(180deg, var(--maroon-2), var(--maroon));
  color:#fff !important; font-weight:600;
  box-shadow:0 8px 22px var(--maroon-glow);
}
.nav-cta::before{ display:none; }
.nav-cta:hover{ filter:brightness(1.1); }

.burger{ display:none; width:42px; height:38px; border-radius:11px;
  background:rgba(150,170,210,.06); border:1px solid var(--line);
  flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger i{ width:18px; height:2px; background:var(--ink-soft); border-radius:2px;
  transition:.3s var(--ease); }
.burger.open i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open i:nth-child(2){ opacity:0; }
.burger.open i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media(max-width:880px){
  .burger{ display:flex; }
  .nav-links{
    position:absolute; top:calc(100% + 12px); right:0; left:0;
    flex-direction:column; align-items:stretch; gap:6px; padding:14px;
    background:rgba(8,11,20,.96); border:1px solid var(--line);
    border-radius:22px; backdrop-filter:blur(20px);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.35s var(--ease); box-shadow:var(--shadow);
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:13px 16px; font-size:1rem; }
  .nav-cta{ margin-left:0; text-align:center; }
}

/* ---------- layout primitives ---------- */
.wrap{ width:min(var(--maxw), calc(100% - 40px)); margin-inline:auto; }
section{ padding:clamp(70px, 9vw, 130px) 0; position:relative; }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.32em;
  text-transform:uppercase; color:var(--steel-2);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:26px; height:1px;
  background:linear-gradient(90deg, var(--steel), transparent); }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.05;
  letter-spacing:-.02em; }
.h-sec{ font-size:clamp(2rem, 4.4vw, 3.4rem); }
.lead{ color:var(--ink-soft); font-size:clamp(1rem,1.5vw,1.12rem); max-width:62ch; }
.sec-head{ max-width:760px; margin-bottom:clamp(38px,5vw,64px); }
.muted{ color:var(--ink-dim); }
.accent{ color:var(--maroon-2); }
.mono{ font-family:var(--font-mono); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:600;
  font-size:.92rem; padding:14px 24px; border-radius:999px;
  border:1px solid transparent; transition:.3s var(--ease); position:relative;
  overflow:hidden;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:linear-gradient(180deg,var(--maroon-2),var(--maroon));
  color:#fff; box-shadow:0 14px 34px var(--maroon-glow); }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.12);
  box-shadow:0 18px 44px var(--maroon-glow); }
.btn-ghost{ background:rgba(150,170,210,.05); border-color:var(--line-2);
  color:var(--ink); backdrop-filter:blur(8px); }
.btn-ghost:hover{ border-color:var(--steel); color:#fff;
  box-shadow:0 0 24px var(--steel-glow); transform:translateY(-2px); }

/* ---------- glass card ---------- */
.glass{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-lg); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
}
.glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(255,255,255,.18), transparent 35%, transparent 65%, rgba(127,227,255,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top:120px; overflow:hidden; }
.hero-bigtype{
  position:absolute; inset:0; z-index:0; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; pointer-events:none;
  padding-left:4vw; gap:.4vw; overflow:hidden;
}
.hero-bigtype span{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(3.5rem, 13.5vw, 14rem); line-height:.86;
  letter-spacing:-.04em; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1px rgba(174,183,204,.10);
  text-stroke:1px rgba(174,183,204,.10);
  transform:translateX(var(--px,0));
  transition:transform .6s var(--ease-out);
}
.hero-bigtype span.fill{
  -webkit-text-stroke:0; background:linear-gradient(180deg, rgba(174,183,204,.10), rgba(174,183,204,.015));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-grid{ position:relative; z-index:3; display:grid;
  grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%; }
@media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:30px; } }

.hero-status{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.12em; color:var(--ink-soft);
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--panel-2); margin-bottom:24px;
}
.hero-status .pulse{ width:8px; height:8px; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 0 rgba(67,224,138,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(67,224,138,.55);} 70%{ box-shadow:0 0 0 10px rgba(67,224,138,0);} 100%{ box-shadow:0 0 0 0 rgba(67,224,138,0);} }

.hero h1{ font-size:clamp(2.6rem, 6vw, 4.7rem); margin-bottom:18px; }
.hero h1 .grad{
  background:linear-gradient(110deg,#fff 10%, var(--steel-2) 50%, var(--maroon-2) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .type{ font-family:var(--font-mono); color:var(--steel-2); font-size:clamp(.95rem,2vw,1.25rem);
  min-height:1.5em; letter-spacing:.02em; margin-bottom:22px; }
.hero .type .caret{ color:var(--maroon-2); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero p.lead{ margin-bottom:30px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.hero-stats{ display:flex; gap:30px; flex-wrap:wrap; }
.hero-stats .s .num{ font-family:var(--font-display); font-weight:700; font-size:1.7rem;
  color:#fff; }
.hero-stats .s .lbl{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim); }

/* 3D stage */
.stage{ position:relative; aspect-ratio:1/1; width:100%; max-width:520px;
  margin-inline:auto; }
.stage canvas{ width:100%!important; height:100%!important; display:block; }
.stage .ring{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  border:1px solid rgba(127,227,255,.10);
  mask-image:linear-gradient(transparent, #000, transparent);
}
.stage .ring.r2{ inset:10%; border-color:rgba(181,29,53,.16);
  animation:spinSlow 24s linear infinite reverse; }
.stage .ring.r3{ inset:22%; border-style:dashed; border-color:rgba(150,170,210,.12);
  animation:spinSlow 40s linear infinite; }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }
.stage .hud{ position:absolute; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.1em; color:var(--ink-dim); pointer-events:none; }
.stage .hud.tl{ top:4%; left:0; } .stage .hud.br{ bottom:4%; right:0; text-align:right; }
.stage .hud b{ color:var(--steel-2); font-weight:500; }

/* scroll cue */
.scrollcue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.3em; color:var(--ink-dim);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:3; }
.scrollcue .line{ width:1px; height:34px; background:linear-gradient(var(--steel),transparent);
  animation:cue 1.8s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ---------- reveal animations ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out),
  transform .9s var(--ease-out); }
.reveal.show{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
.reveal.d5{ transition-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  body, .nav, .btn{ transition:none; }
}

/* ---------- marquee strip ---------- */
.strip{ border-block:1px solid var(--line); overflow:hidden; padding:18px 0;
  background:rgba(8,11,20,.4); }
.strip .track{ display:flex; gap:48px; width:max-content;
  animation:marq 32s linear infinite; }
.strip:hover .track{ animation-play-state:paused; }
.strip .it{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.14em;
  color:var(--ink-soft); text-transform:uppercase; display:flex; align-items:center; gap:48px; }
.strip .it::after{ content:'◆'; color:var(--maroon-2); font-size:.6rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- generic grids ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media(max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media(max-width:620px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

/* feature/highlight card */
.fcard{ padding:26px; border-radius:var(--radius); }
.fcard .ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:rgba(181,29,53,.12); border:1px solid rgba(181,29,53,.25);
  color:var(--maroon-2); margin-bottom:18px; }
.fcard .ic svg{ width:22px; height:22px; }
.fcard h3{ font-size:1.12rem; margin-bottom:8px; }
.fcard p{ color:var(--ink-soft); font-size:.94rem; }
.fcard{ transition:transform .4s var(--ease), border-color .4s; }
.fcard:hover{ transform:translateY(-6px); border-color:var(--line-2); }

/* ---------- about split ---------- */
.about{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
@media(max-width:900px){ .about{ grid-template-columns:1fr; } }
.about .photo{ position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-2); }
.about .photo img{ width:100%; aspect-ratio:4/4.4; object-fit:cover;
  filter:saturate(.92) contrast(1.03); transition:transform .8s var(--ease); }
.about .photo:hover img{ transform:scale(1.04); }
.about .photo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(5,7,13,.85));
  pointer-events:none; }
.about .photo .tag{ position:absolute; left:16px; bottom:16px; z-index:2;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-soft); }
.about .photo .tag b{ color:#fff; display:block; font-family:var(--font-display);
  font-size:1.05rem; letter-spacing:0; }
.about p{ color:var(--ink-soft); margin-bottom:16px; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.chip{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em;
  padding:8px 13px; border-radius:999px; background:rgba(150,170,210,.06);
  border:1px solid var(--line); color:var(--ink-soft); }
.chip:hover{ border-color:var(--steel); color:var(--steel-2); }

/* =====================================================================
   PROJECTS — command center
   ===================================================================== */
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
@media(max-width:820px){ .proj-grid{ grid-template-columns:1fr; } }
.proj{ border-radius:var(--radius-lg); overflow:hidden; cursor:pointer;
  transition:transform .5s var(--ease), box-shadow .5s; }
@media(max-width:860px){ .proj{ cursor:pointer; } }
.proj:hover{ transform:translateY(-8px); box-shadow:var(--shadow); }
.proj .ph{ position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#0a0e17; }
.proj .ph img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) brightness(.78); transition:.7s var(--ease); }
.proj:hover .ph img{ transform:scale(1.08); filter:saturate(1) brightness(.92); }
.proj .ph::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,7,13,.1), rgba(5,7,13,.78)); }
.proj .badge{ position:absolute; top:14px; left:14px; z-index:2; display:flex; gap:8px; }
.proj .stat{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px;
  background:rgba(5,7,13,.7); border:1px solid var(--line-2); color:var(--ink-soft);
  backdrop-filter:blur(6px); display:inline-flex; align-items:center; gap:6px; }
.proj .stat .d{ width:6px; height:6px; border-radius:50%; background:var(--good); }
.proj .stat.r .d{ background:var(--maroon-2); }
.proj .num{ position:absolute; right:14px; top:12px; z-index:2;
  font-family:var(--font-mono); font-size:.7rem; color:var(--steel-2); }
.proj .body{ padding:24px 24px 26px; }
.proj .body h3{ font-size:1.32rem; margin-bottom:6px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; }
.proj .body h3 .arrow{ color:var(--ink-dim); transition:.4s var(--ease); flex:none; }
.proj:hover .body h3 .arrow{ color:var(--steel-2); transform:translate(4px,-4px); }
.proj .kind{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--maroon-2); margin-bottom:14px; }
.proj .body p{ color:var(--ink-soft); font-size:.93rem; }
.proj .reveal-more{ max-height:0; overflow:hidden; opacity:0;
  transition:max-height .6s var(--ease), opacity .5s, margin .5s; }
.proj:hover .reveal-more{ max-height:340px; opacity:1; margin-top:14px; }
.proj .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.proj .tags span{ font-family:var(--font-mono); font-size:.68rem; padding:5px 10px;
  border-radius:8px; background:rgba(88,182,255,.07); border:1px solid rgba(88,182,255,.16);
  color:var(--steel-2); }
.proj .metrics{ display:flex; gap:22px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line); }
.proj .metrics .m .v{ font-family:var(--font-display); font-weight:700; color:#fff; font-size:1.1rem; }
.proj .metrics .m .l{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); }

/* gallery */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:820px){ .gal{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .gal{ grid-template-columns:1fr; } }
.gal .it{ position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); aspect-ratio:4/3; cursor:pointer; }
@media(max-width:860px){ .gal .it{ cursor:pointer; } }
.gal .it img{ width:100%; height:100%; object-fit:cover; filter:saturate(.8) brightness(.7);
  transition:.6s var(--ease); }
.gal .it:hover img{ transform:scale(1.07); filter:saturate(1) brightness(.95); }
.gal .it .cap{ position:absolute; inset:auto 0 0 0; padding:14px;
  background:linear-gradient(transparent, rgba(5,7,13,.92));
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.04em; color:#fff;
  transform:translateY(8px); opacity:.85; transition:.4s var(--ease); }
.gal .it:hover .cap{ transform:none; opacity:1; }
.gal .it .cap b{ display:block; font-family:var(--font-display); font-size:.92rem; color:#fff; }
.gal .it .cap em{ color:var(--steel-2); font-style:normal; font-size:.66rem; }

/* lightbox */
#lightbox{ position:fixed; inset:0; z-index:9500; background:rgba(3,5,10,.92);
  display:none; align-items:center; justify-content:center; padding:30px;
  backdrop-filter:blur(8px); cursor:pointer; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:92vw; max-height:86vh; border-radius:16px;
  border:1px solid var(--line-2); box-shadow:var(--shadow); }
#lightbox .x{ position:absolute; top:22px; right:26px; font-family:var(--font-mono);
  color:var(--ink-soft); font-size:.8rem; letter-spacing:.1em; }

/* =====================================================================
   SKILLS
   ===================================================================== */
.skill-cat{ padding:28px; border-radius:var(--radius); }
.skill-cat h3{ font-size:1.05rem; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.skill-cat h3 .dot{ width:8px; height:8px; border-radius:50%; background:var(--maroon-2);
  box-shadow:0 0 10px var(--maroon-glow); }
.bar{ margin-bottom:14px; }
.bar .top{ display:flex; justify-content:space-between; font-size:.84rem; margin-bottom:6px; }
.bar .top .lv{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-dim);
  letter-spacing:.1em; }
.bar .track{ height:5px; border-radius:99px; background:rgba(150,170,210,.1); overflow:hidden; }
.bar .track i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--maroon-2), var(--steel));
  box-shadow:0 0 10px var(--steel-glow); border-radius:99px;
  transition:width 1.2s var(--ease-out); }
.kv{ display:flex; flex-wrap:wrap; gap:8px; }

/* resume embed */
.resume-box{ padding:14px; border-radius:var(--radius-lg); }
.resume-box iframe{ width:100%; height:760px; border:none; border-radius:14px;
  background:#fff; }

/* =====================================================================
   EXPERIENCE — timeline
   ===================================================================== */
.timeline{ position:relative; padding-left:30px; }
.timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--maroon-2), var(--steel), transparent); }
.tl-item{ position:relative; padding:0 0 38px 30px; }
.tl-item::before{ content:''; position:absolute; left:-29px; top:5px; width:16px; height:16px;
  border-radius:50%; background:var(--bg); border:2px solid var(--maroon-2);
  box-shadow:0 0 14px var(--maroon-glow); }
.tl-item .when{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em;
  color:var(--steel-2); text-transform:uppercase; }
.tl-item h3{ font-size:1.2rem; margin:6px 0 2px; }
.tl-item .org{ color:var(--ink-soft); font-size:.9rem; margin-bottom:10px; }
.tl-item p{ color:var(--ink-soft); font-size:.93rem; }
.tl-item ul.dots{ margin-top:8px; }
.tl-item ul.dots li{ position:relative; padding-left:18px; color:var(--ink-soft);
  font-size:.92rem; margin-bottom:5px; }
.tl-item ul.dots li::before{ content:'▸'; position:absolute; left:0; color:var(--maroon-2); }

/* =====================================================================
   AI ASSISTANT
   ===================================================================== */
.assistant{ display:grid; grid-template-columns:1fr 1.15fr; gap:32px; align-items:stretch; }
@media(max-width:900px){ .assistant{ grid-template-columns:1fr; } }
.neural{ border-radius:var(--radius-lg); padding:30px; position:relative; overflow:hidden;
  min-height:380px; display:flex; flex-direction:column; justify-content:center; }
.neural canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.9; }
.neural .ncontent{ position:relative; z-index:2; }
.neural h3{ font-size:1.5rem; margin-bottom:10px; }
.neural p{ color:var(--ink-soft); font-size:.95rem; }
.neural .feats{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.neural .feats div{ display:flex; align-items:center; gap:12px; font-size:.9rem; color:var(--ink-soft); }
.neural .feats svg{ width:18px; height:18px; color:var(--steel-2); flex:none; }

.chat{ border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column;
  min-height:460px; }
.chat .hd{ display:flex; align-items:center; gap:12px; padding:16px 20px;
  border-bottom:1px solid var(--line); background:rgba(8,11,20,.5); }
.chat .hd .av{ width:38px; height:38px; border-radius:11px; flex:none;
  background:radial-gradient(circle at 30% 25%, var(--steel), #1d5fa0 60%, #0b2742);
  display:grid; place-items:center; box-shadow:0 0 16px var(--steel-glow); }
.chat .hd .av svg{ width:20px; height:20px; color:#fff; }
.chat .hd .t .n{ font-family:var(--font-display); font-weight:700; font-size:.98rem; }
.chat .hd .t .s{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em;
  color:var(--good); display:flex; align-items:center; gap:6px; }
.chat .hd .t .s .d{ width:6px; height:6px; border-radius:50%; background:var(--good);
  box-shadow:0 0 8px var(--good); }
.chat .log{ flex:1; padding:20px; overflow-y:auto; display:flex; flex-direction:column;
  gap:14px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
.chat .log::-webkit-scrollbar{ width:6px; }
.chat .log::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.msg{ max-width:86%; padding:13px 16px; border-radius:16px; font-size:.92rem;
  line-height:1.55; animation:msgIn .45s var(--ease) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px); } }
.msg.ai{ align-self:flex-start; background:rgba(150,170,210,.06);
  border:1px solid var(--line); border-bottom-left-radius:5px; }
.msg.me{ align-self:flex-end; background:linear-gradient(180deg, rgba(181,29,53,.22), rgba(122,15,30,.22));
  border:1px solid rgba(181,29,53,.3); border-bottom-right-radius:5px; color:#fff; }
.msg.ai b{ color:var(--steel-2); font-weight:600; }
.typing{ align-self:flex-start; display:flex; gap:5px; padding:14px 16px;
  background:rgba(150,170,210,.06); border:1px solid var(--line); border-radius:16px;
  border-bottom-left-radius:5px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--steel-2);
  animation:typ 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s; } .typing i:nth-child(3){ animation-delay:.4s; }
@keyframes typ{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-6px); opacity:1; } }
.chat .quick{ display:flex; gap:8px; flex-wrap:wrap; padding:0 20px 12px; }
.chat .quick button{ font-family:var(--font-mono); font-size:.72rem; padding:8px 12px;
  border-radius:999px; background:rgba(88,182,255,.07); border:1px solid rgba(88,182,255,.18);
  color:var(--steel-2); transition:.25s var(--ease); }
.chat .quick button:hover{ background:rgba(88,182,255,.16); transform:translateY(-1px); }
.chat .input{ display:flex; gap:10px; padding:14px 16px; border-top:1px solid var(--line);
  background:rgba(8,11,20,.5); }
.chat .input input{ flex:1; background:rgba(150,170,210,.06); border:1px solid var(--line);
  border-radius:999px; padding:13px 18px; color:var(--ink); font-family:var(--font-body);
  font-size:.92rem; outline:none; transition:.25s; }
.chat .input input:focus{ border-color:var(--steel); box-shadow:0 0 0 3px var(--steel-glow); }
.chat .input button{ width:46px; height:46px; flex:none; border-radius:50%; border:none;
  background:linear-gradient(180deg,var(--maroon-2),var(--maroon)); color:#fff;
  display:grid; place-items:center; box-shadow:0 8px 20px var(--maroon-glow);
  transition:.25s var(--ease); }
.chat .input button:hover{ transform:scale(1.08); }
.chat .input button svg{ width:18px; height:18px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }
.field input, .field textarea{ width:100%; background:rgba(150,170,210,.05);
  border:1px solid var(--line); border-radius:13px; padding:13px 15px; color:var(--ink);
  font-family:var(--font-body); font-size:.95rem; outline:none; transition:.25s; }
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color:var(--steel);
  box-shadow:0 0 0 3px var(--steel-glow); }
.contact-line{ display:flex; align-items:center; gap:14px; padding:16px 0;
  border-bottom:1px solid var(--line); }
.contact-line .ic{ width:42px; height:42px; border-radius:12px; flex:none; display:grid;
  place-items:center; background:rgba(181,29,53,.12); border:1px solid rgba(181,29,53,.25);
  color:var(--maroon-2); }
.contact-line .ic svg{ width:19px; height:19px; }
.contact-line .lbl{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim); }
.contact-line .val{ color:var(--ink); font-weight:500; }
.contact-line:hover .val{ color:var(--steel-2); }

/* ---------- CTA band ---------- */
.cta-band{ border-radius:var(--radius-lg); padding:clamp(40px,6vw,72px);
  text-align:center; position:relative; overflow:hidden; }
.cta-band::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(60% 120% at 50% 0%, rgba(181,29,53,.22), transparent 60%); }
.cta-band > *{ position:relative; z-index:2; }
.cta-band h2{ font-size:clamp(1.8rem,4vw,3rem); margin-bottom:14px; }
.cta-band p{ color:var(--ink-soft); max-width:54ch; margin:0 auto 28px; }

/* ---------- footer ---------- */
footer.site{ border-top:1px solid var(--line); padding:54px 0 40px;
  background:rgba(8,11,20,.4); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:36px; }
@media(max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:24px; } }
footer.site h4{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; }
footer.site a{ display:block; color:var(--ink-soft); font-size:.92rem; padding:5px 0;
  transition:.2s; }
footer.site a:hover{ color:var(--steel-2); transform:translateX(3px); }
.foot-brand p{ color:var(--ink-soft); font-size:.92rem; max-width:38ch; margin-top:12px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.74rem; color:var(--ink-dim); letter-spacing:.06em; }
.foot-bottom .socials{ display:flex; gap:10px; }
.foot-bottom .socials a{ width:38px; height:38px; border-radius:11px; display:grid;
  place-items:center; background:rgba(150,170,210,.06); border:1px solid var(--line);
  color:var(--ink-soft); transition:.25s var(--ease); }
.foot-bottom .socials a:hover{ color:#fff; border-color:var(--steel);
  box-shadow:0 0 16px var(--steel-glow); transform:translateY(-2px); }
.foot-bottom .socials svg{ width:18px; height:18px; }

/* page intro banner (sub pages) */
.banner{ padding-top:160px; padding-bottom:30px; }
.banner h1{ font-size:clamp(2.4rem,6vw,4.2rem); margin:14px 0 18px; }
.banner h1 .grad{ background:linear-gradient(110deg,#fff, var(--steel-2), var(--maroon-2));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* --- label stacking fixes --- */
.who{ display:flex; flex-direction:column; line-height:1; }
.contact-line .lbl{ display:block; margin-bottom:2px; }

/* =====================================================================
   FULL-STACK WEB APPS — browser-framed preview + modal
   ===================================================================== */
.webgrid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media(min-width:900px){ .webgrid.two{ grid-template-columns:1fr 1fr; } }
.webcard{ padding:0; overflow:hidden; cursor:pointer; position:relative;
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s; }
.webcard:hover{ transform:translateY(-8px); border-color:var(--line-2);
  box-shadow:0 30px 70px -30px var(--maroon-glow); }
.browser{ background:rgba(150,170,210,.05); border-bottom:1px solid var(--line); }
.browser .bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; }
.browser .bar .dot{ width:11px; height:11px; border-radius:50%; background:#ff5f57; flex:none; }
.browser .bar .dot:nth-child(2){ background:#febc2e; } .browser .bar .dot:nth-child(3){ background:#28c840; }
.browser .bar .url{ flex:1; margin-left:10px; font-family:var(--font-mono); font-size:.7rem;
  color:var(--ink-dim); background:rgba(8,11,20,.5); border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.webcard .shot{ position:relative; aspect-ratio:16/9.4; overflow:hidden; }
.webcard .shot > .preview{ position:absolute; inset:0; transform-origin:top left; }
.webcard .shot::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(7,9,15,.55)); }
.webcard .openhint{ position:absolute; z-index:3; left:16px; bottom:14px; display:flex;
  align-items:center; gap:9px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  color:#fff; opacity:0; transform:translateY(6px); transition:.4s var(--ease); }
.webcard:hover .openhint{ opacity:1; transform:none; }
.webcard .openhint .pulse{ width:9px; height:9px; border-radius:50%; background:var(--steel-2);
  box-shadow:0 0 12px var(--steel); }
.webcard .meta{ padding:22px 24px 26px; }
.webcard .meta .kind{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel-2); margin-bottom:9px; }
.webcard .meta h3{ font-size:1.32rem; display:flex; align-items:center; gap:9px; }
.webcard .meta p{ color:var(--ink-soft); font-size:.95rem; margin-top:8px; }
.webcard .meta .tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.webcard .meta .tags span{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:99px; padding:4px 11px; }

/* recreated bubble-tea mini site preview */
.boba{ position:absolute; inset:0; width:1280px; height:752px; background:
  radial-gradient(120% 90% at 80% -10%, rgba(181,29,53,.22), transparent 55%), #0c0e15;
  color:#fff; font-family:var(--font-body); padding:54px 64px; }
.boba .bnav{ display:flex; align-items:center; gap:14px; margin-bottom:54px; }
.boba .blogo{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:#fff;
  background:linear-gradient(135deg,#b51d35,#7a0f1e); box-shadow:0 10px 30px rgba(181,29,53,.5); }
.boba h1{ font-family:var(--font-display); font-size:3.6rem; font-weight:800; line-height:1; }
.boba .team{ font-family:var(--font-mono); font-size:1rem; color:#7fe3ff; letter-spacing:.1em; margin-top:10px; }
.boba .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px; }
.boba .bc{ background:rgba(150,170,210,.06); border:1px solid rgba(150,170,210,.14);
  border-radius:22px; padding:34px 30px; }
.boba .bc .tag{ font-family:var(--font-mono); font-size:.85rem; letter-spacing:.12em; color:#ff8aa0; }
.boba .bc h3{ font-family:var(--font-display); font-size:1.7rem; font-weight:700; margin:16px 0 12px; }
.boba .bc p{ font-size:1rem; color:rgba(220,228,245,.7); line-height:1.5; }
.boba .bc .pill{ display:inline-block; margin-top:22px; padding:11px 22px; border-radius:99px;
  font-size:.95rem; font-weight:600; background:linear-gradient(135deg,#b51d35,#7a0f1e); color:#fff; }

/* modal */
#appModal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,7,12,.74); backdrop-filter:blur(10px); }
#appModal.open{ display:flex; animation:mdlFade .35s var(--ease-out); }
@keyframes mdlFade{ from{ opacity:0; } to{ opacity:1; } }
.app-modal{ width:min(960px,100%); max-height:90vh; overflow:auto; border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(20,24,36,.96), rgba(11,14,22,.98));
  border:1px solid var(--line-2); box-shadow:0 50px 120px -30px #000;
  transform:translateY(24px) scale(.97); opacity:0; animation:mdlIn .5s .05s var(--ease-out) forwards; }
@keyframes mdlIn{ to{ transform:none; opacity:1; } }
.app-modal .top{ position:relative; padding:30px 34px 0; }
.app-modal .x{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; background:rgba(150,170,210,.08); border:1px solid var(--line);
  color:var(--ink-soft); cursor:pointer; transition:.25s; }
.app-modal .x:hover{ color:#fff; border-color:var(--steel); box-shadow:0 0 16px var(--steel-glow); }
.app-modal .eyebrow{ margin-bottom:12px; }
.app-modal h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.app-modal .sub{ color:var(--ink-soft); margin-top:10px; max-width:64ch; }
.app-modal .frame{ margin:24px 34px; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/9.4; position:relative; }
.app-modal .frame .boba{ transform-origin:top left; }
.app-modal .roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:0 34px; }
@media(max-width:720px){ .app-modal .roles{ grid-template-columns:1fr; } }
.app-modal .role{ background:rgba(150,170,210,.05); border:1px solid var(--line); border-radius:14px; padding:18px; }
.app-modal .role h4{ font-size:1rem; display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.app-modal .role h4 .d{ width:7px; height:7px; border-radius:50%; background:var(--maroon-2);
  box-shadow:0 0 9px var(--maroon-glow); }
.app-modal .role p{ font-size:.86rem; color:var(--ink-soft); }
.app-modal .stack{ display:flex; flex-wrap:wrap; gap:8px; padding:24px 34px 4px; }
.app-modal .stack span{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.app-modal .actions{ display:flex; gap:13px; flex-wrap:wrap; padding:24px 34px 34px; }

/* =====================================================================
   CREATIVE / DESIGNER PAGE
   ===================================================================== */
.soft-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media(max-width:820px){ .soft-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .soft-grid{ grid-template-columns:1fr; } }
.soft{ padding:22px; border-radius:var(--radius); display:flex; align-items:center; gap:15px;
  transition:transform .4s var(--ease), border-color .4s; }
.soft:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.soft .badge{ width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1rem; color:#fff; }
.soft .n{ font-weight:600; font-size:1rem; } .soft .r{ font-size:.8rem; color:var(--ink-dim); }
.reel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .reel-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .reel-grid{ grid-template-columns:1fr 1fr; } }
.reel{ aspect-ratio:9/16; border-radius:18px; overflow:hidden; position:relative;
  background:linear-gradient(160deg, rgba(181,29,53,.18), rgba(88,182,255,.12)), #11131c;
  border:1px solid var(--line); display:grid; place-items:center; transition:.4s var(--ease); }
.reel:hover{ transform:translateY(-6px) scale(1.01); border-color:var(--steel); box-shadow:0 0 30px var(--steel-glow); }
.reel .play{ width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); }
.reel .play svg{ width:22px; height:22px; color:#fff; margin-left:3px; }
.reel .lab{ position:absolute; left:14px; bottom:14px; font-family:var(--font-mono);
  font-size:.7rem; letter-spacing:.1em; color:rgba(255,255,255,.8); }
.reel .ph-note{ position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.08em; color:var(--ink-dim); border:1px solid var(--line); border-radius:99px; padding:3px 9px; }
.ig-cta{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:30px 34px; border-radius:var(--radius-lg); background:
  linear-gradient(110deg, rgba(225,48,108,.16), rgba(131,58,180,.14), rgba(88,182,255,.10)); }
.ig-cta h3{ font-size:1.5rem; } .ig-cta p{ color:var(--ink-soft); margin-top:6px; font-size:.95rem; }

/* =====================================================================
   CPU HERO — callout labels + theme toggle + LIGHT THEME
   ===================================================================== */
.stage .hud.tr{ top:4%; right:0; text-align:right; }
.stage .hud.bl{ bottom:4%; left:0; }
.stage .cpu-tag{ position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; color:var(--ink-dim);
  white-space:nowrap; }
.stage .cpu-tag b{ color:var(--maroon-2); }

/* theme toggle button (sits in the nav) */
.theme-toggle{ width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center; background:rgba(150,170,210,.08);
  border:1px solid var(--line); color:var(--ink-soft); transition:.25s var(--ease);
  margin-left:4px; }
.theme-toggle:hover{ color:var(--ink); border-color:var(--steel); box-shadow:0 0 16px var(--steel-glow); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .i-sun{ display:none; } .theme-toggle .i-moon{ display:block; }
html[data-theme="light"] .theme-toggle .i-sun{ display:block; }
html[data-theme="light"] .theme-toggle .i-moon{ display:none; }

/* ---- LIGHT THEME : palette flip (most surfaces use these tokens) ---- */
html[data-theme="light"]{
  --bg:        #eef1f8;
  --bg-2:      #e3e8f3;
  --panel:     rgba(255,255,255,0.72);
  --panel-2:   rgba(255,255,255,0.88);
  --line:      rgba(20,32,66,0.12);
  --line-2:    rgba(20,32,66,0.22);
  --ink:       #121726;
  --ink-soft:  #3e475e;
  --ink-dim:   #6c7591;
  --maroon-glow: rgba(181,29,53,0.30);
  --steel-glow:  rgba(40,120,200,0.22);
  --shadow:    0 24px 70px rgba(40,55,95,.18);
  --shadow-sm: 0 10px 30px rgba(40,55,95,.12);
}
html[data-theme="light"] body{
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(181,29,53,.10), transparent 55%),
    linear-gradient(180deg, #f3f5fb, #e7ecf6);
}
html[data-theme="light"] .bg-aura{ opacity:.5; }
html[data-theme="light"] .bg-grid{ opacity:.4;
  background-image:
    linear-gradient(rgba(20,32,66,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,32,66,.05) 1px, transparent 1px); }
html[data-theme="light"] .bg-noise{ opacity:.25; }
html[data-theme="light"] #bg-canvas{ opacity:.45; }
html[data-theme="light"] .nav{ box-shadow:0 10px 30px rgba(40,55,95,.10); }
html[data-theme="light"] .btn-ghost{ color:var(--ink); }
html[data-theme="light"] .chip,
html[data-theme="light"] .chat .input input,
html[data-theme="light"] .chat .quick button{ background:rgba(20,32,66,.04); }
html[data-theme="light"] .hero-bigtype{ opacity:.5; }
html[data-theme="light"] ::selection{ background:var(--maroon-2); color:#fff; }

/* =====================================================================
   v3 ADDITIONS — floating assistant, capability tabs, term defs,
   generic project popup, CPU state label, light-mode fixes
   ===================================================================== */

/* ---- CPU state label under the stage ---- */
.stage .cpu-state{ position:absolute; left:50%; bottom:-12%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--steel-2);
  white-space:nowrap; opacity:.9; }

/* ---- FLOATING ASSISTANT ---- */
.aiden-fab{ position:fixed; right:22px; bottom:22px; z-index:400; width:60px; height:60px;
  border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center;
  background:linear-gradient(135deg, var(--maroon-2), var(--maroon)); color:#fff;
  box-shadow:0 16px 40px -10px var(--maroon-glow), 0 0 0 1px rgba(255,255,255,.05) inset;
  cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s; }
.aiden-fab:hover{ transform:translateY(-3px) scale(1.04); }
.aiden-fab svg{ width:25px; height:25px; position:absolute; transition:opacity .25s, transform .35s; }
.aiden-fab .i-x{ opacity:0; transform:rotate(-90deg) scale(.6); }
.aiden-fab.open .i-chat{ opacity:0; transform:rotate(90deg) scale(.6); }
.aiden-fab.open .i-x{ opacity:1; transform:none; }
.aiden-fab-dot{ position:absolute; top:13px; right:13px; width:9px; height:9px; border-radius:50%;
  background:var(--good); box-shadow:0 0 10px var(--good); }
.aiden-fab.open .aiden-fab-dot{ display:none; }

.aiden-panel{ position:fixed; right:22px; bottom:94px; z-index:400; width:min(380px, calc(100vw - 32px));
  height:min(560px, calc(100vh - 140px)); display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,24,36,.97), rgba(11,14,22,.98));
  border:1px solid var(--line-2); border-radius:22px; box-shadow:0 40px 90px -25px #000;
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); }
html[data-theme="light"] .aiden-panel{ background:linear-gradient(180deg, #ffffff, #f4f6fc); }
.aiden-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.aiden-hd{ display:flex; align-items:center; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line);
  background:rgba(150,170,210,.05); }
.aiden-hd .av{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--maroon-2), var(--steel)); }
.aiden-hd .av svg{ width:20px; height:20px; color:#fff; }
.aiden-hd .t{ flex:1; }
.aiden-hd .t .n{ font-family:var(--font-display); font-weight:700; font-size:.98rem; }
.aiden-hd .t .s{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-dim);
  display:flex; align-items:center; gap:6px; }
.aiden-hd .t .s .d{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); }
.aiden-min{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line); background:transparent;
  color:var(--ink-soft); cursor:pointer; transition:.2s; }
.aiden-min:hover{ color:#fff; border-color:var(--steel); }
html[data-theme="light"] .aiden-min:hover{ color:var(--ink); }
.aiden-log{ flex:1; padding:18px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.aiden-log::-webkit-scrollbar{ width:6px; } .aiden-log::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.aiden-msg{ max-width:86%; padding:11px 14px; border-radius:14px; font-size:.9rem; line-height:1.5; }
.aiden-msg.ai{ align-self:flex-start; background:rgba(150,170,210,.08); border:1px solid var(--line);
  border-bottom-left-radius:4px; }
.aiden-msg.me{ align-self:flex-end; background:linear-gradient(135deg, var(--maroon-2), var(--maroon));
  color:#fff; border-bottom-right-radius:4px; }
.aiden-msg b{ color:var(--steel-2); } .aiden-msg.me b{ color:#fff; }
html[data-theme="light"] .aiden-msg.ai b{ color:var(--maroon-2); }
.aiden-typing{ align-self:flex-start; display:flex; gap:5px; padding:12px 14px; background:rgba(150,170,210,.08);
  border:1px solid var(--line); border-radius:14px; }
.aiden-typing i{ width:7px; height:7px; border-radius:50%; background:var(--ink-dim); animation:aidenBlink 1.2s infinite; }
.aiden-typing i:nth-child(2){ animation-delay:.2s; } .aiden-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes aidenBlink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.aiden-quick{ display:flex; gap:7px; flex-wrap:wrap; padding:0 16px 10px; }
.aiden-quick button{ font-family:var(--font-mono); font-size:.7rem; padding:7px 11px; border-radius:99px;
  border:1px solid var(--line); background:rgba(150,170,210,.05); color:var(--ink-soft); cursor:pointer; transition:.2s; }
.aiden-quick button:hover{ background:rgba(88,182,255,.16); color:var(--ink); transform:translateY(-1px); }
.aiden-input{ display:flex; gap:10px; padding:13px 14px; border-top:1px solid var(--line); }
.aiden-input input{ flex:1; background:rgba(150,170,210,.06); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; color:var(--ink); font-family:var(--font-body); font-size:.9rem; }
html[data-theme="light"] .aiden-input input{ background:rgba(20,32,66,.04); }
.aiden-input input:focus{ outline:none; border-color:var(--steel); box-shadow:0 0 0 3px var(--steel-glow); }
.aiden-input button{ width:44px; height:44px; flex:none; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--maroon-2), var(--maroon)); color:#fff; display:grid; place-items:center;
  transition:transform .2s; }
.aiden-input button:hover{ transform:scale(1.08); } .aiden-input button svg{ width:18px; height:18px; }
@media(max-width:520px){ .aiden-panel{ right:12px; left:12px; width:auto; bottom:88px; } }

/* ---- CAPABILITY EXPLORER (tabs that explain a term) ---- */
.cap-explorer{ display:grid; grid-template-columns:300px 1fr; gap:22px; align-items:start; }
@media(max-width:820px){ .cap-explorer{ grid-template-columns:1fr; } }
.cap-tabs{ display:flex; flex-direction:column; gap:9px; }
@media(max-width:820px){ .cap-tabs{ flex-direction:row; flex-wrap:wrap; } }
.cap-tab{ text-align:left; font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:15px 18px; border-radius:14px; border:1px solid var(--line); background:var(--panel);
  color:var(--ink-soft); cursor:pointer; transition:.25s var(--ease); display:flex; align-items:center; gap:11px; }
.cap-tab .tnum{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dim); }
.cap-tab:hover{ border-color:var(--line-2); color:var(--ink); transform:translateX(3px); }
.cap-tab.active{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--maroon-2), var(--maroon)); box-shadow:0 14px 34px -14px var(--maroon-glow); }
.cap-tab.active .tnum{ color:rgba(255,255,255,.7); }
.cap-stage{ position:relative; min-height:230px; }
.cap-panel{ position:absolute; inset:0; padding:30px; border-radius:var(--radius-lg);
  border:1px solid var(--line); background:var(--panel); backdrop-filter:blur(16px);
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.cap-panel.active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.cap-panel .ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:rgba(181,29,53,.14); color:var(--maroon-2); border:1px solid var(--line); }
.cap-panel .ic svg{ width:24px; height:24px; }
.cap-panel h3{ font-size:1.4rem; margin-bottom:6px; }
.cap-panel .what{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel-2); margin-bottom:14px; }
.cap-panel p{ color:var(--ink-soft); }
.cap-panel .mini{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.cap-panel .mini span{ font-family:var(--font-mono); font-size:.66rem; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:99px; padding:4px 11px; }

/* ---- clickable term chips + definition ---- */
.chip[data-def]{ cursor:pointer; transition:.2s; }
.chip[data-def]:hover{ border-color:var(--steel); color:var(--ink); }
.chip.on{ background:linear-gradient(135deg, var(--maroon-2), var(--maroon)); color:#fff; border-color:transparent; }
.chip-def{ margin-top:14px; font-size:.92rem; color:var(--ink-soft); line-height:1.6; max-width:60ch;
  border-left:2px solid var(--maroon-2); padding:4px 0 4px 14px;
  opacity:0; max-height:0; overflow:hidden; transition:opacity .3s, max-height .3s; }
.chip-def.show{ opacity:1; max-height:160px; }
.chip-def b{ color:var(--ink); }

/* ---- GENERIC PROJECT POPUP ---- */
#projModal{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(5,7,12,.74); backdrop-filter:blur(10px); }
html[data-theme="light"] #projModal{ background:rgba(40,55,95,.4); }
#projModal.open{ display:flex; animation:mdlFade .3s var(--ease-out); }
.pm-card{ width:min(620px,100%); border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(22,26,40,.98), rgba(12,15,23,.99));
  border:1px solid var(--line-2); box-shadow:0 50px 120px -30px #000;
  transform:translateY(26px) scale(.95); opacity:0; animation:mdlIn .5s .05s var(--ease-out) forwards; }
html[data-theme="light"] .pm-card{ background:linear-gradient(180deg,#ffffff,#f3f6fc); }
.pm-hero{ position:relative; padding:34px; display:flex; align-items:center; gap:20px;
  background:radial-gradient(120% 120% at 85% -20%, rgba(181,29,53,.3), transparent 60%); }
.pm-mark{ width:74px; height:74px; flex:none; border-radius:18px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:#fff;
  background:linear-gradient(135deg, var(--maroon-2), var(--maroon)); box-shadow:0 14px 34px -10px var(--maroon-glow);
  animation:pmPop .55s var(--ease-out) both; }
@keyframes pmPop{ from{ transform:scale(.4) rotate(-12deg); opacity:0; } to{ transform:none; opacity:1; } }
.pm-hero .pm-kind{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel-2); }
.pm-hero h2{ font-size:clamp(1.5rem,3.4vw,2rem); margin-top:5px; }
.pm-x{ position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:11px; display:grid;
  place-items:center; background:rgba(150,170,210,.1); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; transition:.2s; }
.pm-x:hover{ color:#fff; border-color:var(--steel); box-shadow:0 0 16px var(--steel-glow); }
html[data-theme="light"] .pm-x:hover{ color:var(--ink); }
.pm-body{ padding:0 34px 32px; }
.pm-body p{ color:var(--ink-soft); }
.pm-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 24px; }
.pm-tags span{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:99px; padding:5px 12px; }
.pm-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =====================================================================
   LIGHT-MODE FIXES
   ===================================================================== */
html[data-theme="light"] #bg-canvas{ opacity:1; }                 /* particles drawn dark, keep full */
html[data-theme="light"] .stage .ring{ border-color:rgba(20,32,66,.10); }
html[data-theme="light"] .stage .ring.r2{ border-color:rgba(181,29,53,.18); }
html[data-theme="light"] .stage .ring.r3{ border-color:rgba(20,32,66,.12); }
html[data-theme="light"] .stage{ filter:drop-shadow(0 30px 60px rgba(40,55,95,.18)); }
html[data-theme="light"] .strip{ border-color:var(--line); }
html[data-theme="light"] .scrollcue span,
html[data-theme="light"] .hud{ color:var(--ink-dim); }
html[data-theme="light"] .proj .ph::after{ opacity:.4; }
html[data-theme="light"] .btn-ghost{ border-color:var(--line-2); }