/* shariquekhatri.com — Aurora Glass 2.0 + Design Uplift
   The aurora identity, engineered: real backdrop blur only on the three focal
   surfaces (nav, chat, hero photo); every repeated surface is faux-glass — a
   translucent fill + inset light + a 1px conic spectral ring — visually the
   same material, none of the GPU cost. Motion lives in the light (rotating
   rings, sweeps, spotlights); geometry never moves on hover. */

@property --angle{syntax:'<angle>';initial-value:200deg;inherits:false}

:root{
  /* base canvas + aurora (light) — near-pure white so aurora colours show through glass */
  --bg:#f3f3f9;
  --aurora-1:#7aaeff; --aurora-2:#c490ff; --aurora-3:#ff9f8a; --aurora-4:#6ee8ca;
  --aurora-op:0.72;

  /* ink */
  --ink:#191922;
  --ink-2:#43434f;
  --ink-3:#5f5f6c;
  --faint:#82828f;

  /* glass material (light = frosted white) */
  --glass:rgba(255,255,255,0.48);
  --glass-2:rgba(255,255,255,0.60);
  --glass-hi:rgba(255,255,255,0.92);
  --glass-lo:rgba(255,255,255,0.20);
  --glass-brd:rgba(255,255,255,0.78);
  --glass-brd-2:rgba(120,120,150,0.12);
  --glass-shine:rgba(255,255,255,0.65);
  --fringe-1:rgba(100,160,255,0.55);
  --fringe-2:rgba(255,130,200,0.45);
  --fringe-3:rgba(130,255,210,0.35);
  --glass-blur:26px; --glass-sat:200%;
  --glass-shadow:0 12px 36px -14px rgba(40,40,80,0.30), 0 2px 8px -4px rgba(40,40,80,0.16);
  /* chromatic aberration — subtle RGB halo at glass edges */
  --chroma-r:rgba(255,80,100,0.10);
  --chroma-b:rgba(80,130,255,0.12);

  /* faux-glass surface system (L2) */
  --srf:rgba(255,255,255,0.55);
  --srf-hi:rgba(255,255,255,0.75);
  --edge:rgba(120,120,150,0.22);
  --edge-hi:rgba(255,255,255,0.9);
  --shadow-1:0 1px 2px rgba(40,40,80,0.12);
  --shadow-2:0 12px 32px -16px rgba(40,40,80,0.35), 0 1px 2px rgba(40,40,80,0.12);
  --vignette:rgba(230,232,244,0.7);
  --dot:rgba(60,60,90,0.07);
  --grain-op:0.035;

  /* accent (coral stays "his") */
  --accent:#e8642c;
  --accent-2:#ff7d43;
  --accent-deep:#c14f1f;
  --accent-soft:rgba(232,100,44,0.12);
  --accent-glow:rgba(232,100,44,0.22);

  /* theme-dependent brand hues for stack pills */
  --brand-js:#b59a00; --brand-flask:#4b6b78; --brand-c:#5a7a9c;

  --input-border:rgba(120,120,150,0.22);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:960px;
  --nav-h:64px;
  color-scheme:light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ color-scheme:dark; }
}
:root[data-theme="dark"]{ color-scheme:dark; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#050509;
    --aurora-1:#4a5cff; --aurora-2:#9b4dff; --aurora-3:#ff5a86; --aurora-4:#18d3c8;
    --aurora-op:0.62;
    --ink:#f3f3f8; --ink-2:#c4c4d0; --ink-3:#9a9aa8; --faint:#74747f;
    --glass:rgba(255,255,255,0.06); --glass-2:rgba(255,255,255,0.10);
    --glass-hi:rgba(255,255,255,0.58); --glass-lo:rgba(255,255,255,0.03);
    --glass-brd:rgba(255,255,255,0.18); --glass-brd-2:rgba(255,255,255,0.05);
    --glass-shine:rgba(255,255,255,0.28);
    --fringe-1:rgba(130,160,255,0.45);
    --fringe-2:rgba(255,120,170,0.38);
    --fringe-3:rgba(80,255,200,0.30);
    --glass-blur:28px; --glass-sat:180%;
    --glass-shadow:0 18px 48px -14px rgba(0,0,0,0.75), 0 2px 10px -4px rgba(0,0,0,0.55);
    --chroma-r:rgba(255,60,80,0.14);
    --chroma-b:rgba(60,120,255,0.16);
    --srf:rgba(255,255,255,0.05);
    --srf-hi:rgba(255,255,255,0.09);
    --edge:rgba(255,255,255,0.14);
    --edge-hi:rgba(255,255,255,0.10);
    --shadow-1:0 1px 2px rgba(0,0,0,0.4);
    --shadow-2:0 12px 32px -16px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
    --vignette:rgba(4,4,10,0.85);
    --dot:rgba(255,255,255,0.05);
    --grain-op:0.05;
    --accent:#ff7d43; --accent-2:#ff9666; --accent-deep:#ff9666; --accent-soft:rgba(255,125,67,0.16);
    --accent-glow:rgba(255,125,67,0.28);
    --brand-js:#F7DF1E; --brand-flask:#9bbcc9; --brand-c:#A8B9CC;
    --input-border:rgba(255,255,255,0.14);
  }
  :root:not([data-theme="light"]) .ic-moon{display:none}
  :root:not([data-theme="light"]) .ic-sun{display:inline}
}
:root[data-theme="dark"]{
  --bg:#050509;
  --aurora-1:#4a5cff; --aurora-2:#9b4dff; --aurora-3:#ff5a86; --aurora-4:#18d3c8;
  --aurora-op:0.62;
  --ink:#f3f3f8; --ink-2:#c4c4d0; --ink-3:#9a9aa8; --faint:#74747f;
  --glass:rgba(255,255,255,0.06); --glass-2:rgba(255,255,255,0.10);
  --glass-hi:rgba(255,255,255,0.58); --glass-lo:rgba(255,255,255,0.03);
  --glass-brd:rgba(255,255,255,0.18); --glass-brd-2:rgba(255,255,255,0.05);
  --glass-shine:rgba(255,255,255,0.28);
  --fringe-1:rgba(130,160,255,0.45);
  --fringe-2:rgba(255,120,170,0.38);
  --fringe-3:rgba(80,255,200,0.30);
  --glass-blur:28px; --glass-sat:180%;
  --glass-shadow:0 18px 48px -14px rgba(0,0,0,0.75), 0 2px 10px -4px rgba(0,0,0,0.55);
  --chroma-r:rgba(255,60,80,0.14);
  --chroma-b:rgba(60,120,255,0.16);
  --srf:rgba(255,255,255,0.05);
  --srf-hi:rgba(255,255,255,0.09);
  --edge:rgba(255,255,255,0.14);
  --edge-hi:rgba(255,255,255,0.10);
  --shadow-1:0 1px 2px rgba(0,0,0,0.4);
  --shadow-2:0 12px 32px -16px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --vignette:rgba(4,4,10,0.85);
  --dot:rgba(255,255,255,0.05);
  --grain-op:0.05;
  --accent:#ff7d43; --accent-2:#ff9666; --accent-deep:#ff9666; --accent-soft:rgba(255,125,67,0.16);
  --accent-glow:rgba(255,125,67,0.28);
  --brand-js:#F7DF1E; --brand-flask:#9bbcc9; --brand-c:#A8B9CC;
  --input-border:rgba(255,255,255,0.14);
  color-scheme:dark;
}
:root[data-theme="dark"] .ic-moon{display:none}
:root[data-theme="dark"] .ic-sun{display:inline}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;interpolate-size:allow-keywords}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent-soft);color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;z-index:100}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible,.pill:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:10px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1}

/* ============ AURORA BACKDROP ============
   Blobs are large, slow, and saturated so the glass surfaces have
   rich colour gradients to "refract" — the more vivid the background,
   the more the liquid glass displacement is visible.                    */
.aurora{position:fixed;inset:-20vmax;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.aurora b{
  position:absolute;display:block;border-radius:50%;
  opacity:var(--aurora-op);
  will-change:transform;
  mix-blend-mode:normal;
}
/* blob 1 — blue, top-left */
.aurora b:nth-child(1){width:82vmax;height:82vmax;left:-18vmax;top:-14vmax;
  background:radial-gradient(circle at 42% 42%,var(--aurora-1) 0%,color-mix(in srgb,var(--aurora-1) 60%,transparent) 28%,transparent 62%);
  animation:drift1 44s ease-in-out infinite}
/* blob 2 — purple, top-right */
.aurora b:nth-child(2){width:72vmax;height:72vmax;right:-14vmax;top:-4vmax;
  background:radial-gradient(circle at 55% 45%,var(--aurora-2) 0%,color-mix(in srgb,var(--aurora-2) 60%,transparent) 28%,transparent 62%);
  animation:drift2 52s ease-in-out infinite}
/* blob 3 — coral, bottom-left */
.aurora b:nth-child(3){width:78vmax;height:78vmax;left:4vmax;bottom:-20vmax;
  background:radial-gradient(circle at 48% 52%,var(--aurora-3) 0%,color-mix(in srgb,var(--aurora-3) 60%,transparent) 28%,transparent 62%);
  animation:drift3 48s ease-in-out infinite}
/* blob 4 — teal, bottom-right */
.aurora b:nth-child(4){width:64vmax;height:64vmax;right:0vmax;bottom:-10vmax;
  background:radial-gradient(circle at 50% 50%,var(--aurora-4) 0%,color-mix(in srgb,var(--aurora-4) 60%,transparent) 28%,transparent 62%);
  animation:drift4 58s ease-in-out infinite}
/* cursor-following glow */
.aurora i{
  position:fixed;left:0;top:0;width:48vmax;height:48vmax;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--aurora-2) 0%,color-mix(in srgb,var(--aurora-2) 45%,transparent) 34%,transparent 66%);
  opacity:calc(var(--aurora-op) * 0.50);
  transform:translate3d(50vw,40vh,0) translate(-50%,-50%);
  will-change:transform;
  transition:transform .08s linear;
}
@media (hover:none){ .aurora i{display:none} }
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(12vmax,8vmax) scale(1.12)}66%{transform:translate(4vmax,14vmax) scale(1.06)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-10vmax,10vmax) scale(1.08)}66%{transform:translate(-16vmax,4vmax) scale(1.14)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(8vmax,-10vmax) scale(1.10)}66%{transform:translate(16vmax,-4vmax) scale(1.06)}}
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-8vmax,-8vmax) scale(1.08)}66%{transform:translate(-4vmax,-14vmax) scale(1.12)}}

body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 0%,transparent 55%,var(--vignette) 100%),
    radial-gradient(var(--dot) 1px,transparent 1.5px) 0 0/28px 28px;
}
.aurora::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ GLASS MATERIAL — Stable Aurora Glass ============
   Three-layer system:
   1. backdrop-filter (blur + saturate) on the element itself
   2. ::before  — crisp chromatic border fringe
   3. ::after   — soft cursor-following specular highlight
      No displacement filters: glass geometry stays stable on hover/focus. */
.glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.06);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.06);
  border:1px solid var(--glass-brd);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    inset 0 12px 32px -22px var(--glass-hi),
    /* chromatic aberration halos at glass edges */
    0 0 0 1.5px var(--chroma-b),
    inset 0 0 0 1.5px var(--chroma-r);
  border-radius:22px;
  isolation:isolate;
}

/* chromatic fringe border — stable gradient ring with no geometric distortion */
.glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  padding:1.5px;
  background:linear-gradient(138deg,
    var(--glass-hi)   0%,
    var(--fringe-1)   14%,
    var(--fringe-3)   30%,
    transparent       45%,
    transparent       55%,
    var(--fringe-2)   80%,
    var(--glass-brd-2) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.88;
}

/* soft specular highlight — follows the pointer without distorting the surface */
.glass::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  /* two radial spots: cursor-tracking bright caustic + static tint from opposite corner */
  background:
    radial-gradient(160px circle at var(--mx,30%) var(--my,18%),
      var(--glass-shine) 0%, transparent 62%),
    radial-gradient(420px circle at var(--mx,30%) var(--my,18%),
      color-mix(in srgb,var(--glass-shine) 40%,transparent) 0%, transparent 68%),
    radial-gradient(220px circle at 80% 85%,
      color-mix(in srgb,var(--fringe-1) 28%,transparent) 0%, transparent 60%);
  /* always visible at base opacity; cursor movement only changes light position */
  opacity:max(0.20, var(--shine,0));
  transition:opacity .4s ease;
}
.glass>*{position:relative;z-index:1}

/* ============ FAUX-GLASS ============ */
.fx{
  position:relative;border-radius:22px;
  background:linear-gradient(180deg,var(--srf-hi),transparent 40%),var(--srf);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-2);
}
.fx::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--angle),
    var(--fringe-1),var(--edge),var(--fringe-2),var(--edge),var(--fringe-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:filter .3s cubic-bezier(.22,.61,.36,1),opacity .35s;
}
.fx>*{position:relative;z-index:1}
@keyframes spin{to{--angle:560deg}}

/* shine sweep */
.sweep{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 40%,var(--glass-shine) 50%,transparent 60%);
  transform:translateX(-120%)}
.card:hover .sweep,.btn.primary:hover .sweep{animation:sweep .9s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes sweep{to{transform:translateX(120%)}}

/* ============ NAV ============ */
nav.top{
  position:sticky;top:14px;z-index:50;
  max-width:calc(var(--maxw) - 8px);margin:14px auto 0;padding:11px 12px 11px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:14.5px;border-radius:999px;
}
nav.top .nm{font-weight:600;letter-spacing:-0.01em}
nav.top .lks{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
nav.top .lks a{color:var(--ink-2);transition:color .15s}
nav.top .lks a:hover{color:var(--accent-deep)}
.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;cursor:pointer;color:var(--ink-2);
  background:var(--glass-2);border:1px solid var(--glass-brd);
  transition:color .15s,transform .2s;
}
.theme-btn:hover{color:var(--accent-deep);transform:scale(1.08)}
.theme-btn svg{width:16px;height:16px;display:block}
.ic-sun{display:none}
@media(max-width:600px){
  nav.top{top:10px;margin-top:10px;padding:10px 12px 10px 18px}
  nav.top .lks a{display:none}
}

/* ============ SECTION HEADINGS ============ */
.kick{font-size:12.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.section-label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent-deep);margin:0 0 18px;
}
.section-label::before{
  content:"";display:block;width:24px;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
h2.sec{
  font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-0.03em;
  margin:0 0 0;line-height:1.08;color:var(--ink);
}
.sec-sub{color:var(--ink-3);font-size:15px;margin:10px 0 0;max-width:52ch;line-height:1.5}
.section{margin-top:112px;scroll-margin-top:92px}
@media(max-width:680px){ .section{margin-top:80px} }

/* ============ HERO ============ */
.hero{margin-top:56px;display:grid;grid-template-columns:1.3fr 0.7fr;gap:52px;align-items:start}
@media(max-width:820px){ .hero{grid-template-columns:1fr;gap:40px} }

h1{
  font-size:clamp(40px,5.8vw,66px);line-height:1.06;font-weight:800;
  letter-spacing:-0.035em;margin:16px 0 0;max-width:18ch;
}
h1 .a{
  background:linear-gradient(120deg,var(--accent),var(--accent-2),var(--accent));
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hue 8s ease-in-out infinite alternate;
}
@keyframes hue{to{background-position:100% 0}}

.lede{font-size:18px;color:var(--ink-2);max-width:50ch;margin:20px 0 0;line-height:1.65}
.lede b{color:var(--ink);font-weight:600}
.cta{margin:28px 0 0;display:flex;gap:8px;flex-wrap:nowrap;font-size:14px}
.meta{margin:22px 0 0;font-size:13.5px;color:var(--ink-3)}
.meta b{color:var(--ink-2);font-weight:600}

/* status pill */
.status{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);
  background:var(--srf);border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-1);
}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.status .dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--accent);animation:t-pulse 2.4s ease-out infinite}

/* hero stat chips */
.hero-stats{margin:28px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.hstat{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:14px;
  background:var(--srf);border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-1);
}
.hstat-val{font-size:17px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.hstat-lbl{font-size:11.5px;color:var(--ink-3);font-weight:500;line-height:1.2}

/* glass buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 20px;border-radius:999px;font-weight:600;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--ink);
  white-space:nowrap;flex:0 0 auto;
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi);
  transform:translate(var(--magx,0px),calc(var(--magy,0px) + var(--lift,0px))) scale(var(--pscale,1));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s;
  position:relative;overflow:hidden;
}
.btn:hover{--lift:-2px;--pscale:1.02}
.btn:active{--pscale:.96;transition-duration:.1s,.2s,.2s}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
.btn.primary{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 28px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:hover{box-shadow:0 10px 34px -6px var(--accent),inset 0 1px 0 rgba(255,255,255,.4)}
.btn svg{width:15px;height:15px}
.btn.icon-only{width:46px;height:46px;padding:0;justify-content:center;border-radius:50%}

/* Keep the complete action set on one line in the narrower desktop hero column. */
@media(min-width:821px) and (max-width:1100px){
  .cta{gap:6px}
  .cta .btn{padding:11px 13px;gap:6px;font-size:12.5px}
  .cta .btn svg{width:14px;height:14px}
  .cta .btn.icon-only{width:42px;height:42px;padding:0}
}

/* Keep the mobile action row comfortably tappable without letting it wrap. */
@media(max-width:600px){
  .cta{gap:clamp(3px,1.25vw,5px);width:100%}
  .cta .btn{
    min-height:42px;padding:0 clamp(8px,2.9vw,11px);gap:clamp(4px,1.5vw,6px);
    font-size:clamp(11.5px,3.4vw,13px);letter-spacing:-.01em
  }
  .cta .btn svg{width:16px;height:16px}
  .cta .btn.icon-only{width:42px;height:42px;min-height:42px;padding:0}
}

/* ============ PHOTO ============ */
.photo-wrap{
  position:relative;justify-self:end;width:100%;max-width:300px;
}

/* Mobile: photo floats to the top of the hero, centered like a profile card */
@media(max-width:820px){
  .hero{ gap:28px }
  .photo-wrap{
    order:-1;                    /* lifts photo above the headline */
    justify-self:center;
    max-width:200px;
    width:200px;
  }
  /* hide caption on mobile — redundant at small size */
  .photo figcaption{ display:none }
}
.photo-orbit-svg{
  position:absolute;inset:-22px;width:calc(100% + 44px);height:calc(100% + 44px);
  pointer-events:none;z-index:2;overflow:visible;
}
.orbit-ring{
  fill:none;stroke:var(--accent);stroke-width:1.5;
  stroke-dasharray:6 14;opacity:0.45;
  transform-origin:50% 50%;
  animation:orbit-spin 22s linear infinite;
}
.orbit-dot{
  fill:var(--accent);
  filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 10px var(--accent));
  animation:orbit-spin 22s linear infinite;
  transform-origin:50% 50%;
}
.orbit-dot-rev{
  fill:color-mix(in srgb,var(--accent-2) 70%,transparent);
  filter:drop-shadow(0 0 4px var(--accent-2));
  animation:orbit-spin-rev 34s linear infinite;
  transform-origin:50% 50%;
}
@keyframes orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbit-spin-rev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* inner orbit ring (counter-rotate, thinner) */
.orbit-ring-inner{
  fill:none;stroke:var(--fringe-1);stroke-width:1;
  stroke-dasharray:3 22;opacity:0.5;
  transform-origin:50% 50%;
  animation:orbit-spin-rev 34s linear infinite;
}

.photo{
  border-radius:24px;overflow:hidden;width:100%;margin:0;padding:6px;
}
.photo img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:18px;
}
.photo-fallback{
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  border-radius:18px;background:var(--glass-2);color:var(--faint);
  font-size:60px;font-weight:800;letter-spacing:-0.03em;
}
.photo figcaption{
  padding:10px 8px 4px;font-size:12.5px;color:var(--ink-3);text-align:center;
}
/* rotating conic ring on the outer glass card */
.photo::before{
  background:conic-gradient(from var(--angle),
    var(--fringe-1),var(--glass-brd),var(--fringe-2),var(--glass-brd),var(--fringe-1));
  animation:spin 24s linear infinite;
}

/* ============ FEATURED CARDS ============ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
@media(max-width:800px){ .grid2{grid-template-columns:1fr} }

.card{
  padding:28px 28px 26px;display:flex;flex-direction:column;gap:8px;
  overflow:hidden;position:relative;
}
/* large faded card number */
.card[data-n]::after{
  content:attr(data-n);
  position:absolute;bottom:-12px;right:16px;
  font-size:88px;font-weight:900;letter-spacing:-0.04em;
  color:var(--ink);opacity:0.04;
  pointer-events:none;z-index:0;line-height:1;
  transition:opacity .35s;
}
.card:hover[data-n]::after{opacity:0.065}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.award-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:#fff;white-space:nowrap;flex-shrink:0;
  box-shadow:0 4px 12px -4px var(--accent);
}
.award-chip svg{width:10px;height:10px}
.card .k{font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.card h3{font-size:24px;margin:0;font-weight:800;letter-spacing:-0.025em}
.card h3 a{transition:color .25s}
.card h3 a:hover{color:var(--accent-deep)}
.card .stack{display:flex;flex-wrap:wrap;gap:.45rem .4rem;margin-top:4px}
.card .lk{
  margin-top:auto;padding-top:16px;
  display:flex;gap:8px;font-size:13.5px;font-weight:600;flex-wrap:wrap;
}
.card .lk a{
  display:inline-flex;align-items:center;gap:5px;padding:8px 16px;
  border-radius:999px;transition:background .25s,color .25s,border-color .25s,filter .25s,box-shadow .25s;
}
.card .lk-demo{
  color:#fff;
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 16px -6px var(--accent),inset 0 1px 0 rgba(255,255,255,.3);
}
.card .lk-demo:hover{filter:saturate(1.15) brightness(1.06);box-shadow:0 6px 22px -4px var(--accent)}
.card .lk-src{color:var(--ink-2);border:1px solid var(--edge);background:var(--srf)}
.card .lk-src:hover{color:var(--accent-deep);border-color:var(--accent)}

/* card ring ignition on hover */
.card:hover::before,.card:focus-within::before{
  background:conic-gradient(from var(--angle),
    var(--accent),var(--aurora-2),var(--aurora-4),var(--aurora-1),var(--accent));
  padding:1.5px;animation:spin 4s linear infinite;
}
/* coral halo under the card */
.card::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:conic-gradient(from var(--angle),var(--accent),transparent 30% 70%,var(--accent));
  filter:blur(18px);opacity:0;transition:opacity .35s ease;
}
/* override the number after — the ::after pseudo is reused for halo on non-[data-n] cards */
/* for cards with data-n, halo uses the card's border glow instead */
.card[data-n]::after{transition:opacity .35s}
.card[data-n]:hover::after{opacity:0.065} /* number takes priority; halo is weaker */

/* ============ CASE ROWS ============ */
.cases{margin-top:20px;display:grid;gap:12px}
.case{
  --mx:50%;--my:50%;border-radius:18px;padding:20px 24px;
  display:grid;grid-template-columns:minmax(190px,.32fr) 1fr auto;
  gap:10px 20px;align-items:center;
}
@media(max-width:760px){ .case{grid-template-columns:1fr} .case .lk{justify-self:start} }
.case-id{min-width:0}
.case h3{font-size:17px;font-weight:700;margin:0;letter-spacing:-0.01em}
.case .k{display:block;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:3px}
.case .stack{display:flex;flex-wrap:wrap;gap:.35rem}
.case .lk{font-size:13.5px;font-weight:600;white-space:nowrap;display:flex;gap:8px;align-items:center}
.case .lk a{
  color:var(--accent-deep);padding:5px 12px;border-radius:999px;
  border:1px solid var(--accent-soft);transition:background .2s,border-color .2s;
}
.case .lk a:hover{background:var(--accent-soft);border-color:var(--accent)}

/* pointer-tracked border + body spotlight */
.case:hover::before{
  background:radial-gradient(220px circle at var(--mx) var(--my),var(--accent-2),var(--fringe-1) 45%,transparent 70%);
}
.case:hover{
  background:
    radial-gradient(320px circle at var(--mx) var(--my),var(--accent-soft),transparent 65%),
    linear-gradient(180deg,var(--srf-hi),transparent 40%),var(--srf);
}

/* ============ STACK PILLS ============ */
.pill{
  --brand:var(--accent);
  display:inline-flex;align-items:center;gap:.45em;
  padding:.4em .75em .4em .55em;border-radius:999px;
  font:600 12px/1 var(--sans);letter-spacing:.02em;
  color:var(--ink-2);cursor:default;
  background:color-mix(in srgb,var(--ink) 5%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  transition:color .18s,border-color .18s,background .18s,box-shadow .25s;
}
.pill svg{width:14px;height:14px;flex:none;transition:color .18s}
.pill:hover,.card:hover .pill,.case:hover .pill{
  color:var(--ink);
  border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  background:color-mix(in srgb,var(--brand) 10%,transparent);
  transition-delay:calc(var(--i,0)*40ms);
}
.pill:hover svg,.card:hover .pill svg,.case:hover .pill svg{
  color:var(--brand);transition-delay:calc(var(--i,0)*40ms);
}
.pill[data-b=python]{--brand:#3776AB}   .pill[data-b=flask]{--brand:var(--brand-flask)}
.pill[data-b=electron]{--brand:#47848F} .pill[data-b=swift]{--brand:#F05138}
.pill[data-b=ts]{--brand:#3178C6}       .pill[data-b=pg]{--brand:#4169E1}
.pill[data-b=fastapi]{--brand:#009688}  .pill[data-b=html]{--brand:#E34F26}
.pill[data-b=css]{--brand:#663399}      .pill[data-b=js]{--brand:var(--brand-js)}
.pill[data-b=c]{--brand:var(--brand-c)}
.pill[data-b=next],.pill[data-b=ollama]{--brand:var(--ink)}

/* ============ ASK / Q-A GLASS PANEL ============
   Uses the real glass material (backdrop-filter) so it sits on the aurora
   the same way the nav does. Focus cools to violet; coral stays the action. */

.qa-glass{
  border-radius:26px;
  padding:0;
  /* inherit .glass shadow + blur */
}

/* breathing aurora ring — same rhythm as the old chat card */
.qa-glass::before{
  padding:1.5px;
  background:conic-gradient(from var(--angle),
    var(--aurora-1),var(--aurora-2),var(--aurora-3),var(--aurora-4),var(--aurora-1));
  opacity:.45;animation:spin 12s linear infinite;
  transition:opacity .4s,animation-duration .4s;
}
.qa-glass:focus-within::before{
  opacity:.68;animation-duration:8s;
  background:conic-gradient(from var(--angle),
    var(--aurora-1),var(--aurora-2),var(--aurora-4),var(--aurora-3),var(--aurora-1));
}
.qa-glass:focus-within{
  box-shadow:var(--glass-shadow),0 0 48px -20px color-mix(in srgb,var(--aurora-2) 55%,transparent);
}

/* ---- input row ---- */
.qa-form{
  display:flex;align-items:center;gap:12px;
  margin:14px 14px 10px;padding:13px 14px 13px 20px;
  border:1px solid var(--edge);border-radius:20px;
  background:color-mix(in srgb,var(--glass-2) 58%,transparent);
  box-shadow:inset 0 1px 0 var(--edge-hi);
  transition:border-color .25s,background .25s,box-shadow .25s;
}
.qa-form:focus-within{
  border-color:color-mix(in srgb,var(--aurora-2) 38%,var(--edge));
  background:color-mix(in srgb,var(--glass-2) 72%,transparent);
  box-shadow:0 14px 34px -27px var(--aurora-2),inset 0 1px 0 var(--edge-hi);
}
.qa-input{
  flex:1;min-width:0;background:none;border:0;outline:0;
  width:100%;font:600 18px/1.2 var(--sans);letter-spacing:-0.01em;
  color:var(--ink);caret-color:var(--aurora-2);
}
.qa-input:focus-visible{outline:none;border-radius:0}
.qa-input::placeholder{
  color:var(--ink-3);font-weight:400;transition:color .2s;
}
.qa-input:focus::placeholder{color:var(--faint)}
.qa-send{
  width:46px;height:46px;flex:none;border-radius:14px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 4px 18px -6px var(--accent);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s;
}
.qa-send:not(:disabled):hover{transform:scale(1.08);box-shadow:0 6px 22px -4px var(--accent);filter:saturate(1.1)}
.qa-send:disabled{opacity:.42;cursor:default;filter:saturate(.55);box-shadow:none}
.qa-send svg{width:18px;height:18px;display:block}
.qa-busy{opacity:.65;cursor:default}
.qa-spin{animation:qa-rotate .8s linear infinite}
@keyframes qa-rotate{to{transform:rotate(360deg)}}

/* ---- conversation starters ---- */
.qa-suggestions{padding:0 20px 16px;display:flex;align-items:center;gap:10px}
.qa-suggestions-label{font-size:11.5px;color:var(--faint);white-space:nowrap}
.qa-prompts{display:flex;gap:7px;min-width:0;flex-wrap:wrap}
.qa-suggestion{
  appearance:none;border:1px solid var(--edge);border-radius:999px;
  padding:7px 11px;background:var(--srf);color:var(--ink-2);
  font:600 11.5px/1.2 var(--sans);cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 var(--edge-hi);
  transition:color .2s,border-color .2s,background .2s,transform .2s;
}
.qa-suggestion:hover{
  color:var(--ink);border-color:color-mix(in srgb,var(--aurora-2) 38%,var(--edge));
  background:color-mix(in srgb,var(--srf-hi) 78%,var(--aurora-2));transform:translateY(-1px);
}
.qa-suggestion:focus-visible{
  outline:2px solid color-mix(in srgb,var(--aurora-2) 72%,transparent);outline-offset:2px;
}
.qa-suggestion:disabled{opacity:.5;cursor:default;transform:none}

/* ---- divider ---- */
.qa-rule{
  height:1px;margin:0 32px;
  background:linear-gradient(90deg,transparent,var(--edge) 20%,var(--edge) 80%,transparent);
}

/* ---- answer area ---- */
.qa-answer{
  padding:20px 32px 24px;
}
.qa-answer-thinking{opacity:.65}

.qa-q{
  display:block;
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;
  color:var(--accent-deep);margin-bottom:12px;
}

/* animated dots while thinking */
.qa-dots{display:inline-flex;gap:5px;align-items:center;height:20px}
.qa-dots span{
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4;
  animation:qa-dot 1.2s ease-in-out infinite;
}
.qa-dots span:nth-child(2){animation-delay:.2s}
.qa-dots span:nth-child(3){animation-delay:.4s}
@keyframes qa-dot{0%,80%,100%{opacity:.4;transform:scale(1)}40%{opacity:1;transform:scale(1.3)}}

.qa-body{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.qa-body p{margin:0 0 8px}
.qa-body p:last-child{margin-bottom:0}
.qa-body ul{margin:4px 0 10px;padding-left:20px}
.qa-body li{margin:3px 0}
.qa-body strong{color:var(--ink);font-weight:700}

@media(max-width:600px){
  .qa-form{margin:10px 10px 8px;padding:11px 10px 11px 14px;gap:8px;border-radius:17px}
  .qa-input{font-size:14px}
  .qa-send{width:42px;height:42px;border-radius:13px}
  .qa-suggestions{padding:0 14px 13px;display:block}
  .qa-suggestions-label{display:block;margin-bottom:7px;font-size:10.5px}
  .qa-prompts{flex-wrap:nowrap;overflow-x:auto;padding:1px 1px 3px;scrollbar-width:none}
  .qa-prompts::-webkit-scrollbar{display:none}
  .qa-suggestion{font-size:11px;padding:7px 10px}
}

/* ============ EXPERIENCE TIMELINE ============ */
.timeline{
  position:relative;
  padding-left:2.5rem;
  margin-top:36px;
}
/* the glowing comet trail */
.timeline::before{
  content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--accent) 10%,
    var(--accent) 88%,
    transparent 100%);
  opacity:.5;
}
.timeline::after{
  content:"";position:absolute;left:7px;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg,
    transparent 0%,
    var(--accent) 10%,
    var(--accent) 88%,
    transparent 100%);
  filter:blur(7px);opacity:.18;
}

/* each entry is now a floating card */
.t-entry{
  position:relative;margin-bottom:14px;
}
.t-entry:last-child{margin-bottom:0}

/* timeline node — glowing bead */
.t-entry::before{
  content:"";
  position:absolute;
  left:calc(-2.5rem + 4px);
  top:1.15rem;
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 20%,var(--accent) 55%,transparent 80%),var(--srf);
  border:1.5px solid var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow),0 0 14px -2px var(--accent);
  z-index:2;
}
/* pulse ring on current role */
.t-entry.is-current::after{
  content:"";
  position:absolute;left:calc(-2.5rem + 1px);top:calc(1.15rem - 3px);
  width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--accent);
  animation:t-pulse 2.4s ease-out infinite;
  z-index:1;
}
@keyframes t-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2);opacity:0}}

.t-card{
  border-radius:18px;padding:18px 22px 16px;
  position:relative;overflow:hidden;
}
/* current role gets accent left border */
.t-entry.is-current .t-card{
  border-left:2.5px solid var(--accent) !important;
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-2),
             inset 3px 0 12px -8px var(--accent-soft) !important;
}
.t-entry.is-current .t-card::before{
  background:conic-gradient(from var(--angle),
    var(--accent),var(--aurora-2),var(--aurora-4),var(--aurora-1),var(--accent));
  animation:spin 8s linear infinite;
}

.t-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-role{color:var(--ink);font-weight:700;font-size:16px;margin:0;letter-spacing:-.01em;flex:1;min-width:0}
.t-co{color:var(--accent);font-weight:700}
.t-date{font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap;
  padding:4px 10px;border-radius:999px;background:var(--srf-hi);border:1px solid var(--edge);flex:none}
.t-where{color:var(--ink-3);font-size:13.5px;margin:.3rem 0 0}
.t-chip{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:.55rem;padding:.32rem .9rem;border-radius:999px;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  font-size:12px;font-weight:600;color:var(--accent-deep);
}
.t-chip::before{content:"↑";font-size:10px;opacity:0.7}
@media(max-width:640px){
  .timeline{padding-left:2rem}
  .t-entry::before{left:calc(-2rem + 4px)}
  .t-entry.is-current::after{left:calc(-2rem + 1px)}
}

/* ============ ARCHIVE ACCORDION ============ */
.others{margin-top:24px;border-radius:20px}
.others summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:12px;padding:18px 24px;
  font-size:15px;font-weight:700;color:var(--ink);border-radius:inherit;
  letter-spacing:-0.01em;
}
.others summary::-webkit-details-marker{display:none}
.others summary:hover{color:var(--accent-deep)}
.others-label{flex:1}
.others-count{
  font-size:11.5px;font-weight:800;color:var(--accent-deep);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius:999px;padding:4px 10px;
}
.others .chev{
  width:16px;height:16px;color:var(--ink-3);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.others[open] .chev{transform:rotate(180deg)}

.others::details-content{
  height:0;overflow:clip;
  transition:height .4s cubic-bezier(.22,.61,.36,1),content-visibility .4s allow-discrete;
}
.others[open]::details-content{height:auto}

.others-body{padding:4px 12px 14px;display:grid;gap:3px}
.arc{
  display:grid;grid-template-columns:.32fr .62fr .06fr;gap:16px;align-items:baseline;
  padding:11px 14px;border-radius:12px;transition:background .2s;
}
a.arc:hover{background:var(--srf)}
.arc .nm{font-size:14px;font-weight:700;color:var(--ink)}
.arc .ds{color:var(--ink-3);font-size:13.5px;line-height:1.4}
.arc .go{color:var(--faint);text-align:right;font-size:15px}
a.arc:hover .go,a.arc:hover .nm{color:var(--accent-deep)}
@media(max-width:640px){ .arc{grid-template-columns:1fr auto} .arc .ds{grid-column:1/-1} }

/* ============ SCROLL REVEAL ============ */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;translate:0 18px;
    transition:opacity .65s cubic-bezier(.2,.7,.2,1),translate .65s cubic-bezier(.2,.7,.2,1);
    transition-delay:calc(var(--i,0)*80ms);
  }
  .rv.in{opacity:1;translate:0 0}
}

/* ============ FOOTER ============ */
footer.foot{
  margin-top:120px;
  border-top:1px solid var(--edge);
  padding-top:40px;
}
.foot-top{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.foot-links{display:flex;gap:52px;flex-wrap:wrap}
.foot .col{font-size:13.5px;color:var(--ink-3);display:flex;flex-direction:column;gap:6px}
.foot .col .lbl2{
  font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:4px;
}
.foot .col a{color:var(--ink-3);transition:color .15s}
.foot .col a:hover{color:var(--accent-deep)}
.foot .who{max-width:32ch}
.foot .who .nm{font-weight:800;color:var(--ink);font-size:15px}
.foot .who p{margin:8px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.foot-line{
  max-width:var(--maxw);margin:0 auto;padding:28px 28px 44px;
  font-size:12px;color:var(--faint);
  border-top:1px solid var(--edge);margin-top:32px;
}
@media(max-width:600px){
  .foot-links{gap:28px}
  .foot-top{flex-direction:column}
}

/* ============ MOBILE ============ */
@media(max-width:600px){
  :root{--glass-blur:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .aurora i{display:none}
  .glass::after{display:none}
  .card::after,.sweep{display:none}
}