:root{
  --bg:#0a0a0a;
  --fg:#e6e6e6;
  --muted:#9a9a9a;
  --gold:#c9a227;
  --accent:#ef4444;
  --glass:rgba(255,255,255,0.06);
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
@supports (overflow: clip) {
  html,body{overflow-x:clip}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

/* Overlays */
.grain{position:fixed;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.4"/></svg>');z-index:5}
.scanlines{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient( to bottom, rgba(255,255,255,0.03), rgba(255,255,255,0.03) 1px, transparent 2px, transparent 4px );opacity:.12;z-index:6}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));backdrop-filter:saturate(140%) blur(6px);z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.alpha-mark{font-family:Cinzel,serif;font-size:28px;color:#fff}
.brand-name{font-family:Cinzel,serif;font-weight:800;letter-spacing:3px}
.nav-ctas{display:flex;gap:12px;align-items:center}
.nav-ctas .contract-text{display:inline-block;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Buttons */
.btn{display:inline-flex;gap:10px;align-items:center;border-radius:10px;padding:10px 14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;text-decoration:none;transition:transform .15s ease, background .2s ease, color .2s ease;will-change:transform}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn.large{padding:14px 18px;font-size:1rem}
.btn.solid{background:#0ea5e9;color:#001018}
.btn.solid:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.outline{border:1px solid #2b2b2b;color:var(--fg);background:transparent}
.btn.outline:hover{background:#151515}
.btn.ghost{background:var(--glass);border:1px solid rgba(255,255,255,.08);color:var(--fg)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.icon.twitter{display:inline-flex}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.hint{opacity:.7;font-weight:600}

/* Hero */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;padding:120px 20px 80px}
.hero-bg{position:absolute;inset:0;overflow:hidden}
.bg-image{position:absolute;inset:-10%;filter:grayscale(.1) contrast(1.08) brightness(.72);background-size:cover;background-position:center;transform:scale(1.06);animation:slow-pan 28s linear infinite alternate}
.bg-texture{position:absolute;inset:-10%;background-image:url('assets/bg.png');background-size:cover;background-position:center;mix-blend-mode:overlay;opacity:.6;animation:texture-drift 40s ease-in-out infinite alternate}
.bg-overlay{position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.02), rgba(0,0,0,.6)), linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.8))}
.smoke{position:absolute;inset:-20% -40% -10% -40%;background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 50%), radial-gradient(circle at 80% 60%, rgba(255,255,255,.04), transparent 50%);filter:blur(20px);animation:smoke 18s ease-in-out infinite}
@keyframes slow-pan{from{transform:scale(1.1) translateX(0)}to{transform:scale(1.1) translateX(-2%)} }
@keyframes texture-drift{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-2%,1.5%,0) scale(1.08)}}
@keyframes smoke{0%{transform:translateY(0)}50%{transform:translateY(-2%)}100%{transform:translateY(0)}}

.hero-inner{position:relative;z-index:2;max-width:1100px;text-align:center}
.label-row{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.chip{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;font-size:.8rem;color:#ddd}
.chip.gold{border-color:rgba(201,162,39,.6);background:rgba(201,162,39,.12);color:#e7d29a}
.title{font-family:Cinzel,serif;font-size:clamp(64px,12vw,160px);font-weight:900;letter-spacing:.08em;line-height:.9;margin:10px 0;background:linear-gradient(180deg,#fff, #bbb 60%, #745e11 61%, #e3c157 70%, #2c2208 80%);-webkit-background-clip:text;background-clip:text;color:transparent;position:relative}
.glitch::after,.glitch::before{content:attr(data-text);position:absolute;left:0;right:0;top:0}
.glitch::before{transform:translateX(-2px);clip-path:polygon(0 2%,100% 2%,100% 45%,0 45%);color:#f00;mix-blend-mode:screen;opacity:.4}
.glitch::after{transform:translateX(2px);clip-path:polygon(0 55%,100% 55%,100% 98%,0 98%);color:#0ff;mix-blend-mode:screen;opacity:.4}
.subtitle{font-size:1.25rem;opacity:.85;margin:10px 0 26px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.alpha-sigil{position:absolute;right:3vw;bottom:4vh;font-family:Cinzel,serif;font-size:18vw;opacity:.06;pointer-events:none;user-select:none}

/* Sections */
.section{position:relative;padding:100px 20px}
.section .content{max-width:1000px;margin:0 auto}
.section-title{font-family:Cinzel,serif;font-size:clamp(28px,5vw,56px);letter-spacing:.06em;margin:0 0 24px}
.lede{color:#cfcfcf;opacity:.9;max-width:780px}

/* Typewriter */
.typewriter{font-family:Cinzel,serif;font-size:clamp(22px,3.8vw,36px);color:#eaeaea;min-height:42px;margin:14px 0 8px}
.typewriter .cursor{display:inline-block;width:10px;background:#eaeaea;margin-left:6px;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

/* Principles list */
.principles{list-style:none;padding:0;margin:24px 0;display:grid;gap:12px}
.principles li{display:flex;gap:18px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:12px;transform:translateY(14px);opacity:0;transition:all .6s ease}
.principles li.visible{transform:translateY(0);opacity:1}
.principles .num{font-family:Cinzel,serif;color:var(--gold);width:36px;text-align:center}
.principles .txt{flex:1}

/* Join */
.cta-block{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.contract-card{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:12px}
#contractDisplay{font-size:.92rem}

/* Footer */
.footer{padding:40px 20px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(to top, rgba(255,255,255,.02), transparent)}
.footer-inner{max-width:1000px;margin:0 auto;display:flex;gap:10px;align-items:center;color:#c9c9c9}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#0c0c0c;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.5);padding:12px 16px;border-radius:10px;color:#eaeaea;opacity:0;transition:all .25s ease;z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:1024px){
  .title{font-size:clamp(56px,14vw,120px)}
  .subtitle{font-size:1.1rem}
}
@media (max-width:820px){
  .navbar{padding:14px 14px}
  .nav-ctas{gap:8px}
  .btn{padding:9px 12px}
  .contract-card{flex:1 1 100%}
  .nav-ctas .contract-text{max-width:38vw}
}
@media (max-width:680px){
  .brand-name{display:none}
  .title{font-size:clamp(44px,16vw,92px)}
  .alpha-sigil{font-size:38vw;opacity:.05}
  .principles{gap:10px}
  .principles li{padding:12px}
  .nav-ctas .contract-text{max-width:46vw}
  .hint{display:none}
  .nav-ctas{gap:6px}
  .navbar .btn{padding:7px 9px;font-size:.78rem;border-radius:8px}
  .navbar .btn .icon svg{width:16px;height:16px}
}
@media (max-width:420px){
  .btn.large{padding:12px 14px}
  .mono{font-size:.92rem}
  #contractDisplay{font-size:.85rem}
  .navbar .btn{padding:6px 8px;font-size:.72rem}
}

/* Salon */
.salon{background:
  linear-gradient(to bottom, rgba(201,162,39,.06), transparent 30%),
  radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%);
}
.salon-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;margin-top:18px}
.salon .card{border:1px solid rgba(201,162,39,.35);background:linear-gradient( to bottom right, rgba(201,162,39,.08), rgba(255,255,255,.02) );border-radius:14px;padding:18px 16px;backdrop-filter:blur(3px);box-shadow:inset 0 0 40px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35)}
.salon .card header{font-family:Cinzel,serif;color:#e7d29a;letter-spacing:.06em;margin-bottom:6px}
.salon .card p{color:#d8d8d8}
@media (max-width:900px){.salon-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.salon-grid{grid-template-columns:1fr}}

/* Entry modal */
.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.modal-card{position:relative;width:min(520px, calc(100% - 32px));margin:auto;background:linear-gradient( to bottom right, rgba(255,255,255,.06), rgba(255,255,255,.02) );border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:22px}
.modal-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.modal-title{font-family:Cinzel,serif;letter-spacing:.06em;margin:0}
.modal-text{color:#dadada;margin:0 0 14px}
.modal-actions{display:flex;justify-content:flex-end}