@font-face{font-family:"Instrument Serif";src:url(../fonts/is.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/isi.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/it4.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../fonts/it5.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{--bg:#0b1210;--bg2:#13201b;--fg:#f3f2ee;--dim:#a3aea8;--accent:#5ee6a8;--line:rgba(243,242,238,.16);
--pad:clamp(20px,4.4vw,72px);--serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
--vh:1vh;--k:1;--nav:68px}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.55;overflow-x:hidden;background:var(--bg)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
img{display:block;max-width:100%}
a{color:inherit}
em{font-family:var(--serif);font-style:italic;color:var(--accent)}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#04120c;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:14px}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);background:rgba(11,18,16,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav__brand{font-family:var(--serif);font-size:24px;text-decoration:none;white-space:nowrap}
.nav__links{display:flex;gap:30px;margin-left:auto;margin-right:12px}
.nav__links a{text-decoration:none;color:var(--dim);font-size:15px}
.nav__links a:hover{color:var(--fg)}
.btn{display:inline-block;background:var(--accent);color:#04140d;font-weight:500;font-size:17px;padding:15px 28px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font-family:var(--sans);transition:transform .2s,box-shadow .2s;box-shadow:0 8px 30px -8px #5ee6a899}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px -8px #5ee6a8cc}
.btn:active{transform:scale(.96)}
.btn--sm{padding:10px 18px;font-size:15px;white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- the story: acts are plain sections; 3D mode pins them over one canvas ---------- */
.act{position:relative;padding:calc(var(--nav) + 40px) var(--pad) 56px;display:grid;gap:28px;align-content:start;min-height:70vh}
.fb{display:block;margin:0 auto;width:min(86%,360px);aspect-ratio:640/760;overflow:hidden}
.fb img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
#gl{display:none}
.act h2,.hero__title{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.01em}
.hero__title{font-size:clamp(48px,5.7vw,88px)}
.act h2{font-size:clamp(40px,5.2vw,76px)}
.hero__sub,.zb p{color:var(--dim);font-size:clamp(16px,1.25vw,19px);max-width:46ch;margin-bottom:22px}
.kicker{color:var(--fg);font-family:var(--serif);font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);line-height:1.1;margin-top:14px}
.zero{font-family:var(--serif);font-size:clamp(46px,6vw,92px);line-height:1;color:var(--fg)}
.zero span{color:var(--accent);font-size:1.25em;display:inline-block}
.counter{font-family:var(--serif);font-size:clamp(60px,7vw,110px);line-height:1;color:var(--accent);display:flex;align-items:baseline;gap:.25em}
.counter span{color:var(--dim);font-size:.42em}
.demo__name{margin-top:14px}
.demo__meta{color:var(--dim);margin-top:8px;font-size:clamp(16px,1.3vw,19px)}
.only-3d{display:none}
.chips,.tags{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0}
.chips li{font-size:17px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;width:max-content;display:flex;gap:10px;align-items:center}
.chips i{width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tags li{border-top:1px solid var(--line);padding:14px 0;display:grid;grid-template-columns:1fr auto;column-gap:20px}
.tags b{font-family:var(--serif);font-weight:400;font-size:30px}
.tags .amt{font-family:var(--serif);font-size:34px;color:var(--accent)}
.tags small{grid-column:1/-1;color:var(--dim);font-size:15px}
.scroll-hint{display:none}

/* ---------- 3D mode ---------- */
.is3d .story{height:calc(var(--vh)*(600*var(--k) + 100))}
.is3d .stage{position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden;
 background:radial-gradient(ellipse 55% 48% at 50% 46%,#1d3029 0%,#13221c 38%,var(--bg) 78%)}
.is3d #gl{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1}
.is3d .act{position:absolute;inset:0;padding:0;display:block;min-height:0;opacity:0;pointer-events:none;z-index:2}
.is3d .a1{opacity:1}
.is3d .act.on a,.is3d .act.on button{pointer-events:auto}
.is3d .act .fb{display:none}
.is3d .a1 .fb{display:block;position:absolute;inset:0;margin:0;width:auto;aspect-ratio:auto;z-index:0;transition:opacity .6s}
.is3d .a1 .fb img{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);object-fit:contain}
.gl-on .a1 .fb{opacity:0}
.is3d .zt,.is3d .zb,.is3d .side{position:absolute;z-index:2;will-change:transform,opacity}
.is3d .zt{left:var(--pad);bottom:calc(50% + 16px);width:min(38vw,560px)}
.is3d .zb{left:var(--pad);top:calc(50% + 16px);width:min(33vw,460px)}
.is3d .side{--ph:calc(var(--vh)*60);left:calc(50% + var(--ph)*.46);right:var(--pad);top:50%;transform:translateY(-50%)}
.is3d .a3 .side{top:50%}
.is3d .only-3d{display:block}.is3d .only-fb{display:none}
.is3d .chips li{opacity:.28;background:#0b1210aa;backdrop-filter:blur(6px);transition:opacity .45s,transform .45s,border-color .45s;transform:translateX(14px)}
.is3d .chips li.in{opacity:1;transform:none;border-color:var(--accent)}
.is3d .tags li{opacity:0;transform:translateX(18px);transition:opacity .45s,transform .45s;max-width:420px}
.is3d .tags li.in{opacity:1;transform:none}
.is3d .scroll-hint{display:flex;position:absolute;left:var(--pad);bottom:26px;align-items:center;gap:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);z-index:2}
.scroll-hint span{width:1px;height:26px;background:linear-gradient(var(--accent),transparent);animation:sh 1.8s ease-in-out infinite}
@keyframes sh{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.pop{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- normal-flow sections ---------- */
.demos,.faq,.contact{padding:clamp(72px,10vw,140px) var(--pad);position:relative;background:var(--bg)}
.demos__list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:8px 0 26px}
.demos__list a{text-decoration:none;display:block}
.demos__list img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);transition:transform .3s}
.demos__list a:hover img{transform:translateY(-4px)}
.demos__list span{display:block;margin-top:10px;font-size:16px}
.demos__note{color:var(--dim);max-width:62ch}
.faq{max-width:900px;margin:0 auto;width:100%}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";color:var(--accent);font-size:1.2em}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--dim);margin-top:12px;max-width:60ch}
.contact{border-top:1px solid var(--line)}
.contact__in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.6vw,80px);line-height:1;margin-bottom:18px}
.contact__text{color:var(--dim);max-width:44ch;margin-bottom:18px}
.tags2{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tags2 span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--dim)}
.contact__mail a{font-family:var(--serif);font-size:clamp(24px,2.6vw,36px);color:var(--accent);text-decoration:none;border-bottom:1px solid #5ee6a855;overflow-wrap:anywhere}
.form{display:grid;gap:16px}
.form label{display:grid;gap:6px;font-size:15px;color:var(--dim)}
.form input{font:inherit;font-size:17px;color:var(--fg);background:#ffffff0d;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.form input:focus{outline:2px solid var(--accent);border-color:transparent}
.form .btn{justify-self:start}
.fine{font-size:14px;color:var(--dim)}
.foot{padding:34px var(--pad);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim);font-size:15px}

/* non-3D fallback: sections side by side on wide screens */
@media (min-width:761px){
 html:not(.is3d) .act{grid-template-columns:1fr 1fr;align-items:center;column-gap:60px;min-height:80vh}
 html:not(.is3d) .act>.fb{grid-column:2;grid-row:1/4}
 html:not(.is3d) .act>.zt,html:not(.is3d) .act>.zb,html:not(.is3d) .act>.side{grid-column:1}
}

/* ---------- phones ---------- */
@media (max-width:760px){
 :root{--nav:60px}
 body{font-size:16px}
 .nav__links{display:none}
 .nav__brand{font-size:20px}
 .btn--sm{padding:9px 14px;font-size:14px}
 .demos__list{grid-template-columns:1fr 1fr;gap:14px}
 .contact__in{grid-template-columns:1fr}
 .form .btn{justify-self:stretch;text-align:center}
 .is3d .act{display:flex;flex-direction:column;padding:calc(var(--nav) + 4px) var(--pad) 14px;align-items:center;text-align:center}
 .is3d .zt,.is3d .zb,.is3d .side{position:static;width:100%;transform:none}
 .is3d .zb{margin-top:auto}
 .is3d .side{order:2}.is3d .zt{order:1}.is3d .zb{order:3}
 .is3d .a1 .fb img{width:100%;height:100%;left:0;transform:none;object-fit:cover}
 .is3d .label{margin-bottom:6px;font-size:11px}
 .is3d .hero__title{font-size:clamp(38px,11vw,46px)}
 .is3d .act h2{font-size:clamp(32px,9.5vw,40px)}
 .is3d .hero__sub,.is3d .zb p{font-size:13px;line-height:1.4;margin-bottom:8px;max-width:none}
 .is3d .kicker{color:var(--fg);font-size:22px;margin-bottom:4px}
 .is3d .zb .promise{font-size:12.5px;line-height:1.35;margin-bottom:8px}
 .is3d .btn{padding:11px 24px;font-size:16px;width:100%;text-align:center}
 .is3d .chips{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
 .is3d .chips li{font-size:12.5px;padding:5px 11px;transform:none}
 .is3d .tags{flex-direction:row;gap:6px;margin-top:8px;justify-content:center}
 .is3d .tags li{display:block;border:1px solid var(--line);border-radius:14px;padding:6px 10px;text-align:center;flex:1;transform:none}
 .is3d .tags b{font-size:17px;display:block}.is3d .tags .amt{font-size:21px}.is3d .tags small{display:none}
 .is3d .counter{justify-content:center;font-size:40px;margin-bottom:0}
 .is3d .demo__name{margin-top:0;font-size:30px}
 .is3d .demo__meta{margin-top:2px;font-size:14px}
 .is3d .zero{font-size:clamp(34px,10vw,40px)}
 .is3d .scroll-hint{display:none}
 .only-3d{display:block}
}
@media (max-width:400px){.nav__brand{font-size:18px}.btn--sm{padding:8px 12px;font-size:13px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (min-width:761px){.is3d .a3 .zt{width:min(28vw,420px)}.is3d .a3 .zb{width:min(22vw,330px)}}
@media (max-width:760px){.is3d .act:not(.a1) .label{display:none}.is3d .kicker{font-size:20px;margin:2px 0 0}.is3d .zb .promise{font-size:12.5px;line-height:1.35}}
@media (max-width:760px){.is3d .chips{gap:5px;margin-top:4px}.is3d .chips li{font-size:12px;padding:4px 10px}.is3d .a2 h2,.is3d .a3 h2{font-size:34px}}

/* ---------- kinetic type ---------- */
.kw{display:inline-block;white-space:nowrap}
.kc,.kp{display:inline-block;will-change:transform,opacity;transform-origin:50% 100%}
.is3d .hero__title,.is3d .act h2{transform-origin:0 100%}
.is3d .a1 .kc,.is3d .a1 .kp{animation:kin .9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i)*22ms + .1s)}
@keyframes kin{from{opacity:0;transform:translate3d(0,.95em,0) rotate(-9deg)}}
.tags .ly{grid-column:1/-1;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.is3d .tags li{max-width:460px;background:#0b1210b3;backdrop-filter:blur(6px);border-radius:14px;border:1px solid var(--line);padding:14px 18px;margin-bottom:12px}
@media (max-width:760px){
 .nav{background:rgba(11,18,16,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
 .is3d .act{padding-top:calc(var(--nav) + 10px)}
 .is3d .tags .ly{font-size:9px;letter-spacing:.1em;margin-bottom:2px}
 .is3d .tags li{padding:6px 8px;margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){.kc,.kp{animation:none!important;opacity:1!important;transform:none!important}}