:root{
  --bg:        #08090D;
  --bg-2:      #0D0F15;
  --panel:     rgba(255,255,255,0.03);
  --panel-2:   rgba(255,255,255,0.05);
  --hairline:  rgba(255,255,255,0.08);
  --hairline-2:rgba(255,255,255,0.14);
  --text:      #F3F3F6;
  --text-dim:  #A1A1AA;
  --text-mute: #65656E;
  --accent:    #8B5CF6;
  --accent-2:  #06B6D4;
  --gold:      #D4AF37;
}
*{ box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01","ss02","cv11";
}
body{
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 900px 500px at 85% 40%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 60%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.035) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
}
::selection { background: color-mix(in oklab, var(--accent) 55%, transparent); color:#fff; }

.mono { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.02em;}
.gold { color: var(--gold); }
.muted{ color: var(--text-dim); }
.container{ max-width: 1240px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 2;}
.hairline{ border: 1px solid var(--hairline); }
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  border: 1px solid var(--hairline);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 18px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 13px 20px; border-radius: 999px;
  font: 500 14px/1 'Geist', sans-serif; letter-spacing: -0.005em;
  cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  border: 1px solid transparent; text-decoration:none;
}
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary{
  color: #0b0b10;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8ef 100%);
  box-shadow: 0 8px 28px -8px color-mix(in oklab, var(--accent) 40%, transparent),
              0 0 0 1px rgba(255,255,255,0.3) inset;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 40px -10px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 0 1px rgba(255,255,255,0.4) inset;}
.btn-ghost{ color: var(--text); background: var(--panel); border-color: var(--hairline-2); }
.btn-ghost:hover{ background: var(--panel-2); border-color: rgba(255,255,255,0.22); }
.btn-accent{
  color:#fff; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--accent-2)));
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn-accent:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.btn .arrow{ transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(3px); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hairline-2); background: var(--panel);
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-dim);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.dot-live{ width:6px; height:6px; border-radius:50%; background: #7ee787; box-shadow: 0 0 10px #7ee787; animation: pulse 2s ease-in-out infinite;}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

section{ position:relative; padding: 120px 0; }
.section-head{ display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom: 56px; flex-wrap: wrap; }
.section-label{
  font-family: 'Geist Mono', monospace; font-size: 12px; text-transform:uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); display:flex; align-items:center; gap: 10px; margin-bottom: 18px;
}
.section-label::before{ content:""; width:24px; height:1px; background: var(--hairline-2); }
h1,h2,h3,h4{ margin:0; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance;}
h2{ font-size: clamp(36px, 5vw, 62px); line-height: 1.02;}
h3{ font-size: 22px; line-height: 1.2; font-weight:500;}
p { text-wrap: pretty; }

.title-grad{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #9b9ba3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title-accent{
  background: linear-gradient(135deg, #fff 0%, color-mix(in oklab, var(--accent) 70%, white) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.victoire-word{
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 300;
  color: var(--gold); letter-spacing: -0.02em;
}
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);}
.reveal.in{ opacity:1; transform: translateY(0);}

::-webkit-scrollbar{ width:10px; height:10px;}
::-webkit-scrollbar-track{ background: transparent;}
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.08); border-radius: 10px;}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.16);}

.tweaks{ position: fixed; bottom: 20px; right: 20px; z-index: 100; width: 280px; padding: 16px; border-radius: 16px; background: rgba(10,11,15,0.85); backdrop-filter: blur(24px); border: 1px solid var(--hairline-2); font-size: 12px; display: none; }
.tweaks.open{ display:block; }
.tweaks h5{ margin:0 0 10px 0; font-family:'Geist Mono', monospace; text-transform:uppercase; font-size:10px; letter-spacing:0.12em; color: var(--text-dim);}
.tweaks .row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 14px;}
.tweaks .swatch{ width: 28px; height:28px; border-radius: 8px; cursor:pointer; border:1px solid rgba(255,255,255,0.2); transition: transform .15s;}
.tweaks .swatch:hover{ transform: scale(1.1); }
.tweaks .swatch.active{ outline: 2px solid #fff; outline-offset: 2px;}
.tweaks .toggle-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; color: var(--text);}
.tweaks .toggle{ width: 34px; height:20px; border-radius: 999px; background: rgba(255,255,255,0.12); position:relative; cursor:pointer; transition: background .2s;}
.tweaks .toggle::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition: transform .2s;}
.tweaks .toggle.on{ background: var(--accent); }
.tweaks .toggle.on::after{ transform: translateX(14px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px){ .nav-links { display: none !important; } .nav-cta { display: none !important; } .menu-btn { display: flex !important; } }