/* Mohamad Mashal portfolio. Soft Structuralism, silver and graphite. No external requests. */
:root{
  color-scheme:light dark;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --bg:#eceef2;--bg2:#dfe3e9;
  --wash1:rgba(255,255,255,.95);--wash2:rgba(176,189,208,.5);
  --ink:#14171c;--muted:#434a55;--faint:#5a626e;
  --line:rgba(20,26,36,.11);--line2:rgba(20,26,36,.18);
  --card-a:rgba(255,255,255,.82);--card-b:rgba(255,255,255,.42);
  --hi:rgba(255,255,255,.95);--shadow:rgba(38,50,70,.26);
  --accent:#2a5180;--accent2:rgba(42,81,128,.16);
  --btn-bg:#14171c;--btn-ink:#f3f5f8;
  --sheen:#7a8594;
  --orb1:rgba(255,255,255,.95);--orb2:rgba(188,198,213,.9);--orb3:rgba(158,178,208,.7);
  --spot:rgba(255,255,255,.85);
  --grain:.085;--grain-inv:0;
  --glass:rgba(244,246,249,.72);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Segoe UI Variable Display","SF Pro Display",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:24px;--r-in:14px;
  --chromeg:radial-gradient(circle at 31% 24%,#fff 0,#f4f6f9 10%,#cdd3dc 36%,#8c97a6 70%,#566171 100%);
  --chromesh:inset -22px -34px 70px rgba(26,36,52,.42),inset 16px 20px 44px rgba(255,255,255,.85),0 70px 80px -44px rgba(30,45,70,.55),0 0 0 1px rgba(255,255,255,.5);
  --engr:linear-gradient(180deg,#444d5a,#1a1f26);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0e12;--bg2:#13161c;
    --wash1:rgba(108,122,145,.28);--wash2:rgba(70,84,108,.3);
    --ink:#eceff3;--muted:#a7aeba;--faint:#97a0ad;
    --line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
    --card-a:rgba(255,255,255,.075);--card-b:rgba(255,255,255,.025);
    --hi:rgba(255,255,255,.18);--shadow:rgba(0,0,0,.6);
    --accent:#a9c8ee;--accent2:rgba(169,200,238,.16);
    --btn-bg:#eceff3;--btn-ink:#10131a;
    --sheen:#ffffff;
    --orb1:rgba(120,134,158,.55);--orb2:rgba(60,72,94,.7);--orb3:rgba(92,118,160,.4);
    --spot:rgba(214,226,244,.16);
    --grain:.07;--grain-inv:1;
    --glass:rgba(20,23,29,.72);
    --chromeg:radial-gradient(circle at 31% 24%,#f4f6f9 0,#b8c0cc 12%,#59626f 46%,#1d2128 82%,#12151a 100%);
    --chromesh:inset -22px -34px 70px rgba(0,0,0,.6),inset 14px 18px 40px rgba(255,255,255,.35),0 70px 90px -40px #000,0 0 0 1px rgba(255,255,255,.14);
    --engr:linear-gradient(180deg,#ffffff,#d9dfe8);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{
  margin:0;font:400 1rem/1.6 var(--font);color:var(--ink);overflow-x:clip;
  background:
    radial-gradient(1100px 640px at 8% -4%,var(--wash1),transparent 62%),
    radial-gradient(900px 620px at 100% 24%,var(--wash2),transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg2) 50%,var(--bg) 78%,var(--bg2));
  font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* film grain: one fixed layer, never on scrolling content */
body::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){body::after{filter:invert(1)}}
h1,h2,h3,p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1160px,100% - 2*clamp(1.1rem,4vw,2rem));margin-inline:auto}
section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.skip{position:absolute;left:12px;top:-60px;z-index:80;background:var(--btn-bg);color:var(--btn-ink);padding:.6rem 1rem;border-radius:999px;transition:transform .2s var(--ease-out)}
.skip:focus{transform:translateY(72px)}

/* scroll progress (CSS scroll-driven, progressive) */
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--line2),var(--ink));pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:prog linear both;animation-timeline:scroll(root)}}
@keyframes prog{to{transform:scaleX(1)}}

/* type */
.h2{font:640 clamp(1.9rem,4.6vw,3.1rem)/1.04 var(--display);letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.lead{margin-top:1rem;max-width:58ch;color:var(--muted);font-size:clamp(1rem,1.5vw,1.125rem);text-wrap:pretty}
.sec-head{margin-bottom:clamp(1.6rem,4vw,3rem)}
.silver{background:linear-gradient(180deg,var(--ink) 10%,var(--faint) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-color-scheme:dark){.silver{background:linear-gradient(180deg,#fff 0%,#8f99a8 120%);-webkit-background-clip:text;background-clip:text}}

/* nav: floating glass pill (fixed, so blur is cheap) */
.nav{position:fixed;z-index:50;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem);
  padding:.4rem .5rem .4rem 1rem;border-radius:999px;background:var(--glass);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--hi),0 10px 30px -12px var(--shadow);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);max-width:calc(100% - 20px)}
.mark{font:700 .95rem var(--display);letter-spacing:-.04em;text-decoration:none;padding-right:.2rem}
.nav ul{display:flex;gap:clamp(.1rem,1vw,.5rem);list-style:none;margin:0;padding:0}
.nav li a{display:block;text-decoration:none;font-size:.84rem;font-weight:520;color:var(--muted);padding:.42rem .6rem;border-radius:999px;transition:color .16s ease,background-color .16s ease}
.nav li a[aria-current]{color:var(--ink);background:var(--accent2)}
@media (hover:hover) and (pointer:fine){.nav li a:hover{color:var(--ink);background:var(--accent2)}}
@media (max-width:420px){.nav{padding-left:.75rem}.nav li a{padding:.4rem .42rem;font-size:.78rem}.mark{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;font:600 .95rem var(--font);text-decoration:none;border-radius:999px;padding:.78rem .8rem .78rem 1.3rem;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .16s var(--ease-out),background-color .16s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-p{background:linear-gradient(180deg,color-mix(in srgb,var(--btn-bg) 86%,#fff),var(--btn-bg));color:var(--btn-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -10px var(--shadow)}
.btn-s{background:linear-gradient(180deg,var(--card-a),var(--card-b));color:var(--ink);border-color:var(--line2);padding:.78rem 1.3rem;box-shadow:inset 0 1px 0 var(--hi)}
.btn .ar{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:rgba(127,135,150,.28);transition:transform .2s var(--ease-out)}
.btn .ar svg{width:.9rem;height:.9rem}
@media (hover:hover) and (pointer:fine){.btn-p:hover .ar{transform:translate(2px,-1px)}.btn-s:hover{box-shadow:inset 0 1px 0 var(--hi),0 8px 20px -10px var(--shadow)}}

/* HERO */
.hero{padding-top:clamp(6.2rem,12vw,8.5rem);padding-bottom:clamp(3rem,6vw,5rem);min-height:min(100dvh,860px);display:grid;align-items:center;overflow:clip;isolation:isolate}
.hero-grid{display:grid;gap:2.2rem;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.bgfx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(64px);will-change:transform}
.o1{width:min(62vw,620px);aspect-ratio:1;left:-12%;top:-18%;background:radial-gradient(circle,var(--orb1),transparent 68%);animation:drift1 26s ease-in-out infinite alternate}
.o2{width:min(55vw,540px);aspect-ratio:1;right:-10%;top:8%;background:radial-gradient(circle,var(--orb2),transparent 66%);animation:drift2 32s ease-in-out infinite alternate}
.o3{width:min(46vw,440px);aspect-ratio:1;left:32%;bottom:-24%;background:radial-gradient(circle,var(--orb3),transparent 66%);animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(10vw,8vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-9vw,12vh,0) scale(.9)}}
@keyframes drift3{to{transform:translate3d(-12vw,-6vh,0) scale(1.18)}}
.spot{position:absolute;left:0;top:0;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,var(--spot),transparent 62%);opacity:0;transition:opacity .4s ease;will-change:transform;display:none}
@media (hover:hover) and (pointer:fine){.spot{display:block}.hero.live .spot{opacity:1}}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem;border-radius:999px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--card-a),var(--card-b));font-size:.82rem;font-weight:560;color:var(--muted);box-shadow:inset 0 1px 0 var(--hi)}
.hero h1{margin-top:1.2rem;font:660 clamp(2.3rem,8.6vw,4.7rem)/1 var(--display);letter-spacing:-.045em}
.hero h1 .n{display:block;padding-bottom:.06em;
  background:linear-gradient(100deg,var(--ink) 0%,var(--ink) 40%,var(--sheen) 50%,var(--ink) 60%,var(--ink) 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s var(--ease-io) 1.2s infinite}
@keyframes sheen{0%{background-position:100% 0}20%,100%{background-position:0 0}}
.hero h1 .r{display:block;font-size:.5em;letter-spacing:-.035em;font-weight:560;color:var(--muted);margin-top:.35em;line-height:1.1}
.hero .lead{margin-top:1.4rem;max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
/* stagger load-in, once */
.hero .ld{opacity:0;transform:translateY(14px) scale(.985);animation:ld .8s var(--ease-out) forwards;animation-delay:calc(var(--i)*70ms + 80ms)}
@keyframes ld{to{opacity:1;transform:none}}

/* chrome orb */
.orb-wrap{position:relative;width:min(88%,460px);aspect-ratio:1;margin-inline:auto;justify-self:center;animation:ld 1.1s var(--ease-out) .25s both}
.chrome{position:absolute;inset:14%;border-radius:50%;overflow:hidden;background:var(--chromeg);box-shadow:var(--chromesh)}
.chrome::before{content:"";position:absolute;inset:-20%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.7) 28%,transparent 38% 64%,rgba(255,255,255,.4) 76%,transparent 88%);animation:spin 16s linear infinite;opacity:.55}
.chrome::after{content:"";position:absolute;left:14%;top:7%;width:46%;height:26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));filter:blur(6px);transform:rotate(-24deg)}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{position:absolute;inset:3%;border-radius:50%;border:1px dashed var(--line2);animation:spin 46s linear infinite}
.orbit.b{inset:-4%;border-style:solid;border-color:var(--line);animation-duration:70s;animation-direction:reverse}
.chip-o{position:absolute;display:block;padding:.32rem .8rem;border-radius:999px;font-size:.78rem;font-weight:620;white-space:nowrap;color:var(--ink);
  background:linear-gradient(180deg,var(--card-a),var(--card-b));border:1px solid var(--line2);box-shadow:inset 0 1px 0 var(--hi),0 8px 20px -8px var(--shadow);
  background-color:var(--bg);animation:spin 46s linear infinite reverse}
.orbit .c1{left:50%;top:0;margin:-14px 0 0 -30px}
.orbit .c2{right:2%;top:68%;margin:-14px -18px 0 0}
.orbit .c3{left:6%;top:70%;margin:-14px 0 0 -26px}

/* STATS */
.stats{padding-block:0}
.stat-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.panel,.card,.stat{position:relative;border-radius:var(--r);background:linear-gradient(160deg,var(--card-a),var(--card-b));
  box-shadow:0 0 0 1px var(--line),inset 0 1px 0 var(--hi),inset 0 -1px 0 rgba(127,135,150,.1),0 24px 40px -26px var(--shadow)}
.stat{padding:1.1rem 1.1rem 1.2rem;overflow:hidden;min-height:176px;display:flex;flex-direction:column;justify-content:space-between}
.stat .num{font:660 clamp(2.3rem,6vw,3.6rem)/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.stat .lbl{min-height:2.7em;margin-top:.35rem;font-size:.9rem;color:var(--muted);line-height:1.35}
.viz{height:54px;display:flex;align-items:flex-end}
.dots50{display:grid;grid-template-columns:repeat(25,1fr);gap:3px;width:100%}
.dots50 i{aspect-ratio:1;border-radius:50%;background:var(--line2);transition:background-color .3s ease,transform .3s var(--ease-out);transform:scale(.7);transition-delay:calc(var(--i)*14ms)}
.on .dots50 i{background:var(--ink);transform:none;opacity:.85}
.ring{width:54px;height:54px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .bg{stroke:var(--line2)}
.ring .fg{stroke:var(--ink);stroke-dasharray:138.2;stroke-dashoffset:138.2;transition:stroke-dashoffset 1.3s var(--ease-out) .1s}
.on .ring .fg{stroke-dashoffset:4.1}
.ag{display:flex;gap:7px;align-items:center}
.ag i{width:20px;height:20px;border-radius:50%;background:var(--ink);opacity:.15;transform:scale(.8);transition:opacity .3s ease,transform .3s var(--ease-out);transition-delay:calc(var(--i)*70ms)}
.on .ag i{opacity:.88;transform:none}
.ag i.q{background:transparent;border:2px solid var(--accent);opacity:.2}
.on .ag i.q{opacity:1}
.bars12{display:flex;gap:4px;align-items:flex-end;width:100%;height:54px}
.bars12 i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--ink),var(--faint));opacity:.8;height:calc(18% + var(--i)*6.5%);transform:scaleY(.12);transform-origin:50% 100%;transition:transform .5s var(--ease-out);transition-delay:calc(var(--i)*40ms)}
.on .bars12 i{transform:none}

/* reveal */
.js .rv{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i,0)*60ms)}
.js .rv.in{opacity:1;transform:none}

/* BENTO */
.bento{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .b-h{grid-column:1/5}.b-p{grid-column:5/7;grid-row:1/3}.b-j{grid-column:1/3}.b-m{grid-column:3/5}
}
.card{padding:clamp(1.2rem,2.4vw,1.8rem);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;gap:.7rem;transition:transform .2s var(--ease-out),box-shadow .2s ease}
.card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.75),transparent 60%)}
@media (prefers-color-scheme:dark){.card::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(190,208,236,.14),transparent 60%)}}
@media (hover:hover) and (pointer:fine){.card:hover::before{opacity:1}.card:hover{transform:translateY(-3px)}}
.card:active{transform:scale(.99)}
.card h3{font:640 1.3rem/1.15 var(--display);letter-spacing:-.025em}
.card p{color:var(--muted);font-size:.97rem;max-width:46ch}
.card .more{margin-top:auto;padding-top:.6rem;font-weight:600;font-size:.9rem;text-decoration:none;display:inline-flex;gap:.4rem;align-items:center}
.card .more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.76rem;font-weight:600;padding:.22rem .62rem;border-radius:999px;border:1px solid var(--line2);background:rgba(127,135,150,.1);color:var(--muted)}
.card-d{color:#eaedf2;background:linear-gradient(155deg,#2a303a 0%,#171b21 55%,#232932 100%);box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22),0 30px 50px -28px rgba(10,16,28,.7)}
.card-d p,.card-d .tag{color:#b6bdc9}.card-d .tag{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.card-d::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(190,208,236,.2),transparent 60%)!important}
.card-d :focus-visible{outline-color:#a9c8ee}
.card-s{background:linear-gradient(160deg,rgba(255,255,255,.95) 0%,rgba(205,212,223,.7) 38%,rgba(246,247,249,.85) 62%,rgba(190,198,211,.62) 100%)}
@media (prefers-color-scheme:dark){.card-s{background:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(130,144,168,.12) 40%,rgba(255,255,255,.07) 62%,rgba(90,104,130,.16) 100%)}}
.b-h{display:grid;gap:1rem;align-content:start}
.b-h .txt{display:flex;flex-direction:column;gap:.7rem}
@media (min-width:640px){.b-h{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}}
.mini{width:100%;max-width:240px;margin-inline:auto}
.mini .ringd{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.mini-p{width:100%;max-width:220px;margin:auto auto 0}
.floaty{animation:float 6s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-6px)}}
.mchips{position:relative;height:96px;margin-top:auto}
.mchips span{position:absolute;padding:.36rem .8rem;border-radius:var(--r-in);font:600 .85rem var(--mono);background:linear-gradient(180deg,var(--card-a),var(--card-b));box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 var(--hi),0 10px 20px -10px var(--shadow);animation:float 5s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-1.2s)}

/* STUDIO diagram */
.studio{display:grid;gap:1.2rem}
@media (min-width:980px){.studio{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:stretch}}
.dia{padding:clamp(.6rem,2vw,1.4rem);overflow:hidden}
.dia svg{width:100%;height:auto;overflow:visible;touch-action:manipulation}
.dia .ringq{fill:none;stroke:var(--line2);stroke-width:1.5;stroke-dasharray:3 7}
.dia .spoke{stroke:var(--line2);stroke-width:1.4;fill:none;transition:stroke .2s ease}
.dia .gate{stroke:var(--line2);stroke-width:1.2;stroke-dasharray:2 5;fill:none;transition:stroke .2s ease}
.dia .hot{stroke:var(--accent);stroke-dasharray:none}
.dia .pulse{fill:var(--ink)}.dia .pulse.q{fill:var(--accent)}
.dia .nd{cursor:pointer;outline:none}
.dia .nd rect,.dia .nd circle{fill:url(#ng);stroke:var(--line2);stroke-width:1.2;transition:stroke .2s ease,fill .2s ease}
.dia .nd text{font:620 17px var(--font);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none;letter-spacing:-.01em}
.dia .nd .sub{font-size:11px;font-weight:500;fill:var(--muted)}
.dia .nd .g{transform-box:fill-box;transform-origin:center;transition:transform .2s var(--ease-out)}
.dia .nd:active .g{transform:scale(.97)}
.dia .nd.sel rect,.dia .nd.sel circle{stroke:var(--accent);stroke-width:2.2}
.dia .nd:focus-visible rect,.dia .nd:focus-visible circle{stroke:var(--accent);stroke-width:3}
.dia .qa rect{fill:var(--accent2)}
@media (hover:hover) and (pointer:fine){.dia .nd:hover .g{transform:scale(1.05)}.dia .nd:hover rect,.dia .nd:hover circle{stroke:var(--accent)}}
.info{padding:clamp(1.2rem,2.4vw,1.8rem);min-height:220px;display:flex;flex-direction:column;gap:.7rem}
.info h3{font:640 1.5rem/1.1 var(--display);letter-spacing:-.03em}
.info p{color:var(--muted);font-size:1.02rem}
.info #info-in{display:flex;flex-direction:column;gap:.6rem}
.info .swap{animation:swap .28s var(--ease-out)}
@keyframes swap{from{opacity:0;transform:translateY(6px) scale(.985)}}
.info .hint{font-size:.82rem;color:var(--faint)}
.flowl{list-style:none;margin:.4rem 0 .6rem;padding:0;display:grid;gap:.55rem;counter-reset:f}
.flowl li{position:relative;padding-left:2rem;color:var(--muted);font-size:.95rem}
.flowl li::before{content:"";position:absolute;left:.3rem;top:.45em;width:.7rem;height:.7rem;border-radius:50%;background:var(--ink);box-shadow:0 0 0 4px var(--accent2)}
.flowl li:last-child::before{background:var(--accent)}
.flowl li:not(:last-child)::after{content:"";position:absolute;left:calc(.3rem + .35rem - 1px);top:calc(.45em + .7rem);height:calc(100% + .55rem - .7rem);width:2px;background:var(--line2)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto}
.legend button{font:600 .78rem var(--font);padding:.34rem .75rem;border-radius:999px;border:1px solid var(--line2);background:rgba(127,135,150,.1);color:var(--muted);cursor:pointer;transition:transform .16s var(--ease-out),background-color .16s ease,color .16s ease,border-color .16s ease}
.legend button:active{transform:scale(.97)}
.legend button[aria-pressed=true]{color:var(--ink);border-color:var(--accent);background:var(--accent2)}
@media (hover:hover) and (pointer:fine){.legend button:hover{color:var(--ink);border-color:var(--accent)}}

/* PAIRPIPE */
.flow{display:grid;gap:0;grid-template-columns:minmax(0,1fr);justify-items:center}
@media (min-width:980px){.flow{grid-template-columns:minmax(0,1fr) 64px minmax(0,.62fr) 64px minmax(0,1fr);align-items:center;justify-items:stretch}}
.term{width:100%;max-width:520px;border-radius:var(--r-in);overflow:hidden;background:linear-gradient(180deg,#1d2128,#12151a);color:#dde2ea;font:.8rem/1.7 var(--mono);box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.14),0 30px 50px -28px var(--shadow)}
.term header{display:flex;align-items:center;gap:6px;padding:.6rem .85rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:.74rem;color:#aab2be}
.term header i{width:9px;height:9px;border-radius:50%;background:linear-gradient(180deg,#e9edf3,#8b95a3)}
.term header b{margin-left:.5rem;font-weight:600}
.term .body{padding:.8rem .9rem 1rem;min-height:190px;display:flex;flex-direction:column;gap:.1rem}
.ln{opacity:0;animation:ln 14s infinite both;animation-delay:calc(var(--d)*1s);overflow-wrap:anywhere}
.ln em{font-style:normal;color:#9fc0ea}.ln u{text-decoration:none;color:#c9ced8}.ln s{text-decoration:none;color:#97a1af}
@keyframes ln{0%{opacity:0;transform:translateY(6px)}3%{opacity:1;transform:none}90%{opacity:1;transform:none}96%,100%{opacity:0}}
.no-js .ln,.rm .ln{opacity:1;animation:none}
.link{position:relative;width:2px;height:44px;background:linear-gradient(180deg,var(--line2),var(--line2));border-radius:2px}
@media (min-width:980px){.link{width:64px;height:2px}}
.pk{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent2);opacity:0;offset-path:path("M0 0V44");animation:pk 14s infinite both;animation-delay:calc(var(--d)*1s)}
.pk.r{animation-name:pkr}
@media (min-width:980px){.pk{left:0;top:-3px;offset-path:path("M0 0H64")}}
@keyframes pk{0%{offset-distance:0%;opacity:0}1%{opacity:1}6%{offset-distance:100%;opacity:1}8%,100%{offset-distance:100%;opacity:0}}
@keyframes pkr{0%{offset-distance:100%;opacity:0}1%{opacity:1}6%{offset-distance:0%;opacity:1}8%,100%{offset-distance:0%;opacity:0}}
.brain{width:100%;max-width:300px;padding:1.1rem 1.1rem 1.2rem;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(206,213,224,.72) 55%,rgba(244,246,249,.9));color:#14171c;box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 #fff,0 30px 50px -26px var(--shadow);min-height:190px}
@media (prefers-color-scheme:dark){.brain{background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(120,134,160,.14) 55%,rgba(255,255,255,.08));color:var(--ink);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 var(--hi),0 30px 50px -26px #000}}
.brain h3{font:660 1.05rem var(--display);letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.brain h3 svg{width:1.1rem;height:1.1rem}
.brain small{display:block;margin:.1rem 0 .7rem;font-size:.78rem;opacity:.78}
.note{padding:.5rem .7rem;border-radius:10px;background:rgba(127,135,150,.16);font-size:.84rem;margin-top:.45rem;font-weight:520}
.note.ln{--d:2.4}
.note.ln:nth-of-type(2){--d:6}

/* PIPELINE */
.steps{position:relative;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);counter-reset:s}
.rail{position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line2);border-radius:2px;overflow:hidden}
.rail i{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),var(--accent));transform:scaleY(0);transform-origin:50% 0;transition:transform 1.12s linear .1s}
.steps.on .rail i{transform:none}
.step{position:relative;align-content:start;display:grid;grid-template-columns:56px minmax(0,1fr);gap:1rem;align-items:start}
.step .nodec{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 var(--hi);color:var(--faint);position:relative;z-index:1;transition:color .35s ease,box-shadow .35s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i)*.26s + .1s)}
.step .nodec svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.steps.on .nodec{color:var(--ink);box-shadow:0 0 0 1px var(--ink),inset 0 1px 0 var(--hi),0 10px 24px -10px var(--shadow);transform:scale(1.04)}
.steps.on .step.human .nodec{color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 0 8px var(--accent2),0 10px 24px -10px var(--shadow)}
.step h3{font:640 1.15rem/1.2 var(--display);letter-spacing:-.02em;padding-top:.7rem}
.step p{color:var(--muted);font-size:.94rem;margin-top:.2rem;max-width:34ch}
.step .tx{opacity:.55;transition:opacity .4s ease;transition-delay:calc(var(--i)*.26s + .1s)}
.steps.on .tx{opacity:1}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem}
  .rail{left:10%;right:10%;top:27px;bottom:auto;width:auto;height:2px}
  .rail i{transform:scaleX(0);transform-origin:0 50%}
  .step{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:.8rem}
  .step h3{padding-top:0}.step p{margin-inline:auto}
}
.proof{margin-top:2rem;display:inline-flex;align-items:baseline;gap:.7rem;padding:.7rem 1.2rem;border-radius:999px}
.proof b{font:660 1.5rem var(--display);letter-spacing:-.04em}
.proof span{color:var(--muted);font-size:.94rem}

/* SKILLS marquee (one block, two rows) */
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);display:grid;gap:14px;padding-block:6px}
.mq .track{display:flex;width:max-content;gap:12px;animation:mq 44s linear infinite}
.mq .track.rev{animation-direction:reverse;animation-duration:52s}
.mq ul{display:flex;gap:12px;list-style:none;margin:0;padding:0}
@keyframes mq{to{transform:translateX(calc(-25% - 3px))}}
@media (hover:hover) and (pointer:fine){.mq:hover .track{animation-play-state:paused}}
.sk{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.2rem;border-radius:999px;font:600 1rem var(--display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink);
  background:linear-gradient(180deg,var(--card-a),var(--card-b));box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 var(--hi),0 10px 20px -12px var(--shadow)}
.sk::before{content:"";width:8px;height:8px;border-radius:50%;background:conic-gradient(#fff,#8b96a6,#f1f3f6,#7d8898,#fff);box-shadow:0 0 0 1px var(--line2)}
.sk.lg{padding:.9rem 1.5rem;font-size:1.15rem}

/* TIMELINE */
.tl{position:relative;display:grid;gap:clamp(1.4rem,3vw,2.2rem);padding-left:44px;max-width:860px}
.tl::before,.tl::after{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;border-radius:2px}
.tl::before{background:var(--line2)}
.tl::after{background:linear-gradient(180deg,var(--ink),var(--accent));transform-origin:50% 0}
@supports (animation-timeline:view()){.tl::after{transform:scaleY(0);animation:draw linear both;animation-timeline:view();animation-range:entry 25% cover 62%}}
@keyframes draw{to{transform:scaleY(1)}}
.ti{position:relative;padding:clamp(1.1rem,2.2vw,1.6rem)}
.ti::before{content:"";position:absolute;left:-40px;top:1.45rem;width:16px;height:16px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--ink),0 0 0 7px var(--accent2)}
.ti.plan::before{box-shadow:none;border:2px dashed var(--faint);background:var(--bg)}
.ti .when{font-size:.82rem;font-weight:620;color:var(--accent);letter-spacing:.01em}
.ti h3{font:640 1.3rem/1.2 var(--display);letter-spacing:-.025em;margin-top:.2rem}
.ti .where{color:var(--muted);font-size:.94rem;margin-top:.1rem}
.ti ul{margin:.8rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.ti p{color:var(--muted);margin-top:.5rem;font-size:.97rem}

.career{display:grid;gap:2rem}
@media (min-width:900px){.career{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.medal{display:none;justify-items:center;gap:1.6rem;position:sticky;top:120px;padding-top:1rem}
@media (min-width:900px){.medal{display:grid}}
.disc{position:relative;width:min(78%,320px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--chromeg);box-shadow:var(--chromesh);overflow:hidden}
.disc::before{content:"";position:absolute;inset:-20%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.7) 28%,transparent 38% 64%,rgba(255,255,255,.4) 76%,transparent 88%);animation:spin 22s linear infinite;opacity:.55}
.disc::after{content:"";position:absolute;inset:9%;border-radius:50%;border:1px solid rgba(255,255,255,.55)}
.disc b{position:relative;z-index:1;font:700 clamp(3.4rem,7vw,5.6rem)/1 var(--display);letter-spacing:-.06em;background:var(--engr);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.pips{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.pips span{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:620;border:1.5px dashed var(--faint);color:var(--muted)}
.pips span.done{border:1px solid var(--ink);color:var(--ink);background:var(--accent2)}
.pips svg{width:.9rem;height:.9rem}

/* CONTACT */
.cta-card{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--r) + 8px);padding:clamp(1.6rem,5vw,4rem);text-align:left;
  background:linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(204,211,222,.75) 34%,rgba(245,247,249,.9) 56%,rgba(176,186,201,.7) 100%);
  box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 #fff,0 40px 70px -40px var(--shadow)}
@media (prefers-color-scheme:dark){.cta-card{background:linear-gradient(135deg,rgba(255,255,255,.17) 0%,rgba(110,126,154,.13) 34%,rgba(255,255,255,.07) 56%,rgba(80,96,126,.2) 100%);box-shadow:0 0 0 1px var(--line2),inset 0 1px 0 var(--hi),0 40px 70px -40px #000}}
.cta-card::before{content:"";position:absolute;z-index:-1;width:130%;aspect-ratio:1;left:-15%;top:-65%;background:conic-gradient(from 0deg,transparent 0 22%,rgba(255,255,255,.55) 32%,transparent 44% 70%,rgba(255,255,255,.35) 82%,transparent);animation:spin 40s linear infinite;opacity:.8;border-radius:50%}
@media (prefers-color-scheme:dark){.cta-card::before{opacity:.2}}
.cta-orb{inset:auto -4% -38% auto!important;width:min(46%,440px);aspect-ratio:1;z-index:-1}
@media (max-width:760px){.cta-orb{display:none}}
.cta-card h2{font:660 clamp(2rem,6vw,4rem)/1 var(--display);letter-spacing:-.045em;max-width:14ch;text-wrap:balance}
.mail{display:inline-block;margin-top:1.4rem;font:600 clamp(1.05rem,3.6vw,1.9rem)/1.2 var(--display);letter-spacing:-.025em;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:var(--line2);transition:text-decoration-color .16s ease}
@media (hover:hover) and (pointer:fine){.mail:hover{text-decoration-color:var(--ink)}}
.cta-card .cta{margin-top:1.6rem}
footer{padding-block:2rem 3rem;color:var(--faint);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between}
footer a{text-underline-offset:.2em}

/* offscreen sections pause their loops */
.off *,.off *::before,.off *::after{animation-play-state:paused!important}

/* reduced motion: movement off, state still readable */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .orb,.spot,.pk,.pulse{display:none!important}
  .hero .ld,.orb-wrap{opacity:1;transform:none}
  .js .rv{opacity:1;transform:none}
  .ln{opacity:1!important}
  .mq{-webkit-mask-image:none;mask-image:none}.mq .track{flex-wrap:wrap;width:auto;transform:none}.mq .track>ul[aria-hidden]{display:none}.mq ul{flex-wrap:wrap}
  .progress{display:none}
}

.brandrow{display:flex;align-items:center;gap:.6rem}.brandmark{flex:none;filter:drop-shadow(0 1px 2px rgba(120,90,30,.25))}