:root{--bg:#eef4ff;--bg2:#ffffff;--ink:#0a1b3d;--mute:#4a5d82;--line:#c9d8f5;--brand:#6a3dff;--brand-ink:#ffffff;--glow:#b9a6ff;--bub:#e6defe;--bubh:#ffffff;--bubs:#9db8ee;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#071533;--bg2:#0c2050;--ink:#eaf1ff;--mute:#9db3dd;--line:#1d3470;--brand:#8b6dff;--brand-ink:#10062e;--glow:#5a3fd0;--bub:#1a3a86;--bubh:#8e7cf0;--bubs:#08142f;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#071533;--bg2:#0c2050;--ink:#eaf1ff;--mute:#9db3dd;--line:#1d3470;--brand:#8b6dff;--brand-ink:#10062e;--glow:#5a3fd0;--bub:#1a3a86;--bubh:#8e7cf0;--bubs:#08142f;color-scheme:dark}
*{box-sizing:border-box;margin:0}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.6 "DM Sans",system-ui,sans-serif;transition:background .3s,color .3s;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;line-height:1.05;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:800}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;margin-bottom:1rem}
h3{font-size:1.25rem;font-weight:600;margin-bottom:.4rem}
p{max-width:60ch;color:var(--mute)}
a{color:inherit}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
section{padding:5rem 0}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.8rem 0}
.logo{font:800 1.5rem "Bricolage Grotesque",sans-serif;text-decoration:none;letter-spacing:-.03em}
.logo b{color:var(--brand)}
nav{display:flex;gap:1.4rem;align-items:center}
nav a{text-decoration:none;font-weight:500;color:var(--mute)}
nav a:hover{color:var(--ink)}
.row{display:flex;gap:.6rem;align-items:center}
/* bubble-wrap buttons */
.btn{position:relative;overflow:hidden;border:0;font:700 1rem "DM Sans",sans-serif;color:var(--brand-ink);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--brand) 60%,#fff),var(--brand) 60%);padding:.85rem 1.6rem;border-radius:999px;box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.45),0 6px 18px -6px var(--glow);cursor:pointer;text-decoration:none;display:inline-block;transition:transform .15s}
.btn::before{content:"";position:absolute;left:14%;top:12%;width:34%;height:30%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px);pointer-events:none}
.btn:hover{transform:scale(1.05)}
.btn.pop{animation:pop .35s}
.btn.ghost{background:radial-gradient(circle at 30% 25%,var(--bubh),var(--bub) 65%);color:var(--ink)}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(.86,.8)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.icon-btn{width:46px;height:46px;padding:0;display:grid;place-items:center;font-size:1.2rem}
/* hero */
.hero{padding:4rem 0 3rem}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero p.lead{font-size:1.2rem;margin:1.4rem 0 2rem}
.stage{background:var(--bg2);border:1px solid var(--line);border-radius:28px;padding:1.4rem;box-shadow:0 30px 60px -30px var(--glow)}
.stage h2{font-size:1.2rem;margin:0 0 .2rem}
.stage p{font-size:.95rem;margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.55rem}
.bub{aspect-ratio:1;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 32% 28%,var(--bubh),var(--bub) 55%,var(--bubs));box-shadow:inset 0 -5px 8px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.2);transition:transform .12s}
.bub:hover{transform:scale(1.07)}
.bub.gone{background:var(--bubs);box-shadow:inset 0 3px 6px rgba(0,0,0,.5);transform:scale(.82);opacity:.55;cursor:default}
.bub{font:800 .85rem "DM Sans",sans-serif;color:var(--ink);padding:0}
.bub.gone{opacity:1;color:var(--mute)}
.bub.gone.win{background:radial-gradient(circle at 30% 28%,#ffe9a8,#ffb92e);color:#3a2500;box-shadow:0 0 16px #ffb92e;animation:pop .4s}
.bub.gone.miss{animation:shake .3s}
.grid.over .bub:not(.gone){opacity:.5;cursor:default}
@keyframes shake{25%{transform:translateX(-4px) scale(.82)}75%{transform:translateX(4px) scale(.82)}}
.hud{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;font-weight:700;min-height:2.6rem}
.lives{display:flex;gap:.35rem;white-space:nowrap}
.lives i{width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:inset 0 -2px 3px rgba(0,0,0,.3);transition:transform .2s,opacity .2s}
.lives i.used{opacity:.25;transform:scale(.6)}
.prize{margin-top:.8rem;padding:1rem;border:2px dashed var(--brand);border-radius:18px;text-align:center}
.prize[hidden]{display:none}
.prize strong{display:block;font:800 1.5rem "Bricolage Grotesque",sans-serif}
.prize code{display:inline-block;margin:.5rem 0;padding:.3rem .8rem;border-radius:10px;background:var(--bg);font-weight:700;letter-spacing:.05em}
.prize .row{justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.prize .btn{padding:.6rem 1.1rem;font-size:.92rem}
.odds{font-size:.82rem;margin-top:.8rem}
.stage{position:relative;overflow:hidden}
.conf{position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:3px;pointer-events:none;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(540deg);opacity:0}}
/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:2.2rem}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:1.6rem}
.card .emoji{font-size:1.8rem;display:block;margin-bottom:.6rem}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1rem;margin-top:2rem}
.steps li{counter-increment:s;display:flex;gap:1.2rem;align-items:flex-start;padding:1.2rem 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);font:800 2.4rem/1 "Bricolage Grotesque",sans-serif;color:var(--brand);min-width:2.2rem}
.alt{background:var(--bg2);border-block:1px solid var(--line)}
details{border-top:1px solid var(--line);padding:1.1rem 0}
summary{font-weight:700;cursor:pointer;font-size:1.1rem}
details p{margin-top:.6rem}
.cta{text-align:center}
.cta p{margin:0 auto 1.6rem}
footer{padding:2rem 0;border-top:1px solid var(--line);color:var(--mute);font-size:.95rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
/* pages */
.page[hidden]{display:none}
nav a.on{color:var(--ink);font-weight:700}
.phead{padding:4rem 0 1rem}.phead h1{font-size:clamp(2.2rem,5.5vw,4rem)}.phead p{margin-top:1rem;font-size:1.15rem}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-top:2rem}
.lt{display:grid;place-items:center;min-height:84px;padding:1rem;text-align:center;font:600 1.02rem "Bricolage Grotesque",sans-serif;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-radius:18px;transition:transform .15s,border-color .15s}
.lt:hover{transform:translateY(-3px);border-color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.chips span,.chips a{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg2);text-decoration:none;font-weight:500}
.chips a:hover{border-color:var(--brand)}
.case .tag{display:inline-block;font-size:.85rem;font-weight:700;color:var(--brand);margin-bottom:.5rem}
.case p{margin:.5rem 0;font-size:.97rem}.case b{color:var(--ink)}
.case .res{padding:.7rem .9rem;border-radius:12px;background:var(--bg);border:1px dashed var(--line);font-size:.9rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2rem}
.stats strong{display:block;font:800 clamp(2.2rem,5vw,3.4rem)/1 "Bricolage Grotesque",sans-serif;color:var(--brand);margin-bottom:.4rem}
.form{display:grid;gap:1rem;max-width:640px;margin-top:2rem}
.form label{display:grid;gap:.35rem;font-weight:600}
.form input,.form select,.form textarea{font:inherit;padding:.8rem 1rem;border-radius:14px;border:1px solid var(--line);background:var(--bg2);color:var(--ink)}
.form textarea{min-height:130px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.more{margin-top:1.6rem}
footer a{text-decoration:none;margin-right:1rem}
/* 3D headline */
.rot{display:grid;font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:1.08}
.ph{grid-area:1/1;opacity:0;visibility:hidden}
.ph.on,.ph.out{opacity:1;visibility:visible}
.rw{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
.ph.on .rw{animation:flipin .85s calc(var(--i)*70ms + .3s) cubic-bezier(.2,.8,.2,1) backwards}
.ph.out .rw{animation:flipout .5s calc(var(--i)*40ms) ease-in forwards}
@keyframes flipin{from{opacity:0;transform:perspective(600px) rotateX(-100deg) translateY(.3em)}to{opacity:1;transform:perspective(600px) rotateX(0)}}
@keyframes flipout{from{opacity:1;transform:perspective(600px) rotateX(0)}to{opacity:0;transform:perspective(600px) rotateX(100deg) translateY(-.3em)}}
.dots{display:flex;gap:.5rem;margin-top:1.1rem}
.dots button{width:14px;height:14px;border:0;padding:0;border-radius:999px;background:var(--line);cursor:pointer;transition:width .3s,background .3s}
.dots button[aria-current="true"]{width:34px;background:var(--brand)}
/* motion */
.page{animation:pgin .45s ease}
@keyframes pgin{from{opacity:0;transform:translateY(14px)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes drift{from{transform:translate(0,0);opacity:0}10%,90%{opacity:.5}to{transform:translate(40px,-640px);opacity:0}}
@keyframes slide{to{transform:translateX(-50%)}}
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.fb{position:absolute;bottom:-80px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.55),var(--brand) 60%,transparent 72%);opacity:0;animation:drift linear infinite}
.anim .w{display:inline-block;animation:rise .8s calc(var(--i)*90ms + .15s) cubic-bezier(.2,.8,.2,1) backwards}
.anim .hero .lead{animation:rise .7s .65s backwards}
.anim .hero .lead+.row{animation:rise .7s .8s backwards}
.anim .stage{animation:rise .8s .4s backwards}
.anim .rv{opacity:0}
.anim .rv.in{opacity:1;animation:rise .7s var(--d,0s) cubic-bezier(.2,.8,.2,1) backwards}
.marq{display:block;overflow:hidden;margin-top:2rem}
.track{display:flex;gap:.9rem;width:max-content;animation:slide 32s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq .lt{flex:0 0 230px}
.card{transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-6px);border-color:var(--brand)}
.bar{position:fixed;top:env(safe-area-inset-top,0px);left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--brand),#c4a8ff);transform:scaleX(0);transform-origin:0 50%;z-index:30;pointer-events:none}
.more3{margin:2.6rem 0 .4rem;font-size:1.3rem}
.mrow{overflow-x:auto;margin-top:.8rem;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.anim .mrow{overflow:hidden}
.mt{display:flex;gap:.7rem;width:max-content;animation:slide 90s linear infinite}
.mrow.rev .mt{animation-name:slider}
.mrow:hover .mt{animation-play-state:paused}
.np{padding:.65rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:var(--bg2);font-weight:600;white-space:nowrap}
@keyframes slider{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.page[data-page="services"] .cards{grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2.4rem;justify-items:center}
.bcard{width:min(100%,320px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14%;position:relative;border:1.5px solid color-mix(in srgb,var(--brand) 45%,transparent);background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.4),transparent 32%),radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--brand) 8%,var(--bg2)) 52%,color-mix(in srgb,var(--brand) 36%,var(--bg2)) 100%);box-shadow:inset 0 -16px 30px color-mix(in srgb,var(--brand) 35%,transparent),inset 0 10px 22px rgba(255,255,255,.16),0 0 calc(var(--g,0)*70px) calc(var(--g,0)*10px) color-mix(in srgb,var(--brand) 65%,transparent);translate:var(--tx,0px) var(--ty,0px);scale:var(--s,1);transition:translate .18s ease-out,scale .18s ease-out,box-shadow .2s}
.page[data-page="services"] .card.bcard:hover{transform:none;border-color:var(--brand)}
.bcard .emoji{font-size:1.7rem;margin-bottom:.3rem}
.bcard h3{font-size:1.1rem}
.bcard p{font-size:.86rem;line-height:1.4}
.ring{position:absolute;inset:-2px;border-radius:50%;border:3px solid #c4a8ff;pointer-events:none;animation:ringo .8s ease-out forwards}
@keyframes ringo{to{transform:scale(1.4);opacity:0}}
/* glow */
main,footer{position:relative;z-index:1}
.orbs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orbs::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--brand) 24%,transparent),transparent 62%)}
.orbs i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3;animation:orb 22s ease-in-out infinite alternate}
.orbs i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vw;background:var(--brand)}
.orbs i:nth-child(2){width:40vw;height:40vw;right:-10vw;top:30vh;background:#2f6bff;animation-duration:28s;animation-direction:alternate-reverse}
.orbs i:nth-child(3){width:36vw;height:36vw;left:30vw;bottom:-18vw;background:#c4a8ff;animation-duration:25s}
@keyframes orb{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,-80px) scale(1.25)}}
.alt{background:color-mix(in srgb,var(--bg2) 70%,transparent)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
.btn:not(.ghost):hover{box-shadow:inset 0 -4px 8px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.45),0 0 34px 6px color-mix(in srgb,var(--brand) 70%,transparent)}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:100%;background:var(--brand);box-shadow:0 0 10px var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s}
nav a:hover::after,nav a.on::after{transform:scaleX(1)}
.logo b{text-shadow:0 0 18px var(--brand)}
.rw,.phead h1{text-shadow:0 0 38px color-mix(in srgb,var(--brand) 40%,transparent)}
.wrap>h2::after{content:"";display:block;width:64px;height:4px;margin-top:.7rem;border-radius:4px;background:linear-gradient(90deg,var(--brand),#c4a8ff);box-shadow:0 0 16px var(--brand)}
.cta h2::after{margin-inline:auto}
.anim .wrap>h2.rv::after{width:0;transition:width .9s .35s}
.anim .wrap>h2.rv.in::after{width:64px}
.stats strong{animation:glowt 3.2s ease-in-out infinite}
@keyframes glowt{0%,100%{text-shadow:0 0 14px color-mix(in srgb,var(--brand) 35%,transparent)}50%{text-shadow:0 0 38px var(--brand)}}
.steps li::before{text-shadow:0 0 22px var(--brand)}
.card{position:relative}
.card:not(.bcard){overflow:hidden}
.card:not(.bcard)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--cx,50%) var(--cy,0%),color-mix(in srgb,var(--brand) 30%,transparent),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:not(.bcard):hover::before{opacity:1}
.card:hover{box-shadow:0 14px 44px -14px color-mix(in srgb,var(--brand) 60%,transparent)}
.lt:hover,.np:hover{box-shadow:0 0 22px color-mix(in srgb,var(--brand) 55%,transparent);border-color:var(--brand)}
footer{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--brand),transparent) 1}
/* square glass */
.page[data-page="services"] .cards{position:relative}
.page[data-page="services"] .cards::before,.page[data-page="services"] .cards::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(70px);opacity:.55;z-index:-1;pointer-events:none;animation:orb 14s ease-in-out infinite alternate}
.page[data-page="services"] .cards::before{background:#7a4dff;left:6%;top:8%}
.page[data-page="services"] .cards::after{background:#2f9bff;right:8%;bottom:6%;animation-direction:alternate-reverse}
.card.bcard,.card.bcard:hover{border-radius:30px;padding:12%;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.04) 60%,rgba(255,255,255,.12));-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.15),inset 0 0 40px rgba(255,255,255,.07),0 20px 44px -18px rgba(0,0,0,.5),0 0 calc(var(--g,0)*70px) calc(var(--g,0)*10px) color-mix(in srgb,var(--brand) 65%,transparent)}
.card.bcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.38),rgba(255,255,255,.07) 30%,transparent 44%);pointer-events:none;opacity:1;transition:none}
.card.bcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);background-size:260% 100%;background-position:160% 0;transition:background-position .9s}
.card.bcard:hover::after{background-position:-60% 0}
.bcard .ring{border-radius:inherit}
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
.cinfo{margin-top:2rem}
.cinfo h2{font-size:1.5rem;margin-bottom:.4rem}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--brand);text-decoration:none;background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -10px color-mix(in srgb,var(--brand) 60%,transparent);transition:transform .25s,box-shadow .25s,color .25s,background .25s}
.ico svg{width:22px;height:22px}
.crow{display:flex;align-items:center;gap:1rem;padding:.8rem;margin-top:.8rem;border-radius:18px;text-decoration:none;border:1px solid var(--line);background:var(--bg2);transition:transform .25s,border-color .25s,box-shadow .25s}
.crow b{display:block;color:var(--ink)}
.crow>span:last-child{color:var(--mute)}
.crow:hover{transform:translateX(6px);border-color:var(--brand);box-shadow:0 0 26px -6px color-mix(in srgb,var(--brand) 60%,transparent)}
.crow:hover .ico,.soc .ico:hover{transform:scale(1.1);color:#fff;background:var(--brand);box-shadow:0 0 22px color-mix(in srgb,var(--brand) 70%,transparent)}
.soc{display:flex;gap:.8rem;margin-top:1.4rem}
@media (max-width:820px){.cgrid{grid-template-columns:1fr;gap:0}}
.logo{display:inline-flex;align-items:center;gap:.55rem}
.lg{height:40px;width:auto;max-width:150px;object-fit:contain}
/* bold cursor */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--brand);mix-blend-mode:normal;opacity:.85;pointer-events:none;z-index:999;transition:width .2s,height .2s,margin .2s,opacity .2s;display:none;border:3px solid var(--ink)}
.cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;opacity:.45}
@media (pointer:fine){.cur{display:block}html,a,button,summary{cursor:none!important}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}header .wrap{flex-wrap:wrap}nav{order:3;width:100%;overflow-x:auto;gap:1.1rem;white-space:nowrap}section{padding:3.5rem 0}.two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:1rem;top:1rem;z-index:1000;background:var(--bg2);padding:.6rem 1rem;border-radius:10px}
/* blog */
section.post{padding:1rem 0 4rem}
.post-wrap{width:min(760px,100% - 2.5rem);margin-inline:auto}
.crumbs{font-size:.92rem;color:var(--mute);margin:2rem 0 1rem}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.post h1{font-size:clamp(2rem,5vw,3.2rem)}
.post .meta{color:var(--mute);margin:.9rem 0 1.4rem;font-size:.95rem}
.toc{border:1px solid var(--line);background:var(--bg2);border-radius:18px;padding:1rem 1.3rem;margin:1.4rem 0 2rem}
.toc strong{font-family:"Bricolage Grotesque",sans-serif}
.toc ol{margin:.5rem 0 0 1.2rem;color:var(--mute)}
.toc li{margin:.25rem 0}.toc a{text-decoration:none}.toc a:hover{color:var(--brand)}
.post h2{font-size:clamp(1.5rem,3vw,2rem);margin:2.4rem 0 .8rem;scroll-margin-top:90px}
.post h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.post p{max-width:none;margin:0 0 1rem;font-size:1.08rem;line-height:1.75;color:var(--ink)}
.post ul{margin:0 0 1rem 1.3rem}.post li{margin:.35rem 0;line-height:1.7}
.postcta{margin:3rem 0 1.5rem;padding:1.6rem;border-radius:26px;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center}
.postcta p{margin:0 auto 1.2rem}
.related{margin-top:2.4rem}.related h2{font-size:1.4rem;margin:0 0 .6rem}
.related a{display:block;padding:.7rem 0;border-top:1px solid var(--line);text-decoration:none;font-weight:600}.related a:hover{color:var(--brand)}