@font-face{font-family:'Geist';src:url(fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}

/* Layout: dark framed page, each section a rounded panel; one light beam in hero and closing CTA */
:root{
  --bg:#08080A; --bg2:#0F0F12; --card:#131316; --card2:#1A1A1E; --card3:#222227;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --text:#F5F5F6; --text2:#A9A9B2; --muted:#6F6F7A; --dim:#7D7D88;
  --gold:#E9C46A; --gold-ink:#16120A; --gold-soft:rgba(233,196,106,.12);
  --peri:#9AA6FF; --peri-soft:rgba(154,166,255,.12); --mint:#5CD6A0; --mint-soft:rgba(92,214,160,.12); --rose:#FF8A7A;
  --shadow:0 30px 60px rgba(0,0,0,.45);
  --display:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --body:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1120px; --ease:cubic-bezier(.22,1,.36,1); --r:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-snap-type:y proximity}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:10px}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.04em;line-height:1.04;font-weight:600;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:999px}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dim{color:var(--dim)}

/* nav */
.nav{position:sticky;top:0;z-index:50;transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(8,8,10,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;letter-spacing:-.01em}
.mark{width:30px;height:30px;border-radius:9px;border:1px solid var(--line2);display:grid;place-items:center;font-size:11.5px;font-weight:700;letter-spacing:0;background:var(--card)}
.links{display:flex;align-items:center;gap:4px}
.links a.opt{text-decoration:none;color:var(--text2);font-size:14px;padding:8px 12px;border-radius:999px;transition:color .2s}
.links a.opt:hover{color:var(--text)}
@media (max-width:820px){.links a.opt{display:none}}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;font:500 14.5px/1 var(--body);text-decoration:none;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.btn:hover{border-color:var(--text2);background:var(--card2)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.primary:hover{background:#fff}
.btn.sm{min-height:36px;padding:0 14px;font-size:13.5px}
.btn svg{width:16px;height:16px;flex-shrink:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--text2);white-space:nowrap;background:var(--card2)}
.chip.gold{border-color:transparent;background:var(--gold-soft);color:var(--gold)}
.chip.peri{border-color:transparent;background:var(--peri-soft);color:var(--peri)}
.chip.mint{border-color:transparent;background:var(--mint-soft);color:var(--mint)}
.eyebrow{display:block;color:var(--text2);font-weight:500;font-size:13.5px;margin-bottom:12px}
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,9vw,120px) 0 clamp(48px,7vw,88px);margin-top:-68px;padding-top:calc(68px + clamp(56px,9vw,120px))}
.beam{position:absolute;pointer-events:none;inset:-30% -25% -30% 35%;background:
  radial-gradient(ellipse 7% 55% at 58% 48%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 16% 70% at 56% 50%,rgba(210,220,255,.55),transparent 70%),
  radial-gradient(ellipse 30% 60% at 48% 55%,rgba(110,130,255,.32),transparent 72%),
  radial-gradient(ellipse 30% 55% at 68% 42%,rgba(255,150,90,.26),transparent 72%);
  filter:blur(26px);transform:rotate(14deg);opacity:.95}
@media (prefers-reduced-motion:no-preference){.beam{animation:beam 9s ease-in-out infinite alternate}}
@keyframes beam{from{transform:rotate(12deg) translateX(0)}to{transform:rotate(17deg) translateX(-3%)}}
.hero .wrap{position:relative}
.status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);padding:6px 12px 6px 10px;border:1px solid var(--line2);border-radius:999px;background:rgba(19,19,22,.7)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.hero h1{font-size:clamp(42px,7.4vw,92px);letter-spacing:-.055em;line-height:.98;margin-top:24px;max-width:15ch}
.hero .lede{color:var(--text2);font-size:clamp(16px,1.5vw,18px);margin-top:24px;max-width:52ch}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.trusted{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:clamp(40px,6vw,64px);color:var(--muted);font-size:13px}
.trusted b{font-weight:600;color:var(--text2);font-size:14.5px;letter-spacing:-.02em}

/* panels */
.sec{padding:clamp(16px,2.5vw,28px) 0}
.panel{border:1px solid var(--line);background:var(--bg2);border-radius:28px;padding:clamp(22px,4vw,44px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,36px)}
.sec-head h2{font-size:clamp(32px,4.4vw,52px)}
.sec-head p{color:var(--text2);margin-top:12px;max-width:52ch;font-size:15px}
.sec-head .aside{color:var(--muted);font-size:13.5px}
.plain{padding:clamp(32px,5vw,56px) 0}

/* about */
.about{display:grid;grid-template-columns:1fr 1.15fr .8fr;gap:16px}
.about > *{min-width:0}
.about .bio{display:flex;flex-direction:column;gap:14px;padding:4px 4px 4px 0}
.about .role{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.about .name{font-size:24px;letter-spacing:-.03em}
.about .loc{display:flex;align-items:center;gap:6px;color:var(--text2);font-size:13.5px}
.about .loc svg{width:14px;height:14px}
.about .bio p{color:var(--text2);font-size:15px;margin-top:auto}
.about .bio .btn{align-self:flex-start}
.portrait{position:relative;border-radius:20px;overflow:hidden;min-height:340px;background:#E8553F}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,8,10,.55))}
.portrait span{position:absolute;left:16px;bottom:14px;z-index:1;font-size:12.5px;color:rgba(255,255,255,.85)}
.stats{display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.stat{padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--line);flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.stat b{font:600 clamp(34px,4vw,44px)/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.stat span{color:var(--text2);font-size:13.5px;margin-top:6px}
@media (max-width:900px){.about{grid-template-columns:1fr 1fr}.about .bio{grid-column:1/-1}.stats{flex-direction:column}}
@media (max-width:560px){.about{grid-template-columns:1fr}.portrait{min-height:0;aspect-ratio:3/4}}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc{padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line);min-width:0}
.svc h3{display:flex;align-items:center;gap:10px;font-size:16.5px;letter-spacing:-.02em}
.ico{width:32px;height:32px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;background:var(--card2);flex-shrink:0}
.ico svg{width:16px;height:16px}
.svc ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px}
.svc li{color:var(--text2);font-size:14px;padding-left:16px;position:relative}
.svc li::before{content:"";position:absolute;left:2px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--muted)}
@media (max-width:820px){.services{grid-template-columns:1fr}}

/* projects */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);background:var(--card);overflow:hidden;text-decoration:none;cursor:pointer;transition:border-color .25s,transform .5s var(--ease);min-width:0;text-align:left}
.proj:hover{border-color:var(--line2);transform:translateY(-4px)}
.proj .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--card2);border-bottom:1px solid var(--line)}
.proj .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.proj .meta{display:flex;justify-content:space-between;align-items:center;gap:10px}
.proj .arr{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;transition:background-color .2s,transform .3s var(--ease)}
.proj .arr svg{width:13px;height:13px}
.proj:hover .arr{background:var(--text);color:var(--bg);transform:rotate(-45deg)}
.proj h3{font-size:18px;letter-spacing:-.025em}
.proj p{color:var(--text2);font-size:14px}
.nda-tag{position:absolute;right:10px;top:10px;z-index:2;font-size:11px;color:var(--text2);background:rgba(8,8,10,.7);border:1px solid var(--line2);border-radius:999px;padding:3px 9px;backdrop-filter:blur(6px)}
@media (max-width:960px){.projects{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.projects{grid-template-columns:1fr}}

/* thumbs */
.th-phones{display:flex;justify-content:center;align-items:flex-end;gap:12px;height:100%;padding:20px 18px 0;background:radial-gradient(circle at 50% 120%,var(--peri-soft),transparent 65%),#16161b}
.th-phones img{width:29%;border-radius:16px 16px 0 0;border:1px solid var(--line2);border-bottom:0;box-shadow:0 20px 40px rgba(0,0,0,.45)}
.th-phones img:nth-child(2){width:32%;transform:translateY(-12px)}
.th-edv{height:100%;background:radial-gradient(circle at 80% 0%,rgba(154,166,255,.18),transparent 60%),#16161b}
.th-edv .edv{inset:18px -60px -60px 18px;font-size:10.5px}
.th-edv .edv-k b{font-size:16px}
.mock{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;gap:10px;font-size:11px;color:var(--text2);background:#16161b}
.mock .bar{height:8px;border-radius:4px;background:var(--card3)}
/* funnel ai */
.m-prompt{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--card3);border:1px solid var(--line2);color:var(--text)}
.m-prompt i{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--peri),var(--rose));flex-shrink:0}
.m-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.m-steps div{border-radius:10px;background:#1d1d22;border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:6px}
.m-steps small{font-size:10px;color:var(--muted)}
.m-steps .img{flex:1;border-radius:6px;background:linear-gradient(135deg,#2a2a31,#202026)}
.m-steps .m-cta{height:12px;border-radius:4px;background:var(--text);opacity:.85}
/* design system */
.m-ds{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1}
.m-ds > div{border-radius:10px;background:#1d1d22;border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:7px}
.sw{display:flex;gap:5px}.sw i{flex:1;height:22px;border-radius:5px}
.m-btns{display:flex;gap:6px;flex-wrap:wrap}.m-btns i{height:18px;border-radius:999px;width:48px;background:var(--text)}.m-btns i:nth-child(2){background:transparent;border:1px solid var(--line2)}.m-btns i:nth-child(3){background:var(--peri);width:30px}
.m-in{height:20px;border-radius:6px;border:1px solid var(--line2)}
.m-tok{font:500 10px/1.5 ui-monospace,Menlo,monospace;color:var(--muted)}
/* contract */
.m-doc{flex:1;border-radius:10px;background:#1d1d22;border:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:7px;position:relative}
.m-doc .bar{height:6px}
.m-doc .hl{height:auto;padding:6px 8px;border-radius:6px;background:rgba(255,138,122,.14);border:1px solid rgba(255,138,122,.35);color:#ffb3a8;font-size:10px}
.m-flag{position:absolute;right:12px;bottom:12px;padding:8px 10px;border-radius:10px;background:var(--card3);border:1px solid var(--line2);color:var(--text);font-size:10.5px;display:flex;gap:6px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.m-flag i{width:8px;height:8px;border-radius:50%;background:var(--rose)}
/* talent site */
.m-site{flex:1;border-radius:10px;background:#1d1d22;border:1px solid var(--line);padding:14px;display:grid;grid-template-columns:1.2fr 1fr;gap:12px;align-items:center}
.m-site h4{font-size:15px;color:var(--text);letter-spacing:-.03em;line-height:1.1}
.m-site .go{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:999px;background:var(--text);color:var(--bg);font-size:10px;font-weight:600}
.m-chart{height:100%;min-height:80px;display:flex;align-items:flex-end;gap:5px}
.m-chart i{flex:1;border-radius:4px 4px 0 0;background:var(--card3)}
.m-chart i:last-child{background:var(--mint)}

/* tools */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tool{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);min-width:0}
.tool .tl{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0}
.tool b{display:block;font-weight:600;font-size:15px;letter-spacing:-.015em}
.tool span{display:block;color:var(--muted);font-size:13px}
.tool > div{min-width:0}
@media (max-width:860px){.tools{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.tools{grid-template-columns:1fr}}

/* results */
.results{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;grid-template-rows:auto auto;gap:14px}
.results > *{min-width:0}
.r-big{grid-row:span 2;padding:24px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.r-big b{font:600 clamp(56px,7vw,84px)/1 var(--display);letter-spacing:-.06em}
.r-big p{color:var(--text2);font-size:15px}
.r-big em{font-style:normal;color:var(--mint);font-size:13.5px}
.r-big .btn{margin-top:auto;align-self:flex-start}
.r-s{padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.r-s b{font:600 40px/1 var(--display);letter-spacing:-.05em}
.r-s p{color:var(--text2);font-size:14px}
.r-s small{color:var(--muted);font-size:12.5px;margin-top:auto}
.r-exp{grid-row:span 2;padding:20px 22px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.r-exp h3{font-size:16px;letter-spacing:-.02em;margin-bottom:10px}
.r-exp ol{list-style:none;margin:0;padding:0}
.r-exp li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--line)}
.r-exp li b{font-weight:600;font-size:14.5px}
.r-exp li span{color:var(--muted);font-size:13px}
.r-exp li time{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;grid-row:span 2;align-self:center}
@media (max-width:960px){.results{grid-template-columns:1fr 1fr}.r-big{grid-row:auto}.r-exp{grid-column:1/-1;grid-row:auto}}
@media (max-width:560px){.results{grid-template-columns:1fr}}

/* faq */
.faq-head{text-align:center;margin:0 auto clamp(28px,4vw,40px)}
.faq-head h2{font-size:clamp(32px,4.4vw,52px)}
.faq-head p{color:var(--text2);margin-top:12px;font-size:15px}
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.faq details{border-radius:16px;background:var(--card);border:1px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:500;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;color:var(--muted);transition:transform .3s var(--ease);flex-shrink:0}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding:0 20px 18px;color:var(--text2);font-size:14.5px;max-width:64ch}
.faq-more{text-align:center;margin-top:28px;color:var(--muted);font-size:13.5px;display:grid;justify-items:center;gap:14px}

/* closing cta */
.cta{position:relative;overflow:hidden;border-radius:28px;border:1px solid var(--line);background:var(--bg2);padding:clamp(28px,5vw,56px)}
.cta .beam{inset:-60% -30% -40% 40%;opacity:.8}
.cta h2{position:relative;font-size:clamp(36px,5.6vw,68px);letter-spacing:-.05em;max-width:14ch}
.cta-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1px solid var(--line2)}
.cta-grid > div{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:0}
.cta-grid small{color:var(--muted);font-size:12.5px}
.mail{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;font-size:clamp(16px,1.8vw,19px);font-weight:500;letter-spacing:-.02em;text-align:left;word-break:break-all}
.mail svg{width:18px;height:18px;flex-shrink:0}
.mail.copied b{color:var(--mint)}
.socials{display:flex;gap:8px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;background:rgba(19,19,22,.6);transition:background-color .2s}
.socials a:hover{background:var(--card3)}
.socials svg{width:16px;height:16px}
@media (max-width:760px){.cta-grid{grid-template-columns:1fr}}
footer{padding:28px 0 40px;color:var(--muted);font-size:13.5px}
.foot{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:20px}
.foot h4{font:500 12.5px var(--body);letter-spacing:0;color:var(--text2);margin-bottom:8px}
.foot a{display:block;text-decoration:none;color:var(--muted);padding:3px 0}
.foot a:hover{color:var(--text)}
.foot .copy{align-self:end;text-align:right}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}.foot .copy{grid-column:1/-1;text-align:left}}
/* case study page */
.case-hero{padding:clamp(28px,5vw,64px) 0 32px}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text2);font-weight:500;font-size:15px}
.back:hover{color:var(--text)}
.back svg{width:16px;height:16px}
.case-hero h1{font-size:clamp(40px,6vw,76px);letter-spacing:-.045em;margin-top:22px;max-width:16ch}
.case-hero .lede{color:var(--text2);font-size:clamp(17px,1.6vw,20px);margin-top:20px;max-width:56ch}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-top:36px}
.facts div{background:var(--card);padding:18px 20px}
.facts small{display:block;color:var(--muted);font-size:13px}
.facts b{display:block;margin-top:4px;font-weight:600;font-size:15.5px}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}}
.cover{position:relative;height:clamp(300px,46vw,560px);border-radius:32px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 70% 0%,var(--peri-soft),transparent 60%),var(--bg2)}
.cover .edv{inset:clamp(20px,4vw,48px) clamp(-40px,-2vw,-20px) -60px clamp(20px,4vw,48px);font-size:13px}
.case-body{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,5vw,72px);padding:clamp(56px,8vw,96px) 0}
.toc{position:sticky;top:96px;align-self:start;display:grid;gap:2px}
.toc a{text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500;padding:8px 12px;border-left:2px solid var(--line);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--text);border-left-color:var(--gold)}
.chapter{padding-bottom:clamp(48px,7vw,88px)}
.chapter + .chapter{border-top:1px solid var(--line);padding-top:clamp(48px,7vw,88px)}
.chapter h2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.035em;max-width:20ch}
.chapter > p{color:var(--text2);font-size:17.5px;margin-top:18px;max-width:64ch}
.chapter > p + p{margin-top:14px}
.callout{margin-top:28px;padding:22px 24px;border-radius:20px;border:1px solid var(--line);background:var(--card);display:grid;gap:4px}
.callout small{color:var(--gold);font-weight:600;font-size:13.5px}
.callout b{font:700 clamp(19px,2vw,24px)/1.3 var(--display);letter-spacing:-.015em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.box{padding:20px;border-radius:20px;border:1px solid var(--line);background:var(--card)}
.box b{display:block;font:700 17px var(--display)}
.box p{color:var(--text2);font-size:15px;margin-top:6px}
.box .big{font:800 40px/1 var(--display);letter-spacing:-.04em;color:var(--text);margin-bottom:10px;display:block}
@media (max-width:900px){.case-body{grid-template-columns:1fr}.toc{display:none}}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.journey{display:flex;gap:8px;overflow-x:auto;margin-top:28px;padding-bottom:6px;scrollbar-width:thin}
.journey div{flex:1 0 128px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-size:14px}
.journey div small{display:block;color:var(--muted);font-size:12px}
.journey div b{display:block;font:700 15.5px var(--display);margin-top:4px}
.journey div.core{border-color:var(--gold);background:var(--gold-soft)}
.journey div.core small{color:var(--gold)}
.checklist{margin-top:28px;max-width:520px;border-radius:24px;border:1px solid var(--line2);background:var(--card);padding:18px;box-shadow:var(--shadow)}
.checklist .hd{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px}
.checklist .hd b{font:700 16px var(--display)}
.checklist .hd small{display:block;color:var(--muted);font-size:12.5px}
.checklist .hd .chip{flex-shrink:0}
.checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.checklist li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--bg2);font-size:14.5px;font-weight:500}
.checklist li .t{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:#fff;flex-shrink:0}
.checklist li .t svg{width:13px;height:13px}
.checklist li.due .t{background:transparent;border:2px solid var(--line2)}
.checklist li span:last-child{margin-left:auto;font-size:12.5px;color:var(--muted)}
.checklist li.due span:last-child{color:var(--gold);font-weight:600}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:clamp(24px,4vw,40px);border-radius:28px;border:1px solid var(--line2);background:var(--card)}
.next h3{font-size:clamp(24px,3vw,34px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .profile{transform:none}
}
.case-body > *,.about-grid > *,.hero-grid > *,.tools > *{min-width:0}

/* project popup */
.proj[data-p]{cursor:pointer}
article.proj[data-p]:hover{border-color:var(--line2);transform:translateY(-4px)}
article.proj[data-p]:hover .more svg{transform:translateX(4px)}
html.pm-open{overflow:hidden}
.pm{width:min(760px,calc(100% - 32px));max-height:min(88vh,900px);padding:0;border:1px solid var(--line2);border-radius:28px;background:var(--card);color:var(--text);box-shadow:var(--shadow);overflow:hidden;display:none;flex-direction:column}
.pm[open]{display:flex;animation:pmIn .35s var(--ease)}
.pm::backdrop{background:rgba(5,8,20,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@keyframes pmIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.pm-count{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pm-count b{color:var(--text);font-weight:600}
.pm-nav{display:flex;gap:8px}
.pm-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background-color .2s}
.pm-btn:hover{border-color:var(--text2)}
.pm-btn svg{width:18px;height:18px}
.pm-body{overflow-y:auto;overscroll-behavior:contain;padding:26px clamp(20px,4vw,40px) 32px;display:flex;flex-direction:column;gap:14px}
.pm-body.swap{animation:pmSwap .3s var(--ease)}
@keyframes pmSwap{from{opacity:0;transform:translateX(var(--dx,12px))}to{opacity:1;transform:none}}
.pm-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pm-meta .kind{color:var(--muted);font-size:13.5px}
.pm-title{font-size:clamp(30px,4.4vw,44px)}
.pm-lede{color:var(--text2);font-size:17px;max-width:60ch}
.pm-body h3{font-size:18px;margin-top:8px;letter-spacing:-.01em}
.pm-body p{max-width:62ch}
.pm-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text2)}
.pm-body ul li::marker{color:var(--gold)}
.pm-stats{display:flex;flex-wrap:wrap;gap:10px}
.pm-stats div{flex:1 1 140px;background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.pm-stats b{display:block;font-family:var(--display);font-size:30px;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.pm-stats span{font-size:13.5px;color:var(--muted)}
.pm-shots{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:calc(-1 * clamp(20px,4vw,40px));padding-inline:clamp(20px,4vw,40px)}
.pm-shots img{width:150px;flex-shrink:0;border-radius:20px;border:1px solid var(--line);scroll-snap-align:start}
.pm-nda{display:flex;gap:10px;align-items:flex-start;background:var(--gold-soft);border-radius:16px;padding:12px 14px;font-size:14.5px;color:var(--text2)}
.pm-nda svg{width:18px;height:18px;flex-shrink:0;color:var(--gold);margin-top:2px}
.pm-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
@media (max-width:600px){
  .pm{width:100%;max-width:100%;max-height:92vh;margin:auto 0 0;border-radius:24px 24px 0 0;border-bottom:0}
  .pm[open]{animation:pmUp .35s var(--ease)}
  .pm-body{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .pm-shots img{width:128px}
}
@keyframes pmUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pm[open],.pm-body.swap{animation:none}}
.edv{position:absolute;inset:22px -40px -40px 22px;border-radius:16px;overflow:hidden;background:#F5F6FA;color:#141833;box-shadow:0 30px 60px rgba(0,0,0,.4);font-size:12px;border:1px solid rgba(255,255,255,.08)}
.edv-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#fff;border-bottom:1px solid #E7E9F1}
.edv-bar i{width:9px;height:9px;border-radius:50%;background:#E3E6EF}
.edv-bar b{margin-left:8px;font:700 12.5px var(--display)}
.edv-main{padding:14px;display:grid;gap:10px}
.edv-k{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.edv-k div{background:#fff;border:1px solid #E7E9F1;border-radius:10px;padding:9px}
.edv-k small{display:block;color:#6A7090;font-size:10.5px}
.edv-k b{font:800 20px/1.2 var(--display)}
.edv-k .w b{color:#B26B00}.edv-k .r b{color:#B3261E}
.edv-t{background:#fff;border:1px solid #E7E9F1;border-radius:12px;overflow:hidden}
.edv-r{display:grid;grid-template-columns:1.4fr 1.6fr .9fr;gap:10px;padding:9px 12px;border-top:1px solid #EEF0F6;align-items:center}
.edv-r:first-child{border-top:0}
.edv-r .nm{display:flex;align-items:center;gap:8px;font-weight:600}
.edv-r .av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:9.5px;font-weight:700;background:#E7EAFB;color:#2E3A8C;flex-shrink:0}
.docs{display:flex;gap:3px}
.docs i{flex:1;height:6px;border-radius:3px;background:#2E8B62}
.docs i.n{background:#E3E6EF}.docs i.w{background:#F0B53A}.docs i.x{background:#E5584A}
.st{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;justify-self:start}
.st.ok{background:#DDF1E7;color:#13502F}.st.due{background:#FBEFD3;color:#7A5200}.st.late{background:#FDE4E1;color:#8C1D16}


/* toolkit section */
.tk-sec{position:relative;overflow:hidden;padding:clamp(64px,9vw,112px) 0;margin:clamp(16px,2.5vw,28px) 0;background:radial-gradient(120% 90% at 50% 0%,#0d0d18 0%,var(--bg) 70%)}
.tk-glow{position:absolute;inset:0;pointer-events:none}
.tk-glow::before{content:"";position:absolute;width:min(760px,90vw);aspect-ratio:1;border-radius:50%;right:max(-280px,-22vw);top:max(-420px,-34vw);border:1px solid rgba(130,120,255,.28);background:radial-gradient(circle at 30% 70%,rgba(98,84,220,.22),rgba(40,34,90,.08) 55%,transparent 70%);box-shadow:-30px 40px 120px rgba(98,84,220,.14),inset 20px -20px 60px rgba(140,130,255,.10)}
.tk-glow::after{content:"";position:absolute;width:560px;height:360px;left:-200px;bottom:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(90,80,200,.22),transparent);filter:blur(10px)}
.tk-sec .wrap{position:relative;max-width:1400px}
.tk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,48px)}
.tk-eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:22px}
.tk-eyebrow::before{content:"";width:28px;height:1px;background:var(--text2)}
.tk-head h2{font-size:clamp(46px,6.4vw,84px);letter-spacing:-.055em;line-height:.95;font-weight:700;text-shadow:0 0 30px rgba(255,255,255,.08)}
.tk-grad{background:linear-gradient(180deg,#E3D9FF 0%,#B9A6FF 60%,#9E86F5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.08em}
.tk-head p{color:var(--text2);font-size:clamp(17px,1.7vw,21px);line-height:1.4;margin-top:22px;max-width:28ch}
.tk-pill{display:inline-flex;align-items:center;gap:12px;padding:12px 20px;border-radius:999px;border:1px solid rgba(170,160,255,.55);color:var(--text);text-decoration:none;font-size:15px;font-weight:500;background:rgba(20,18,40,.5);box-shadow:0 0 0 4px rgba(120,110,255,.06),0 0 24px rgba(120,110,255,.12);transition:background-color .2s,border-color .2s}
.tk-pill:hover{background:rgba(60,50,140,.35);border-color:rgba(190,180,255,.8)}
.tk-pill svg{width:16px;height:16px}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.tk{display:flex;align-items:center;gap:clamp(14px,1.6vw,20px);padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px) clamp(18px,2vw,26px) clamp(16px,2vw,22px);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));border:1px solid rgba(255,255,255,.09);transition:border-color .25s,transform .4s var(--ease),background-color .25s;min-width:0}
.tk:hover{border-color:rgba(170,160,255,.35);transform:translateY(-3px)}
.tk-ic{width:clamp(52px,4.8vw,64px);height:clamp(52px,4.8vw,64px);border-radius:16px;display:grid;place-items:center;flex-shrink:0;color:#fff;font-weight:700;font-size:clamp(24px,2.4vw,30px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -8px 16px rgba(0,0,0,.15),0 10px 24px rgba(0,0,0,.35)}
.tk-ic svg{width:46%;height:46%}
.i-figma{background:linear-gradient(180deg,#2a2a2e,#18181b);border:1px solid rgba(255,255,255,.12)}
.i-figma svg{width:34%;height:50%}
.i-vars{background:linear-gradient(180deg,#A47BFF,#7A4DF2);font-size:clamp(20px,2vw,24px);letter-spacing:.06em}
.i-proto{background:linear-gradient(180deg,#2E9BFF,#0B6FE8)}
.i-research{background:linear-gradient(180deg,#32B576,#1E8A55)}
.i-claude{background:none;overflow:hidden}
.i-claude img{width:100%;height:100%;display:block}
.i-gh{background:linear-gradient(180deg,#2a2a2e,#18181b);border:1px solid rgba(255,255,255,.12)}
.i-gh svg{width:52%;height:52%}
.tk-tx{min-width:0;flex:1}
.tk-tx b{display:block;font-weight:600;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em}
.tk-tx span{display:block;color:var(--text2);font-size:clamp(13.5px,1.1vw,15px);margin-top:4px}
.tk-arr{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0;background:rgba(255,255,255,.02);transition:background-color .2s,color .2s}
.tk-arr svg{width:15px;height:15px}
.tk:hover .tk-arr{background:var(--text);color:var(--bg)}
@media (max-width:960px){.tk-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tk-grid{grid-template-columns:1fr}.tk-head h2{font-size:clamp(44px,13vw,60px)}}
.tk-sec{margin:0}
.tk-sec::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,rgba(8,8,10,0) 22%,rgba(8,8,10,0) 78%,var(--bg) 100%)}
.tk-sec .wrap{z-index:1}
.tk[data-p]{cursor:pointer}
.pm.small{width:min(520px,calc(100% - 32px))}
.tt-head{display:flex;align-items:center;gap:16px}
.tt-head .tk-ic{width:56px;height:56px}
.tt-title{font-size:clamp(26px,3.4vw,32px)}
.tt-use{display:block;color:var(--muted);font-size:14px;margin-top:4px}
@media (max-width:600px){.pm.small{width:100%}}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.15) 45%,rgba(8,8,10,0) 70%),linear-gradient(180deg,rgba(8,8,10,0) 60%,var(--bg) 100%)}
.th-shot{background:#16161b}
.th-shot img{position:absolute;left:14px;top:14px;width:calc(100% + 60px);max-width:none;border-radius:10px;border:1px solid var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.pm-gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.pm-gal figure{margin:0;flex:0 0 88%;scroll-snap-align:start}
.pm-gal img{width:100%;border-radius:12px;border:1px solid var(--line2)}
.pm-gal figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.cover.shot{margin:0;height:auto;background:var(--card);padding:0}
.cover.shot img{width:100%;display:block}
.shot-fig{margin:28px 0 0}
.shot-fig img{width:100%;border-radius:16px;border:1px solid var(--line2);box-shadow:var(--shadow)}
.shot-fig figcaption{font-size:14px;color:var(--muted);margin-top:10px;max-width:64ch}
.pm-body > *{flex-shrink:0}

/* ===== story mode: Intro, About, Skills fill the screen and reveal step by step ===== */
section[id]:not(.story){scroll-margin-top:84px}
.story{min-height:100vh;min-height:100svh;display:flex;align-items:center;scroll-snap-align:start;position:relative}
.story > .wrap{width:100%}
.hero.story{margin-top:-68px;padding:calc(68px + clamp(32px,6vh,72px)) 0 clamp(72px,10vh,110px)}
#about.story{padding:calc(68px + 16px) 0 32px}
#services.story{padding:calc(68px + 16px) 0 40px}
#services .sec-head h2{font-size:clamp(40px,6vw,76px)}
#services .sec-head p{font-size:clamp(15px,1.4vw,18px)}
#services .svc{padding:clamp(20px,2.4vw,30px)}
#services .svc h3{font-size:clamp(17px,1.6vw,20px)}

[data-s]{opacity:0;transform:translateY(32px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.story.in [data-s]{opacity:1;transform:none;filter:none}
.no-js [data-s]{opacity:1;transform:none;filter:none}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;z-index:2;transition:opacity .4s}
.scroll-cue i{width:1px;height:36px;background:linear-gradient(var(--text2),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:-1px;top:-12px;width:3px;height:12px;border-radius:2px;background:var(--text)}
@media (prefers-reduced-motion:no-preference){.scroll-cue i::after{animation:cue 1.8s var(--ease) infinite}}
@keyframes cue{0%{top:-12px;opacity:0}30%{opacity:1}100%{top:36px;opacity:0}}
.past-intro .scroll-cue{opacity:0}

/* progress dots */
.story-dots{position:fixed;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:14px;transition:opacity .4s,transform .4s var(--ease)}
.story-dots a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;color:var(--muted);font-size:12px;flex-direction:row-reverse}
.story-dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--text2);transition:all .35s var(--ease);flex-shrink:0}
.story-dots span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s}
.story-dots a:hover span,.story-dots a.on span{opacity:1;transform:none}
.story-dots a.on{color:var(--text)}
.story-dots a.on i{background:var(--text);border-color:var(--text);height:22px;border-radius:5px}
.out-of-story .story-dots{opacity:0;pointer-events:none;transform:translate(10px,-50%)}

@media (max-width:820px){
  .story-dots{right:max(8px,env(safe-area-inset-right,0px))}
  .story-dots span{display:none}
  .story-dots i{width:6px;height:6px}
  .story-dots a.on i{height:18px}
}
/* compact About so it fits one phone screen */
@media (max-width:560px){
  #about .sec-head .aside{display:none}
  #about .panel{padding:20px}
  .about{grid-template-columns:1fr 1fr;gap:12px}
  .about .bio{grid-column:1/-1;gap:10px}
  .about .bio p{font-size:14px;line-height:1.55}
  .portrait{min-height:0;aspect-ratio:3/4}
  .stats{gap:10px}
  .stat{padding:12px 14px}
  .stat b{font-size:28px}
  .stat span{font-size:12px;margin-top:4px}
  .hero h1{font-size:clamp(40px,11.5vw,56px)}
}
@media (prefers-reduced-motion:reduce){[data-s]{opacity:1;transform:none;filter:none;transition:none}}
/* fit tweaks */
.hero.story h1{font-size:min(clamp(42px,7.4vw,92px),10.5vh)}
.hero.story .trusted{margin-top:clamp(28px,5vh,64px)}
.hero.story .ctas{margin-top:clamp(20px,3.4vh,30px)}
.hero.story .lede{margin-top:clamp(16px,2.6vh,24px)}
@media (max-width:560px){
  .portrait{aspect-ratio:auto;min-height:220px}
  .story-dots{display:none}
  .hero.story h1{font-size:min(clamp(38px,11vw,56px),7.2vh)}
  #services .svc{padding:16px 18px}
  #services .svc ul{margin-top:10px;gap:4px}
  #services .services{gap:10px}
  #services .sec-head{margin-bottom:20px}
}
@media (max-width:560px) and (max-height:760px){
  .about .bio p{font-size:13.5px}
  .about .bio .name{font-size:21px}
  .stat b{font-size:24px}
  #services .svc li{font-size:13px}
}
@media (max-width:560px){
  #about.story{padding:calc(68px + 8px) 0 16px}
  #about .sec-head{margin-bottom:14px!important}
  #about .sec-head h2{font-size:30px}
  .about .role{display:none}
  .stat{padding:10px 12px}
  .stats{gap:8px}
  .about{gap:10px}
}

/* ===== NDA thumbnails: minimal, Lottie-style loops (play only when on screen) ===== */
.thumb .mock *{animation-play-state:paused}
.proj.play .thumb .mock *{animation-play-state:running}
@media (prefers-reduced-motion:no-preference){

/* Funnelish AI: prompt types, steps assemble, CTA shimmers */
[data-p="funnelish"] .m-prompt{overflow:hidden;white-space:nowrap}
[data-p="funnelish"] .typing{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;max-width:0;animation:fType 7s steps(36,end) infinite}
[data-p="funnelish"] .caret{display:inline-block;width:1.5px;height:12px;background:var(--text);margin-left:2px;vertical-align:middle;animation:fCaret 1s steps(1) infinite}
[data-p="funnelish"] .m-prompt i{animation:fSpark 7s var(--ease) infinite}
[data-p="funnelish"] .m-steps div{opacity:0;transform:translateY(10px) scale(.96);animation:fStep 7s var(--ease) infinite}
[data-p="funnelish"] .m-steps div:nth-child(2){animation-delay:.18s}
[data-p="funnelish"] .m-steps div:nth-child(3){animation-delay:.36s}
[data-p="funnelish"] .m-steps .m-cta{position:relative;overflow:hidden}
[data-p="funnelish"] .m-steps .m-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.9) 50%,transparent 80%);transform:translateX(-120%);animation:fShine 7s ease-in-out infinite}
@keyframes fType{0%{max-width:0}30%{max-width:260px}88%{max-width:260px;opacity:1}96%{max-width:260px;opacity:0}100%{max-width:0;opacity:0}}
@keyframes fCaret{50%{opacity:0}}
@keyframes fSpark{0%,30%{transform:none}36%{transform:rotate(90deg) scale(1.2)}44%,100%{transform:rotate(180deg)}}
@keyframes fStep{0%,34%{opacity:0;transform:translateY(10px) scale(.96)}44%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes fShine{0%,55%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}

/* SEVIMA: tokens cycle, components settle, rows fill */
[data-p="sevima"] .sw i{transform-origin:bottom;animation:dsSw 6s var(--ease) infinite}
[data-p="sevima"] .sw i:nth-child(2){animation-delay:.12s}
[data-p="sevima"] .sw i:nth-child(3){animation-delay:.24s}
[data-p="sevima"] .sw i:nth-child(4){animation-delay:.36s}
[data-p="sevima"] .m-btns i{animation:dsBtn 6s var(--ease) infinite}
[data-p="sevima"] .m-btns i:nth-child(2){animation-delay:.15s}
[data-p="sevima"] .m-btns i:nth-child(3){animation-delay:.3s}
[data-p="sevima"] .m-in{position:relative;overflow:hidden}
[data-p="sevima"] .m-in::after{content:"";position:absolute;left:8px;top:5px;width:1.5px;height:9px;background:var(--peri);animation:fCaret 1s steps(1) infinite}
[data-p="sevima"] .m-ds .bar{transform-origin:left;animation:dsRow 6s var(--ease) infinite}
[data-p="sevima"] .m-ds .bar:nth-child(3){animation-delay:.15s}
[data-p="sevima"] .m-ds .bar:nth-child(4){animation-delay:.3s}
@keyframes dsSw{0%,10%{transform:scaleY(.15);opacity:.4}25%,80%{transform:none;opacity:1}95%,100%{transform:scaleY(.15);opacity:.4}}
@keyframes dsBtn{0%,15%{transform:scale(.6);opacity:0}30%,80%{transform:none;opacity:1}95%,100%{transform:scale(.6);opacity:0}}
@keyframes dsRow{0%,30%{transform:scaleX(0)}48%,82%{transform:none}96%,100%{transform:scaleX(0)}}

/* top.legal: AI scans, clause lights up, flag pops */
[data-p="toplegal"] .m-doc{overflow:hidden}
[data-p="toplegal"] .scan{position:absolute;left:0;right:0;top:0;height:28px;background:linear-gradient(180deg,transparent,rgba(154,166,255,.22),transparent);border-bottom:1px solid rgba(154,166,255,.55);animation:lScan 6s ease-in-out infinite;pointer-events:none}
[data-p="toplegal"] .hl{animation:lHl 6s var(--ease) infinite}
[data-p="toplegal"] .m-flag{animation:lFlag 6s var(--ease) infinite}
[data-p="toplegal"] .m-flag i{animation:lDot 1.2s ease-in-out infinite}
@keyframes lScan{0%{transform:translateY(-30px);opacity:0}8%{opacity:1}40%{transform:translateY(150px);opacity:1}48%,100%{transform:translateY(150px);opacity:0}}
@keyframes lHl{0%,28%{background:transparent;border-color:transparent;color:var(--text2)}38%,88%{background:rgba(255,138,122,.14);border-color:rgba(255,138,122,.35);color:#ffb3a8}100%{background:transparent;border-color:transparent;color:var(--text2)}}
@keyframes lFlag{0%,40%{opacity:0;transform:translateY(12px) scale(.9)}48%{opacity:1;transform:translateY(-2px) scale(1.02)}52%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(6px)}}
@keyframes lDot{50%{box-shadow:0 0 0 5px rgba(255,138,122,0)}0%{box-shadow:0 0 0 0 rgba(255,138,122,.6)}}

/* Talentvis: bars grow, last one jumps, badge + CTA pulse */
[data-p="talentvis"] .m-chart{position:relative}
[data-p="talentvis"] .m-chart i{transform-origin:bottom;animation:tBar 6s var(--ease) infinite}
[data-p="talentvis"] .m-chart i:nth-child(3){animation-delay:.1s}
[data-p="talentvis"] .m-chart i:nth-child(4){animation-delay:.2s}
[data-p="talentvis"] .m-chart i:nth-child(5){animation-delay:.3s}
[data-p="talentvis"] .m-chart i:last-child{animation:tBarBig 6s var(--ease) infinite;animation-delay:.4s}
[data-p="talentvis"] .m-badge{position:absolute;left:0;top:4px;font-size:10px;font-weight:600;color:#0b2a1d;background:var(--mint);border-radius:999px;padding:2px 7px;animation:tBadge 6s var(--ease) infinite}
[data-p="talentvis"] .go{animation:tGo 6s var(--ease) infinite}
@keyframes tBar{0%,8%{transform:scaleY(0)}28%,85%{transform:none}98%,100%{transform:scaleY(0)}}
@keyframes tBarBig{0%,8%{transform:scaleY(0)}30%{transform:scaleY(1.08)}36%,85%{transform:none}98%,100%{transform:scaleY(0)}}
@keyframes tBadge{0%,34%{opacity:0;transform:translateY(6px) scale(.8)}42%{opacity:1;transform:scale(1.08)}46%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes tGo{0%,46%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}52%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}64%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}
}
.thumb .mock{padding-top:46px}
.m-prompt{min-width:0;max-width:100%}
.m-steps{min-width:0}
.m-steps div{min-width:0}
[data-p="sevima"] .m-ds > div{padding:8px 10px;gap:5px}[data-p="sevima"] .sw i{height:18px}

/* NDA thumbnails: faint grid + dots, fading toward the edges */
.thumb .mock{background:#141418}
.thumb .mock::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 0 0,rgba(255,255,255,.16) 1px,transparent 1.4px),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,20px 20px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 75% at 50% 50%,#000 40%,transparent 100%)}
.thumb .mock > *{position:relative;z-index:1}
.thumb .mock > .scan{position:absolute}

/* ===== Design shots carousel ===== */
#shots{padding-bottom:clamp(24px,4vw,48px)}
.sh-nav{display:flex;gap:8px}
.sh-track{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px max(16px,calc((100vw - var(--max))/2 + 16px)) 12px;scroll-padding-inline:max(16px,calc((100vw - var(--max))/2 + 16px));
  scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.sh-track::-webkit-scrollbar{display:none}
.sh-track.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.sh-track:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.shot{flex:0 0 auto;height:clamp(240px,34vw,420px);border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--card);scroll-snap-align:start;padding:0;cursor:zoom-in;position:relative;transition:transform .5s var(--ease),border-color .25s}
.shot:hover{transform:translateY(-4px);border-color:var(--line2)}
.shot img{height:100%;width:auto;max-width:none;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.shot.sk{width:clamp(200px,28vw,340px);background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);background-size:200% 100%;animation:shSk 1.4s linear infinite}
@keyframes shSk{to{background-position:-200% 0}}
@media (max-width:600px){.shot{height:min(62vw,320px)}.sh-nav{display:none}}

.lb{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(5,6,10,.92);display:none;align-items:center;justify-content:center}
.lb[open]{display:flex;animation:pmIn .3s var(--ease)}
.lb::backdrop{background:transparent}
.lb img{max-width:min(92vw,1600px);max-height:84vh;width:auto;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.lb-close{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:max(16px,env(safe-area-inset-left,0px))}.lb-next{right:max(16px,env(safe-area-inset-right,0px))}
.lb-count{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);color:var(--text2);font-size:13px;font-variant-numeric:tabular-nums}
@media (max-width:600px){.lb-prev,.lb-next{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:none}}
.shot.sk img{opacity:0}
.shot img{transition:opacity .4s}
/* shots: one fixed 4:3 ratio */
.shot,.shot.sk{aspect-ratio:4/3;width:auto;height:clamp(240px,30vw,380px)}
.shot img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.shot,.shot.sk{height:auto;width:82vw}}

/* gap fix: only the hero fills the screen; About and Skills size to their content */
#about.story,#services.story{min-height:0;display:block;padding:clamp(56px,8vh,96px) 0}
#about.story{padding-top:clamp(40px,6vh,72px)}
.hero.story{min-height:min(100svh,920px)}
@media (max-width:560px){#about.story,#services.story{padding:48px 0}}

/* story dots: one centred column, labels float left so nothing shifts */
.story-dots{gap:12px;align-items:center;padding:10px 6px;border-radius:999px;background:rgba(19,19,22,.55);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story-dots a{position:relative;width:14px;height:14px;display:grid;place-items:center;flex-direction:row}
.story-dots a.on{height:26px}
.story-dots i{width:6px;height:6px;border:0;background:var(--muted);border-radius:999px;transition:height .35s var(--ease),background-color .25s}
.story-dots a:hover i{background:var(--text2)}
.story-dots a.on i{height:22px;width:6px;background:var(--text);border-radius:999px}
.story-dots span{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:12px;color:var(--text);background:rgba(19,19,22,.8);border:1px solid var(--line);padding:3px 9px;border-radius:999px;pointer-events:none}
.story-dots a:hover span,.story-dots a.on span{transform:translate(0,-50%)}
.story-dots a.on span{opacity:0}
.story-dots a:hover span{opacity:1}
.story-dots a:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:999px}

/* story progress v3: a thin rail with a gliding thumb, no box */
.story-dots{right:max(22px,env(safe-area-inset-right,0px));padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:0;width:20px;height:64px;display:block}
.sd-track{position:absolute;left:50%;top:0;width:2px;height:64px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.sd-thumb{position:absolute;left:0;top:0;width:2px;height:20px;border-radius:2px;background:var(--text);box-shadow:0 0 10px rgba(255,255,255,.35);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.story-dots a{position:absolute;left:0;width:20px;height:22px;display:block;border-radius:6px}
.story-dots a[data-for="intro"]{top:-1px}
.story-dots a[data-for="about"]{top:21px}
.story-dots a[data-for="services"]{top:43px}
.story-dots a i{display:none}
.story-dots a.on,.story-dots a{height:22px}
.story-dots span{right:calc(100% + 10px);opacity:0;font-size:11.5px;letter-spacing:.02em}
.story-dots a:hover span{opacity:1;transform:translate(0,-50%)}
.story-dots a.on span{opacity:0}
.story-dots:hover a.on span{opacity:.0}
@media (max-width:820px){.story-dots{right:max(10px,env(safe-area-inset-right,0px))}}
@media (prefers-reduced-motion:reduce){.sd-thumb{transition:none}}

/* section reveal: whole section waits, then its parts glide in */
.reveal [data-s]{opacity:0;transform:translateY(36px);filter:blur(8px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.reveal.in [data-s]{opacity:1;transform:none;filter:none}
.reveal .proj[data-s]:hover{transform:translateY(-4px)}
.reveal .tk[data-s]:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.reveal [data-s]{opacity:1;transform:none;filter:none;transition:none}}
.hero.story h1{max-width:17ch}

/* hero: minimal constellation instead of the photo */
.hero-bg.stars{background:radial-gradient(ellipse 70% 60% at 72% 38%,rgba(120,130,255,.07),transparent 70%)}
.hero-bg.stars canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg.stars::after{background:linear-gradient(90deg,rgba(8,8,10,.6) 0%,rgba(8,8,10,.15) 45%,rgba(8,8,10,0) 70%),linear-gradient(180deg,rgba(8,8,10,0) 65%,var(--bg) 100%)}
@media (max-width:700px){.hero-bg.stars{background:radial-gradient(ellipse 90% 50% at 60% 30%,rgba(120,130,255,.08),transparent 70%);opacity:1}}
@media (max-width:820px){.story-dots{display:none}}

main,html{overflow-x:clip}

/* ===== background accent: a soft, blurred constellation behind each section (static, no JS) ===== */
:root{--cA:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cpath d='M201 74L263 45 M201 74L179 159 M61 213L52 203 M61 213L105 196 M52 203L86 171 M263 45L392 42 M145 246L105 196 M343 163L348 183 M343 163L378 154 M101 62L55 41 M477 85L510 133 M477 85L428 124 M378 154L401 174 M401 174L348 183 M348 183L342 209 M465 272L394 295 M465 272L490 360 M342 209L353 229 M86 171L105 196 M394 295L353 229 M490 360L382 378' stroke='%23b9c0ff' stroke-opacity='.35' stroke-width='.8' fill='none'/%3E%3Ccircle cx='201' cy='74' r='1.9' fill='%23fff'/%3E%3Ccircle cx='61' cy='213' r='1.5' fill='%23fff'/%3E%3Ccircle cx='52' cy='203' r='1.1' fill='%23fff'/%3E%3Ccircle cx='263' cy='45' r='1.1' fill='%23fff'/%3E%3Ccircle cx='258' cy='318' r='1.2' fill='%23fff'/%3E%3Ccircle cx='145' cy='246' r='2.3' fill='%23fff'/%3E%3Ccircle cx='343' cy='163' r='2.4' fill='%23fff'/%3E%3Ccircle cx='46' cy='329' r='1.4' fill='%23fff'/%3E%3Ccircle cx='101' cy='62' r='1.4' fill='%23fff'/%3E%3Ccircle cx='477' cy='85' r='1.8' fill='%23fff'/%3E%3Ccircle cx='378' cy='154' r='1.8' fill='%23fff'/%3E%3Ccircle cx='55' cy='41' r='1.3' fill='%23fff'/%3E%3Ccircle cx='401' cy='174' r='1.4' fill='%23fff'/%3E%3Ccircle cx='348' cy='183' r='1.4' fill='%23fff'/%3E%3Ccircle cx='465' cy='272' r='1.3' fill='%23fff'/%3E%3Ccircle cx='342' cy='209' r='2.2' fill='%23fff'/%3E%3Ccircle cx='428' cy='124' r='2.4' fill='%23fff'/%3E%3Ccircle cx='86' cy='171' r='2.1' fill='%23fff'/%3E%3Ccircle cx='105' cy='196' r='1.1' fill='%23fff'/%3E%3Ccircle cx='394' cy='295' r='1.8' fill='%23fff'/%3E%3Ccircle cx='510' cy='133' r='2.0' fill='%23fff'/%3E%3Ccircle cx='353' cy='229' r='1.6' fill='%23fff'/%3E%3Ccircle cx='490' cy='360' r='1.7' fill='%23fff'/%3E%3Ccircle cx='392' cy='42' r='2.0' fill='%23fff'/%3E%3Ccircle cx='382' cy='378' r='2.2' fill='%23fff'/%3E%3Ccircle cx='179' cy='159' r='1.9' fill='%23fff'/%3E%3C/svg%3E");--cB:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Cpath d='M112 268L152 301 M112 268L89 191 M288 98L299 62 M288 98L329 143 M472 204L447 229 M472 204L539 145 M152 21L125 33 M152 21L121 81 M348 45L365 32 M348 45L299 62 M150 104L121 81 M150 104L125 33 M579 286L563 342 M579 286L576 199 M365 32L299 62 M90 354L133 352 M90 354L152 301 M329 143L249 151 M125 33L121 81 M152 301L133 352 M447 229L361 220 M35 54L121 81 M576 199L539 145 M328 289L361 220' stroke='%23b9c0ff' stroke-opacity='.35' stroke-width='.8' fill='none'/%3E%3Ccircle cx='112' cy='268' r='1.9' fill='%23fff'/%3E%3Ccircle cx='288' cy='98' r='2.1' fill='%23fff'/%3E%3Ccircle cx='472' cy='204' r='1.7' fill='%23fff'/%3E%3Ccircle cx='152' cy='21' r='1.5' fill='%23fff'/%3E%3Ccircle cx='348' cy='45' r='2.1' fill='%23fff'/%3E%3Ccircle cx='150' cy='104' r='1.1' fill='%23fff'/%3E%3Ccircle cx='579' cy='286' r='2.2' fill='%23fff'/%3E%3Ccircle cx='365' cy='32' r='1.5' fill='%23fff'/%3E%3Ccircle cx='299' cy='62' r='2.3' fill='%23fff'/%3E%3Ccircle cx='226' cy='76' r='2.1' fill='%23fff'/%3E%3Ccircle cx='90' cy='354' r='1.6' fill='%23fff'/%3E%3Ccircle cx='329' cy='143' r='1.7' fill='%23fff'/%3E%3Ccircle cx='125' cy='33' r='2.2' fill='%23fff'/%3E%3Ccircle cx='152' cy='301' r='1.3' fill='%23fff'/%3E%3Ccircle cx='563' cy='342' r='2.1' fill='%23fff'/%3E%3Ccircle cx='447' cy='229' r='2.0' fill='%23fff'/%3E%3Ccircle cx='89' cy='191' r='2.2' fill='%23fff'/%3E%3Ccircle cx='133' cy='352' r='2.2' fill='%23fff'/%3E%3Ccircle cx='249' cy='151' r='1.6' fill='%23fff'/%3E%3Ccircle cx='236' cy='378' r='1.5' fill='%23fff'/%3E%3Ccircle cx='35' cy='54' r='2.0' fill='%23fff'/%3E%3Ccircle cx='576' cy='199' r='1.7' fill='%23fff'/%3E%3Ccircle cx='328' cy='289' r='1.3' fill='%23fff'/%3E%3Ccircle cx='361' cy='220' r='1.9' fill='%23fff'/%3E%3Ccircle cx='121' cy='81' r='1.5' fill='%23fff'/%3E%3Ccircle cx='539' cy='145' r='1.8' fill='%23fff'/%3E%3C/svg%3E")}
#services,#work,#shots,#results,#faq,#contact{position:relative;isolation:isolate}
#services::before,#work::before,#shots::before,#results::before,#faq::before,#contact::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(640px,90vw);aspect-ratio:3/2;background:var(--cA) no-repeat center/contain;filter:blur(1.2px) drop-shadow(0 0 6px rgba(170,180,255,.5));opacity:.6;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent);mask-image:radial-gradient(closest-side,#000 35%,transparent)}
#services::before{right:-6%;top:4%}
#work::before{left:-10%;top:-4%;background-image:var(--cB)}
#shots::before{right:-8%;top:-6%}
#results::before{right:-10%;bottom:-6%;background-image:var(--cB)}
#faq::before{left:-8%;top:10%}
#contact::before{right:2%;top:-10%;background-image:var(--cB);opacity:.3}
@media (max-width:700px){#services::before,#work::before,#shots::before,#results::before,#faq::before,#contact::before{opacity:.25;width:110vw}}

/* hero: remove gradient overlays that caused visible banding on dark screens */
.hero-bg.stars{background:none}
.hero-bg.stars::after{background:linear-gradient(180deg,transparent 0%,transparent 78%,var(--bg) 100%)}
@media (max-width:700px){.hero-bg.stars{background:none}}
/* no overlay gradients at all in the hero: fading is done inside the canvas */
.hero-bg.stars::after{content:none;display:none}

/* ===== Design shots v2: framed cards with captions ===== */
.sh-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,44px)}
.sh-head h2{font-size:clamp(44px,6vw,80px);letter-spacing:-.055em;line-height:.95;font-weight:700}
.sh-head p{color:var(--text2);font-size:clamp(16px,1.5vw,19px);margin-top:16px;max-width:40ch}
.sh-head .tk-eyebrow{margin-bottom:18px}
.sh-nav .pm-btn{width:52px;height:52px;background:rgba(255,255,255,.03)}
.sh-track{gap:clamp(16px,2vw,28px);align-items:stretch}
.sh-card{flex:0 0 auto;width:clamp(290px,31vw,520px);scroll-snap-align:start;display:flex;flex-direction:column;gap:18px;position:relative;padding-right:clamp(16px,2vw,28px);border-right:1px solid var(--line)}
.sh-card:last-child{border-right:0}
.sh-card .shot,.sh-card .shot.sk{width:100%;height:auto;aspect-ratio:4/3;padding:8px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.sh-card .shot img{border-radius:12px;width:100%;height:100%;object-fit:cover}
.sh-card .shot:hover{transform:translateY(-4px)}
.sh-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:0 4px}
.sh-cap > div{min-width:0}
.sh-cap .chip{background:transparent;border-color:var(--line2);color:var(--text2)}
.sh-cap h3{font-size:clamp(19px,1.7vw,24px);letter-spacing:-.03em;margin-top:12px}
.sh-cap p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:38ch}
.sh-open{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background-color .2s,color .2s}
.sh-open:hover{background:var(--text);color:var(--bg)}
.sh-open svg{width:16px;height:16px}
@media (max-width:600px){.sh-card{width:84vw;border-right:0;padding-right:0}.sh-head h2{font-size:clamp(42px,12vw,56px)}}

/* ===== page aura: deep navy glow on black, one light SVG with built-in grain (prevents banding) ===== */
html{background:var(--bg)}
body{background:transparent}
.bg-aura{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#08080a url(bg-aura.svg) center/cover no-repeat}
.tk-sec{background:transparent}
/* tools: let the page aura show through, no own glow or black fades */
.tk-sec::after,.tk-glow{display:none}
#tools::before{display:none}
.tk-sec .wrap{max-width:var(--max)}
/* tools: faint dotted square grid behind the content, fading at the edges */
.tk-sec .wrap{position:relative;isolation:isolate}
.tk-sec .wrap::before{content:"";position:absolute;inset:-40px -24px;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 0 0,rgba(255,255,255,.14) 1px,transparent 1.4px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px,28px 28px,28px 28px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 100%)}
/* cosmic headings: plain label above, artistic title below */
.sec-head .tk-eyebrow,.faq-head .tk-eyebrow{margin-bottom:14px}
.faq-head .tk-eyebrow{justify-content:center}
.faq-head .tk-eyebrow::before{display:none}
#about .sec-head{align-items:flex-end}

/* popup: simple before/after dot flow for NDA cases */
.flow{margin:6px 0 4px;padding:16px 14px 10px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.flow svg{width:100%;height:auto;display:block;overflow:visible}
.flow figcaption{font-size:12px;color:var(--muted);margin-top:4px}
.fl-k{font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)}
.fl-k.after{fill:#b9a6ff}
.fl-line{stroke:rgba(255,255,255,.14);stroke-width:1.2;stroke-dasharray:3 4}
.fl-line.after{stroke:rgba(185,166,255,.55);stroke-dasharray:none;stroke-width:1.6}
.fl-dot.before{fill:var(--card);stroke:rgba(255,255,255,.35);stroke-width:1.4}
.fl-dot.after{fill:#c9bcff}
.fl-halo{fill:rgba(170,150,255,.18)}
.fl-t{font:400 11.5px var(--body);fill:var(--muted)}
.fl-t.after{fill:var(--text2)}
.fl-arrow{fill:none;stroke:rgba(185,166,255,.6);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .pm-body .fl-dot.after,.pm-body .fl-halo{animation:flIn .6s var(--ease) both}
  .pm-body .fl-line.after{stroke-dasharray:600;stroke-dashoffset:600;animation:flLine 1s .1s var(--ease) forwards}
}
@keyframes flIn{from{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center}to{opacity:1}}
@keyframes flLine{to{stroke-dashoffset:0}}
@media (max-width:600px){.flow{overflow-x:auto;-webkit-overflow-scrolling:touch}.flow svg{min-width:600px}.flow figcaption{position:sticky;left:0}}
/* constellation flow */
.fl-dust{fill:#fff;opacity:.18}
.fl-dot.before{fill:rgba(255,255,255,.45);stroke:none}
.fl-frag{stroke:rgba(255,255,255,.18);stroke-width:1;stroke-dasharray:2 4;fill:none}
.fl-line.after{fill:none;stroke:rgba(200,188,255,.55);stroke-width:1.2;stroke-dasharray:none}
.fl-spark{fill:#e6deff;filter:drop-shadow(0 0 4px rgba(180,160,255,.9))}
.fl-dot.after{fill:#fff}
.fl-halo{fill:rgba(170,150,255,.16)}
.fl-k{font-size:10.5px}

@keyframes flTw{50%{opacity:.55}}
.fl-line.before{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.3;stroke-dasharray:5 6;stroke-linecap:round}
.fl-dot.before{fill:rgba(255,255,255,.7)}

/* flow animation on popup open (slow) */
@media (prefers-reduced-motion:no-preference){
  .pm-body .fl-dot.before,.pm-body .fl-t{opacity:0;animation:flFade 1.1s var(--ease) calc(var(--d,0s) * 2.2) forwards}
  .pm-body .fl-line.before{opacity:0;animation:flFade 1.2s .2s forwards,flDash 6s linear infinite}
  .pm-body .fl-line.after{stroke-dasharray:800;stroke-dashoffset:800;animation:flLine 2.8s 2s cubic-bezier(.45,0,.2,1) forwards}
  .pm-body .fl-halo,.pm-body .fl-dot.after{opacity:0;transform-box:fill-box;transform-origin:center;animation:flPop 1.1s var(--ease) calc(var(--d,0s) * 2.2) forwards}
  .pm-body .fl-spark{opacity:0;transform-box:fill-box;transform-origin:center;animation:flPop 1.1s var(--ease) calc(var(--d,0s) * 2.2) forwards,flTw 4s calc(var(--d,0s) * 2.2 + 1.4s) ease-in-out infinite}
  .pm-body .fl-dust{animation:flTw 5s ease-in-out infinite}
  .pm-body .fl-dust:nth-child(3n){animation-delay:1.6s}.pm-body .fl-dust:nth-child(3n+1){animation-delay:3.2s}
}
@keyframes flFade{to{opacity:1}}
@keyframes flDash{to{stroke-dashoffset:-22}}
@keyframes flPop{0%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes flTw{50%{opacity:.45}}

/* hero: abstract faceted ridgelines as a light accent, with parallax */
.mtn{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,28vh,280px);pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.mtn .m{position:absolute;left:-3%;width:106%;bottom:0;height:100%;display:block;overflow:visible;will-change:transform}
.mtn .a{fill:url(#ma)}
.mtn .l{fill:none;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mtn .m0 .l{stroke:rgba(165,175,255,.16);stroke-width:1}
.mtn .m1 .l{stroke:rgba(165,175,255,.26);stroke-width:1;stroke-dasharray:3 5}
.mtn .m2 .l{stroke:rgba(190,195,255,.42);stroke-width:1.2}
.mtn .m1 .a{opacity:.6}.mtn .m2 .a{opacity:.35}
.mtn .d circle{fill:#dfe2ff;filter:drop-shadow(0 0 4px rgba(170,180,255,.9))}
.mtn .m1 .d circle{opacity:.55}
.mtn::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,rgba(8,8,10,0),var(--bg))}
.hero .wrap,.hero .scroll-cue{z-index:1}
@media (max-width:700px){.mtn{height:clamp(120px,20vh,180px);-webkit-mask-image:none;mask-image:none}}

/* Talentvis thumbnail v2: before -> after redesign, click "Join now", Gen Z sign-ups rise +40% (8s loop) */
.m-tv{flex:1;min-height:0;display:grid;grid-template-columns:1.65fr 1fr;gap:8px}
.tv-win{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:10px;background:#1b1b20;border:1px solid var(--line);overflow:hidden}
.tv-bar{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);background:#18181c}
.tv-bar i{width:6px;height:6px;border-radius:50%;background:var(--card3)}
.tv-bar span{margin-left:6px;font-size:9px;color:var(--text3,#77777f);background:#111114;border-radius:4px;padding:1px 8px}
.tv-page{position:relative;flex:1;min-height:0}
.tv-old,.tv-new{position:absolute;inset:0;padding:9px 12px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.tv-old .bar{height:7px;background:#2a2a30}
.tv-boxes{display:flex;gap:5px;margin-top:auto}.tv-boxes i{flex:1;height:22px;border-radius:4px;background:#25252a}
.tv-new{background:linear-gradient(135deg,#1e2140,#1b1b20 70%);clip-path:inset(0 100% 0 0)}
.tv-lbl{align-self:flex-start;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:#2a2a30;color:var(--text2)}
.tv-lbl.on{background:var(--mint-soft);color:var(--mint)}
.tv-new h4{font-size:13px;line-height:1.08;letter-spacing:-.03em;color:var(--text);max-width:16ch;margin:0}
.tv-new p{font-size:9.5px;margin:0;color:var(--text2)}
.tv-cta{position:relative;align-self:flex-start;margin-top:2px}
.tv-go{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--text);color:var(--bg);font-size:10px;font-weight:600}
.tv-cur{position:absolute;left:68%;top:55%;width:14px;height:14px;opacity:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.tv-cur path{fill:#fff;stroke:#111;stroke-width:1}
.tv-stat{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:10px;border-radius:10px;background:#1b1b20;border:1px solid var(--line)}
.tv-stat small{display:block;font-size:9px;color:var(--text2)}
.tv-stat b{display:block;margin-top:2px;font-size:22px;line-height:1.1;color:var(--mint);letter-spacing:-.02em}
.tv-stat svg{width:100%;height:auto;overflow:visible}
.tv-stat path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tv-base{stroke:#3a3a42;stroke-width:2.4}
.tv-line{stroke:var(--mint);stroke-width:3;stroke-dasharray:100;stroke-dashoffset:100}
.tv-dot{fill:var(--mint);opacity:0}
[data-p="talentvis"] .tv-new{animation:tvWipe 8s var(--ease) infinite}
[data-p="talentvis"] .tv-cur{animation:tvCur 8s var(--ease) infinite}
[data-p="talentvis"] .tv-go{animation:tvGo 8s var(--ease) infinite}
[data-p="talentvis"] .tv-line{animation:tvLine 8s var(--ease) infinite}
[data-p="talentvis"] .tv-dot{animation:tvDot 8s var(--ease) infinite}
[data-p="talentvis"] .tv-stat b{animation:tvNum 8s var(--ease) infinite}
@keyframes tvWipe{0%,12%{clip-path:inset(0 100% 0 0)}24%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes tvCur{0%,26%{opacity:0;transform:translate(110px,10px)}30%{opacity:1;transform:translate(110px,10px)}40%{opacity:1;transform:translate(0,0)}43%{transform:translate(0,0) scale(.85)}46%,80%{opacity:1;transform:translate(0,0)}86%,100%{opacity:0;transform:translate(0,0)}}
@keyframes tvGo{0%,42%{transform:none;box-shadow:0 0 0 0 rgba(255,255,255,0)}44%{transform:scale(.94);box-shadow:0 0 0 0 rgba(255,255,255,.55)}52%{transform:none;box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{transform:none}}
@keyframes tvLine{0%,46%{stroke-dashoffset:100}66%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
@keyframes tvDot{0%,64%{opacity:0;transform:scale(.4)}68%{opacity:1;transform:scale(1.5)}72%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes tvNum{0%,62%{opacity:.25;transform:translateY(3px)}68%{opacity:1;transform:scale(1.12)}72%,92%{opacity:1;transform:none}100%{opacity:.25}}
.tv-dot{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){[data-p="talentvis"] .tv-new{clip-path:none}[data-p="talentvis"] .tv-line{stroke-dashoffset:0}[data-p="talentvis"] .tv-dot{opacity:1}}

/* ===== navigation v2: fixed on every screen; floating glass bar on desktop, hamburger + full panel on mobile ===== */
body{padding-top:68px}
.nav{position:fixed;left:0;right:0;top:0;background:transparent!important;border-bottom:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.nav .wrap{position:relative;transition:height .35s var(--ease),padding .35s var(--ease),margin-top .35s var(--ease),background-color .35s,border-color .35s,box-shadow .35s;border:1px solid transparent;border-radius:999px}
.nav.solid .wrap{height:56px;margin-top:8px;padding-left:10px;padding-right:8px;background:rgba(16,16,20,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-color:rgba(255,255,255,.08);box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.nav.solid .logo .mark{width:28px;height:28px}
.links a.opt{position:relative}
.links a.opt.on{color:var(--text);background:rgba(255,255,255,.07)}
.menu-btn{display:none}
.m-menu{display:none}
@media (max-width:820px){
  .links .btn.sm{display:none}
  .nav .wrap{height:60px}
  .nav.solid .wrap{height:52px;margin:6px 10px 0;padding-left:8px;padding-right:6px;width:auto;background:rgba(16,16,20,.88)}
  .menu-btn{display:grid;place-items:center;align-content:center;gap:5px;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;position:relative;z-index:2}
  .m-menu{display:flex;position:fixed;inset:0;z-index:1;flex-direction:column;padding:88px 24px calc(28px + env(safe-area-inset-bottom));background:rgba(8,8,10,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
  .m-menu[hidden]{display:flex}
  .nav.open .m-menu{opacity:1;visibility:visible;transition:opacity .3s}
  .m-menu nav{display:flex;flex-direction:column;border-top:1px solid var(--line)}
  .m-menu nav a{display:flex;justify-content:space-between;align-items:center;padding:16px 2px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-size:26px;font-weight:500;letter-spacing:-.03em;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease);transition-delay:calc(var(--i)*40ms)}
  .m-menu nav a::after{content:"";width:8px;height:8px;border-top:1.5px solid var(--text3,#77777f);border-right:1.5px solid var(--text3,#77777f);transform:rotate(45deg)}
  .nav.open .m-menu nav a{opacity:1;transform:none}
  .m-cta-btn{margin-top:auto;justify-content:center;width:100%}
  .m-mail{margin:14px 0 0;text-align:center;font-size:13px;color:var(--text2)}
  .nav.open .wrap{background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .nav .wrap > .logo,.nav .wrap > .links{position:relative;z-index:2}
  html.menu-open,html.menu-open body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.nav .wrap,.m-menu,.m-menu nav a{transition:none}}
html{scroll-padding-top:76px}
/* hamburger v2: pill with label, two uneven lines that morph into an X */
@media (max-width:820px){
  .menu-btn{display:inline-flex;align-items:center;gap:10px;width:auto;height:38px;padding:0 8px 0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);font:500 13px/1 var(--body);letter-spacing:-.01em;color:var(--text);place-items:center;align-content:normal;justify-content:center;transition:background-color .25s,border-color .25s}
  .menu-btn:active{background:rgba(255,255,255,.1)}
  .mb-t{position:relative;display:block;height:14px;overflow:hidden;font-weight:500}
  .mb-t i{display:block;font-style:normal;line-height:14px;transition:transform .4s var(--ease)}
  .menu-btn[aria-expanded="true"] .mb-t i{transform:translateY(-14px)}
  .mb-ic{position:relative;display:block;width:24px;height:24px;border-radius:50%;background:var(--text)}
  .mb-ic span{position:absolute;left:7px;height:1.6px;border-radius:2px;background:var(--bg);transition:transform .4s var(--ease),width .4s var(--ease),top .4s var(--ease)}
  .mb-ic span:first-child{top:9px;width:10px}
  .mb-ic span:last-child{top:13.4px;width:7px}
  .menu-btn[aria-expanded="true"] .mb-ic span{top:11.2px;width:10px}
  .menu-btn[aria-expanded="true"] .mb-ic span:first-child{transform:rotate(45deg)}
  .menu-btn[aria-expanded="true"] .mb-ic span:last-child{transform:rotate(-45deg)}
}
/* logo: square mark with the signature "A", then the signature name */
.logo{gap:10px}
.mark.mark-a{width:34px;height:34px;border-radius:10px;transition:width .35s var(--ease),height .35s var(--ease)}
.mark.mark-a img{width:72%;height:72%;display:block}
.logo-name{display:block;height:30px;width:auto;transition:height .35s var(--ease),opacity .2s}
.logo:hover .logo-name{opacity:.85}
.nav.solid .mark.mark-a{width:30px;height:30px}
.nav.solid .logo-name{height:27px}
@media (max-width:820px){.mark.mark-a{width:32px;height:32px}.logo-name{height:27px}.nav.solid .mark.mark-a{width:28px;height:28px}.nav.solid .logo-name{height:25px}}
/* popup video (Funnelish Smart Payment Routing) */
.pm-video{margin:14px 0 22px}
.pm-video video{display:block;width:100%;height:auto;aspect-ratio:1280/860;border-radius:14px;border:1px solid var(--line);background:#f7f8fb}
.pm-video figcaption{margin-top:10px;font-size:13px;color:var(--text2)}
.pm-video figcaption a{color:var(--text);text-underline-offset:3px}

/* ===== Funnelish AI overview: low-fidelity recreated product loop (14s) =====
   1 describe the product -> 2 AI plans and builds 3 pages -> 3 published -> 4 edit with AI */
.fa{container-type:inline-size;width:100%;--fa-t:14s}
.thumb .mock .fa{flex:1;min-height:0;display:flex;align-items:center}
.fa-win{width:100%;aspect-ratio:16/10;display:flex;flex-direction:column;border-radius:2.4cqw;background:#1b1b20;border:1px solid var(--line);overflow:hidden;font-size:2.3cqw;color:var(--text2)}
.fa-bar{display:flex;align-items:center;gap:.9cqw;padding:1.4cqw 1.8cqw;border-bottom:1px solid var(--line);background:#18181c}
.fa-bar i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:var(--card3)}
.fa-pill{margin-left:1.4cqw;padding:.4cqw 1.6cqw;border-radius:99px;background:#232329;font-size:2cqw;color:var(--text2)}
.fa-pill b{color:var(--peri)}
.fa-body{flex:1;min-height:0;display:grid;grid-template-columns:34% 1fr}
.fa-side{display:flex;flex-direction:column;gap:1.4cqw;padding:1.8cqw;border-right:1px solid var(--line)}
.fa-plan{flex:1;display:flex;flex-direction:column;gap:1.2cqw}
.fa-ph{font-size:2.1cqw;color:var(--text);opacity:0}
.fa-step{display:flex;align-items:center;gap:1.2cqw;font-size:2.1cqw;opacity:0}
.fa-step i{position:relative;flex:none;width:2.6cqw;height:2.6cqw;border-radius:50%;border:.35cqw solid #3a3a44}
.fa-step i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);transform:scale(0)}
.fa-src{display:flex;gap:.8cqw}
.fa-src span{padding:.3cqw 1.2cqw;border-radius:99px;border:1px solid var(--line2);font-size:1.8cqw}
.fa-prompt{position:relative;display:flex;align-items:center;min-height:6.4cqw;padding:1.2cqw 6cqw 1.2cqw 1.4cqw;border-radius:1.6cqw;background:#232329;border:1px solid rgba(154,166,255,.35);font-size:2.1cqw;color:var(--text);line-height:1.2}
.fa-type{display:inline-block;white-space:nowrap;overflow:hidden;max-width:100%;clip-path:inset(0 100% 0 0)}
.fa-send{position:absolute;right:1.2cqw;top:50%;width:3.6cqw;height:3.6cqw;margin-top:-1.8cqw;border-radius:1cqw;background:var(--text)}
.fa-send::after{content:"";position:absolute;left:50%;top:50%;width:1.2cqw;height:1.2cqw;margin:-.6cqw 0 0 -.85cqw;border-top:.4cqw solid var(--bg);border-right:.4cqw solid var(--bg);transform:rotate(45deg)}
.fa-canvas{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2cqw;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px);background-size:2.6cqw 2.6cqw}
.fa-page{display:flex;flex-direction:column;gap:1cqw;padding:1.4cqw;border-radius:1.4cqw;background:#222227;border:1px solid var(--line);opacity:0;transform:translateY(2cqw)}
.fa-page small{font-size:1.7cqw;color:var(--text3,#77777f)}
.fa-page > div{border-radius:.6cqw;background:#2e2e36;transform-origin:left;transform:scaleX(0)}
.fa-img{height:9cqw}
.fa-h{height:2.4cqw;width:90%;position:relative}
.fa-l{height:1.2cqw;width:100%}.fa-l.s{width:65%}
.fa-in{height:2.6cqw;width:100%;background:transparent!important;border:1px solid #34343c}
.fa-page .fa-btn{height:3cqw;width:100%;margin-top:auto;background:var(--text);opacity:.85}
.fa-pub{position:absolute;left:50%;top:50%;width:46%;padding:2.4cqw;border-radius:2cqw;background:#26262c;border:1px solid var(--line2);box-shadow:0 2cqw 5cqw rgba(0,0,0,.5);display:flex;flex-direction:column;align-items:center;gap:1.2cqw;opacity:0;transform:translate(-50%,-40%) scale(.92)}
.fa-pub b{font-size:2.6cqw;color:var(--text)}
.fa-ok{width:6cqw;height:6cqw;border-radius:50%;background:var(--mint-soft);border:.4cqw solid var(--mint);position:relative}
.fa-ok::after{content:"";position:absolute;left:1.6cqw;top:1.3cqw;width:2.4cqw;height:1.2cqw;border-left:.5cqw solid var(--mint);border-bottom:.5cqw solid var(--mint);transform:rotate(-45deg)}
.fa-url{width:80%;height:2.6cqw;border-radius:.8cqw;background:#1b1b20;border:1px solid var(--line)}
.fa-edit{position:absolute;left:5%;top:58%;width:44%;padding:1.4cqw;border-radius:1.4cqw;background:#26262c;border:1px solid rgba(154,166,255,.45);box-shadow:0 1.6cqw 4cqw rgba(0,0,0,.45);font-size:2cqw;color:var(--text);opacity:0;transform:translateY(1.5cqw)}
.fa-edit div{display:flex;gap:.8cqw;margin-top:1cqw}
.fa-edit i{font-style:normal;font-size:1.7cqw;padding:.3cqw 1.1cqw;border-radius:99px;border:1px solid var(--line2);color:var(--text2)}
.fa-type2{display:inline-block;white-space:nowrap;clip-path:inset(0 100% 0 0)}
.fa-h::after{content:"";position:absolute;inset:-.7cqw;border:.35cqw solid var(--peri);border-radius:.8cqw;opacity:0}

/* timeline */
.fa .fa-type{animation:faType var(--fa-t) steps(19) infinite}
.fa .fa-send{animation:faSend var(--fa-t) var(--ease) infinite}
.fa .fa-ph{animation:faIn22 var(--fa-t) var(--ease) infinite}
.fa .s1{animation:faIn27 var(--fa-t) var(--ease) infinite}
.fa .s2{animation:faIn36 var(--fa-t) var(--ease) infinite}
.fa .s3{animation:faIn45 var(--fa-t) var(--ease) infinite}
.fa .s1 i::after{animation:faChk34 var(--fa-t) var(--ease) infinite}
.fa .s2 i::after{animation:faChk43 var(--fa-t) var(--ease) infinite}
.fa .s3 i::after{animation:faChk52 var(--fa-t) var(--ease) infinite}
.fa .p1{animation:faPage1 var(--fa-t) var(--ease) infinite}
.fa .p2{animation:faPage2 var(--fa-t) var(--ease) infinite}
.fa .p3{animation:faPage3 var(--fa-t) var(--ease) infinite}
.fa .p1 > div{animation:faBar1 var(--fa-t) var(--ease) infinite}
.fa .p2 > div{animation:faBar2 var(--fa-t) var(--ease) infinite}
.fa .p3 > div{animation:faBar3 var(--fa-t) var(--ease) infinite}
.fa .fa-pub{animation:faPub var(--fa-t) var(--ease) infinite}
.fa .fa-edit{animation:faEdit var(--fa-t) var(--ease) infinite}
.fa .fa-type2{animation:faType2 var(--fa-t) steps(21) infinite}
.fa .p1 .fa-h::after{animation:faSel var(--fa-t) var(--ease) infinite}
.fa .p1 .fa-h{animation:faBar1 var(--fa-t) var(--ease) infinite,faHl var(--fa-t) var(--ease) infinite}
@keyframes faType{0%,3%{clip-path:inset(0 100% 0 0)}17%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes faSend{0%,18%{transform:none}20%{transform:scale(.8)}23%,100%{transform:none}}
@keyframes faIn22{0%,22%{opacity:0;transform:translateY(1cqw)}26%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faIn27{0%,27%{opacity:0;transform:translateY(1cqw)}31%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faIn36{0%,36%{opacity:0;transform:translateY(1cqw)}40%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faIn45{0%,45%{opacity:0;transform:translateY(1cqw)}49%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faChk34{0%,34%{transform:scale(0)}37%{transform:scale(1.15)}39%,94%{transform:scale(.55)}100%{transform:scale(0)}}
@keyframes faChk43{0%,43%{transform:scale(0)}46%{transform:scale(1.15)}48%,94%{transform:scale(.55)}100%{transform:scale(0)}}
@keyframes faChk52{0%,52%{transform:scale(0)}55%{transform:scale(1.15)}57%,94%{transform:scale(.55)}100%{transform:scale(0)}}
@keyframes faPage1{0%,27%{opacity:0;transform:translateY(2cqw)}32%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faPage2{0%,36%{opacity:0;transform:translateY(2cqw)}41%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faPage3{0%,45%{opacity:0;transform:translateY(2cqw)}50%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes faBar1{0%,29%{transform:scaleX(0)}35%,96%{transform:none}100%{transform:scaleX(0)}}
@keyframes faBar2{0%,38%{transform:scaleX(0)}44%,96%{transform:none}100%{transform:scaleX(0)}}
@keyframes faBar3{0%,47%{transform:scaleX(0)}53%,96%{transform:none}100%{transform:scaleX(0)}}
@keyframes faPub{0%,55%{opacity:0;transform:translate(-50%,-40%) scale(.92)}59%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%,100%{opacity:0;transform:translate(-50%,-55%) scale(.98)}}
@keyframes faEdit{0%,73%{opacity:0;transform:translateY(1.5cqw)}77%,90%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes faType2{0%,77%{clip-path:inset(0 100% 0 0)}84%,100%{clip-path:inset(0 0 0 0)}}
@keyframes faSel{0%,72%{opacity:0}75%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes faHl{0%,85%{background:#2e2e36}88%,95%{background:#F2D46B}100%{background:#2e2e36}}
.fa-fig{margin:6px 0 26px}
@media (prefers-reduced-motion:reduce){.fa *{animation:none!important}.fa .fa-type,.fa .fa-type2{clip-path:none}.fa .fa-page,.fa .fa-step,.fa .fa-ph{opacity:1;transform:none}.fa .fa-page>div{transform:none}.fa-step i::after{transform:none}}

/* ===== Talentvis impact: rough Lottie-style loop (12s), scene 1 website -> sign-ups, scene 2 sheets -> dashboard ===== */
.tx{container-type:inline-size;width:100%;--tx-t:12s}
.tx-win{position:relative;width:100%;aspect-ratio:16/10;border-radius:2.4cqw;background:#1b1b20;border:1px solid var(--line);overflow:hidden;font-size:2.2cqw;color:var(--text2);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:2.6cqw 2.6cqw}
.tx-tabs{position:absolute;left:2.4cqw;top:2.2cqw;display:flex;gap:1cqw;z-index:3}
.tx-tab{padding:.6cqw 1.8cqw;border-radius:99px;border:1px solid var(--line2);font-size:1.9cqw;color:var(--text3,#77777f);transition:none}
.tx-stage{position:absolute;inset:0}
.tx-a,.tx-b{position:absolute;inset:0;opacity:0}
/* scene A */
.tx-phone{position:absolute;left:12%;top:16%;width:27%;height:76%;border-radius:3cqw;border:.5cqw solid #34343c;background:#202026;overflow:hidden}
.tx-old,.tx-new{position:absolute;inset:0;padding:3cqw 2cqw;display:flex;flex-direction:column;gap:1.4cqw}
.tx-old span{height:1.4cqw;border-radius:.6cqw;background:#2e2e36;width:90%}.tx-old span.s{width:60%}
.tx-old div{display:grid;grid-template-columns:1fr 1fr;gap:1cqw;margin-top:auto}.tx-old div i{height:6cqw;border-radius:.8cqw;background:#2a2a31}
.tx-new{background:linear-gradient(160deg,#2a2f5c,#1d1f33 60%,#202026);clip-path:inset(100% 0 0 0)}
.tx-new em{font-style:normal;font-weight:600;font-size:2.9cqw;line-height:1.08;letter-spacing:-.03em;color:var(--text);margin-top:2cqw}
.tx-l{height:1.2cqw;width:80%;border-radius:.6cqw;background:rgba(255,255,255,.18)}
.tx-go{margin-top:auto;align-self:stretch;text-align:center;padding:1.3cqw 0;border-radius:99px;background:var(--mint);color:#06281a;font-size:2.1cqw}
.tx-tap{position:absolute;left:50%;bottom:6%;width:5cqw;height:5cqw;margin-left:-2.5cqw;border-radius:50%;background:rgba(255,255,255,.35);opacity:0;transform:scale(.4)}
.tx-toast{position:absolute;left:50%;top:44%;padding:.8cqw 1.8cqw;border-radius:99px;background:var(--mint);color:#06281a;font-weight:600;font-size:2cqw;white-space:nowrap;opacity:0;transform:translate(-50%,1cqw)}
.tx-kpi{position:absolute;left:47%;top:24%;width:42%;padding:2.4cqw;border-radius:2cqw;background:#222227;border:1px solid var(--line)}
.tx-kpi small{display:block;font-size:2cqw}
.tx-kpi b{display:block;font-size:6cqw;line-height:1.05;letter-spacing:-.03em;color:var(--mint);opacity:.2}
.tx-kpi svg{display:block;width:100%;height:auto;margin-top:1.4cqw;overflow:visible}
.tx-kpi path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tx-base{stroke:#45454f;stroke-width:3}
.tx-up{stroke:var(--mint);stroke-width:3.6;stroke-dasharray:100;stroke-dashoffset:100}
.tx-lbl{display:flex;align-items:center;gap:.8cqw;margin-top:1.2cqw;font-size:1.7cqw}
.tx-lbl i{width:2.4cqw;height:.5cqw;border-radius:2px;background:#45454f}.tx-lbl i.n{margin-left:1.4cqw;background:var(--mint)}
/* scene B */
.tx-sheet{position:absolute;left:50%;top:52%;width:16%;margin:-6cqw 0 0 -8cqw;padding:1.2cqw;border-radius:1.2cqw;background:#24242a;border:1px solid var(--line2);display:flex;flex-direction:column;gap:.7cqw;transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}
.tx-sheet small{font-size:1.7cqw;color:var(--text2)}
.tx-sheet i{height:1.6cqw;border:1px solid #3a3a43;border-radius:.3cqw;background:linear-gradient(90deg,transparent 32%,#3a3a43 32%,#3a3a43 calc(32% + 1px),transparent calc(32% + 1px),transparent 66%,#3a3a43 66%,#3a3a43 calc(66% + 1px),transparent calc(66% + 1px))}
.tx-dash{position:absolute;left:14%;top:17%;width:72%;height:74%;padding:2.2cqw;border-radius:2cqw;background:#222227;border:1px solid rgba(154,166,255,.35);display:flex;flex-direction:column;gap:1.6cqw;opacity:0;transform:scale(.9)}
.tx-dh{display:flex;justify-content:space-between;align-items:center}
.tx-dh b{font-size:2.6cqw;color:var(--text)}
.tx-dh span{font-size:1.8cqw;padding:.4cqw 1.4cqw;border-radius:99px;background:var(--peri-soft);color:var(--peri)}
.tx-k{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}.tx-k i{height:6cqw;border-radius:1cqw;background:#2b2b32}
.tx-row{flex:1;min-height:0;display:grid;grid-template-columns:1.2fr 1fr;gap:1.6cqw}
.tx-bars{display:flex;align-items:flex-end;gap:1.2cqw;padding:1.4cqw;border-radius:1cqw;background:#26262c}
.tx-bars i{flex:1;height:var(--h);border-radius:.6cqw .6cqw 0 0;background:var(--peri);opacity:.75;transform-origin:bottom;transform:scaleY(0)}
.tx-list{display:flex;flex-direction:column;gap:1cqw}.tx-list i{flex:1;border-radius:.8cqw;background:#2b2b32;transform-origin:left;transform:scaleX(0)}
/* timeline */
.tx .tx-a{animation:txA var(--tx-t) var(--ease) infinite}
.tx .tx-b{animation:txB var(--tx-t) var(--ease) infinite}
.tx .tx-tab.a{animation:txTabA var(--tx-t) linear infinite}
.tx .tx-tab.b{animation:txTabB var(--tx-t) linear infinite}
.tx .tx-new{animation:txWipe var(--tx-t) var(--ease) infinite}
.tx .tx-tap{animation:txTap var(--tx-t) var(--ease) infinite}
.tx .tx-go{animation:txGo var(--tx-t) var(--ease) infinite}
.tx .tx-toast{animation:txToast var(--tx-t) var(--ease) infinite}
.tx .tx-up{animation:txUp var(--tx-t) var(--ease) infinite}
.tx .tx-kpi b{animation:txNum var(--tx-t) var(--ease) infinite}
.tx .tx-sheet{animation:txSheet var(--tx-t) var(--ease) infinite}
.tx .tx-dash{animation:txDash var(--tx-t) var(--ease) infinite}
.tx .tx-bars i{animation:txBars var(--tx-t) var(--ease) infinite}
.tx .tx-list i{animation:txList var(--tx-t) var(--ease) infinite}
@keyframes txA{0%{opacity:0}3%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes txB{0%,48%{opacity:0}51%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes txTabA{0%,47%{color:var(--text);border-color:rgba(255,255,255,.35)}48%,100%{color:var(--text3,#77777f);border-color:var(--line2)}}
@keyframes txTabB{0%,47%{color:var(--text3,#77777f);border-color:var(--line2)}48%,99%{color:var(--text);border-color:rgba(255,255,255,.35)}100%{color:var(--text3,#77777f)}}
@keyframes txWipe{0%,9%{clip-path:inset(100% 0 0 0)}17%,46%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes txTap{0%,21%{opacity:0;transform:scale(.4)}23%{opacity:1;transform:scale(1)}27%,100%{opacity:0;transform:scale(1.6)}}
@keyframes txGo{0%,21%{transform:none}23%{transform:scale(.94)}26%,100%{transform:none}}
@keyframes txToast{0%,24%{opacity:0;transform:translate(-50%,1cqw)}27%,40%{opacity:1;transform:translate(-50%,0)}44%,100%{opacity:0}}
@keyframes txUp{0%,26%{stroke-dashoffset:100}38%,46%{stroke-dashoffset:0}48%,100%{stroke-dashoffset:100}}
@keyframes txNum{0%,35%{opacity:.2;transform:none}38%{opacity:1;transform:scale(1.08)}41%,46%{opacity:1;transform:none}48%,100%{opacity:.2}}
@keyframes txSheet{0%,49%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.9)}53%,60%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}68%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}100%{opacity:0;transform:translate(0,0) scale(.4)}}
@keyframes txDash{0%,64%{opacity:0;transform:scale(.9)}70%,95%{opacity:1;transform:none}100%{opacity:0}}
@keyframes txBars{0%,70%{transform:scaleY(0)}78%,95%{transform:none}100%{transform:scaleY(0)}}
@keyframes txList{0%,72%{transform:scaleX(0)}80%,95%{transform:none}100%{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.tx *{animation:none!important}.tx .tx-b{opacity:1}.tx .tx-dash{opacity:1;transform:none}.tx .tx-bars i,.tx .tx-list i{transform:none}}

/* ===== SEVIMA design system: rough Lottie-style loop (12s) ===== */
.sv{container-type:inline-size;width:100%;--sv-t:12s;--sv-c1:#4C6EF5;--sv-c2:#9AA6FF}
.sv-win{position:relative;width:100%;aspect-ratio:16/10;border-radius:2.4cqw;background:#1b1b20;border:1px solid var(--line);overflow:hidden;font-size:2cqw;color:var(--text2);background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px);background-size:2.6cqw 2.6cqw}
.sv-a,.sv-b{position:absolute;inset:0;opacity:0}
.sv-lib{position:absolute;left:3%;top:17%;width:27%;height:76%;padding:1.8cqw;border-radius:1.8cqw;background:#222227;border:1px solid rgba(154,166,255,.35);display:flex;flex-direction:column;gap:1.3cqw}
.sv-lib small,.sv-scr small,.sv-code small{font-size:1.7cqw;color:var(--text3,#77777f)}
.sv-tok{display:flex;justify-content:space-between;align-items:center;padding:.9cqw 1.1cqw;border-radius:.9cqw;background:#2a2a31;font-size:1.7cqw}
.sv-sw{width:2.6cqw;height:2.6cqw;border-radius:.6cqw;background:var(--sv-c1)}
.sv-rad{font-weight:500;color:var(--text);font-size:1.7cqw}
.sv-comp{display:flex;flex-direction:column;gap:1cqw;padding:1.2cqw;border-radius:.9cqw;border:1px dashed #3d3d47}
.sv-btn{display:block;height:2.8cqw;width:60%;border-radius:.5cqw;background:var(--sv-c1)}
.sv-in{display:block;height:2.6cqw;width:100%;border-radius:.5cqw;border:1px solid #3a3a43}
.sv-pub{margin-top:auto;text-align:center;padding:.9cqw 0;border-radius:99px;background:var(--text);color:var(--bg);font-weight:600;font-size:1.8cqw}
.sv-wave{position:absolute;left:30%;top:52%;width:6%;height:.5cqw;border-radius:2px;background:linear-gradient(90deg,var(--peri),transparent);opacity:0;transform-origin:left}
.sv-scrs{position:absolute;left:37%;top:17%;width:60%;height:66%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.sv-scr{display:flex;flex-direction:column;gap:1.1cqw;padding:1.4cqw;border-radius:1.4cqw;background:#222227;border:1px solid var(--line)}
.sv-hd{height:1.8cqw;width:70%;border-radius:.5cqw;background:#2e2e36}
.sv-tbl{display:flex;flex-direction:column;gap:.6cqw}
.sv-tbl i{height:2cqw;border-radius:.3cqw;border:1px solid #34343c;background:linear-gradient(90deg,transparent 40%,#34343c 40%,#34343c calc(40% + 1px),transparent calc(40% + 1px))}
.sv-f{margin-top:auto;display:flex;flex-direction:column;gap:.9cqw}
.sv-scr .sv-btn{width:70%}
.sv-ok{position:absolute;left:52%;bottom:6%;padding:.8cqw 1.8cqw;border-radius:99px;background:var(--mint-soft);color:var(--mint);font-weight:600;font-size:1.9cqw;opacity:0;transform:translateY(1cqw)}
/* scene B */
.sv-lib2{gap:1.4cqw}
.sv-pick{position:relative;padding:1.2cqw;border-radius:.9cqw;border:.3cqw solid transparent}
.sv-pick .sv-btn{width:70%}
.sv-copy{position:absolute;right:-1cqw;top:-2.4cqw;padding:.5cqw 1.2cqw;border-radius:99px;background:var(--peri);color:#0d1030;font-weight:600;font-size:1.6cqw;opacity:0;transform:translateY(.8cqw)}
.sv-code{position:absolute;left:33%;top:30%;width:33%;padding:1.8cqw;border-radius:1.6cqw;background:#121216;border:1px solid var(--line2);display:flex;flex-direction:column;gap:1cqw;opacity:0;transform:translateY(1.5cqw)}
.sv-code code{font:500 1.55cqw/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);white-space:nowrap;clip-path:inset(0 100% 0 0)}
.sv-code i{font-style:normal;color:#7b7b88}.sv-code em{font-style:normal;color:var(--peri)}.sv-code s{text-decoration:none;color:var(--mint)}
.sv-dev{position:absolute;left:68%;top:17%;width:29%;height:66%;display:flex}
.sv-dev .sv-scr{flex:1}
.sv-paste{transform:scaleX(0);transform-origin:left}
/* timeline */
.sv .sv-a{animation:txA var(--sv-t) var(--ease) infinite}
.sv .sv-b{animation:txB var(--sv-t) var(--ease) infinite}
.sv .tx-tab.a{animation:txTabA var(--sv-t) linear infinite}
.sv .tx-tab.b{animation:txTabB var(--sv-t) linear infinite}
.sv .sv-a .sv-btn,.sv .sv-a .sv-sw{animation:svColor var(--sv-t) var(--ease) infinite}
.sv .sv-a .sv-btn,.sv .sv-a .sv-in{animation:svColor var(--sv-t) var(--ease) infinite,svRad var(--sv-t) var(--ease) infinite}
.sv .sv-a .sv-scr .sv-btn,.sv .sv-a .sv-scr .sv-in{animation-name:svColorLate,svRadLate}
.sv .sv-a .sv-scr .sv-in{animation-name:none,svRadLate}
.sv .sv-a .sv-comp .sv-in{animation-name:none,svRad}
.sv .sv-rad{animation:svFlash var(--sv-t) var(--ease) infinite}
.sv .sv-pub{animation:svPub var(--sv-t) var(--ease) infinite}
.sv .sv-wave{animation:svWave var(--sv-t) var(--ease) infinite}
.sv .sv-scr{animation:svScr var(--sv-t) var(--ease) infinite}
.sv .sv-a .sv-scr:nth-child(2){animation-delay:.12s}.sv .sv-a .sv-scr:nth-child(3){animation-delay:.24s}
.sv .sv-ok{animation:svOk var(--sv-t) var(--ease) infinite}
.sv .sv-pick{animation:svPick var(--sv-t) var(--ease) infinite}
.sv .sv-copy{animation:svCopy var(--sv-t) var(--ease) infinite}
.sv .sv-code{animation:svCode var(--sv-t) var(--ease) infinite}
.sv .sv-code code{animation:svType var(--sv-t) steps(27) infinite}
.sv .sv-code code + code{animation-name:svType2}
.sv .sv-paste{animation:svPaste var(--sv-t) var(--ease) infinite}
.sv .sv-dev .sv-scr{animation:svDevGlow var(--sv-t) var(--ease) infinite}
@keyframes svColor{0%,10%{background:var(--sv-c1)}14%,46%{background:var(--sv-c2)}50%,100%{background:var(--sv-c1)}}
@keyframes svColorLate{0%,22%{background:var(--sv-c1)}26%,46%{background:var(--sv-c2)}50%,100%{background:var(--sv-c1)}}
@keyframes svRad{0%,10%{border-radius:.3cqw}14%,46%{border-radius:1.2cqw}50%,100%{border-radius:.3cqw}}
@keyframes svRadLate{0%,22%{border-radius:.3cqw}26%,46%{border-radius:1.2cqw}50%,100%{border-radius:.3cqw}}
@keyframes svFlash{0%,10%{color:var(--text)}13%,20%{color:var(--peri)}26%,100%{color:var(--text)}}
@keyframes svPub{0%,14%{transform:none}16%{transform:scale(.94)}19%,100%{transform:none}}
@keyframes svWave{0%,17%{opacity:0;transform:scaleX(0)}20%{opacity:1;transform:scaleX(1)}25%,100%{opacity:0;transform:scaleX(1.4)}}
@keyframes svScr{0%,22%{border-color:var(--line);transform:none}25%{border-color:rgba(154,166,255,.7);transform:translateY(-.6cqw)}30%,100%{border-color:var(--line);transform:none}}
@keyframes svOk{0%,30%{opacity:0;transform:translateY(1cqw)}34%,44%{opacity:1;transform:none}48%,100%{opacity:0}}
@keyframes svPick{0%,54%{border-color:transparent}57%,95%{border-color:var(--peri)}100%{border-color:transparent}}
@keyframes svCopy{0%,56%{opacity:0;transform:translateY(.8cqw)}59%{opacity:1;transform:none}61%{transform:scale(.92)}63%,72%{opacity:1;transform:none}76%,100%{opacity:0}}
@keyframes svCode{0%,61%{opacity:0;transform:translateY(1.5cqw)}64%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes svType{0%,63%{clip-path:inset(0 100% 0 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes svType2{0%,67%{clip-path:inset(0 100% 0 0)}74%,100%{clip-path:inset(0 0 0 0)}}
@keyframes svPaste{0%,76%{transform:scaleX(0)}81%,95%{transform:none}100%{transform:scaleX(0)}}
@keyframes svDevGlow{0%,76%{border-color:var(--line)}79%,88%{border-color:rgba(92,214,160,.6)}94%,100%{border-color:var(--line)}}
@media (prefers-reduced-motion:reduce){.sv *{animation:none!important}.sv .sv-a{opacity:1}}

/* EDVORA full case study deck: lazy thumbnails, full page loads only on click */
.cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cs-pg{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:none;color:var(--text2);text-align:left;cursor:zoom-in;font:inherit}
.cs-pg img{width:100%;height:auto;aspect-ratio:520/736;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#e9ebf3;transition:transform .3s var(--ease),border-color .3s}
.cs-pg:hover img,.cs-pg:focus-visible img{transform:translateY(-3px);border-color:var(--line2)}
.cs-pg span{font-size:13px;line-height:1.3}.cs-pg b{color:var(--text);margin-right:4px}
.cs-dl{margin-top:22px}
.cs-lb{width:min(980px,96vw);height:min(94vh,1400px);max-width:none;max-height:none;padding:0;border:1px solid var(--line2);border-radius:16px;background:#111114;color:var(--text);overflow:hidden}
.cs-lb::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}
.cs-lb[open]{display:flex;flex-direction:column}
.cs-lb-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);font-size:14px;color:var(--text2)}
.cs-lb-bar div{display:flex;gap:8px}
.cs-lb-bar button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--text);font-size:18px;cursor:pointer}
.cs-lb-body{flex:1;overflow:auto;background:#e9ebf3}
.cs-lb-body img{display:block;width:100%;height:auto}
@media (max-width:820px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
/* visually hidden text, readable by search engines and screen readers */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}