:root{
  --bg:#04070f; --panel:rgba(255,255,255,.04); --muted:#b4c2da; --line:rgba(255,255,255,.12);
  --hot1:#ffd98a; --hot2:#ff8a2a; --hot3:#d81f12; --cold3:#2ba9e2; --cyan:#58c9f7; --gold:#e9c46a;
  --disp:"Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--sans); background:var(--bg); color:#eaf1ff; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-text-size-adjust:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--disp); font-weight:800; letter-spacing:-.035em; line-height:1; margin:0; text-wrap:balance; }
img{ max-width:100%; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.kick{ display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan); }
.kick:before{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; }
.grad{ background:linear-gradient(90deg,var(--hot2),#fff 55%,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:800; font-size:16px; padding:15px 28px; border-radius:100px; cursor:pointer; border:0; transition:transform .2s ease, box-shadow .2s ease; }
.btn-warm{ background:linear-gradient(90deg,#ff8a2a,#e11d16); color:#fff; box-shadow:0 10px 30px -10px rgba(225,29,22,.6); }
.btn-cool{ background:linear-gradient(90deg,var(--cyan),#2ba9e2); color:#042034; }
.btn-ghost{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:#fff; }
.btn:hover{ transform:translateY(-2px); }

/* header */
.subnav{ position:sticky; top:0; z-index:50; background:rgba(6,10,20,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.subnav .wrap{ display:flex; align-items:center; gap:22px; height:90px; }
.logo-img{ height:72px; width:auto; background:#fff; padding:7px 13px; border-radius:13px; border:3px solid #1f9fe0; display:block; box-shadow:0 8px 26px -6px rgba(31,159,224,.7); }
@media(max-width:900px){ .logo-img{ height:52px; padding:5px 10px; } }
.subnav .lk{ display:flex; gap:22px; font-size:15.5px; color:#d3ddef; }
.subnav .lk a:hover{ color:#fff; }
.subnav .r{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.subnav .num{ font-weight:800; color:#fff; font-size:18px; white-space:nowrap; }
@media(max-width:900px){ .subnav .lk,.subnav .num{ display:none; } }

/* hero band */
.band{ position:relative; overflow:hidden; padding:74px 0 60px; text-align:center;
  background:radial-gradient(120% 120% at 15% -10%,rgba(255,138,42,.18),transparent 45%),
             radial-gradient(120% 120% at 85% -10%,rgba(47,134,201,.22),transparent 48%), #060b1a; }
.band h1{ font-size:clamp(38px,6vw,68px); margin:16px 0 0; }
.band p{ color:var(--muted); font-size:clamp(17px,1.6vw,21px); max-width:60ch; margin:18px auto 0; }
.band .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }

section{ padding:64px 0; }
.head{ text-align:center; margin-bottom:40px; }
.head h2{ font-size:clamp(30px,4vw,50px); letter-spacing:-.04em; }
.head p{ color:var(--muted); font-size:18px; max-width:60ch; margin:14px auto 0; }

.cards{ display:grid; gap:18px; }
.g2{ grid-template-columns:1fr 1fr; } .g3{ grid-template-columns:repeat(3,1fr); }
@media(max-width:860px){ .g2,.g3{ grid-template-columns:1fr; } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; }
.card h3{ font-size:23px; margin-bottom:14px; color:#fff; }
.card ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.card li{ display:flex; gap:12px; font-size:17px; color:#e4ecf9; }
.card li i{ font-style:normal; font-weight:900; color:var(--cyan); }
.card p{ color:var(--muted); font-size:16.5px; }

/* pricing */
.prices{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:720px; margin:0 auto; }
@media(max-width:700px){ .prices{ grid-template-columns:1fr; } }
.price{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:32px; text-align:center; }
.price.feature{ border:2px solid var(--gold); }
.price .lbl{ font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.price .amt{ font-family:var(--disp); font-size:56px; letter-spacing:-.03em; color:#fff; margin:8px 0 2px; }
.price .amt span{ font-size:18px; color:var(--muted); }
.price small{ display:block; color:var(--muted); margin:6px 0 18px; }

footer{ background:#03060d; border-top:1px solid var(--line); padding:46px 0 26px; font-size:14px; color:var(--muted); }
footer .cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:26px; }
footer h4{ color:#fff; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px; }
footer a{ display:block; margin-bottom:8px; } footer a:hover{ color:#fff; }
footer .fl{ font-family:var(--disp); font-size:20px; color:#fff; font-weight:800; margin-bottom:10px; }
footer .fl .sep{ color:var(--gold); }
footer .bot{ border-top:1px solid var(--line); margin-top:30px; padding-top:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#5f7191; }
@media(max-width:860px){ footer .cols{ grid-template-columns:1fr 1fr; } }

/* clean text wordmark logo (replaces beige-background JPG) */
.brandlogo{ display:inline-flex; flex-direction:column; line-height:.8; font-family:"Arial Black","Helvetica Neue",Arial,sans-serif; font-style:italic; text-decoration:none; white-space:nowrap; }
.brandlogo .bn{ font-size:40px; font-weight:900; letter-spacing:-2px; color:#33b3ef; text-shadow:0 2px 12px rgba(0,0,0,.55); }
.brandlogo .hv{ font-size:18px; font-weight:900; letter-spacing:.3px; color:#fff; align-self:flex-end; margin-top:3px; text-shadow:0 1px 8px rgba(0,0,0,.6); }
@media(max-width:860px){ .brandlogo .bn{ font-size:30px; letter-spacing:-1.5px; } .brandlogo .hv{ font-size:14px; } }

/* lead form (dark subpages) */
.leadform{ max-width:560px; margin:22px auto 0; text-align:left; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:18px; padding:24px; }
.leadform .lfrow{ display:flex; gap:12px; }
.leadform input,.leadform select,.leadform textarea{ width:100%; margin-top:12px; padding:13px 14px; border:1px solid rgba(255,255,255,.18); border-radius:10px; font-size:15px; font-family:inherit; color:#eaf1ff; background:rgba(255,255,255,.06); box-sizing:border-box; }
.leadform select option{ color:#0e3358; }
.leadform textarea{ min-height:92px; resize:vertical; }
@media(max-width:600px){ .leadform .lfrow{ flex-direction:column; } }