:root{
  --bg:#0b1020;
  --surface:#10172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --brand:#34d399;
  --brand-2:#22d3ee;
  --accent:#a78bfa;
  --ring: 0 0 0 2px color-mix(in oklab, var(--brand) 60%, transparent);
  --shadow-lg: 0 24px 60px -30px rgba(0,0,0,.65);
  --shadow-md: 0 16px 40px -24px rgba(0,0,0,.55);
  --border-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
}

:root[data-theme="light"]{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --muted:#475569;
  --text:#0b1020;
  --brand:#10b981;
  --brand-2:#06b6d4;
  --accent:#7c3aed;
  --shadow-lg: 0 24px 60px -30px rgba(2,6,23,.15);
  --shadow-md: 0 16px 40px -24px rgba(2,6,23,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:
    radial-gradient(1200px 800px at 80% -50%, #1b2240 0%, transparent 60%),
    radial-gradient(1000px 700px at -20% 120%, #101736 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{width:min(1120px, 92%); margin-inline:auto}

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:12px; top:12px; background:#ffffff; color:#000000; padding:8px 12px; border-radius:8px; z-index:999}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(10px); background-color:color-mix(in oklab, var(--bg) 80%, transparent); z-index:50; border-bottom:1px solid color-mix(in oklab, #ffffff 10%, transparent)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.2px}
.brand-text{font-family:"Playfair Display", serif; font-weight:700; font-size:1.2rem}
.main-nav{display:flex; align-items:center; gap:18px}
.main-nav a{color:var(--text); text-decoration:none; opacity:.9}
.main-nav a:hover{opacity:1}
.nav-toggle{display:none; width:44px; height:36px; border:none; background:transparent; color:var(--text); cursor:pointer}
.nav-toggle span{display:block; height:2px; background:var(--text); margin:6px 0; border-radius:1px}
 .mobile-nav{display:none; flex-direction:column; gap:6px; padding:8px 4%; border-bottom:1px solid color-mix(in oklab, #ffffff 10%, transparent)}
 .mobile-nav.open{display:flex}
 .mobile-nav a{padding:10px 8px; color:var(--text); text-decoration:none}

/* Buttons */
.button{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; text-decoration:none; color:var(--text); border:1px solid color-mix(in oklab, #ffffff 14%, transparent)}
.button-small{padding:8px 14px; font-size:.92rem}
.button-ghost{background:transparent}
.button-primary{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border:none; color:#0b1020; font-weight:700;
  position:relative; overflow:hidden; box-shadow: var(--shadow-md);
}
.button-primary::after{content:""; position:absolute; inset:-2px; background:
  linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 15%, transparent 30%);
  transform:translateX(-200%);
  transition:transform .6s ease;
}
.button-primary:hover{filter:saturate(1.1); transform:translateY(-1px)}
.button-primary:hover::after{transform:translateX(150%)}
.button:focus-visible{outline:none; box-shadow:var(--ring)}

/* Hero */
.hero{position:relative; isolation:isolate; padding:8rem 0 6rem; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(600px 400px at 10% 10%, color-mix(in oklab, var(--accent) 40%, transparent) 0%, transparent 60%),
    radial-gradient(700px 500px at 90% 20%, color-mix(in oklab, var(--brand-2) 40%, transparent) 0%, transparent 60%),
    radial-gradient(700px 500px at 20% 80%, color-mix(in oklab, var(--brand) 40%, transparent) 0%, transparent 60%);
  opacity:.7;
}
/* Subtle noise overlay */
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 2px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 1px, transparent 1px 2px);
}

.hero-inner{text-align:center}
.hero h1{margin:0; font-size:clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.1; letter-spacing:.3px}
.hero .accent{background:linear-gradient(135deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{max-width:60ch; margin:12px auto 24px; color:var(--muted); font-size:1.1rem}
.hero-ctas{display:flex; justify-content:center; gap:12px}

/* Sections */
.section{padding:64px 0}
.section-alt{background:linear-gradient(180deg, color-mix(in oklab, #ffffff 2%, transparent), transparent)}
.section-intro{max-width:70ch; margin:0 auto 28px; text-align:center}
.section h2{font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin:0 0 10px}
.section p{color:var(--muted)}

/* Chroma grid */
.chroma-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.chroma-card{padding:20px; border-radius:16px; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--border-gradient) border-box; border:1px solid transparent;
  display:flex; flex-direction:column; gap:6px; box-shadow: var(--shadow-md); transition: transform .2s ease, box-shadow .2s ease}
.chroma-card:hover{transform:translateY(-4px); box-shadow: var(--shadow-lg)}
.chroma-card h3{margin:0 0 4px}
.chroma-card .card-link{margin-top:auto; color:var(--text); text-decoration:none; font-weight:600}
.tone-russet{background:linear-gradient(180deg, #3a1d1d 0%, var(--surface) 30%)}
.tone-amber{background:linear-gradient(180deg, #3a2a11 0%, var(--surface) 30%)}
.tone-purple{background:linear-gradient(180deg, #2b1940 0%, var(--surface) 30%)}
.tone-emerald{background:linear-gradient(180deg, #0f2c25 0%, var(--surface) 30%)}
.tone-deepblue{background:linear-gradient(180deg, #0e2240 0%, var(--surface) 30%)}
.tone-aurum{background:linear-gradient(180deg, #3a2f12 0%, var(--surface) 30%)}

/* Logos */
.logos{display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; align-items:center}
.logo{border-radius:12px; height:72px; display:grid; place-items:center; color:var(--muted); font-weight:700; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--border-gradient) border-box; border:1px solid transparent}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.t-card{margin:0; padding:18px; border-radius:16px; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--border-gradient) border-box; border:1px solid transparent; box-shadow: var(--shadow-md)}
.t-card blockquote{margin:0 0 10px; color:var(--text)}
.t-card figcaption{color:var(--muted); font-size:.95rem}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(12px); transition:opacity .4s ease, transform .4s ease}
[data-reveal].reveal-in{opacity:1; transform:translateY(0)}

/* Split */
.split{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center}
.checklist{padding-left:18px; color:var(--text)}
.checklist li{margin:8px 0}
.panel.gradient-panel{height:280px; border-radius:18px; border:1px solid color-mix(in oklab, #ffffff 10%, transparent);
  background:conic-gradient(from 120deg at 50% 50%, var(--brand), var(--brand-2), var(--accent), var(--brand));
  filter:blur(.4px) saturate(1.1); box-shadow:0 30px 80px -30px #000;
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.info-card{padding:20px; border-radius:16px; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--border-gradient) border-box; border:1px solid transparent; box-shadow: var(--shadow-md); transition: transform .2s ease, box-shadow .2s ease}
.info-card:hover{transform:translateY(-4px); box-shadow: var(--shadow-lg)}
.info-card h3{margin-top:0}

/* Event */
.event{display:flex; gap:16px; align-items:center; background:
  linear-gradient(var(--surface), var(--surface)) padding-box,
  var(--border-gradient) border-box; border:1px solid transparent; border-radius:16px; padding:16px; box-shadow: var(--shadow-md)}
.event-badge{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b1020; font-weight:800; padding:10px 12px; border-radius:12px; min-width:120px; text-align:center}
.event-body h3{margin:.2rem 0 .4rem}

/* Form */
.contact-form{max-width:720px; margin:0 auto}
.form-row{display:flex; flex-direction:column; gap:6px; margin:10px 0}
label{font-size:.92rem; color:var(--muted)}
input, textarea{background:#0d1428; color:var(--text); border:1px solid color-mix(in oklab, #ffffff 10%, transparent); border-radius:10px; padding:12px 12px; font-size:1rem}
input:focus, textarea:focus{outline:none; box-shadow:var(--ring); border-color:color-mix(in oklab, var(--brand) 30%, #0d1428)}
.form-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.form-note{color:var(--muted); font-size:.9rem}
#form-status{display:block; margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid color-mix(in oklab, #ffffff 10%, transparent); background:color-mix(in oklab, var(--bg) 90%, #000)}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1.2fr; gap:16px; padding:28px 0}
.footer-nav a{display:block; color:var(--text); text-decoration:none; opacity:.8; margin:4px 0}
.footer-nav a:hover{opacity:1}
.footer-contact{color:var(--muted)}
.footer-legal{display:flex; justify-content:space-between; align-items:center; padding:10px 0 28px; color:var(--muted); font-size:.92rem}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:12px}

/* FAQ */
.faq{max-width:900px; margin:0 auto; display:grid; gap:10px}
.faq details{background:var(--surface); border:1px solid color-mix(in oklab, #000 8%, transparent); border-radius:12px; padding:12px}
.faq summary{cursor:pointer; font-weight:600; outline:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{color:color-mix(in oklab, var(--text) 90%, var(--brand) 10%)}
.faq details div{margin-top:8px; color:var(--muted)}

/* Toast */
.toast{position:fixed; left:50%; bottom:16px; transform:translate(-50%, 20px); background:var(--surface); color:var(--text); border:1px solid color-mix(in oklab, #000 10%, transparent); padding:10px 14px; border-radius:10px; box-shadow:0 10px 30px -10px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100}
.toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto}

/* Back to top */
.back-to-top{position:fixed; right:16px; bottom:16px; width:40px; height:40px; border-radius:999px; border:1px solid color-mix(in oklab, #ffffff 14%, transparent); background:var(--surface); color:var(--text); display:grid; place-items:center; box-shadow:0 10px 30px -12px rgba(0,0,0,.5); opacity:0; transform:translateY(20px); transition:opacity .2s, transform .2s; z-index:90}
.back-to-top.visible{opacity:1; transform:translateY(0)}

/* Animated gradient panel */
.gradient-panel{animation: spin-grad 22s linear infinite}
@keyframes spin-grad { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Scrollbar */
*{scrollbar-color: color-mix(in oklab, var(--brand) 40%, #666) transparent;}
*::-webkit-scrollbar{height:10px; width:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg, var(--brand), var(--brand-2)); border-radius:999px}
*::-webkit-scrollbar-track{background:transparent}

/* Responsive */
@media (max-width: 900px){
  .chroma-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .logos{grid-template-columns:repeat(3, 1fr)}
  .testimonials{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width: 680px){
  .main-nav{display:none}
  .nav-toggle{display:inline-block}
  .chroma-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2, 1fr)}
} 

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
} 

/* Cookie banner */
.cookie-banner{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:var(--surface); color:var(--text); border:1px solid color-mix(in oklab, #ffffff 10%, transparent); padding:12px 14px; border-radius:14px; box-shadow:var(--shadow-md); width:min(920px, 92%); z-index:200}
.cookie-content{display:flex; gap:12px; align-items:center; justify-content:space-between}
.cookie-content p{margin:0; color:var(--muted)}
.cookie-actions{display:flex; gap:10px}
.cookie-banner[hidden]{display:none !important}

/* Cookie modal */
.cookie-modal{position:fixed; inset:0; background:color-mix(in oklab, #000 40%, transparent); display:grid; place-items:center; z-index:210}
.cookie-dialog{width:min(720px, 92%); background:var(--surface); color:var(--text); border:1px solid color-mix(in oklab, #ffffff 10%, transparent); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden}
.cookie-dialog-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid color-mix(in oklab, #ffffff 10%, transparent)}
.cookie-dialog-body{padding:12px 14px; display:grid; gap:12px}
.cookie-row{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:color-mix(in oklab, var(--surface) 90%, #000); border:1px solid color-mix(in oklab, #ffffff 8%, transparent); padding:12px; border-radius:12px}
.cookie-dialog-footer{padding:12px 14px; border-top:1px solid color-mix(in oklab, #ffffff 10%, transparent); display:flex; justify-content:flex-end}
.cookie-modal[hidden]{display:none !important}

@media (max-width:680px){
  .cookie-content{flex-direction:column; align-items:stretch}
  .cookie-actions{justify-content:flex-end}
}