:root{--bg:#0d0509;--card:#1a0a11;--fg:#f8ede7;--mut:#bfa3a6;--acc:#e6b56a;--ink:#1a0a11;--line:#ffffff22;--liq:#b3122b;--lvl:290px;--rx:0deg;--ry:0deg;--sy:0px;--bw:340px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#fbf3ee;--card:#fff;--fg:#2a0a12;--mut:#765b60;--acc:#8e5c14;--ink:#fff8f0;--line:#2a0a1428}}
:root[data-theme="dark"]{--bg:#0d0509;--card:#1a0a11;--fg:#f8ede7;--mut:#bfa3a6;--acc:#e6b56a;--ink:#1a0a11;--line:#ffffff22}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.7 "Hanken Grotesk",system-ui,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:31;background:var(--bg)}
h1,h2,h3,.sf{font-family:Fraunces,Georgia,serif;font-weight:300;letter-spacing:-.02em}
.wrap{max-width:1160px;margin:0 auto;padding:0 1.4rem}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
#ld{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;text-align:center;animation:ldo 2.8s forwards}
@keyframes ldo{0%,76%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
#ld svg{width:54px;height:auto}#ld path{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-dasharray:140;stroke-dashoffset:140;animation:dr 1.6s .2s forwards}
@keyframes dr{to{stroke-dashoffset:0}}
#ld p{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1.6rem;margin-top:1rem;letter-spacing:.9em;opacity:0;animation:lt 1.8s .5s forwards}
@keyframes lt{to{opacity:1;letter-spacing:.2em}}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.hd.sc{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-color:var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;padding-bottom:1rem}
.br{font-family:Fraunces,Georgia,serif;font-size:1.5rem;color:var(--fg);text-decoration:none;font-style:italic;display:flex;align-items:center;gap:.5rem}
.br svg{width:14px;height:auto;fill:var(--acc)}
.hd nav{display:flex;gap:2rem}.hd nav a{color:var(--mut);text-decoration:none;font-size:.95rem;transition:color .3s}.hd nav a:hover{color:var(--fg)}
.cb{background:transparent;border:1px solid var(--line);color:var(--fg);padding:.5rem 1rem;border-radius:99px;font:inherit;cursor:pointer;display:flex;gap:.5rem;align-items:center}
.cb b{background:var(--acc);color:var(--ink);border-radius:99px;min-width:1.4rem;text-align:center;font-size:.8rem;padding:0 .3rem}
.hero{position:relative;overflow:hidden}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hg{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;position:relative;min-height:86vh;padding-bottom:3rem}
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;font-style:italic;margin-bottom:1.3rem}
.ln{display:block;overflow:hidden;padding-bottom:.1em}.ln span{display:block;transform:translateY(112%);animation:up 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,2s)}
@keyframes up{to{transform:none}}
.hv{opacity:0;transform:translateY(18px);animation:fi 1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,2.3s)}
@keyframes fi{to{opacity:1;transform:none}}
.lead{color:var(--mut);max-width:44ch;font-size:1.08rem}.lead b{color:var(--fg);font-weight:500}
.pr{display:flex;align-items:baseline;gap:1rem;margin:1.6rem 0 1rem}.pr b{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:2.6rem}.pr span{color:var(--mut);font-size:.9rem}
.sz{display:flex;gap:.6rem;margin-bottom:1.3rem}
.sz button{background:transparent;border:1px solid var(--line);color:inherit;padding:.6rem 1.2rem;border-radius:12px;font:inherit;cursor:pointer;transition:.3s}
.sz button[aria-pressed=true]{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.btn{position:relative;overflow:hidden;display:inline-block;background:var(--acc);color:var(--ink);padding:1rem 2.2rem;border:0;border-radius:999px;font:600 1rem "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:transform .25s}
.btn:hover{transform:translateY(-2px)}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#fff9,transparent);transform:skewX(-20deg);animation:sh 4s 3s infinite}
@keyframes sh{0%{left:-60%}35%,100%{left:140%}}
.btn.o{background:transparent;color:var(--fg);border:1px solid var(--line)}.btn.o:after{display:none}
.big{width:100%}
.stage{position:relative;display:grid;place-items:center;min-height:560px}
.stage:before{content:"";position:absolute;inset:4% -5%;background:radial-gradient(closest-side,color-mix(in srgb,var(--liq) 60%,transparent),transparent);animation:gl 5s ease-in-out infinite;transition:background 1s}
@keyframes gl{50%{opacity:.5;transform:scale(1.07)}}
.stage:after{content:"";position:absolute;bottom:7%;width:min(70%,340px);height:28px;background:radial-gradient(closest-side,#000a,transparent);filter:blur(4px)}
.bot{position:relative;z-index:1;perspective:900px;transform:translateY(var(--sy))}
.fl{animation:fl 7s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-12px)}}
.bot svg{display:block;width:min(100%,var(--bw));height:auto;transform:rotateY(var(--ry)) rotateX(var(--rx));transition:transform .3s,width .6s;filter:drop-shadow(0 30px 40px #000a)}
.liq{transform:translateY(var(--lvl));transition:transform 2s cubic-bezier(.2,.7,.2,1)}
.wave{fill:var(--liq);transition:fill 1s;animation:w 3.2s linear infinite}@keyframes w{to{transform:translateX(-100px)}}
.sw{animation:sv 6s 3s ease-in-out infinite}@keyframes sv{0%{transform:translateX(0)}45%,100%{transform:translateX(340px)}}
.ls{animation:ls 5s 3s ease-in-out infinite}@keyframes ls{0%{transform:translateX(-90px)}40%,100%{transform:translateX(110px)}}
.fm{transform-box:fill-box;transform-origin:50% 100%;animation:fk 1.6s ease-in-out infinite}@keyframes fk{25%{transform:scale(.94,1.07) skewX(2deg)}60%{transform:scale(1.04,.95) skewX(-2deg)}}
.bb{animation:bb 7s linear infinite;opacity:.55}.bb:nth-child(2){animation-duration:9s;animation-delay:-3s}.bb:nth-child(3){animation-duration:6s;animation-delay:-5s}
@keyframes bb{from{transform:translateY(0)}to{transform:translateY(-120px)}}
.mq{overflow:hidden;border-block:1px solid var(--line);padding:1.1rem 0}
.mq div{display:flex;gap:3rem;width:max-content;animation:mq 38s linear infinite}
.mq span{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:1.7rem;color:var(--mut);white-space:nowrap}.mq span:after{content:"✦";color:var(--acc);margin-left:3rem;font-size:.9rem}
@keyframes mq{to{transform:translateX(-50%)}}
section.s{padding:6rem 0}
h2{font-size:clamp(2.1rem,4.8vw,3.4rem);line-height:1.1;margin-bottom:.5em}
.sub{color:var(--mut);max-width:46ch;margin-bottom:1.8rem}
.rv{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.js .rv{opacity:0;transform:translateY(30px)}.js .rv.in{opacity:1;transform:none}
.pn{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.tiers{display:grid;gap:.7rem}
.tier{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;background:transparent;border:1px solid var(--line);color:inherit;padding:1.1rem 1.3rem;border-radius:16px;font:inherit;cursor:pointer;transition:.4s}
.tier b{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:1.35rem}.tier span{color:var(--mut);font-size:.88rem;text-align:right}
.tier:hover{transform:translateX(4px)}.tier[aria-pressed=true]{border-color:var(--liq);background:color-mix(in srgb,var(--liq) 24%,transparent)}
#nd{margin-top:1.5rem;min-height:9rem}.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem}.pill{border:1px solid var(--acc);padding:.25rem .9rem;border-radius:99px;font-size:.9rem}
#b2{display:grid;place-items:center;position:relative}#b2:before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,color-mix(in srgb,var(--liq) 45%,transparent),transparent);transition:background 1s}
#b2 svg{position:relative;width:min(100%,270px);height:auto;filter:drop-shadow(0 24px 30px #0008)}
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem}
.story p{color:var(--mut);font-size:1.07rem;max-width:54ch;margin-bottom:1rem}
dl{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2rem}dl div{border-left:2px solid var(--acc);padding-left:1rem}dt{color:var(--mut);font-size:.85rem}dd{font-family:Fraunces,Georgia,serif;font-size:1.2rem}
.m{margin:1.5rem 0}.m p{display:flex;justify-content:space-between;margin-bottom:.45rem}.m p span:last-child{color:var(--mut)}
.bar{height:6px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--liq),var(--acc));transition:width 1.9s cubic-bezier(.2,.7,.2,1)}.in .bar i{width:var(--w)}
.ft{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ft div{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:2rem;transition:transform .4s,border-color .4s}.ft div:hover{transform:translateY(-6px);border-color:var(--acc)}
.ft svg{width:38px;height:38px;fill:none;stroke:var(--acc);stroke-width:1.3;margin-bottom:1.1rem}.ft h3{font-size:1.5rem;font-weight:400;margin-bottom:.4rem}.ft p{color:var(--mut);font-size:.96rem}
.gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.cd2{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:1.2rem 1.2rem 1.4rem;display:flex;flex-direction:column;transition:transform .4s,border-color .4s}.cd2:hover{transform:translateY(-6px);border-color:var(--liq)}
.cb2{display:grid;place-items:center;height:250px;background:radial-gradient(closest-side,color-mix(in srgb,var(--liq) 38%,transparent),transparent);margin-bottom:.6rem}
.cb2 svg{height:220px;width:auto;transition:transform .5s}.cd2:hover .cb2 svg{transform:translateY(-8px) rotate(-3deg)}
.cd2 h3{font-size:1.5rem;font-weight:400}.cd2 p{color:var(--mut);font-size:.9rem;margin:.2rem 0 1rem;flex:1}.row{display:flex;justify-content:space-between;align-items:center}.row b{font-size:1.15rem}.row .btn{padding:.6rem 1.1rem;font-size:.9rem}
.ct{text-align:center;background:radial-gradient(closest-side,color-mix(in srgb,var(--liq) 30%,transparent),transparent)}.ct .sub{margin-inline:auto}.cl{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
footer{border-top:1px solid var(--line);padding:2.5rem 0 5rem;color:var(--mut);font-size:.9rem}footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
#dr{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--card);border-left:1px solid var(--line);z-index:40;transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.7,.2,1);padding:calc(1.4rem + env(safe-area-inset-top,0px)) 1.4rem calc(1.4rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:1rem}#dr.open{transform:none}
#dr header{display:flex;justify-content:space-between;align-items:center}#dr h3{font-size:1.7rem}#dl{flex:1;overflow:auto}
.it{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}.it small{color:var(--mut);display:block}.x{background:transparent;border:0;color:var(--fg);font-size:1.7rem;cursor:pointer;line-height:1}.tot{display:flex;justify-content:space-between;font-size:1.2rem}
.sb{display:none}
@media(max-width:820px){
.hd nav{display:none}.hg,.pn,.story{grid-template-columns:1fr}.hg{min-height:0;gap:0}.stage{min-height:400px;order:-1}.bot svg{width:min(66vw,var(--bw))}.ft{grid-template-columns:1fr}#b2{order:-1}section.s{padding:4rem 0}.story{gap:2rem}
.tier{flex-direction:column;align-items:flex-start;gap:.2rem}.tier span{text-align:left}
.sb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:.8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom,0px));justify-content:space-between;align-items:center;gap:1rem}.sb b{font-family:Fraunces,Georgia,serif;font-size:1.4rem;font-weight:400}.sb small{color:var(--mut);margin-left:.4rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#ld{display:none}.ln span,.hv{transform:none!important;opacity:1!important}.js .rv{opacity:1;transform:none}}
