/* Design tokens */
:root{
  --bg:#0c0d1a; --bg-2:#0f1023; --card:#0f1330; --muted:#9aa3b2;
  --brand:#10b981; --brand-2:#2dd4bf; --brand-3:#14b8a6;
  --accent:#ffd700; --accent-2:#ff6b35; --hot:#ff4757;
  --stroke:rgba(255,255,255,.08); --ring:rgba(16,185,129,.35);
  --grid:rgba(0,255,255,.08); --shadow:0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0; color:#e7ecf3;
  /* Smooth, large gradients to avoid abrupt edges on desktop */
  background-color: var(--bg-2);
  background-image:
    radial-gradient(ellipse at 15% -20%, rgba(30,42,90,.70) 0%, rgba(30,42,90,.45) 35%, rgba(30,42,90,.20) 60%, rgba(30,42,90,0) 80%),
    radial-gradient(ellipse at 85% 10%, rgba(26,32,74,.65) 0%, rgba(26,32,74,.38) 40%, rgba(26,32,74,.15) 70%, rgba(26,32,74,0) 85%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  background-repeat: no-repeat;
  background-size: 2000px 1400px, 2200px 1600px, auto;
  background-attachment: scroll;
  background-blend-mode: normal, normal, normal;
}

.container{width:min(1200px, 100% - 2rem); margin-inline:auto}
.section{padding:64px 0}
.section .section-head{margin-bottom:28px}
.section .section-head h2{font-size:36px; margin:0 0 8px; letter-spacing:.3px}
.section .section-head p{margin:0; color:var(--muted)}

/* FX */
.fx.fx-grid{position:fixed; inset:0; background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px); background-size:60px 60px; opacity:.5; pointer-events:none; z-index:-2}
.fx.fx-glow{position:fixed; inset:-20% -10%; background:radial-gradient(circle at 20% 20%, rgba(16,185,129,.15), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,215,0,.12), transparent 40%); filter:blur(40px); z-index:-1}

/* Runes and snow layers */
.hero-orbs{position:absolute; inset:0; pointer-events:none}
.runes-layer,.snow-layer{position:absolute; inset:0; overflow:hidden}
.rune{position:absolute; font-family:"JetBrains Mono", monospace; color:rgba(231,236,243,.65); text-shadow:0 0 12px rgba(231,236,243,.25); opacity:.85; will-change: transform, opacity}
.rune.small{font-size:14px}
.rune.medium{font-size:18px}
.rune.large{font-size:24px}
.rune.glow{color:#e6f2ff; text-shadow:0 0 16px rgba(102,126,234,.45)}
@keyframes driftRune{0%{transform:translateY(10vh) rotate(0deg)}100%{transform:translateY(-110vh) rotate(360deg)}}

.snowflake{position:absolute; width:2px; height:2px; border-radius:50%; background:#dbe4ee; opacity:.75; filter:blur(.2px)}
@keyframes fallSnow{0%{transform:translateY(-5vh) translateX(0)}100%{transform:translateY(110vh) translateX(20px)}}

@media (prefers-reduced-motion: reduce){
  .rune, .snowflake{animation:none!important}
}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:blur(10px); background:linear-gradient(180deg, rgba(12,13,26,.85), rgba(12,13,26,.45)); border-bottom:1px solid var(--stroke); z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:900; letter-spacing:.4px}
.brand-mark{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--brand), var(--brand-2), var(--brand-3)); box-shadow:0 10px 30px rgba(16,185,129,.35)}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:#e7ecf3; text-decoration:none; font-weight:600; opacity:.85}
.nav .btn-small{padding:.5rem .9rem; border-radius:999px; border:1px solid var(--stroke)}
/* Effects toggle */
.toggle{display:inline-flex; align-items:center; gap:8px; user-select:none}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.toggle .slider{position:relative; width:38px; height:22px; background:rgba(255,255,255,.12); border-radius:999px; border:1px solid var(--stroke); transition:.2s}
.toggle .slider:after{content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#e7ecf3; border-radius:50%; transition:.2s}
.toggle input:checked + .slider{background:linear-gradient(135deg, var(--brand), var(--brand-3))}
.toggle input:checked + .slider:after{transform:translateX(16px); background:#081019}
.toggle .toggle-label{color:#cfd8e6; font-size:12px; letter-spacing:.6px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; font-weight:800; letter-spacing:.3px; transition:.2s ease; border-radius:14px}
.btn-lg{padding:1rem 1.25rem; font-size:18px}
.btn-primary{color:#081019; background:linear-gradient(135deg, var(--brand), var(--brand-2), var(--brand-3)); box-shadow:0 15px 40px var(--ring); border:1px solid rgba(255,255,255,.12)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 60px var(--ring)}
.btn-ghost{color:#e7ecf3; background:transparent; border:1px solid var(--stroke)}
.btn-ghost:hover{background:rgba(255,255,255,.04)}

/* Hero */
.hero{position:relative; padding:96px 0}
.hero-inner{display:grid; gap:22px; text-align:center}
.hero-badge{display:inline-block; margin-inline:auto; padding:.35rem .8rem; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:#0b1520; background:linear-gradient(135deg,#ff4757,#ff6b35,#ff8c42); box-shadow:0 12px 35px rgba(255,107,53,.35)}
.hero-title{margin:0; font-size:56px; font-weight:900; letter-spacing:.5px}
.hero-title .accent{color:var(--accent); text-shadow:0 0 18px rgba(255,215,0,.35)}
.hero-sub{margin:0 auto; max-width:780px; color:#cdd6e3; font-size:20px}
.hero-ctas{display:grid; gap:10px; justify-content:center}
.hero-ctas .subcopy{color:#a9b4c6; font-size:14px}
.hero-metrics{display:flex; gap:26px; justify-content:center; margin-top:8px}
.metric .num{font-size:34px; font-weight:900}
.metric .label{color:var(--muted); font-size:12px; letter-spacing:.8px; text-transform:uppercase}
.hero-orbs{position:absolute; inset:0; pointer-events:none}
.orb{position:absolute; width:14px; height:14px; border-radius:50%; background:radial-gradient(circle, #00ffff, rgba(0,255,255,.3)); box-shadow:0 0 18px #00ffff; opacity:.8; animation:orbit 7s linear infinite}
.orb-1{left:50%; top:20%} .orb-2{left:20%; top:70%; animation-duration:8.5s} .orb-3{left:80%; top:60%; animation-duration:6.5s}
@keyframes orbit{0%{transform:rotate(0) translateX(80px) rotate(0)}100%{transform:rotate(360deg) translateX(80px) rotate(-360deg)}}

/* Value & upgrade cards */
.cards-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch}
.card{display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:16px; padding:22px; box-shadow:var(--shadow)}
.value-card .card-icon,.upgrade-card .card-icon{font-size:24px; margin-bottom:6px}
.card h3{margin:6px 0 4px; font-size:18px}
.card p{margin:0; color:var(--muted)}
.card-spacer{flex:1 1 auto}
.upgrade-card.highlight{border-color:rgba(255,215,0,.45); box-shadow:0 18px 50px rgba(255,215,0,.15)}

/* Showcase */
.showcase .templates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch}
.tpl{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border:1px solid var(--stroke); border-radius:16px; padding:18px; transition:.2s ease; overflow:hidden; min-height:160px}
.tpl:hover{transform:translateY(-3px); box-shadow:0 18px 40px rgba(102,126,234,.25); border-color:rgba(102,126,234,.45)}
.tpl-badge{position:absolute; top:12px; right:12px; padding:.25rem .55rem; font-size:11px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--stroke)}
.tpl h3{margin:0 0 6px}
.tpl p{margin:0; color:#b8c2d1}
.tpl.more{display:grid; place-items:center; text-align:center}

.cta-center{text-align:center; margin-top:22px}

/* Proof */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.quote{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--stroke); border-radius:16px; padding:18px; font-size:15px}
.quote blockquote{margin:0 0 8px}
.quote figcaption{color:var(--muted); font-size:13px}

/* Pricing */
.pricing-wrap{display:grid; place-items:center}
.pricing-card{width:min(880px,100%); border-radius:20px; border:1px solid var(--stroke); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); box-shadow:var(--shadow); padding:28px}
.price-row{display:flex; align-items:flex-end; gap:16px}
.price-accent{font-size:48px; font-weight:900; color:var(--accent); text-shadow:0 0 18px rgba(255,215,0,.25)}
.price-compare{color:#8893a6; text-decoration:line-through}
.benefits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; padding:16px 0 0; margin:0; list-style:none}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.trust{display:flex; gap:12px; color:var(--muted); margin-top:6px; font-size:12px}

/* FAQ */
.faq-list{display:grid; gap:10px}
.faq details{border:1px solid var(--stroke); border-radius:14px; padding:14px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}
.faq summary{cursor:pointer; font-weight:700}
.faq p{color:#c8d0dc}

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:50}
.modal.hidden{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(8,16,25,.6); backdrop-filter:blur(6px)}
.modal-dialog{position:relative; width:min(720px, 100% - 2rem); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); padding:18px 18px 16px}
.modal:not(.hidden) .modal-dialog{animation:modalIn .24s ease both}
.modal:not(.hidden) .modal-backdrop{animation:fadeIn .24s ease both}
@keyframes modalIn{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.modal-close{position:absolute; top:10px; right:10px; background:transparent; border:1px solid var(--stroke); color:#e7ecf3; border-radius:10px; padding:4px 8px; cursor:pointer}
.modal-header{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.modal-badge{display:inline-block; padding:.2rem .5rem; font-size:11px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--stroke)}
.modal-title{margin:0; font-size:20px}
.modal-body{color:#cfd8e6}
modal-actions{display:flex; gap:10px; margin-top:12px; justify-content:flex-end}
.modal-nav{margin-right:auto; display:flex; gap:8px}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.chip{display:inline-flex; align-items:center; gap:6px; padding:.25rem .5rem; font-size:12px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.05); color:#dbe4ee}
.chip .icon{font-size:14px; display:inline-flex; align-items:center}
.chip .icon svg{width:14px; height:14px; display:block; fill:currentColor}

/* Rune numbers */
.rune-num{margin-top:8px; color:var(--muted); font-size:12px}
.modal .modal-rune{margin-left:auto; color:var(--muted); font-size:12px}

/* Modal image */
.modal-hero{width:100%; height:auto; border-radius:12px; border:1px solid var(--stroke); display:block; margin:8px 0 10px}

/* Footer */
.site-footer{border-top:1px solid var(--stroke); background:rgba(12,13,26,.6)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:18px 0}
.footer-inner a{color:#dbe4ee; text-decoration:none}
.footer-inner .dim{color:var(--muted); margin-top:6px}
.footer-logo{height:42px; width:auto; display:block}
.brand-footer{display:inline-block}

/* Responsive */
@media (max-width: 900px){
  .cards-3, .showcase .templates, .quotes{grid-template-columns:1fr}
  .hero-title{font-size:40px}
  .benefits{grid-template-columns:1fr}
  .tpl{min-height:unset}
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}