/* Design system: Minimalism & Swiss Style · IBM Plex (Financial Trust pairing) · emerald accent */
:root{
  color-scheme:light;
  --bg:#FAFAF7;
  --surface:#FFFFFF;
  --surface-2:#F2F4F1;
  --fg:#0F1B24;
  --fg-muted:#4F5E67;
  --border:#E1E5E0;
  --border-strong:#C9D0CB;
  --accent:#0E7C66;
  --accent-strong:#0A5C4C;
  --accent-soft:rgba(14,124,102,.14);
  --on-accent:#FFFFFF;
  --inverse-bg:#0F1B24;
  --inverse-fg:#F5F7F4;
  --inverse-muted:#B8C4C0;
  --inverse-accent:#7FD6C2;
  --inverse-border:rgba(245,247,244,.18);
  --shadow:0 1px 2px rgba(15,27,36,.06),0 12px 32px -18px rgba(15,27,36,.28);

  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-sm:4px;--radius:8px;--radius-lg:14px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:160ms;--dur:220ms;--dur-slow:420ms;
  --maxw:1120px;
  --topbar-h:52px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1318;
    --surface:#111C23;
    --surface-2:#15222A;
    --fg:#E6EDEA;
    --fg-muted:#9EAFB6;
    --border:#22323B;
    --border-strong:#31454F;
    --accent:#3CC3A3;
    --accent-strong:#74D9C0;
    --accent-soft:rgba(60,195,163,.18);
    --on-accent:#06231D;
    --inverse-bg:#13232B;
    --inverse-fg:#E6EDEA;
    --inverse-muted:#A9BAB6;
    --inverse-accent:#7FD6C2;
    --inverse-border:rgba(230,237,234,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 36px -18px rgba(0,0,0,.7);
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + var(--space-4));-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--accent-strong);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
::selection{background:var(--accent-soft)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(var(--space-4),4vw,var(--space-6))}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);
  min-height:var(--topbar-h);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--fg-muted);text-transform:uppercase;
}
.topbar strong{color:var(--fg);font-weight:600}
.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0);
}

h2.sec-title{
  font-weight:700;
  font-size:clamp(1.6rem,3.6vw,2.25rem);
  letter-spacing:-0.022em;line-height:1.15;
  margin-bottom:var(--space-7);max-width:24em;
  text-wrap:balance;
}

/* ---------- hero ---------- */
.hero{padding:clamp(var(--space-7),9vw,var(--space-9)) 0 clamp(var(--space-7),7vw,var(--space-8))}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center}
@media(min-width:820px){.hero-grid{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--space-8)}}
.hero h1{
  font-weight:700;
  font-size:clamp(2.35rem,6vw,4rem);
  letter-spacing:-0.035em;line-height:1.05;
  margin-bottom:var(--space-5);
  text-wrap:balance;
}
.hero .role{
  font-family:var(--font-mono);font-size:13.5px;letter-spacing:.06em;line-height:1.5;
  color:var(--accent-strong);font-weight:600;text-transform:uppercase;
  margin-bottom:var(--space-5);
  padding-left:var(--space-3);border-left:3px solid var(--accent);
}
.hero .pitch{font-size:clamp(1.05rem,1.6vw,1.16rem);line-height:1.65;max-width:36em;margin-bottom:var(--space-4)}
.hero .pitch strong{color:var(--accent-strong);font-weight:600}
.hero .open-to{font-size:.94rem;color:var(--fg-muted);margin-bottom:var(--space-6);max-width:36em}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:48px;padding:0 var(--space-5);
  font-family:var(--font-sans);font-weight:600;font-size:.97rem;line-height:1.2;
  border-radius:var(--radius);text-decoration:none;cursor:pointer;
  border:1.5px solid var(--fg);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--surface)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 0 var(--accent);text-decoration:none}
.btn:active{transform:translateY(0);box-shadow:0 1px 0 0 var(--accent);transition-duration:var(--dur-fast)}
/* Hero contact row: all three buttons stay on one line at every width (scoped; contact section unaffected) */
.hero .hero-copy{min-width:0}
.hero .btn-row{flex-wrap:nowrap;gap:var(--space-2)}
.hero .btn-row .btn{white-space:nowrap;flex:0 1 auto;min-width:0;padding:0 var(--space-4)}
@media (max-width:1099px){
  .hero .btn-row{gap:6px}
  .hero .btn-row .btn{font-size:.82rem;padding:0 6px;gap:4px}
}
@media (max-width:480px){
  .hero .hero-copy{padding:16px}
  .hero .btn-row{gap:5px}
  .hero .btn-row .btn{font-size:.78rem;padding:0 5px;gap:4px}
  .hero .btn-row .btn svg{width:16px;height:16px}
}

.portrait{position:relative;justify-self:center;width:min(340px,82vw)}
.portrait::before{
  content:"";position:absolute;inset:var(--space-4) calc(var(--space-4)*-1) calc(var(--space-4)*-1) var(--space-4);
  border:1px solid var(--border-strong);border-radius:var(--radius-lg);z-index:0;
}
.portrait img{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.portrait .tag{
  position:absolute;z-index:2;left:calc(var(--space-3)*-1);bottom:var(--space-5);
  background:var(--accent-strong);color:var(--on-accent);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);font-weight:600;
  box-shadow:var(--shadow);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .portrait .tag{background:var(--accent)}}

/* ---------- sections ---------- */
.section{padding:clamp(var(--space-8),9vw,var(--space-9)) 0;border-top:1px solid var(--border)}

/* ---------- metrics ---------- */
.metrics-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
}
@media(min-width:820px){.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.metric{background:var(--surface);padding:var(--space-6) var(--space-5);position:relative}
.metric::before{
  content:"";position:absolute;left:var(--space-5);top:0;width:24px;height:3px;background:var(--accent);
}
.metric .num{
  font-family:var(--font-mono);font-weight:600;
  font-size:clamp(1.65rem,4vw,2.3rem);color:var(--fg);
  letter-spacing:-0.03em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.metric .lbl{font-size:.88rem;color:var(--fg-muted);margin-top:var(--space-3);line-height:1.5}
@media(max-width:420px){.metric{padding:var(--space-5) var(--space-4)}.metric::before{left:var(--space-4)}}
.metrics-foot{
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg-muted);
  margin-top:var(--space-4);letter-spacing:.03em;
}

/* ---------- experience ---------- */
.job{
  display:grid;grid-template-columns:1fr;gap:var(--space-2) var(--space-7);
  padding:var(--space-6) 0;border-bottom:1px solid var(--border);
}
.sec-title + .job{padding-top:0}
@media(min-width:820px){.job{grid-template-columns:220px minmax(0,1fr)}}
.job:last-of-type{border-bottom:none;padding-bottom:0}
.job .when{
  font-family:var(--font-mono);font-size:12.5px;color:var(--fg-muted);
  letter-spacing:.05em;padding-top:6px;font-variant-numeric:tabular-nums;
}
.job h3{font-weight:700;font-size:1.2rem;letter-spacing:-0.012em;line-height:1.3}
.job .co{color:var(--accent-strong);font-weight:600;font-size:.96rem;margin:var(--space-1) 0 var(--space-3)}
.job p{font-size:.99rem;margin-bottom:var(--space-3);max-width:42em}
.job p:last-child{margin-bottom:0}
.job .hl{background:linear-gradient(transparent 60%,var(--accent-soft) 60%);font-weight:600;padding:0 1px}

/* ---------- engagement model ---------- */
.model-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media(min-width:700px){.model-grid{grid-template-columns:1fr 1fr}}
.model-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-6);
}
.model-card h3{
  font-weight:700;font-size:1.08rem;line-height:1.35;margin-bottom:var(--space-3);
  display:flex;align-items:center;gap:var(--space-3);
}
.model-card h3 .dot{width:10px;height:10px;border-radius:2px;background:var(--accent);flex-shrink:0}
.model-card p{font-size:.96rem;color:var(--fg-muted)}

/* ---------- tools ---------- */
.tool-groups{display:grid;grid-template-columns:1fr;gap:var(--space-6) var(--space-7)}
@media(min-width:700px){.tool-groups{grid-template-columns:1fr 1fr}}
.tool-group h3{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:var(--space-3);font-weight:600;
  padding-bottom:var(--space-2);border-bottom:1px solid var(--border);
}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{
  font-size:.88rem;font-weight:500;line-height:1.4;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;
}

/* ---------- credentials ---------- */
.cred-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6) var(--space-7)}
@media(min-width:700px){.cred-grid{grid-template-columns:1fr 1fr}}
.cred{padding-top:var(--space-4);border-top:2px solid var(--fg)}
.cred h3{font-weight:700;font-size:1.02rem;margin-bottom:var(--space-2)}
.cred p{font-size:.96rem;color:var(--fg-muted)}

/* ---------- contact ---------- */
.contact{
  background:var(--inverse-bg);color:var(--inverse-fg);
  border:1px solid var(--inverse-border);
  border-radius:var(--radius-lg);
  padding:clamp(var(--space-6),6vw,var(--space-8)) clamp(var(--space-5),5vw,var(--space-8));
  margin:var(--space-6) 0 var(--space-8);
}
.contact h2.sec-title{font-size:clamp(1.65rem,4.2vw,2.5rem);margin-bottom:var(--space-4);max-width:22em}
.contact p{color:var(--inverse-muted);max-width:38em;margin-bottom:var(--space-6)}
.contact .btn{border-color:var(--inverse-fg)}
.contact .btn.primary{background:var(--inverse-fg);color:var(--inverse-bg)}
.contact .btn.ghost{color:var(--inverse-fg)}
.contact .btn.ghost:hover{background:rgba(255,255,255,.06)}
.contact .btn:hover{box-shadow:0 4px 0 0 var(--inverse-accent)}
.contact .btn.primary{overflow-wrap:anywhere}
.contact .meta{
  margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--inverse-border);
  font-family:var(--font-mono);font-size:12.5px;
  color:var(--inverse-muted);letter-spacing:.04em;line-height:2;
}
.contact .meta a{color:var(--inverse-fg)}

footer{
  text-align:center;padding:0 0 var(--space-7);
  font-family:var(--font-mono);font-size:12px;color:var(--fg-muted);letter-spacing:.08em;
}
.site-footer nav{margin-top:.6rem}
.site-footer a{color:inherit;text-underline-offset:3px}
.site-footer a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

/* ---------- colour layer: watermelon palette ---------- */
:root{
  --c-pink:#FF3D6E;--c-coral:#FF7A59;--c-amber:#FFB020;--c-lime:#7ED957;
  --c-teal:#0E9F85;--c-sky:#2BA8FF;--c-violet:#8B5CF6;
  --grad:linear-gradient(110deg,var(--c-pink),var(--c-coral) 35%,var(--c-amber) 62%,var(--c-teal));
  --grad-cool:linear-gradient(110deg,var(--c-violet),var(--c-sky) 50%,var(--c-teal));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-pink:#FF5C86;--c-coral:#FF8F70;--c-amber:#FFC247;--c-sky:#52B9FF;--c-violet:#A78BFA;--c-teal:#3CC3A3}}

/* aurora */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.38;animation:drift 18s ease-in-out infinite alternate}
.aurora i:nth-child(1){width:46vmin;height:46vmin;left:-8vmin;top:-10vmin;background:var(--c-pink)}
.aurora i:nth-child(2){width:40vmin;height:40vmin;right:-6vmin;top:4vmin;background:var(--c-amber);animation-delay:-6s}
.aurora i:nth-child(3){width:44vmin;height:44vmin;left:34%;bottom:-22vmin;background:var(--c-violet);animation-delay:-11s;opacity:.28}
@keyframes drift{to{transform:translate3d(6vmin,5vmin,0) scale(1.15)}}
.hero{position:relative;isolation:isolate}
.hero .wrap{position:relative;z-index:1}

.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.hero .role{border-image:var(--grad) 1;border-left-width:3px}
.hero .pitch strong{color:var(--fg);background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c-pink) 30%,transparent) 62%)}
.hero .pitch strong:nth-of-type(even){background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c-amber) 38%,transparent) 62%)}
.btn.primary{background:var(--fg);position:relative;overflow:hidden}
.btn.primary::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity var(--dur)}
.btn.primary:hover::before{opacity:1}
.btn.primary:hover{color:#fff}
.btn>*{position:relative}
.btn{will-change:transform}
.btn:hover{box-shadow:0 4px 0 0 var(--c-pink)}
.portrait::before{border:1.5px solid transparent;background:var(--grad) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:shimmer 7s linear infinite;background-size:200% 100%}
.portrait .tag{background:var(--c-pink);color:#fff}
.portrait{perspective:900px}
.portrait .tilt{transform-style:preserve-3d;transition:transform .25s var(--ease-out);will-change:transform}
.portrait .tilt.moving{transition:transform .06s linear}
.portrait .floaty{position:absolute;z-index:3;font-size:22px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);font-family:var(--font-mono);font-size:12px;font-weight:600;animation:bob 5s ease-in-out infinite;white-space:nowrap}
.portrait .floaty.a{right:-14px;top:12%;color:var(--c-teal)}
.portrait .floaty.b{right:-6px;bottom:30%;color:var(--c-violet);animation-delay:-2.5s}
@keyframes bob{50%{transform:translateY(-8px)}}

/* marquee (infinite slider) */
.marquee{border-block:1px solid var(--border);overflow:hidden;background:var(--surface);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:var(--space-6);padding:14px 0;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:var(--space-6);white-space:nowrap}
.marquee span::after{content:"✦";color:var(--c-pink)}
.marquee span:nth-child(5n+1)::after{color:var(--c-amber)}.marquee span:nth-child(5n+2)::after{color:var(--c-teal)}.marquee span:nth-child(5n+3)::after{color:var(--c-violet)}.marquee span:nth-child(5n+4)::after{color:var(--c-sky)}
@keyframes slide{to{transform:translateX(-50%)}}

/* section titles */
h2.sec-title::after{content:"";display:block;width:56px;height:5px;border-radius:9px;background:var(--grad);margin-top:var(--space-4)}
.section:nth-of-type(odd) .sec-title::after{background:var(--grad-cool)}

/* spotlight cards (cursor-follow glow) */
.spot{position:relative;--mx:50%;--my:50%;--hue:var(--c-pink)}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--hue) 22%,transparent),transparent 70%)}
.spot:hover::after{opacity:1}
.spot::before{z-index:1}

/* metrics bento */
.metrics-grid{gap:var(--space-3);background:none;border:none;border-radius:0;overflow:visible}
.metric{border:1px solid var(--border);border-radius:var(--radius-lg);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);overflow:hidden}
.metric:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--hue)}
.metric::before{width:36px;height:4px;border-radius:0 0 4px 4px;background:var(--hue)}
.metric .num{color:var(--hue)}
.metric:nth-child(8n+1){--hue:var(--c-pink)}.metric:nth-child(8n+2){--hue:var(--c-teal)}.metric:nth-child(8n+3){--hue:var(--c-amber)}.metric:nth-child(8n+4){--hue:var(--c-violet)}
.metric:nth-child(8n+5){--hue:var(--c-coral)}.metric:nth-child(8n+6){--hue:var(--c-sky)}.metric:nth-child(8n+7){--hue:var(--c-violet)}.metric:nth-child(8n+8){--hue:var(--c-pink)}
.metric:nth-child(1),.metric:nth-child(2){background:linear-gradient(160deg,color-mix(in srgb,var(--hue) 10%,var(--surface)),var(--surface))}

/* simulator */
.sim{margin-top:var(--space-6);border-radius:var(--radius-lg);padding:clamp(var(--space-5),4vw,var(--space-7));color:#fff;
  background:linear-gradient(135deg,#1b1030,#3b0f3a 55%,#7a1a3d);position:relative;overflow:hidden;--hue:#fff}
.sim h3{font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.02em;margin-bottom:var(--space-2)}
.sim p.sub{color:rgba(255,255,255,.75);font-size:.95rem;margin-bottom:var(--space-5);max-width:40em}
.sim-row{display:grid;gap:var(--space-5);align-items:center}
@media(min-width:760px){.sim-row{grid-template-columns:1fr 1fr}}
.sim label{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;justify-content:space-between}
.sim label b{color:#fff;font-size:15px;letter-spacing:0}
.sim input[type=range]{width:100%;margin-top:var(--space-3);accent-color:var(--c-pink);height:44px;cursor:pointer}
.sim-out{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.sim-out div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:var(--space-4)}
.sim-out small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.sim-out strong{font-family:var(--font-mono);font-size:clamp(1.3rem,3vw,1.8rem);font-variant-numeric:tabular-nums}
.sim-out .gain strong{background:linear-gradient(110deg,#ffd166,#ff7a9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.sim .btn{border-color:#fff;color:#fff;margin-top:var(--space-5)}

/* timeline */
.job{position:relative}
.job .when::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--hue,var(--c-pink));margin-right:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--hue,var(--c-pink)) 22%,transparent)}
.job:nth-of-type(5n+1){--hue:var(--c-pink)}.job:nth-of-type(5n+2){--hue:var(--c-teal)}.job:nth-of-type(5n+3){--hue:var(--c-amber)}.job:nth-of-type(5n+4){--hue:var(--c-violet)}.job:nth-of-type(5n+5){--hue:var(--c-sky)}
.job .co{color:var(--hue,var(--accent-strong))}
.job .hl{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--hue,var(--c-pink)) 32%,transparent) 58%)}

/* model cards */
.model-card{transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);overflow:hidden}
.model-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--hue)}
.model-card h3 .dot{background:var(--hue);border-radius:50%}
.model-card:nth-child(1){--hue:var(--c-pink)}.model-card:nth-child(2){--hue:var(--c-teal)}.model-card:nth-child(3){--hue:var(--c-amber)}.model-card:nth-child(4){--hue:var(--c-violet)}

/* chips */
.chip{transition:transform var(--dur) var(--ease-out),background-color var(--dur),color var(--dur),border-color var(--dur);cursor:default}
.chip:hover{transform:translateY(-3px) rotate(-2deg);background:var(--hue);border-color:var(--hue);color:#fff}
.tool-group:nth-child(1){--hue:var(--c-pink)}.tool-group:nth-child(2){--hue:var(--c-teal)}.tool-group:nth-child(3){--hue:#c98500}.tool-group:nth-child(4){--hue:var(--c-violet)}
.tool-group h3{border-bottom-color:var(--hue);color:var(--hue)}

/* credentials */
.cred{transition:transform var(--dur) var(--ease-out)}
.cred:hover{transform:translateY(-3px)}
.cred:nth-child(1){border-top-color:var(--c-pink)}.cred:nth-child(2){border-top-color:var(--c-teal)}.cred:nth-child(3){border-top-color:var(--c-amber)}.cred:nth-child(4){border-top-color:var(--c-violet)}

/* contact */
.contact{background:radial-gradient(circle at 15% 0%,rgba(255,61,110,.35),transparent 45%),radial-gradient(circle at 90% 100%,rgba(139,92,246,.35),transparent 45%),var(--inverse-bg);overflow:hidden;position:relative}
.contact h2.sec-title::after{display:none}

/* toast + confetti */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:999px;font-family:var(--font-mono);font-size:13px;z-index:200;transition:all .3s var(--ease-out);pointer-events:none}
.toast.show{transform:translate(-50%,0);opacity:1}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:150}
.share-fab{position:fixed;right:16px;bottom:16px;z-index:60;border-radius:999px;min-height:44px;background:var(--grad);color:#fff;border:none;padding:0 18px;font-weight:600;cursor:pointer;font-family:var(--font-sans);font-size:.92rem;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px;transition:transform var(--dur) var(--ease-out)}
.share-fab:hover{transform:translateY(-3px) scale(1.04)}
.share-fab svg{width:16px;height:16px}

/* ---------- shader gradient (WebGL, shadergradient/unicorn.studio style) ---------- */
.gl-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gl-canvas.on{opacity:1}
.hero.gl .aurora,.contact.gl .aurora{opacity:0;transition:opacity 1s}
.contact>*:not(.gl-canvas){position:relative;z-index:1}
/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- motion (content stays visible without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee-track{transform:none}
  .js .reveal{opacity:1;transform:none}
  .progress{display:none}
}

/* ---------- accessibility helpers ---------- */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
main#main:focus{outline:none}
.skip-link:focus{
  position:fixed;left:12px;top:12px;width:auto;height:auto;
  background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:var(--radius);
  font-family:var(--font-mono);font-size:13px;z-index:1000;
}

@media print{
  .gl-canvas,.topbar,.skip-link,.share-fab,.aurora,.marquee,.sim,#confetti{display:none}
  .js .reveal{opacity:1;transform:none}
  .contact{background:none;color:#000;border:1px solid #000}
}
.sim-yrs-label{margin-top:14px}
.sim-wide{grid-column:1/-1}