/* home.css — Styles for the public landing/home page (home_public.html).
   Extracted from inline <style> block for cacheability and CSP compliance. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --void: #07080d; --abyss: #0d0f1a; --depth: #131728;
  --surface: #1a1f35; --raised: #21273f;
  --border: rgba(180,150,80,0.18);
  --gold: #c9a84c; --gold-light: #e4c678;
  --gold-dim: rgba(201,168,76,0.35);
  --cyan: #4ecdc4; --cyan-dim: rgba(78,205,196,0.2);
  --red: #e05a5a; --green: #6bcb8b;
  --text-prime: #e8dcc8; --text-mid: #9a8f7a; --text-dim: #5c5448;
  --glow-gold: 0 0 40px rgba(201,168,76,0.25),0 0 80px rgba(201,168,76,0.1);
}
html { scroll-behavior: smooth; }
body { font-family:'Crimson Pro',serif; background:var(--void); color:var(--text-prime); overflow-x:hidden; }
@media (pointer: fine) { body { cursor: none; } }
@media (pointer: coarse) { .cursor, .cursor-ring { display: none !important; } }

/* ── Cursor ── */
.cursor { width:8px; height:8px; background:var(--gold); border-radius:50%; position:fixed; pointer-events:none; z-index:99999; transform:translate(-50%,-50%); transition:transform 0.1s,background 0.2s; }
.cursor-ring { width:28px; height:28px; border:1px solid var(--gold-dim); border-radius:50%; position:fixed; pointer-events:none; z-index:99998; transform:translate(-50%,-50%); transition:transform 0.25s cubic-bezier(0.23,1,0.32,1),border-color 0.2s; }

/* ── Stars ── */
.stars-layer { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.stars-layer::before {
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 15% 22%,rgba(201,168,76,0.6) 0%,transparent 100%),
    radial-gradient(1px 1px at 42% 8%,rgba(255,255,255,0.4) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 73% 15%,rgba(201,168,76,0.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 88% 35%,rgba(255,255,255,0.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 5% 60%,rgba(255,255,255,0.3) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 32% 75%,rgba(78,205,196,0.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 65% 85%,rgba(255,255,255,0.25) 0%,transparent 100%),
    radial-gradient(1px 1px at 92% 68%,rgba(201,168,76,0.4) 0%,transparent 100%),
    radial-gradient(1px 1px at 55% 45%,rgba(255,255,255,0.2) 0%,transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 90%,rgba(201,168,76,0.35) 0%,transparent 100%);
  animation:twinkle 8s ease-in-out infinite alternate;
}
@keyframes twinkle { 0%{opacity:.6} 100%{opacity:1} }

/* ── Nav ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 4rem; height:72px; border-bottom:1px solid var(--border); background:rgba(7,8,13,0.85); backdrop-filter:blur(20px); }
.nav-brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.nav-brand-icon { width:36px; height:36px; background:linear-gradient(135deg,var(--gold),var(--gold-dim)); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:var(--glow-gold); overflow:hidden; flex-shrink:0; }
.nav-brand-icon img { width:100%; height:100%; object-fit:cover; border-radius:8px; }
.nav-brand-text { font-family:'Cinzel',serif; font-size:1.1rem; font-weight:700; color:var(--gold-light); letter-spacing:.08em; }
.nav-links { display:flex; align-items:center; gap:2.5rem; list-style:none; }
.nav-links a { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mid); text-decoration:none; transition:color .2s; }
.nav-links a:hover { color:var(--gold); }
.nav-right { display:flex; align-items:center; gap:.85rem; }
.nav-build { font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--text-dim); background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:3px; padding:3px 8px; letter-spacing:.05em; }
.nav-btn { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mid); background:transparent; border:1px solid var(--border); padding:.5rem 1.2rem; border-radius:4px; cursor:pointer; text-decoration:none; transition:color .2s,border-color .2s; }
.nav-btn:hover { color:var(--gold); border-color:var(--gold-dim); }
.nav-cta { font-family:'Cinzel',serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--void); background:var(--gold); border:none; padding:.55rem 1.4rem; border-radius:4px; cursor:pointer; transition:background .2s,box-shadow .2s; text-decoration:none; }
.nav-cta:hover { background:var(--gold-light); box-shadow:var(--glow-gold); }

/* ── Hero ── */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8rem 2rem 6rem; overflow:hidden; z-index:1; }
.hero-orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); animation:orbDrift 10s ease-in-out infinite; }
.hero-orb-1 { width:700px; height:700px; background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 70%); top:-200px; left:50%; transform:translateX(-50%); animation-duration:12s; }
.hero-orb-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(78,205,196,.06) 0%,transparent 70%); bottom:100px; right:10%; animation-delay:1.5s; animation-duration:9s; }
.hero-orb-3 { width:300px; height:300px; background:radial-gradient(circle,rgba(224,90,90,.05) 0%,transparent 70%); top:30%; left:5%; animation-delay:3s; animation-duration:11s; }
@keyframes orbDrift { 0%,100%{transform:translate(0,0)} 25%{transform:translate(20px,-15px)} 50%{transform:translate(-10px,20px)} 75%{transform:translate(15px,-10px)} }
.hero-eyebrow { font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:300; letter-spacing:.25em; text-transform:uppercase; color:var(--cyan); margin-bottom:1.5rem; opacity:0; animation:fadeUp .8s .2s forwards; }
.hero-title { font-family:'Cinzel',serif; font-size:clamp(3rem,8vw,7rem); font-weight:900; line-height:.95; text-align:center; max-width:900px; margin-bottom:1.5rem; opacity:0; animation:fadeUp .8s .4s forwards; }
.hero-title-line2 { display:block; background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold)); background-size:200% 100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 4s linear infinite,fadeUp .8s .4s forwards; }
@keyframes shimmer { 0%{background-position:200% center} 100%{background-position:-200% center} }
.hero-sub { font-size:1.3rem; font-weight:300; font-style:italic; color:var(--text-mid); text-align:center; max-width:560px; line-height:1.6; margin-bottom:3rem; opacity:0; animation:fadeUp .8s .6s forwards; }
.hero-actions { display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap; justify-content:center; opacity:0; animation:fadeUp .8s .8s forwards; }
.btn-primary { font-family:'Cinzel',serif; font-size:.75rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--void); background:linear-gradient(135deg,var(--gold),var(--gold-light)); border:none; padding:1rem 2.5rem; border-radius:4px; text-decoration:none; cursor:pointer; transition:box-shadow .3s,transform .2s; position:relative; overflow:hidden; }
.btn-primary::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); opacity:0; transition:opacity .2s; }
.btn-primary:hover::after { opacity:1; }
.btn-primary:hover { box-shadow:var(--glow-gold); transform:translateY(-1px); }
.btn-primary:active { transform:scale(0.97) translateY(1px); }
.btn-ghost { font-family:'Cinzel',serif; font-size:.75rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-mid); background:transparent; border:1px solid var(--border); padding:1rem 2.5rem; border-radius:4px; text-decoration:none; cursor:pointer; transition:color .2s,border-color .2s; }
.btn-ghost:hover { color:var(--gold); border-color:var(--gold-dim); }
.hero-scroll { position:absolute; bottom:2.5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:0; animation:fadeUp .8s 1.2s forwards; }
.hero-scroll span { font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.2em; color:var(--text-dim); text-transform:uppercase; }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom,var(--gold-dim),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(1) translateY(0)} 50%{opacity:1;transform:scaleY(1.1) translateY(4px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ── Stats ── */
.stats-bar { position:relative; z-index:1; border-top:1px solid var(--border); background:var(--abyss); }
.stats-inner { display:grid; grid-template-columns:repeat(6,1fr); max-width:1200px; margin:0 auto; }
.stat-item { padding:2rem 1.25rem; text-align:center; border-right:1px solid var(--border); transition:background .3s; }
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--depth); }
.stat-num { font-family:'Cinzel',serif; font-size:1.8rem; font-weight:700; color:var(--gold); line-height:1; margin-bottom:.5rem; font-variant-numeric:tabular-nums; transition:text-shadow .3s; }
.stat-item:hover .stat-num { text-shadow:0 0 20px rgba(201,168,76,0.4); }
.stat-label { font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.15em; color:var(--text-dim); text-transform:uppercase; }

/* ── Shared section ── */
section { position:relative; z-index:1; padding:7rem 4rem; max-width:1200px; margin:0 auto; }
.section-label { font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.25em; text-transform:uppercase; color:var(--cyan); margin-bottom:1rem; }
.section-title { font-family:'Cinzel',serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:700; line-height:1.1; margin-bottom:1.25rem; color:var(--text-prime); }
.section-title em { font-style:normal; color:var(--gold); }
.section-header-center { text-align:center; margin-bottom:1rem; }
.section-desc { font-size:1.15rem; font-weight:300; color:var(--text-mid); max-width:520px; line-height:1.7; }

/* ── Features ── */
.features-section { padding:5rem 4rem; max-width:1200px; margin:0 auto; }
.features-header { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; margin-bottom:3.5rem; }
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.feature-card { background:var(--abyss); padding:2rem; transition:background .3s,transform .3s; position:relative; overflow:hidden; }
.feature-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); opacity:0; transition:opacity .3s; }
.feature-card:hover { background:var(--depth); transform:translateY(-3px); }
.feature-card:hover::before { opacity:1; }
.feature-card:hover .feature-title { color:var(--gold); transition:color .3s; }
.feature-icon { width:44px; height:44px; margin-bottom:1rem; display:flex; align-items:center; justify-content:center; font-size:1.5rem; background:var(--depth); border:1px solid var(--border); border-radius:8px; }
.feature-title { font-family:'Cinzel',serif; font-size:.95rem; font-weight:600; letter-spacing:.05em; color:var(--text-prime); margin-bottom:.75rem; }
.feature-desc { font-size:1rem; font-weight:300; color:var(--text-mid); line-height:1.65; }

/* ── Plugin showcase ── */
.plugins-section { padding:5rem 4rem 7rem; max-width:1200px; margin:0 auto; }
.plugin-row { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:center; }
.plugin-tag { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); border:1px solid var(--cyan-dim); padding:.25rem .75rem; border-radius:2px; margin-bottom:1rem; }
.plugin-title { font-family:'Cinzel',serif; font-size:1.8rem; font-weight:700; color:var(--text-prime); margin-bottom:1rem; line-height:1.2; }
.plugin-desc { font-size:1.1rem; font-weight:300; font-style:italic; color:var(--text-mid); line-height:1.7; margin-bottom:1.5rem; }
.plugin-features { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.plugin-features li { display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:var(--text-mid); }
.plugin-features li::before { content:'◆'; font-size:.4rem; color:var(--gold); flex-shrink:0; }
.plugin-visual { background:var(--abyss); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.plugin-visual-header { background:var(--depth); border-bottom:1px solid var(--border); padding:.75rem 1rem; display:flex; align-items:center; gap:.5rem; }
.dot { width:10px; height:10px; border-radius:50%; }
.dot-red{background:#e05a5a} .dot-yellow{background:var(--gold)} .dot-green{background:#4ecdc4}
.plugin-visual-title { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--text-dim); margin-left:.5rem; }
.embed-preview { padding:1.25rem; }
.embed-card { border-left:3px solid var(--gold); background:var(--surface); border-radius:4px; padding:1rem 1.25rem; margin-bottom:.75rem; }
.embed-card-title { font-family:'Cinzel',serif; font-size:.9rem; font-weight:600; color:var(--gold-light); margin-bottom:.5rem; }
.embed-card-body { font-family:'JetBrains Mono',monospace; font-size:.65rem; color:var(--text-mid); line-height:1.8; }
.embed-badge { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.6rem; background:var(--depth); border:1px solid var(--border); border-radius:2px; padding:.15rem .5rem; color:var(--cyan); margin-right:.4rem; }
.embed-slots { display:flex; gap:.5rem; margin-top:1rem; }
.embed-slot { flex:1; background:var(--raised); border:1px dashed rgba(201,168,76,.2); border-radius:3px; padding:.4rem; text-align:center; font-family:'JetBrains Mono',monospace; font-size:.6rem; color:var(--text-dim); }
.embed-slot.filled { border-color:var(--gold-dim); color:var(--text-prime); background:rgba(201,168,76,.06); }
.embed-player { font-size:.65rem; }
.embed-player-gold { color:var(--gold); }
.embed-player-cyan { color:var(--cyan); }
.embed-player-dim { color:var(--text-dim); }
.embed-button-row { display:flex; gap:.5rem; margin-top:.25rem; }
.embed-button { flex:1; background:var(--depth); border:1px solid var(--border); border-radius:3px; padding:.4rem .75rem; font-family:'JetBrains Mono',monospace; font-size:.65rem; text-align:center; cursor:default; transition:background .2s,border-color .2s; }
.embed-button-join { color:var(--gold); }
.embed-button-join:hover { border-color:var(--gold-dim); box-shadow:0 0 12px rgba(201,168,76,0.15); }
.embed-button-leave { color:var(--text-dim); }
.embed-button-leave:hover { color:var(--text-mid); border-color:rgba(180,150,80,0.25); }
.dash-preview { padding:1.25rem; }
.chart-mock { height:120px; background:var(--depth); border:1px solid var(--border); border-radius:4px; margin-bottom:.75rem; position:relative; overflow:hidden; }
.chart-line { position:absolute; bottom:0; left:0; right:0; height:70%; }
.chart-bars { display:flex; align-items:flex-end; gap:4px; padding:0 1rem; height:100%; }
.bar { flex:1; background:linear-gradient(to top,var(--gold-dim),rgba(201,168,76,.05)); border-radius:2px 2px 0 0; border-top:1px solid var(--gold-dim); }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.metric-mini { background:var(--depth); border:1px solid var(--border); border-radius:4px; padding:.75rem; }
.metric-mini-val { font-family:'Cinzel',serif; font-size:1.1rem; color:var(--gold); }
.metric-mini-label { font-family:'JetBrains Mono',monospace; font-size:.55rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.1em; }

/* ── How it works ── */
.how-section { padding:5rem 4rem; max-width:1200px; margin:0 auto; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:3rem; }
.steps::before { content:''; position:absolute; top:2rem; left:4rem; right:4rem; height:1px; background:linear-gradient(90deg,transparent,var(--border),var(--gold-dim),var(--border),transparent); }
.step { padding:0 2rem; text-align:center; position:relative; }
.step-num { width:4rem; height:4rem; border-radius:50%; border:1px solid var(--border); background:var(--abyss); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; font-family:'Cinzel',serif; font-size:1rem; font-weight:700; color:var(--gold); position:relative; z-index:1; transition:border-color .3s,box-shadow .3s; }
.step:hover .step-num { border-color:var(--gold-dim); box-shadow:var(--glow-gold); }
.step-title { font-family:'Cinzel',serif; font-size:1rem; font-weight:600; color:var(--text-prime); margin-bottom:.75rem; }
.step-desc { font-size:.95rem; font-weight:300; font-style:italic; color:var(--text-mid); line-height:1.6; }

/* ── Pricing ── */
.pricing-section { padding:7rem 4rem; max-width:1100px; margin:0 auto; text-align:center; }
.pricing-header { margin-bottom:4rem; }
.pricing-cards { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:0; text-align:left; align-items:center; }
.pricing-card {
  background:var(--abyss); padding:2.75rem 2.25rem; position:relative;
  border:1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, z-index 0s;
}
.pricing-card:first-child { border-radius:8px 0 0 8px; }
.pricing-card:last-child { border-radius:0 8px 8px 0; }
.pricing-card:not(.featured):hover {
  z-index: 10;
  transform: scale(1.04);
  border-color: var(--gold-dim);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(201,168,76,0.12), 0 16px 40px rgba(0,0,0,0.45);
}
.pricing-card.featured {
  background: linear-gradient(170deg, var(--depth) 0%, rgba(201,168,76,0.06) 100%);
  padding: 3.75rem 2.75rem;
  z-index: 2;
  border: 2px solid var(--gold-dim);
  border-radius: 12px;
  margin: -1.5rem -4px;
  box-shadow:
    0 0 60px rgba(201,168,76,0.18),
    0 20px 50px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(201,168,76,0.1);
}
.pricing-card.featured::before {
  content:'MOST POPULAR';
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.18em;
  color:var(--void); background:var(--gold); padding:.35rem 1rem; border-radius:20px;
  font-weight:600;
}
.pricing-card.featured .pricing-price { font-size:3.2rem; }
.pricing-card.featured .pricing-tier { color:var(--gold); font-size:.72rem; }
.pricing-card.featured .pricing-per { color:var(--gold-dim); }
.pricing-card.featured .btn-pricing { font-size:.78rem; padding:1rem 2rem; }
.pricing-tier { font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.75rem; }
.pricing-price { font-family:'Cinzel',serif; font-size:2.5rem; font-weight:700; color:var(--gold-light); line-height:1; margin-bottom:.25rem; }
.pricing-price span { font-size:1rem; color:var(--text-dim); }
.pricing-per { font-size:.85rem; font-style:italic; color:var(--text-dim); margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid var(--border); }
.pricing-features { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin-bottom:2.5rem; }
.pricing-features li { display:flex; align-items:flex-start; gap:.75rem; font-size:.95rem; color:var(--text-mid); line-height:1.4; }
.pricing-features li .check { color:var(--gold); flex-shrink:0; margin-top:1px; }
.pricing-features li .cross { color:var(--text-dim); flex-shrink:0; margin-top:1px; }
.btn-pricing { display:block; font-family:'Cinzel',serif; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; text-align:center; text-decoration:none; padding:.85rem; border-radius:4px; cursor:pointer; transition:all .2s; }
.btn-pricing:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.btn-pricing:active { transform:scale(0.97); }
.btn-pricing-ghost { color:var(--text-mid); border:1px solid var(--border); }
.btn-pricing-ghost:hover { border-color:var(--gold-dim); color:var(--gold); }
.btn-pricing-gold { color:var(--void); background:linear-gradient(135deg,var(--gold),var(--gold-light)); }
.btn-pricing-gold:hover { box-shadow:var(--glow-gold); }

/* Trial badge + CTA on pricing cards */
.pricing-desc { font-size:.85rem; font-style:italic; color:var(--text-dim); line-height:1.5; margin-top:-1rem; margin-bottom:1.5rem; }
.pricing-trial-wrap { margin-top:auto; text-align:center; }
@keyframes pricing-trial-shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pricing-trial-glow { 0%,100%{box-shadow:0 0 10px rgba(107,203,139,.15)} 50%{box-shadow:0 0 22px rgba(107,203,139,.4)} }
.pricing-trial-badge {
  display:inline-block; margin-bottom:.75rem;
  font-family:'JetBrains Mono',monospace; font-size:.52rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:#fff; padding:4px 14px; border-radius:20px;
  background:linear-gradient(135deg,#4caf7c,#6bcb8b,#4caf7c); background-size:200% 100%;
  animation:pricing-trial-shimmer 3s ease-in-out infinite;
}
.pricing-trial-zero { font-family:'Cinzel',serif; font-size:1.6rem; font-weight:700; color:#6bcb8b; line-height:1; margin-bottom:2px; }
.pricing-trial-sub { font-family:'JetBrains Mono',monospace; font-size:.5rem; color:rgba(107,203,139,.65); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.75rem; }
.btn-pricing-trial {
  color:#6bcb8b; border:1px solid rgba(107,203,139,.45);
  background:linear-gradient(135deg,rgba(107,203,139,.12),rgba(107,203,139,.06));
  animation:pricing-trial-glow 2s ease-in-out infinite;
}
.btn-pricing-trial:hover { background:linear-gradient(135deg,rgba(107,203,139,.22),rgba(107,203,139,.1)); border-color:rgba(107,203,139,.7); }
.pricing-trial-after { font-family:'JetBrains Mono',monospace; font-size:.48rem; color:var(--text-dim); margin-top:.6rem; }

/* ── CTA ── */
.cta-section { padding:8rem 4rem; max-width:900px; margin:0 auto; text-align:center; position:relative; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(201,168,76,.05) 0%,transparent 70%); }
.cta-title { font-family:'Cinzel',serif; font-size:clamp(2rem,5vw,4rem); font-weight:900; line-height:1.1; margin-bottom:1.5rem; }
.cta-sub { font-size:1.2rem; font-style:italic; color:var(--text-mid); margin-bottom:3rem; }

/* ── Footer ── */
footer { position:relative; z-index:1; border-top:1px solid var(--border); padding:3rem 4rem; display:flex; align-items:center; justify-content:space-between; background:var(--abyss); }
.footer-brand { font-family:'Cinzel',serif; font-size:.8rem; font-weight:700; color:var(--gold); letter-spacing:.1em; transition:color .2s; }
.footer-brand:hover { color:var(--gold-light); }
.footer-links { display:flex; gap:2rem; list-style:none; }
.footer-links a { font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-bottom-color .2s; }
.footer-links a:hover { color:var(--text-mid); border-bottom-color:var(--text-dim); }
.footer-copy { font-family:'JetBrains Mono',monospace; font-size:.6rem; color:var(--text-dim); }
.footer-copy a { color:var(--gold-dim); transition:color .2s; }
.footer-copy a:hover { color:var(--gold); }

/* ── Divider ── */
.divider { position:relative; z-index:1; height:1px; background:linear-gradient(90deg,transparent 0%,var(--border) 20%,var(--gold-dim) 50%,var(--border) 80%,transparent 100%); }

/* ── Reveal ── visible by default, JS adds .js-loaded to enable animation */
.reveal { opacity:1; transform:none; }
.js-loaded .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.js-loaded .reveal.visible { opacity:1; transform:none; }

/* Accessibility — disable animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-loaded .reveal { opacity:1; transform:none; }
  .cursor, .cursor-ring { display:none !important; }
  body { cursor:auto !important; }
}
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ── Toast ── */
.toast-stack { position:fixed; bottom:1.5rem; right:1.5rem; z-index:600; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:10px 16px; border-radius:5px; font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.05em; border:1px solid; backdrop-filter:blur(12px); animation:toastIn .25s ease; transition:opacity .3s,transform .3s; }
.toast.ok { background:rgba(107,203,139,.12); border-color:rgba(107,203,139,.35); color:#6bcb8b; }
.toast.err { background:rgba(224,90,90,.12); border-color:rgba(224,90,90,.35); color:#e05a5a; }
.toast.out { opacity:0; transform:translateX(10px); }
@keyframes toastIn { from{opacity:0;transform:translateX(10px)} }

/* ── Hamburger menu ── */
.nav-hamburger {
  display:none; background:none; border:1px solid var(--border); border-radius:4px;
  padding:8px 7px; cursor:pointer; flex-direction:column; gap:4px; align-items:center;
  justify-content:center; width:36px; height:36px;
}
.nav-hamburger span {
  display:block; width:18px; height:2px; background:var(--text-mid);
  border-radius:1px; transition:transform 0.2s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── Cookie banner ── */
.cookie-banner {
  position:fixed; bottom:16px; left:16px; right:16px; z-index:10000;
  background:rgba(13,15,26,0.98); border:1px solid rgba(180,150,80,0.18);
  border-radius:8px; padding:16px 24px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  display:none; flex-direction:row; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:0.85rem; color:rgba(140,128,112,0.95);
  box-shadow:0 8px 32px rgba(0,0,0,0.5); backdrop-filter:blur(12px);
  animation:cookieSlideIn .4s ease;
}
.cookie-banner a { color:var(--gold); text-decoration:underline; }
.cookie-buttons { display:flex; gap:8px; flex-shrink:0; }
.cookie-btn {
  padding:10px 18px; border-radius:4px; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s;
}
.cookie-btn-decline { border:1px solid rgba(180,150,80,0.18); background:transparent; color:rgba(140,128,112,0.95); }
.cookie-btn-decline:hover { border-color:rgba(201,168,76,0.35); color:rgba(140,128,112,1); }
.cookie-btn-accept { border:1px solid rgba(201,168,76,0.28); background:rgba(201,168,76,0.07); color:#e4c678; }
.cookie-btn-accept:hover { background:rgba(201,168,76,0.12); border-color:rgba(201,168,76,0.5); }
@keyframes cookieSlideIn { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── Responsive ── */
@media (max-width:900px) {
  nav { padding:0 1.5rem; }
  .nav-hamburger { display:flex; }
  .nav-links {
    display:none; position:absolute; top:72px; left:0; right:0;
    background:rgba(7,8,13,0.95); backdrop-filter:blur(20px);
    flex-direction:column; padding:1.5rem 2rem; gap:1rem;
    border-bottom:1px solid var(--border);
  }
  .nav-links.mobile-open { display:flex; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stat-item { padding:1.5rem 1rem; border-bottom:1px solid var(--border); }
  .stat-item:nth-child(even) { border-right:none; }
  .stat-item:nth-child(odd) { border-right:1px solid var(--border); }
  .stat-item:nth-child(5), .stat-item:nth-child(6) { border-bottom:none; }
  .plugin-tabs { flex-direction:column; }
  .plugin-tab { border-right:none; border-bottom:1px solid var(--border); padding:.75rem 1rem; justify-content:flex-start; }
  .plugin-tab:last-child { border-bottom:none; }
  .section-dots { display:none; }
  .faq-grid { grid-template-columns:1fr; }
  section,.features-section,.plugins-section,.how-section,.pricing-section,.faq-section { padding:4rem 1.5rem; }
  .features-header { grid-template-columns:1fr; gap:2rem; margin-bottom:3rem; }
  .features-grid { grid-template-columns:1fr; }
  .plugin-row { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; gap:2rem; }
  .steps::before { display:none; }
  .pricing-cards { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:1.5rem; text-align:center; padding:2rem 1.5rem; }
  .footer-links { flex-wrap:wrap; justify-content:center; gap:1rem; }
}

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sr-only:focus {
  position: fixed; top: 0; left: 0; width: auto; height: auto;
  padding: 12px 20px; margin: 0; overflow: visible; clip: auto; white-space: normal;
  background: var(--gold); color: var(--void); font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; font-weight: 600; z-index: 10000; border-radius: 0 0 6px 0;
}

/* ── Mock-up components (used in plugin spotlight panels) ── */
.mock-inner { padding:1rem; }
.mock-badges { display:flex; gap:.5rem; margin-bottom:.75rem; }
.mock-badge {
  padding:.3rem .6rem; font-family:'JetBrains Mono',monospace; font-size:.6rem;
  border-radius:4px; border:1px solid;
}
.mock-badge-green { background:rgba(107,203,139,0.12); color:var(--green); border-color:rgba(107,203,139,0.25); }
.mock-badge-red { background:rgba(224,90,90,0.12); color:var(--red); border-color:rgba(224,90,90,0.25); }
.mock-badge-gold { background:rgba(201,168,76,0.07); color:var(--gold); border-color:var(--gold-dim); }
.mock-badge-cyan { background:rgba(78,205,196,0.12); color:var(--cyan); border-color:rgba(78,205,196,0.25); }
.mock-rules { display:flex; flex-direction:column; gap:.4rem; }
.mock-rule-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem .7rem; background:var(--depth); border:1px solid var(--border);
  border-radius:5px; font-size:.65rem;
}
.mock-rule-name { color:var(--text-prime); }
.mock-rule-on { color:var(--green); }
.mock-rule-off { color:var(--text-dim); }
.mock-tickets { display:flex; flex-direction:column; gap:.4rem; }
.mock-ticket {
  padding:.5rem .7rem; background:var(--depth); border:1px solid var(--border);
  border-radius:5px; font-size:.65rem;
}
.mock-ticket-header { display:flex; justify-content:space-between; }
.mock-ticket-id { color:var(--gold); }
.mock-ticket-ago { color:var(--text-dim); }
.mock-ticket-title { color:var(--text-prime); margin-top:.2rem; }
.mock-ticket-assign { color:var(--text-dim); font-size:.55rem; margin-top:.15rem; }

/* ── Background band for alternating sections ── */
.section-band { background:var(--abyss); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ── Plugin showcase tabs ── */
.plugin-tabs {
  display:flex; gap:0; border:1px solid var(--border); border-radius:6px;
  overflow:hidden; margin-bottom:2.5rem; background:var(--abyss);
}
.plugin-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.5rem; background:transparent; border:none;
  border-right:1px solid var(--border); cursor:pointer;
  transition:background .25s,color .25s;
  font-family:'JetBrains Mono',monospace; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim);
}
.plugin-tab:last-child { border-right:none; }
.plugin-tab:hover { background:var(--depth); color:var(--text-mid); }
.plugin-tab:hover:not(.active) { box-shadow:inset 0 1px 0 rgba(201,168,76,0.15); }
.plugin-tab.active {
  background:var(--depth); color:var(--gold);
  box-shadow:inset 0 2px 0 var(--gold-dim);
}
.plugin-tab:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.plugin-tab-icon { font-size:1.1rem; }
.plugin-tab-name { white-space:nowrap; }
.plugin-panels { position:relative; }
.plugin-panel { display:none; animation:tabFadeIn .4s ease; }
.plugin-panel.active { display:block; }
@keyframes tabFadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ── Section progress dots ── */
.section-dots {
  position:fixed; right:1.5rem; top:50%; transform:translateY(-50%);
  z-index:50; display:flex; flex-direction:column; gap:.75rem;
}
.section-dot {
  width:8px; height:8px; border-radius:50%; background:var(--text-dim);
  border:1px solid var(--border); transition:background .3s,transform .3s,box-shadow .3s;
  cursor:pointer; text-decoration:none;
}
.section-dot:hover { background:var(--text-mid); transform:scale(1.3); }
.section-dot:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.section-dot.active {
  background:var(--gold); border-color:var(--gold-dim);
  box-shadow:0 0 8px rgba(201,168,76,0.4); transform:scale(1.2);
}

/* ── FAQ ── */
.faq-section { padding:7rem 4rem; max-width:1100px; margin:0 auto; text-align:left; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:900px; margin:0 auto; align-items:start; }
.faq-item {
  background:var(--abyss); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  transition:border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.faq-item:hover {
  border-color:var(--gold-dim) !important; transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
}
.faq-item summary {
  padding:1rem 1.25rem; font-family:'Cinzel',serif; font-size:.85rem; font-weight:600;
  color:var(--text-prime); cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; border-radius:6px; }
.faq-toggle { color:var(--gold-dim); transition:transform .3s; display:inline-block; }
.faq-item[open] .faq-toggle { transform:rotate(45deg); }
.faq-answer {
  padding:0 1.25rem 1rem; font-size:.92rem; font-style:italic;
  color:var(--text-mid); line-height:1.6;
}
.faq-item[open] .faq-answer { animation:faqReveal .3s ease; }
@keyframes faqReveal { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ── CTA pulse ── */
.cta-section::before {
  animation:ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }