:root{--ink:#07090f;--gold:#d8b46a;--gold2:#f3dfae;--txt:#e9e6df;--mut:#9aa0ad;--line:rgba(216,180,106,.25)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--txt);font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:.01em}
a{color:var(--gold2)}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 22px;background:linear-gradient(#07090fcc,transparent);backdrop-filter:blur(6px)}
.logo{font-family:"Cormorant Garamond",serif;font-size:1.35rem;color:#fff;text-decoration:none}.logo b{color:var(--gold)}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--ink);background:linear-gradient(135deg,var(--gold2),var(--gold));padding:13px 24px;border-radius:999px;font-weight:600;text-decoration:none;cursor:pointer;font-size:.95rem;transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #d8b46a44}
.btn.ghost{background:transparent;color:var(--gold2)}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.scene{position:absolute;inset:0}.scene svg{width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#07090fee 88%)}
.hero .wrap{position:relative;z-index:2;padding-bottom:9vh;padding-top:120px}
.eyebrow{color:var(--gold);letter-spacing:.32em;text-transform:uppercase;font-size:.72rem}
.hero h1{font-size:clamp(2.6rem,9vw,6rem);line-height:1.02;margin:14px 0 18px;max-width:14ch;color:#fff}
.hero h1 em{color:var(--gold2)}
.lede{color:#cfd2d9;max-width:56ch;font-size:1.05rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.duo{margin-top:26px;font-size:.88rem;color:var(--mut)}.duo strong{color:var(--txt)}
section{padding:90px 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(2rem,5.5vw,3.4rem);line-height:1.1;margin:10px 0 16px}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(160deg,#ffffff08,#ffffff02)}
.card h3{font-size:1.6rem;color:var(--gold2);margin-bottom:6px}.card p{color:var(--mut)}
.reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.reel figure{flex:0 0 78%;max-width:360px;scroll-snap-align:start;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0d1220}
.reel svg{display:block;width:100%;height:200px}.reel figcaption{padding:12px 16px;font-size:.85rem;color:var(--mut)}
#discover{display:none}#discover.open{display:block;animation:rise .8s ease both}
.demo{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
input,textarea{width:100%;background:#0e1322;border:1px solid var(--line);border-radius:12px;color:#fff;padding:14px;font:inherit}
input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.demo input{flex:1 1 240px}
.code{margin-top:18px;font-family:ui-monospace,monospace;font-size:clamp(1.2rem,5vw,2rem);color:var(--gold2);min-height:1.5em}
form{display:grid;gap:12px;margin-top:16px}
.msg{font-size:.9rem;color:var(--gold2);min-height:1.2em}
.hp{position:absolute;left:-9999px}
footer{padding:40px 0 60px;border-top:1px solid var(--line);color:var(--mut);font-size:.82rem}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s}.reveal.in{opacity:1;transform:none}
.drift{animation:drift 40s linear infinite alternate}
.float{animation:float 7s ease-in-out infinite}
.fly{animation:fly 26s linear infinite}
@keyframes drift{to{transform:translateX(-4%)}}
@keyframes float{50%{transform:translateY(6px)}}
@keyframes fly{from{transform:translate(-20%,8%)}to{transform:translate(120%,-10%)}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
.hero::after{background:linear-gradient(transparent 45%,#07090fe6 92%)}
@media(max-width:760px){.scene svg{filter:brightness(1.55) saturate(1.2)}.hero::after{background:linear-gradient(transparent 35%,#07090fd9 80%)}.scene{inset:-10% -60% 0 -10%}}