/* KAZUVA home v2 · built on the VRTKX Founders page (founders-vrtkx/styles.css), 11 Nov 2026.
   Same components, cursor, backgrounds, card stack and rotating word. KAZUVA copy, guide lines and price. */
@font-face{font-family:"Young Serif";src:url("fonts/young-serif-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-var-latin.woff2") format("woff2-variations");font-weight:300 700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --surface:#14111f;
  --card:#1c1830;
  --card-a:rgb(28 24 48/.55);
  --alt:rgb(26 20 48/.7);
  --ink:#ece8f7;
  --ink-soft:#b9b2d1;
  --peri:#b380ed;
  --peri-soft:#c79bf2;
  --accent:#7747f7;
  --violet:119 71 247;
  --edge:rgba(236,232,247,.12);
  --line:rgba(236,232,247,.09);
  --plus:rgba(236,232,247,.38);
  --btn-bg:#f7f7f8;
  --btn-ink:#120727;
  --white:#f7f7f8;
  --glass:rgb(20 17 31/.72);
  --streak-core:#efeaff;
  --streak-glow:rgb(142 119 255/.9);
  --shadow:0 24px 60px rgba(0,0,0,.45);
  --facets:url("img/hero-facets-dark.svg");
  --display:"Young Serif",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gutter:20px;
  --max:1160px;
  --head-h:64px;
  --mv:1;
  --t-btn:.7s;
  --t-fade:.2s;
  --ease-fade:cubic-bezier(.33,0,.2,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --spring-btn:linear(0,.0224,.0789,.1562,.2444,.3363,.427,.5128,.5919,.6629,.7255,.7798,.826,.8648,.897,.9232,.9443,.961,.9741,.9841,.9915,.997,1.0008,1.0034,1.005,1.0059,1.0063,1.0062,1.006,1.0055,1.005,1.0044,1.0038,1.0033,1.0028,1.0023,1);
  --glow:0 0 18px rgb(119 71 247/.5),0 0 44px rgb(119 71 247/.28);
  --glow-press:0 0 10px rgb(142 119 255/.55),0 0 30px rgb(119 71 247/.32);
  color-scheme:dark;
}
html[data-theme="light"]{
  --surface:#fbfaff;
  --card:#ffffff;
  --card-a:rgb(255 255 255/.75);
  --alt:rgb(119 71 247/.05);
  --ink:#120727;
  --ink-soft:#56546a;
  --peri:#7747f7;
  --peri-soft:#6a3cf0;
  --edge:rgba(18,7,39,.1);
  --line:rgba(18,7,39,.08);
  --plus:rgba(18,7,39,.3);
  --btn-bg:#120727;
  --btn-ink:#f7f7f8;
  --glass:rgb(251 250 255/.8);
  --streak-core:#7747f7;
  --streak-glow:rgb(119 71 247/.45);
  --shadow:0 22px 50px -18px rgba(18,7,39,.35);
  --facets:url("bg/hero-facets-light.svg");
  --glow:0 6px 20px rgb(119 71 247/.3);
  --glow-press:0 2px 10px rgb(119 71 247/.36);
  color-scheme:light;
}
html[data-motion="calm"]{--mv:0;--t-btn:1ms}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--surface)}
html[data-motion="full"]{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;overflow-x:clip;transition:background-color .3s,color .3s}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--peri-soft);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
::selection{background:#8e77ff;color:#120727}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
section{padding:80px 0;position:relative;overflow:clip;isolation:isolate}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
h2{font-size:clamp(1.85rem,5.2vw,3rem)}
h3{font-size:1.25rem;line-height:1.2}
.stack{display:flex;flex-direction:column;gap:20px}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:720px}
.lead{font-size:17px;color:var(--ink-soft);max-width:56ch}
.note{font-size:14px;color:var(--ink-soft)}

.sechead{display:flex;align-items:center;gap:.6rem;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink-soft)}
.sechead i{flex:none;width:13px;height:13px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px rgb(var(--violet)/.7);animation:sqp 3.4s ease-in-out infinite}
.sechead .n{color:var(--ink);font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.sechead .bar{opacity:.5}
@keyframes sqp{50%{box-shadow:0 0 22px rgb(var(--violet)/1);transform:scale(calc(1 + var(--mv)*.15)) rotate(calc(var(--mv)*45deg))}}
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--peri-soft);font-weight:500;display:flex;gap:12px;align-items:center}
.eyebrow::after{content:"";height:1px;width:40px;background:var(--edge)}

/* ---------- Backgrounds (founders) ---------- */
.bgl{position:absolute;left:0;right:0;top:-30%;bottom:-30%;z-index:-1;pointer-events:none;will-change:transform}
.bgl>*{position:absolute;inset:0}
.aur{background:
  radial-gradient(42% 46% at 18% 32%,rgb(var(--violet)/.24),transparent 70%),
  radial-gradient(36% 42% at 84% 68%,rgb(120 150 255/.16),transparent 70%);
  animation:aur 24s ease-in-out infinite alternate}
.aur.b{background:
  radial-gradient(38% 44% at 78% 26%,rgb(179 128 237/.2),transparent 70%),
  radial-gradient(34% 40% at 22% 74%,rgb(180 30 241/.12),transparent 70%);
  animation:aur 31s ease-in-out infinite alternate-reverse,hue 17s ease-in-out infinite}
html[data-theme="light"] .aur{opacity:.55}
@keyframes aur{
  0%{transform:translate3d(calc(var(--mv)*-3%),0,0) scale(1)}
  100%{transform:translate3d(calc(var(--mv)*3%),calc(var(--mv)*-2%),0) scale(calc(1 + var(--mv)*.07))}}
@keyframes hue{0%,100%{opacity:.2}50%{opacity:1}}
.dots{background-image:radial-gradient(var(--line) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);
  animation:dots 40s linear infinite}
html:not([data-theme="light"]) .dots{background-image:radial-gradient(rgb(236 232 247/.1) 1px,transparent 1.5px)}
@keyframes dots{to{background-position:calc(var(--mv)*26px) calc(var(--mv)*26px)}}
.facets{background:var(--facets) center/cover no-repeat;opacity:.3;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  animation:breathe 9s ease-in-out infinite}
.net{background:url("img/why-network.svg") center/cover no-repeat;opacity:.42;animation:breathe 11s ease-in-out infinite}
.orbits{background:url("img/footer-orbits.svg") right top/cover no-repeat;opacity:.7;transform-origin:85% 20%;animation:sway 26s ease-in-out infinite alternate}
@keyframes breathe{0%,100%{opacity:.26}50%{opacity:.44}}
.net.flip{transform:scaleX(-1);animation:breathe 13s ease-in-out infinite}
@keyframes sway{from{transform:rotate(calc(var(--mv)*-3deg))}to{transform:rotate(calc(var(--mv)*3deg))}}
.alt{background:linear-gradient(180deg,transparent,var(--alt) 16%,var(--alt) 84%,transparent)}

/* ---------- Guide lines + neon streak (kept from the KAZUVA page) ----------
   A hairline on top of every section, two vertical frame lines on wider screens, plus marks where they cross.
   Full motion: a streak runs along each line. Calm: the streak glints in place (a fade, no travel). */
.gl{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.gl .h,.gl .v{position:absolute;overflow:hidden}
.gl .h{left:0;right:0;top:0;height:7px;background:linear-gradient(var(--line),var(--line)) 0 3px/100% 1px no-repeat}
.gl .v{top:0;bottom:0;width:7px;background:linear-gradient(var(--line),var(--line)) 3px 0/1px 100% no-repeat;display:none}
.gl .vl{left:calc(50% - var(--max)/2 - 3px)}
.gl .vr{left:calc(50% + var(--max)/2 - 4px)}
.gl .p{position:absolute;top:-2px;width:11px;height:11px;display:none;
  background:linear-gradient(var(--plus),var(--plus)) 5px 0/1px 11px no-repeat,linear-gradient(var(--plus),var(--plus)) 0 5px/11px 1px no-repeat}
.gl .pl{left:calc(50% - var(--max)/2 - 5px)}
.gl .pr{left:calc(50% + var(--max)/2 - 6px)}
@media (min-width:1240px){.gl .v,.gl .p{display:block}}
.gl s{position:absolute;display:block;text-decoration:none;will-change:transform,opacity}
.gl .h s{top:0;height:7px;left:0;width:260px;
  background:linear-gradient(180deg,transparent 0,var(--streak-glow) 2.5px,var(--streak-core) 3px,var(--streak-core) 4px,var(--streak-glow) 4.5px,transparent 7px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 92%,transparent)}
.gl .v s{left:0;width:7px;top:0;height:220px;
  background:linear-gradient(90deg,transparent 0,var(--streak-glow) 2.5px,var(--streak-core) 3px,var(--streak-core) 4px,var(--streak-glow) 4.5px,transparent 7px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 92%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 92%,transparent)}
html[data-motion="full"] .gl .h s{animation:runH var(--dur,17s) var(--delay,0s) infinite}
html[data-motion="full"] .gl .v s{animation:runV var(--dur,15s) var(--delay,0s) infinite}
@keyframes runH{0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.4,.05,.6,.95)}32%,100%{transform:translateX(100vw)}}
@keyframes runV{0%{transform:translateY(-100%);animation-timing-function:cubic-bezier(.4,.05,.6,.95)}36%,100%{transform:translateY(var(--vh-run,1400px))}}
html[data-motion="calm"] .gl .h s{left:var(--at,30%);opacity:0;animation:glint var(--dur,14s) var(--delay,0s) ease-in-out infinite}
html[data-motion="calm"] .gl .v s{top:var(--at,30%);opacity:0;animation:glint var(--dur,14s) var(--delay,0s) ease-in-out infinite}
@keyframes glint{0%,62%,100%{opacity:0}74%{opacity:1}86%{opacity:.15}}

/* Sparkles (founders) */
.sp{position:absolute;z-index:0;width:var(--s,18px);height:var(--s,18px);color:var(--peri-soft);fill:currentColor;pointer-events:none;
  filter:drop-shadow(0 0 6px rgb(var(--violet)/.9));animation:twinkle var(--d,5s) ease-in-out infinite;animation-delay:var(--dl,0s)}
html[data-theme="light"] .sp{filter:drop-shadow(0 0 4px rgb(var(--violet)/.4))}
@keyframes twinkle{
  0%,100%{opacity:.2;transform:scale(calc(1 - var(--mv)*.45)) rotate(0)}
  50%{opacity:1;transform:scale(1) rotate(calc(var(--mv)*45deg))}}

.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),var(--peri-soft));box-shadow:0 0 12px rgb(var(--violet)/.8)}

/* ---------- Header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:80;transition:background-color .3s,box-shadow .3s,backdrop-filter .3s}
.top[data-stuck]{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--edge)}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head-h);gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:20px;letter-spacing:-.01em;line-height:1;min-height:44px;justify-self:start}
.brand img{flex:none;width:34px;height:34px;aspect-ratio:1;object-fit:contain;border-radius:50%;transition:transform .5s var(--ease-out)}
.brand:hover img{transform:rotate(calc(var(--mv)*90deg))}
.nav{display:none;gap:4px;font-size:15px;font-weight:500}
.nav a{padding:8px 12px;border-radius:999px;color:var(--ink-soft);text-decoration:none;transition:color .2s,background-color .2s}
.nav a:hover{color:var(--ink);background:rgb(var(--violet)/.12)}
.top-r{display:contents}
.top .top-cta{display:none}
.menu-btn{justify-self:end}

/* Toggle pill: theme + motion, the middle of the header */
.tg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgb(var(--violet)/.1);box-shadow:inset 0 0 0 1px var(--edge);justify-self:center}
.tg button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.tg button:hover{color:var(--ink)}
.tg button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tg button[aria-pressed="true"]{background:var(--accent);color:#fff;box-shadow:0 0 14px rgb(var(--violet)/.55)}
.tg .ic-sun{display:none}
html[data-theme="light"] .tg .ic-sun{display:block}
html[data-theme="light"] .tg .ic-moon{display:none}
.tg #mo svg.star{fill:currentColor;stroke:none;width:16px;height:16px}

.menu-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:0;background:rgb(var(--violet)/.1);box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);cursor:pointer}
.menu-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.sheet{position:fixed;left:12px;right:12px;top:calc(var(--head-h) + 6px);z-index:79;padding:12px;border-radius:20px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--edge);display:flex;flex-direction:column;gap:2px;
  animation:sheetin .28s var(--ease-out)}
@keyframes sheetin{from{opacity:0;transform:translateY(calc(var(--mv)*-8px))}}
.sheet a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 14px;border-radius:12px;font-size:17px;font-weight:500;text-decoration:none}
.sheet a:not(.btn):hover{background:rgb(var(--violet)/.1)}
.sheet a:not(.btn)::after{content:"";width:7px;height:7px;border-top:1.5px solid var(--ink-soft);border-right:1.5px solid var(--ink-soft);transform:rotate(45deg)}
.sheet .btn{margin-top:10px;align-self:stretch;justify-content:flex-start}
.sheet-bg{position:fixed;inset:0;z-index:78;background:rgb(10 8 18/.45)}

/* ---------- Button (founders / portfolios.vrtkx.com) ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.btn{--h:54px;--disc:44px;--inset:5px;--on-accent:#fff;--btn-ring:0 0 0 0 rgb(0 0 0/0);
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:16px;height:var(--h);max-width:100%;
  padding:var(--inset) 24px var(--inset) var(--inset);border:0;border-radius:999px;background:var(--btn-bg);color:var(--btn-ink);
  font:600 1rem/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;overflow:hidden;text-decoration:none;
  -webkit-tap-highlight-color:transparent;box-shadow:var(--btn-ring);
  transition:box-shadow var(--t-fade) var(--ease-fade),transform var(--t-btn) var(--spring-btn),background-color .3s,color .3s}
.btnBg{position:absolute;inset:0;z-index:-1;background:var(--accent);
  clip-path:inset(var(--inset) calc(100% - var(--inset) - var(--disc)) var(--inset) var(--inset) round 999px);
  transition:clip-path var(--t-btn) var(--spring-btn)}
.btnDisc{display:grid;place-items:center;flex:none;width:var(--disc);height:var(--disc);color:var(--on-accent)}
.btnArrows{display:flex;width:18px;height:18px;overflow:hidden}
.btnArrows svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:translateX(-100%);transition:transform var(--t-btn) var(--spring-btn)}
.btnLabel{display:block;height:1.2em;overflow:hidden}
.btnLabel>span{display:block;transition:transform var(--t-btn) var(--spring-btn)}
.btnLabel>span:last-child{color:var(--on-accent)}
html[data-motion="calm"] .btnLabel>span:last-child{display:none}
@media (hover:hover){
  .btn:hover .btnBg{clip-path:inset(0 0 0 0 round 999px)}
  .btn:hover .btnArrows svg{transform:translateX(0)}
  .btn:hover .btnLabel>span{transform:translateY(-100%)}
  .btn:hover{box-shadow:var(--btn-ring),var(--glow)}
  html[data-motion="calm"] .btn:hover .btnBg{clip-path:inset(var(--inset) calc(100% - var(--inset) - var(--disc)) var(--inset) var(--inset) round 999px)}
  html[data-motion="calm"] .btn:hover .btnLabel>span{transform:none}
}
.btn:focus-visible .btnBg{clip-path:inset(0 0 0 0 round 999px)}
.btn:focus-visible .btnArrows svg{transform:translateX(0)}
.btn:focus-visible .btnLabel>span{transform:translateY(-100%)}
.btn:focus-visible{box-shadow:var(--btn-ring),var(--glow);outline:none}
.btn:active{transform:scale(calc(1 - var(--mv)*.02));box-shadow:var(--btn-ring),var(--glow-press)}
.btnLg{--h:60px;--disc:50px;font-size:1.0625rem;padding-right:28px}
.btnSm{--h:44px;--disc:34px;--inset:5px;font-size:.9375rem;gap:12px;padding-right:18px}
.btnSm .btnArrows,.btnSm .btnArrows svg{width:15px;height:15px}
.btn-main{animation:btnglow 3.6s ease-in-out infinite}
@keyframes btnglow{0%,100%{box-shadow:var(--btn-ring),0 0 0 rgb(119 71 247/0)}50%{box-shadow:var(--btn-ring),0 0 22px rgb(119 71 247/.38)}}
.btn-main:hover,.btn-main:focus-visible{animation:none}
.link{display:inline-flex;gap:8px;min-height:44px;align-items:center;color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:5px;transition:color var(--t-fade),text-decoration-color var(--t-fade)}
.link:hover{color:var(--peri-soft);text-decoration-color:var(--peri-soft)}
.cta-row{margin-top:44px}

/* ---------- Hero: everything, including the visual, fits one screen ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--head-h) + 20px) 0 36px}
.hero .bgl{top:-12%;bottom:-12%}
.hero-grid{display:grid;gap:28px;align-items:center;width:100%}
.hero-copy{gap:16px;container-type:inline-size}
.hero h1{font-size:clamp(1.9rem,8.4cqw,2.35rem);letter-spacing:-.03em;line-height:1.1}
.hero .lead{font-size:16.5px}
.hero .btns{margin-top:6px}

/* Rotating word (founders) */
.rw{display:inline-block;vertical-align:bottom;white-space:nowrap;transition:width .5s var(--ease-out)}
html[data-motion="calm"] .rw{transition:none}
.rot{display:inline-block;white-space:nowrap;color:var(--peri-soft);
  text-shadow:0 0 .4em rgb(var(--violet)/.65),0 0 1.1em rgb(var(--violet)/.35);
  animation:glowp 3.2s ease-in-out infinite;
  transition:opacity .32s ease,transform .32s var(--ease-out),filter .32s ease}
html[data-theme="light"] .rot{text-shadow:0 0 .5em rgb(var(--violet)/.22);animation:none}
.rot.out{opacity:0;transform:translateY(calc(var(--mv)*-.4em));filter:blur(calc(var(--mv)*6px))}
.rot.enter{opacity:0;transform:translateY(calc(var(--mv)*.4em));filter:blur(calc(var(--mv)*6px));transition:none}
@keyframes glowp{50%{text-shadow:0 0 .55em rgb(var(--violet)/.95),0 0 1.4em rgb(var(--violet)/.55)}}

/* Card stack (founders). Full motion: the top card drops to the back. Calm: cards cross-fade in a fixed fan. */
.deck{position:relative;width:100%;aspect-ratio:960/690;max-width:560px;justify-self:center}
.deck img{position:absolute;left:0;top:0;width:86%;height:auto;aspect-ratio:960/600;object-fit:cover;object-position:top;border-radius:14px;border:1px solid var(--edge);box-shadow:var(--shadow);background:var(--card);transition:transform .8s var(--ease-out),opacity .8s ease}
.deck img[data-pos="0"]{z-index:4;transform:translate(14%,22%)}
.deck img[data-pos="1"]{z-index:3;transform:translate(7%,11%) scale(.96);opacity:.9}
.deck img[data-pos="2"]{z-index:2;transform:scale(.92);opacity:.75}
.deck img[data-pos="3"]{z-index:1;transform:scale(.88);opacity:0}
html[data-motion="calm"] .deck img{transition:opacity .9s ease}
html[data-motion="calm"] .deck img.leaving{z-index:5;opacity:0;transform:translate(14%,22%)}
.deck-end{display:none}
@media (min-width:960px){.deck-end{display:block}}

/* ---------- 01 Proof (founders work grid) ---------- */
.proof{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.proof a{display:flex;flex-direction:column;gap:4px;text-decoration:none}
.proof img{border-radius:12px;border:1px solid var(--edge);width:100%;aspect-ratio:960/600;object-fit:cover;object-position:top;margin-bottom:8px;background:var(--card);transition:transform .45s var(--ease-out),box-shadow .3s,border-color .3s}
.proof strong{font-family:var(--display);font-weight:400;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.25;transition:color .2s}
.proof small{font-size:13px;color:var(--ink-soft)}
.proof a:hover img{transform:translateY(calc(var(--mv)*-5px));border-color:var(--peri);box-shadow:0 14px 40px rgb(0 0 0/.35),0 0 30px rgb(var(--violet)/.35)}
.proof a:hover strong{color:var(--peri-soft)}

/* ---------- 02 Steps (founders) ---------- */
.steps{display:grid;gap:0;counter-reset:s;border-top:1px solid var(--edge)}
.steps li{counter-increment:s;display:grid;gap:4px;align-content:start;padding:24px 0 24px 56px;border-bottom:1px solid var(--edge);position:relative;transition:background .3s}
.steps li::before{content:counter(s);position:absolute;left:0;top:24px;width:36px;height:36px;border-radius:50%;border:1px solid var(--peri);color:var(--peri-soft);display:grid;place-items:center;font:500 14px var(--mono);transition:background .3s,color .3s,box-shadow .3s}
.steps li:hover::before{background:var(--accent);color:#fff;box-shadow:0 0 18px rgb(var(--violet)/.7)}
.steps p{color:var(--ink-soft);font-size:15px;max-width:40ch}
.when{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--peri-soft)}

/* ---------- 03 Offer: founders tier card + KAZUVA crossed-out price ---------- */
.offer{display:grid;gap:16px}
.tier{background:var(--card);border:1px solid var(--edge);padding:28px 24px;border-radius:18px;display:flex;flex-direction:column;gap:14px;position:relative;transition:transform .4s var(--ease-out),box-shadow .3s}
.tier:hover{transform:translateY(calc(var(--mv)*-4px))}
.tier .label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.tier.is-now{border-color:transparent;background:linear-gradient(180deg,rgb(var(--violet)/.22),var(--card) 62%);box-shadow:0 0 40px rgb(var(--violet)/.18)}
.tier.is-now .label{color:var(--peri-soft)}
.tier.is-now::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),var(--accent),var(--peri-soft),rgb(120 150 255),var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:spin 7s linear infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
html[data-motion="calm"] .tier.is-now::before{animation:none}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgb(var(--violet)/.16);box-shadow:inset 0 0 0 1px rgb(var(--violet)/.4);font-size:13px;font-weight:500;color:var(--ink)}
.live{flex:none;width:8px;height:8px;border-radius:50%;background:var(--peri-soft);box-shadow:0 0 0 0 rgb(var(--violet)/.7);animation:ping 2s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 10px rgb(var(--violet)/0)}}
.price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-top:4px}
.was{font-family:var(--display);font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgb(var(--violet)/.9)}
.now{font-family:var(--display);font-size:clamp(3.6rem,2.6rem + 4vw,5.4rem);line-height:1;letter-spacing:-.04em}
.tier .bullets{margin-top:6px}
.tier .btn{margin-top:10px;align-self:flex-start}
.split{display:grid;gap:10px}
.split div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 18px;border-radius:14px;background:rgb(var(--violet)/.07);box-shadow:inset 0 0 0 1px var(--edge)}
.split b{font:500 1.25rem var(--mono);color:var(--ink)}
.tier h3{font-size:1.4rem}
.tier p.small{font-size:15px;color:var(--ink-soft)}
.bullets{display:flex;flex-direction:column;gap:10px}
.bullets li{display:flex;gap:12px;color:var(--ink-soft);font-size:16px}
.bullets li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--peri);box-shadow:0 0 8px rgb(var(--violet)/.6)}

/* ---------- 04 Work: one near-full-screen block per project ---------- */
#work{padding-bottom:0}
.case{position:relative;isolation:isolate;overflow:clip;padding:64px 0}
.case .wrap{display:grid;gap:36px;align-items:center}
.case-copy{display:flex;flex-direction:column;gap:14px;max-width:440px}
.case-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:13px;color:var(--ink-soft)}
.code{font:500 12px var(--mono);letter-spacing:.04em;padding:4px 9px;border-radius:6px;background:rgb(var(--violet)/.14);color:var(--peri-soft)}
.kind{font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.kind.client{color:var(--peri-soft)}
.case h3{font-size:clamp(1.8rem,4.6vw,2.6rem);line-height:1.08}
.case p.what{color:var(--ink-soft);font-size:16.5px;max-width:40ch}
.case dl{display:grid;gap:10px;margin-top:4px}
.case dl div{display:grid;gap:2px;border-left:2px solid var(--peri);padding-left:12px}
.case dt{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.case dd{font-size:15px}
.vis{position:relative;padding-right:14%;padding-bottom:6%}
.frame{display:block;border-radius:16px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--edge);padding:0 8px 8px;transition:transform .5s var(--ease-out),box-shadow .3s;text-decoration:none}
.frame .bar{display:flex;gap:6px;height:30px;align-items:center;padding-left:6px}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--edge)}
.frame img{width:100%;aspect-ratio:960/600;object-fit:cover;object-position:top;border-radius:9px;background:var(--surface)}
a.frame:hover{transform:translateY(calc(var(--mv)*-6px));box-shadow:var(--shadow),inset 0 0 0 1px var(--peri),0 0 40px rgb(var(--violet)/.3)}
.phone{position:absolute;right:0;bottom:0;width:24%;min-width:84px;border-radius:20px;padding:5px;background:#0b0816;box-shadow:var(--shadow),inset 0 0 0 1px rgba(236,232,247,.18)}
.phone img{width:100%;aspect-ratio:360/779;object-fit:cover;object-position:top;border-radius:15px;background:var(--surface)}
.case .more{align-self:flex-start}
.case-n{position:absolute;right:var(--gutter);top:40px;font:500 12px var(--mono);color:var(--ink-soft);opacity:.7;z-index:1}
.work-sep{padding:56px 0 8px;position:relative}
.work-sep h3{font-size:clamp(1.5rem,4vw,2rem)}
.work-sep p{color:var(--ink-soft);margin-top:8px;max-width:52ch}

/* ---------- 05 Who it is for ---------- */
.who{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.who li{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--edge);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;transition:transform .45s var(--ease-out),box-shadow .3s}
.who li:hover{transform:translateY(calc(var(--mv)*-5px));box-shadow:inset 0 0 0 1px var(--peri),0 0 34px rgb(var(--violet)/.28)}
.who .art{position:absolute;inset:0;z-index:-2;background:
   radial-gradient(70% 55% at 75% 18%,rgb(var(--violet)/.42),transparent 70%),
   radial-gradient(60% 50% at 10% 90%,rgb(180 30 241/.22),transparent 70%),
   #1c1830}
.who .art::before{content:"";position:absolute;inset:0;background:url("img/hero-facets-dark.svg") center/cover no-repeat;opacity:.35}
.who .art svg{position:absolute;left:50%;top:38%;width:44%;height:auto;transform:translate(-50%,-50%);fill:none;stroke:#c79bf2;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px rgb(var(--violet)/.6))}
.who .shot{position:absolute;left:0;top:0;z-index:-1;width:100%;height:72%;object-fit:cover;object-position:top;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.who li:has(.shot){background:#0e0b1a}
.who li.has-shot .art svg{display:none}
#how .net{animation:none;opacity:.16}
.who li::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 38%,rgb(14 11 26/.96) 70%)}
.who h3{font-size:1.2rem;color:#f7f7f8}
.who p{font-size:13.5px;line-height:1.45;color:rgb(247 247 248/.8);margin-top:4px}

/* ---------- 06 About ---------- */
.about{display:grid;gap:36px;align-items:center}
.mk{display:grid;gap:12px;justify-items:start}
.mk-ph{position:relative;width:min(15rem,62vw);aspect-ratio:1;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 30% 25%,rgb(var(--violet)/.4),transparent 70%),var(--card);box-shadow:inset 0 0 0 1px var(--edge),0 0 50px rgb(var(--violet)/.22)}
.mk-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-ph .logo{position:static;width:58%;height:auto;aspect-ratio:1;object-fit:contain}
.mk figcaption{font-size:14px;color:var(--ink-soft)}
.mk figcaption b{color:var(--ink);font-weight:600}

/* ---------- 07 FAQ (founders) ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--edge);max-width:780px}
.faq details{border-bottom:1px solid var(--edge);interpolate-size:allow-keywords}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;min-height:44px;font-weight:500;font-size:17px;position:relative;display:flex;gap:16px;align-items:baseline;transition:color .2s}
.faq summary:hover{color:var(--peri-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:24px;color:var(--peri-soft);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{content:"\2212";transform:rotate(calc(var(--mv)*180deg))}
.qn{flex:none;font:500 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--peri-soft);min-width:2.4ch}
.faq details p{padding:0 0 20px 40px;color:var(--ink-soft);max-width:64ch}
.faq details::details-content{height:0;overflow:clip;opacity:0;transition:height .35s var(--ease-out),opacity .35s ease,content-visibility .35s allow-discrete}
.faq details[open]::details-content{height:auto;opacity:1}
html[data-motion="calm"] .faq details::details-content{transition:opacity .2s ease,content-visibility .2s allow-discrete}

/* ---------- 08 Ending: call to action + footer on one background ---------- */
.end{position:relative;overflow:clip;isolation:isolate}
.final{padding:96px 0 64px;overflow:visible;isolation:auto}
.final-grid{display:grid;gap:40px;align-items:center}
.final .stack{max-width:600px}
footer{padding:16px 0 120px;font-size:15px;color:var(--ink-soft);position:relative}
.foot{display:grid;gap:32px;padding-top:36px;border-top:1px solid var(--edge)}
.foot .brand{font-size:22px}
.foot h4{margin:0 0 10px;font:500 11px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.foot ul{display:flex;flex-direction:column;gap:2px}
.foot a{color:var(--ink);text-decoration:none;display:inline-flex;min-height:36px;align-items:center;transition:color .2s}
.foot a:hover{color:var(--peri-soft)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:36px;padding-top:20px;border-top:1px solid var(--edge);font-size:13px}

/* Sticky call to action (phones, after the hero) */
.stick{position:fixed;left:0;right:0;bottom:14px;z-index:70;display:flex;justify-content:center;padding:0 16px;pointer-events:none;opacity:0;transform:translateY(calc(var(--mv)*16px));transition:opacity .3s ease,transform .45s var(--ease-out)}
.stick.on{opacity:1;transform:none}
.stick.on .btn{pointer-events:auto}
.stick .btn{box-shadow:0 12px 30px -8px rgb(0 0 0/.55),var(--glow)}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:300}

/* Reveal once on scroll */
@keyframes rise{from{opacity:0;transform:translateY(calc(var(--mv)*18px))}}
.js .rv:not(.in),.js .stag:not(.in)>*{opacity:0}
.rv.in{animation:rise .7s var(--ease-out) backwards}
.stag.in>*{animation:rise .65s var(--ease-out) backwards;animation-delay:var(--d,0s)}
.stag.in>*:nth-child(2){--d:.09s}.stag.in>*:nth-child(3){--d:.18s}.stag.in>*:nth-child(4){--d:.27s}
.stag.in>*:nth-child(5){--d:.36s}.stag.in>*:nth-child(6){--d:.45s}

/* ---------- Phones ---------- */
@media (max-width:719px){
  .btn{gap:12px;padding-right:20px}
  .btnLg{--h:56px;--disc:46px;font-size:1rem;padding-right:22px}
  .hero .deck{max-width:400px;width:88%}
  .tier{padding:24px 18px}
  .who .shot{height:54%}
  .who li::after{background:linear-gradient(180deg,transparent 30%,rgb(14 11 26/.96) 56%)}
  .badge{font-size:12px;padding:6px 10px;gap:7px;white-space:nowrap}
}
@media (max-height:740px) and (max-width:719px){.hero .deck{display:none}}
@media (min-width:720px){
  :root{--gutter:40px}
  section{padding:104px 0}
  .proof{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,1fr);column-gap:32px;border-top:0}
  .steps li{border-top:1px solid var(--edge);border-bottom:0;padding-left:0;padding-top:72px}
  .who{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .who li{aspect-ratio:4/4.4;padding:20px}
  .foot{grid-template-columns:1.4fr 1fr 1fr}
  .about{grid-template-columns:1.3fr .7fr}
  .mk{justify-items:center}
}
@media (min-width:960px){
  :root{--head-h:72px}
  .nav{display:flex}
  .menu-btn,.sheet,.sheet-bg,.stick{display:none!important}
  .top .top-cta{display:inline-flex}
  .top-r{display:flex;align-items:center;gap:12px;justify-self:end}
  .top .wrap{grid-template-columns:auto 1fr auto}
  .nav{justify-self:center}
  .tg{order:0}
  .hero{padding:calc(var(--head-h) + 8px) 0 28px}
  .hero-grid{grid-template-columns:1.1fr 1fr;gap:48px}
  .hero h1{font-size:clamp(2.2rem,min(5.6vh,3.2vw),3rem)}
  .hero .lead{font-size:17.5px}
  .hero-copy{gap:18px}
  .hero .deck{max-width:none}
  .offer{grid-template-columns:1.2fr 1fr;align-items:stretch}
  .case{min-height:min(92vh,880px);display:flex;align-items:center;padding:80px 0}
  .case .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
  .case.flip .case-copy{order:2}
  .final-grid{grid-template-columns:1.1fr 1fr;gap:56px}
  footer{padding-bottom:56px}
}
@media (min-width:960px) and (max-height:820px){
  .hero .lead{font-size:16.5px}
  .hero .deck{max-width:520px}
}

/* Motion toggle prompt (round 2): a neon line circles the toggle once every
   20 s until the visitor has used it once (html.mo-used, set in the head). */
@property --mo-a{syntax:"<angle>";initial-value:0deg;inherits:false}
.tg #mo{position:relative}
html:not(.mo-used) .tg #mo::after{content:"";position:absolute;inset:-2px;border-radius:999px;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--mo-a),transparent 0 62%,rgb(var(--violet)/.9) 82%,#efe8ff 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;animation:mo-ring 20s linear 3s infinite;filter:drop-shadow(0 0 4px rgb(var(--violet)/.8))}
@keyframes mo-ring{0%{--mo-a:0deg;opacity:0}1.5%{opacity:1}11%{opacity:1}13%{--mo-a:360deg;opacity:0}100%{--mo-a:360deg;opacity:0}}

/* Item 4 (round 2): the light/dark icon as a flex-centred block, so no inline
   baseline gap or sub-pixel rounding at 110-125% zoom can push it off centre. */
.tg button{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.tg button svg{display:block;flex:none;margin:0}