:root{
  --bg:#F2F1EB; --surface:#E7E5DB; --ink:#3A2E31; --soft:#6E6467; --line:rgba(58,46,49,.18);
  --hero-a:#3A2E31; --hero-b:#6B6264; --hero-c:#CFCCC1; --hero-ink:#ECEAE0; --hero-soft:rgba(236,234,224,.72);
  --card:#E9E7DD; --card-ink:#3A2E31; --btn:#3A2E31; --btn-ink:#F2F1EB; --gold:#B89B72; --gold-2:#E2CDA8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#2A2224; --surface:#342B2E; --ink:#ECEAE0; --soft:#B5ADAA; --line:rgba(236,234,224,.16);
    --hero-a:#211A1C; --hero-b:#4A4043; --hero-c:#8F8984; --btn:#ECEAE0; --btn-ink:#2A2224; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#2A2224; --surface:#342B2E; --ink:#ECEAE0; --soft:#B5ADAA; --line:rgba(236,234,224,.16);
  --hero-a:#211A1C; --hero-b:#4A4043; --hero-c:#8F8984; --btn:#ECEAE0; --btn-ink:#2A2224; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
body{background:var(--bg);color:var(--ink);font:300 17px/1.65 "Jost","Avenir Next","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
.display{font-family:"Italiana","Didot","Bodoni 72",Georgia,serif;font-weight:400;letter-spacing:.01em;line-height:1.1}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.wrap{max-width:34rem;margin:0 auto;padding:0 1.5rem}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--hero-ink);
  background:radial-gradient(120% 70% at 85% 0%,var(--hero-c) 0%,transparent 55%),radial-gradient(90% 60% at 0% 100%,var(--hero-c) 0%,transparent 50%),linear-gradient(160deg,var(--hero-a) 10%,var(--hero-b) 60%,var(--hero-a) 100%);
  background-size:140% 140%;animation:drift 18s ease-in-out infinite alternate;
  padding:4rem 1.5rem 6rem}
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.glow{position:absolute;width:70vmax;height:70vmax;border-radius:50%;background:radial-gradient(circle,rgba(226,205,168,.28),transparent 60%);top:-20vmax;right:-25vmax;animation:float 12s ease-in-out infinite alternate;pointer-events:none}
.glow.b{top:auto;right:auto;bottom:-30vmax;left:-30vmax;animation-duration:15s;background:radial-gradient(circle,rgba(236,234,224,.16),transparent 60%)}
@keyframes float{to{transform:translate(-6vmax,6vmax) scale(1.1)}}

.emblem{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:2.25rem}
.emblem svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.emblem .ring ellipse{fill:none;stroke:var(--hero-ink);stroke-width:1.2;stroke-dasharray:440;stroke-dashoffset:440;animation:draw 2.2s .2s cubic-bezier(.6,.1,.2,1) forwards}
.emblem .ring .orbit{stroke:var(--gold-2);stroke-width:2;stroke-dasharray:6 434;stroke-dashoffset:0;opacity:0;animation:orbit 6s 2.2s linear infinite,fadein .6s 2.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes orbit{to{stroke-dashoffset:-440}}
@keyframes fadein{to{opacity:1}}
.mono{width:78px;aspect-ratio:172/193;background:var(--hero-ink);-webkit-mask:url(../img/mono.png) center/contain no-repeat;mask:url(../img/mono.png) center/contain no-repeat}
.emblem .mono{animation:reveal 1.6s .6s cubic-bezier(.2,.7,.2,1) both}
.kicker{font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--hero-soft);animation:rise 1s 1s both}
.hero h1{font-size:clamp(2.7rem,12vw,4.4rem);max-width:11ch;margin-top:.6rem}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(6deg);filter:blur(6px);animation:letter .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero h1 .name{display:block;color:var(--gold-2);font-size:.85em}
@keyframes letter{to{opacity:1;transform:none;filter:none}}
.hero p.sub{margin-top:1.4rem;color:var(--hero-soft);max-width:28ch;font-size:1.05rem;animation:rise 1.2s 1.9s both}
.sign{margin-top:1.8rem;font-family:"Italiana",Georgia,serif;font-size:1.5rem;animation:rise 1.2s 2.2s both}
@keyframes reveal{from{opacity:0;transform:scale(.7) rotate(-12deg);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cue{position:absolute;bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--hero-soft);text-decoration:none;animation:rise 1s 2.6s both}
.cue i{display:block;width:1px;height:42px;background:linear-gradient(var(--hero-ink),transparent);transform-origin:top;animation:cue 2s 3s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Sparkles */
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sp{position:absolute;width:var(--s,10px);height:var(--s,10px);opacity:0;animation:twinkle var(--d,4s) var(--dl,0s) ease-in-out infinite}
.sp::before{content:"";position:absolute;inset:0;background:var(--c,#ECEAE0);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(90deg)}}

/* ---------- Dividers ---------- */
.divider{display:flex;align-items:center;gap:.6rem;margin:2.2rem 0;color:var(--ink)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--ink);opacity:.5;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.6,.1,.2,1)}
.divider::before{transform-origin:right}.divider::after{transform-origin:left}
.divider .star{width:14px;height:14px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);transform:scale(0) rotate(-180deg);transition:transform .9s .3s cubic-bezier(.3,1.6,.5,1)}
.divider.in::before,.divider.in::after{transform:scaleX(1)}
.divider.in .star{transform:none}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0s)}
.rv.left{transform:translateX(-30px)}.rv.right{transform:translateX(30px)}.rv.zoom{transform:scale(.9)}
.rv.in{opacity:1;transform:none}

/* ---------- Sections ---------- */
section.block{padding:4.5rem 0 1rem}
section.block h2{font-size:clamp(2.1rem,9vw,2.6rem);margin-bottom:.75rem}
.lead{color:var(--soft);max-width:32ch}
.eyebrow{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--soft);margin-bottom:.5rem}

/* Buttons */
.actions{padding:3.5rem 0 1rem;display:grid;gap:.75rem}
.btn{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.4rem;padding:0 1.25rem;text-decoration:none;font-weight:400;letter-spacing:.02em;border-radius:999px;border:1px solid var(--btn);transition:transform .25s,box-shadow .25s;font:inherit;cursor:pointer}
.btn.primary{background:var(--btn);color:var(--btn-ink);box-shadow:0 14px 30px -16px rgba(30,20,22,.7)}
.btn.primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:shine 3.6s 1s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.btn.ghost{color:var(--ink);background:transparent}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);animation:ripple .7s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Footer */
footer{margin-top:4rem;padding:3.5rem 1.5rem calc(3rem + env(safe-area-inset-bottom,0px));text-align:center;background:var(--hero-a);color:var(--hero-ink);position:relative;overflow:hidden}
.word{width:min(240px,70%);aspect-ratio:848/290;margin:0 auto;background:var(--hero-ink);-webkit-mask:url(../img/word.png) center/contain no-repeat;mask:url(../img/word.png) center/contain no-repeat}
footer p{color:var(--hero-soft);font-size:.9rem;margin-top:1.5rem;line-height:1.8}
footer a{text-decoration:none}

/* Burst particles */
.burst{position:fixed;pointer-events:none;z-index:50;width:10px;height:10px;background:var(--c);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:burst 1.2s cubic-bezier(.2,.7,.3,1) forwards}
.burst.dot{clip-path:none;border-radius:50%;width:7px;height:7px}
@keyframes burst{0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.3) rotate(var(--r));opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero h1 .ch{opacity:1;transform:none;filter:none}
  .rv{opacity:1;transform:none}
}