:root{
  --accent:#f47a1f;
  --accent-dim:#a85618;
  --accent-bg:#3a2310;
  --gold:#f0920f;
}

body{
  background:
    radial-gradient(1100px 600px at 75% -10%, rgba(244,122,31,.06), transparent 60%),
    radial-gradient(900px 700px at 10% 20%, rgba(244,122,31,.025), transparent 60%),
    var(--bg);
}

.btn-primary:hover{background:#ff8f3a;box-shadow:0 6px 28px -8px rgba(244,122,31,.55)}
.cta-row .btn-primary{background:linear-gradient(105deg,#f47a1f 0%,#f0920f 52%,#ffb257 100%);color:#160a02}
.cta-row .btn-primary:hover{background:linear-gradient(105deg,#ff8f3a 0%,#ffa63a 52%,#ffc27a 100%);box-shadow:0 6px 30px -8px rgba(244,122,31,.55)}
@keyframes cta-breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(244,122,31,0)}
  50%{box-shadow:0 6px 30px -8px rgba(244,122,31,.5)}
}
@keyframes glint{
  0%,70%,100%{color:var(--text-dim);text-shadow:none}
  82%{color:var(--text);text-shadow:0 0 10px rgba(244,122,31,.55)}
  94%{color:var(--text-dim);text-shadow:0 0 0 rgba(244,122,31,0)}
}

.hero::before{background:none;animation:none}
.hero-fx{background:radial-gradient(660px 520px at 70% 42%, rgba(244,122,31,.12), rgba(244,122,31,.03) 48%, transparent 70%)}
.hero-fx::before{background:radial-gradient(640px 580px at 14% 62%, rgba(240,146,15,.16), transparent 64%)}
.hero-fx::after{background:radial-gradient(440px 360px at 50% 66%, rgba(244,122,31,.05), transparent 64%)}
.hero-vignette{
  background:
    linear-gradient(118deg, rgba(244,122,31,.06) 0%, transparent 32%, transparent 58%, rgba(240,146,15,.09) 100%),
    radial-gradient(126% 122% at 50% 38%, transparent 48%, rgba(7,8,10,.5) 100%),
    linear-gradient(180deg, rgba(7,8,10,.32) 0%, transparent 22%, transparent 66%, rgba(7,8,10,.62) 100%);
}
.hero-topo path{stroke:rgba(244,122,31,.18)}
.hero-topo .t-gold path{stroke:rgba(240,146,15,.16)}
.hero-motes{display:none}

.hero h1 .accent::after{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%),
    linear-gradient(100deg, rgba(244,122,31,.34) 0%, rgba(240,146,15,.36) 100%);
}

.screen{box-shadow:0 0 0 1px rgba(255,255,255,.01) inset,0 30px 60px -30px rgba(0,0,0,.7),0 0 100px -30px rgba(244,122,31,.22)}
.hero .screen{
  box-shadow:
    0 0 0 1px rgba(244,122,31,.1) inset,
    0 30px 70px -28px rgba(0,0,0,.75),
    0 0 130px -22px rgba(244,122,31,.24),
    0 0 70px -30px rgba(240,146,15,.14);
}
.hero .screen::before{background:linear-gradient(180deg, rgba(244,122,31,.12), transparent 16%)}

.step-num::after{
  background:
    linear-gradient(90deg, transparent, rgba(244,122,31,.9), transparent),
    linear-gradient(90deg, var(--accent-dim), transparent);
  background-size:38% 100%, 100% 100%;
  background-repeat:no-repeat;
  background-position:-55% 0, 0 0;
}
@keyframes glyph-bob{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(244,122,31,0))}
  50%{transform:translateY(-3px);filter:drop-shadow(0 0 6px rgba(244,122,31,.5))}
}

.price-card::after{
  background:conic-gradient(from var(--edge-angle),
    transparent 0deg,transparent 240deg,
    rgba(244,122,31,.15) 280deg,rgba(244,122,31,.85) 310deg,rgba(244,122,31,.15) 340deg,
    transparent 360deg);
}
.price-card:hover{box-shadow:0 18px 40px -22px rgba(0,0,0,.7), 0 0 60px -30px rgba(244,122,31,.18)}

.sticky-cta:hover{background:#ff8f3a}
.vid-thumb{background:radial-gradient(circle at 50% 50%, rgba(244,122,31,.05), transparent 60%), linear-gradient(180deg, var(--surface-2), var(--bg-2))}

.svr-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;position:relative;z-index:1}
.svr-console{
  position:relative;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#111417,#0a0c0e);
  border:1px solid var(--border);
  box-shadow:0 0 0 1px rgba(244,122,31,.08) inset,0 30px 70px -28px rgba(0,0,0,.8),0 0 120px -30px rgba(244,122,31,.22);
  font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
  max-width:600px;margin-left:0;margin-right:auto;
}
.svr-console__bar{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--border);background:var(--surface);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-fade);
}
.svr-console__dots{display:flex;gap:5px}
.svr-console__dots i{width:9px;height:9px;border-radius:50%;background:var(--border-2);display:block}
.svr-console__dots i.live{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2.2s infinite}
.svr-console__title{margin-left:2px}
.svr-console__body{padding:16px 18px;display:block;min-height:220px}
.svr-line{display:block;white-space:pre-wrap;color:var(--text-dim);opacity:0;animation:svr-type .35s ease forwards}
.svr-line .t{color:var(--text-fade)}
.svr-line .ok{color:#5fb86b}
.svr-line .warn{color:var(--gold)}
.svr-line .acc{color:var(--accent)}
.svr-line .cmd{color:var(--text)}
.svr-line:nth-child(1){animation-delay:.15s}
.svr-line:nth-child(2){animation-delay:.5s}
.svr-line:nth-child(3){animation-delay:.85s}
.svr-line:nth-child(4){animation-delay:1.2s}
.svr-line:nth-child(5){animation-delay:1.55s}
.svr-line:nth-child(6){animation-delay:1.9s}
.svr-line:nth-child(7){animation-delay:2.25s}
.svr-caret{display:inline-block;width:8px;height:15px;background:var(--accent);vertical-align:-2px;margin-left:2px;animation:svr-blink 1.05s steps(1) infinite}
@keyframes svr-type{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes svr-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .svr-line{opacity:1;animation:none}
  .svr-caret{animation:none}
}

@media (max-width: 980px){
  .svr-hero-grid{grid-template-columns:1fr;gap:28px}
  .svr-console{width:100%;max-width:560px;margin-inline:auto}
}
