:root{
  --bg:#060606; --bg2:#0d0909; --red:#e4202e; --red-d:#7a0f18; --ink:#f3ece8; --mute:#a79c98;
  --line:rgba(243,236,232,.1); --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.6;overflow-x:hidden}
h1,h2,h3,.btn,.eyebrow,.brand{font-family:'Jost','Inter',sans-serif}
a{color:inherit;text-decoration:none}
code{background:#1a1212;padding:.1em .4em;border-radius:6px;color:var(--red)}
#petals{position:fixed;inset:0;pointer-events:none;z-index:0}
main,footer,.nav{position:relative;z-index:1}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:rgba(6,6,6,.75);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:500;letter-spacing:.3em;font-size:1.05rem}
.brand i,.foot i{color:var(--red);font-style:normal}
.links{display:flex;align-items:center;gap:28px;font-size:.92rem;color:var(--mute)}
.links a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;width:34px;height:34px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:7px 4px}

/* buttons */
.btn{display:inline-block;padding:13px 30px;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:999px;font-weight:500;letter-spacing:.08em;text-indent:.08em;cursor:pointer;transition:.25s;font-size:.95rem}
.btn:hover{background:#ff2c3b;box-shadow:0 0 30px rgba(228,32,46,.45)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(243,236,232,.3)}
.btn-ghost:hover{background:rgba(243,236,232,.08);box-shadow:none;border-color:var(--ink)}
.btn-sm{padding:8px 20px;color:#fff}
.links .btn-sm:hover{color:#fff}

/* hero */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 6vw 70px;overflow:hidden}
.sun{position:absolute;top:50%;left:50%;width:min(62vw,520px);aspect-ratio:1;transform:translate(-50%,-62%);border-radius:50%;background:radial-gradient(circle at 50% 30%,#e8202e 0%,#9d1520 55%,#2a0508 100%);filter:blur(.3px);opacity:.9;box-shadow:0 0 140px rgba(228,32,46,.25)}
.cloud{position:absolute;height:10px;background:linear-gradient(90deg,transparent,var(--red));border-radius:999px;opacity:.85}
.cloud::before{content:"";position:absolute;right:20%;top:-6px;width:36%;height:22px;background:var(--red);border-radius:999px}
.c1{width:260px;top:36%;left:6%;animation:drift 14s ease-in-out infinite alternate}
.c2{width:240px;top:52%;right:6%;transform:scaleX(-1);animation:drift2 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(40px)}}
@keyframes drift2{to{transform:scaleX(-1) translateX(40px)}}
.hero>*:not(.sun):not(.cloud){position:relative;z-index:2}
.hero-logo{width:min(86vw,520px);height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));animation:float 7s ease-in-out infinite;-webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
.logo-fallback{font-family:'Jost';font-size:3rem;letter-spacing:.5em;padding:80px 0}
@keyframes float{50%{transform:translateY(-10px)}}
.eyebrow{margin-top:8px;color:var(--ink);font-size:.78rem;letter-spacing:.2em;text-indent:.2em}
.eyebrow b{color:var(--red);font-weight:500}
h1{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:500;line-height:1.08;margin:18px 0}
h1 em{font-style:normal;color:var(--red)}
.lead{max-width:600px;color:var(--mute);font-size:1.08rem}
.cta{display:flex;gap:14px;margin:34px 0 50px;flex-wrap:wrap;justify-content:center}
.stats{display:flex;gap:clamp(18px,5vw,64px);list-style:none;flex-wrap:wrap;justify-content:center}
.stats strong{display:block;font-family:'Jost';font-size:1.5rem;font-weight:500}
.stats span{font-size:.8rem;color:var(--mute);letter-spacing:.05em}

/* sections */
/* Every section is full width; side padding keeps the content centered in a 1200px column. */
.section{padding:100px max(6vw,calc((100% - 1200px)/2))}
.dim{background:linear-gradient(180deg,transparent,var(--bg2),transparent)}
h2{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:500;margin-bottom:40px;display:flex;align-items:baseline;gap:16px}
h2 small{color:var(--red);font-size:.9rem;letter-spacing:.2em}
.sub{margin:-24px 0 36px;color:var(--mute)}
.grid{display:grid;gap:22px}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:linear-gradient(160deg,#120c0c,#0a0707);border:1px solid var(--line);border-radius:var(--r);padding:30px;transition:.3s}
.card:hover{transform:translateY(-4px);border-color:rgba(228,32,46,.5);box-shadow:0 12px 40px rgba(228,32,46,.12)}
.card h3{font-weight:500;font-size:1.3rem;margin-bottom:8px}
.card p{color:var(--mute);font-size:.96rem}
.ico{color:var(--red);font-size:1.8rem;margin-bottom:14px}
.card.line{border-left:3px solid var(--red)}

/* pricing */
.plan{position:relative;background:#0c0808;border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.plan.featured{border-color:var(--red);box-shadow:0 0 60px rgba(228,32,46,.18);background:linear-gradient(160deg,#1a0a0c,#0c0808)}
.plan h3{font-weight:500;font-size:1.3rem;letter-spacing:.1em}
.price{font-family:'Jost';font-size:3rem;font-weight:500}
.price span{font-size:1rem;color:var(--mute)}
.plan ul{list-style:none;flex:1;color:var(--mute)}
.plan li{padding:8px 0;border-bottom:1px solid var(--line)}
.plan li::before{content:"›";color:var(--red);margin-right:10px}
.tag{position:absolute;top:-12px;left:30px;background:var(--red);padding:3px 14px;border-radius:999px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.plan .btn{text-align:center}

/* faq */
.faq{max-width:780px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-family:'Jost';font-size:1.15rem;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";color:var(--red);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--mute);margin-top:10px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:780px}
.contact label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--mute);letter-spacing:.04em}
.contact .full{grid-column:1/-1}
input,select,textarea{background:#0e0a0a;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(228,32,46,.2)}
.contact .btn{grid-column:1/-1;justify-self:start}

/* footer */
footer{border-top:1px solid var(--line);text-align:center;padding-bottom:30px}
.banner{width:100%;max-height:300px;object-fit:cover;opacity:.9}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:24px 6vw 0;color:var(--mute);font-size:.85rem;letter-spacing:.05em}
.foot b{color:var(--ink);font-weight:500}

/* config-driven additions */
[hidden]{display:none!important}
main{counter-reset:sec}
.section{counter-increment:sec}
h2 small::before{content:counter(sec,decimal-leading-zero)}

.notice{position:relative;z-index:30;text-align:center;padding:10px 5vw;font-size:.9rem;background:#1a0a0c;border-bottom:1px solid var(--red-d)}
.notice a{text-decoration:underline;margin-left:4px;font-weight:500}
.notice.warn{background:#3a2606;border-color:#c98a1b;color:#ffd9a0}
.notice.danger{background:#3a0a10;border-color:var(--red);color:#ffc9ce}

.capacity{border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin-bottom:40px;background:#0c0808}
.cap-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'Jost';letter-spacing:.05em}
.cap-bar{height:10px;border-radius:999px;background:#1c1414;margin:14px 0;overflow:hidden}
.cap-bar i{display:block;height:100%;border-radius:999px;background:#3ea66b;transition:width .8s}
.capacity.warn .cap-bar i{background:#e0a030}
.capacity.full .cap-bar i{background:var(--red)}
.capacity.warn{border-color:rgba(224,160,48,.5)}
.capacity.full{border-color:rgba(228,32,46,.6)}
.cap-msg{color:var(--mute);font-size:.95rem}
.alts-title{font-family:'Jost';font-weight:500;font-size:1.05rem;margin:24px 0 12px;letter-spacing:.05em}
.alts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.alt-card{display:block;padding:18px 20px}
.alt-card h5{font-family:'Jost';font-weight:500;font-size:1.05rem;margin-bottom:4px;color:var(--ink)}
.alt-card p{font-size:.88rem}

.tag-warn{background:#c98a1b;color:#190f00}
.tag-off{background:#3a3030;color:var(--ink)}
.plan-desc{color:var(--mute);font-size:.92rem;margin-top:-8px}
.plan.soldout{opacity:.82}
.plan.soldout .price{color:var(--mute)}
.alt-note{font-size:.85rem;color:var(--mute);text-align:center}
.alt-note a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

.hw{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hw div{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#0c0808}
.hw span{display:block;font-size:.72rem;color:var(--red);letter-spacing:.18em;text-transform:uppercase;margin-bottom:2px}
.hw b{font-weight:500;font-size:1.05rem}
.hw-note{margin-top:18px;color:var(--mute);font-size:.9rem}
.discord-cta{max-width:780px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.discord-cta p{color:var(--ink);flex:1;min-width:220px}
.foot a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* mobile */
@media(max-width:760px){
  .burger{display:block}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;padding:20px 5vw;background:#080505;border-bottom:1px solid var(--line);display:none;gap:18px}
  .links.open{display:flex}
  .contact{grid-template-columns:1fr}
  .section{padding:70px 6vw}
  .cloud{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
