:root {
  --bg:#0b1721; --bg2:#0d1b26; --panel:#122637; --panel2:#0f2030; --line:#1c3a50;
  --text:#e8f1f8; --muted:#92b3c6; --accent:#37d0c8; --accent2:#0e7d9c;
  --gold:#ffb454;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; line-height:1.62; overflow-x:hidden; }
a { color:var(--accent); }
.wrap { max-width:1120px; margin:0 auto; padding:0 28px; }

/* NAV */
nav { position:sticky; top:0; z-index:50; background:rgba(11,23,33,.74); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(28,58,80,.5); }
.navin { display:flex; align-items:center; gap:24px; height:64px; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text); flex:none; }
.brand .logo { width:34px; height:34px; flex:none; }
.brand b { font-size:16px; letter-spacing:.01em; }
.brand small { display:block; color:var(--muted); font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.navlinks { display:flex; gap:18px; margin-left:auto; align-items:center; flex-wrap:wrap; }
.navlinks a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:500; }
.navlinks a:hover { color:var(--accent); }
.navlinks a.on { color:var(--accent); }
.navcta { background:var(--accent); color:#06242b !important; font-weight:700; padding:9px 18px; border-radius:9px; font-size:14px; }
@media (max-width:880px){ .navlinks a:not(.navcta){ display:none; } .navin{ gap:14px; } }

/* PAGE HERO */
.phero { position:relative; padding:74px 0 56px; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; }
.orb1 { width:480px; height:480px; background:rgba(55,208,200,.26); top:-180px; left:-120px; animation:float 12s ease-in-out infinite; }
.orb2 { width:420px; height:420px; background:rgba(14,125,156,.32); top:-120px; right:-140px; animation:float 15s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(30px,-24px) scale(1.06);} }
.crumb { color:var(--muted); font-size:13px; margin-bottom:14px; }
.crumb a { color:var(--muted); text-decoration:none; } .crumb a:hover { color:var(--accent); }
.kicker { display:inline-flex; align-items:center; gap:9px; color:var(--accent); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px; margin-bottom:18px; background:rgba(55,208,200,.08); border:1px solid rgba(55,208,200,.3); border-radius:999px; padding:6px 14px; }
h1 { font-size:46px; line-height:1.07; font-weight:900; letter-spacing:-.02em; margin-bottom:18px; }
.grad { background:linear-gradient(92deg,var(--accent),#6ee0d8 40%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { color:var(--muted); font-size:18.5px; max-width:820px; }
.cta { margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#05242b; font-weight:700; padding:13px 24px; border-radius:12px; text-decoration:none; font-size:15px; box-shadow:0 10px 26px rgba(55,208,200,.28); transition:transform .2s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(55,208,200,.38); }
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); box-shadow:none; }
.btn.ghost:hover { border-color:var(--accent); }
.btn.small { padding:9px 16px; font-size:13.5px; border-radius:9px; }

/* SECTIONS */
section { padding:58px 0; position:relative; }
.alt { background:linear-gradient(180deg,transparent,rgba(14,125,156,.07),transparent); }
.sec-head { margin-bottom:30px; }
.sec-num { color:var(--accent); font-weight:800; font-size:13px; letter-spacing:.18em; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
.sec-num::after { content:""; width:44px; height:1px; background:var(--line); }
h2 { font-size:34px; font-weight:900; letter-spacing:-.015em; margin-bottom:12px; line-height:1.12; }
.sub { color:var(--muted); font-size:17px; max-width:820px; }

/* CARDS */
.grid { display:grid; gap:18px; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(440px,1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g4 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { position:relative; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:18px; padding:26px 28px; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card::before { content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg,transparent,rgba(55,208,200,.6),transparent); opacity:.5; }
.card:hover { transform:translateY(-4px); border-color:rgba(55,208,200,.45); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.icon { width:48px; height:48px; border-radius:13px; background:rgba(55,208,200,.1); border:1px solid rgba(55,208,200,.2); display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:15px; }
h3 { font-size:18px; font-weight:700; margin-bottom:8px; }
.card p, .card li { color:var(--muted); font-size:15px; }
.card b { color:var(--text); }
.card ul { padding-left:20px; display:grid; gap:6px; margin-top:9px; }
.cardlink { display:inline-block; margin-top:14px; font-size:14.5px; font-weight:600; text-decoration:none; }
.cardlink:hover { text-decoration:underline; }

/* STATS */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.stat .snum { font-size:38px; font-weight:900; letter-spacing:-.02em; background:linear-gradient(120deg,var(--accent),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; margin-bottom:10px; }
.stat .slab { color:var(--text); font-weight:600; font-size:15px; }
.stat .sdesc { color:var(--muted); font-size:13.5px; margin-top:4px; }

/* SHOTS / VIDEO */
.shot { border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 22px 50px rgba(0,0,0,.5); background:var(--panel2); }
.shot img { width:100%; display:block; }
video { width:100%; display:block; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.featlist { margin-top:8px; display:grid; gap:16px; }
.feat { display:flex; gap:13px; }
.feat .chk { width:26px; height:26px; flex:none; border-radius:50%; background:rgba(55,208,200,.14); color:var(--accent); font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.feat b { display:block; font-size:16px; }
.feat span { color:var(--muted); font-size:14.5px; }

/* EXAMPLES */
.ex { background:linear-gradient(135deg,rgba(255,180,84,.07),rgba(255,180,84,.02)); border:1px solid rgba(255,180,84,.25); border-radius:12px; padding:15px 17px; font-size:15px; color:var(--text); transition:border-color .2s, transform .2s; }
.ex:hover { border-color:rgba(255,180,84,.5); transform:translateY(-2px); }
.ex .exl { color:var(--gold); font-weight:700; }

/* CALLS / NOTES */
.callout { border:1px solid rgba(55,208,200,.3); border-left:4px solid var(--accent); background:linear-gradient(90deg,rgba(55,208,200,.08),rgba(55,208,200,.02)); border-radius:12px; padding:18px 20px; margin-top:22px; font-size:15.5px; color:var(--text); }
.callout .ct { color:var(--accent); font-weight:700; }

/* PRICING */
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:stretch; }
.price { position:relative; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; overflow:hidden; }
.price::before { content:""; position:absolute; top:0; left:24px; right:24px; height:1px; background:linear-gradient(90deg,transparent,rgba(55,208,200,.6),transparent); opacity:.5; }
.price.hot { border-color:rgba(55,208,200,.55); box-shadow:0 0 0 1px rgba(55,208,200,.4), 0 22px 50px rgba(0,0,0,.4); }
.price .pname { font-size:15px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.price.hot .pname { color:var(--accent); }
.price .pprice { font-size:40px; font-weight:900; letter-spacing:-.02em; line-height:1; margin-bottom:4px; }
.price .pper { color:var(--muted); font-size:13.5px; margin-bottom:20px; }
.price .badge { position:absolute; top:18px; right:18px; background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#05242b; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.price ul { list-style:none; display:grid; gap:9px; margin-bottom:26px; }
.price li { color:var(--muted); font-size:14.5px; display:flex; gap:9px; align-items:flex-start; }
.price li::before { content:"✓"; color:var(--accent); font-weight:800; flex:none; }
.price li.no { color:#5b7488; } .price li.no::before { content:"—"; color:#5b7488; }
.price .btn { margin-top:auto; justify-content:center; }
.pnote { color:var(--muted); font-size:14.5px; margin-top:26px; max-width:820px; }

/* FAQ */
.faq { display:grid; gap:16px; max-width:880px; }
.qa { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.qa b { display:block; font-size:17.5px; font-weight:800; margin-bottom:8px; color:var(--text); }
.qa p { color:var(--muted); font-size:15.5px; }

/* STEPS */
.steps { display:grid; gap:18px; counter-reset:step; }
.step { display:grid; grid-template-columns:56px 1fr; gap:18px; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:16px; padding:22px 24px; }
.step .n { width:44px; height:44px; border-radius:12px; background:rgba(55,208,200,.12); border:1px solid rgba(55,208,200,.3); color:var(--accent); font-size:20px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.step b { display:block; font-size:17px; margin-bottom:5px; }
.step p { color:var(--muted); font-size:15px; }

/* CONTACT */
.contactgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.contact { background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:18px; padding:28px; text-align:center; display:block; text-decoration:none; transition:border-color .2s, transform .2s; }
.contact:hover { border-color:rgba(55,208,200,.5); transform:translateY(-3px); }
.cicon { width:56px; height:56px; margin:0 auto 16px; border-radius:14px; background:rgba(55,208,200,.12); border:1px solid rgba(55,208,200,.3); font-size:26px; display:flex; align-items:center; justify-content:center; }
.contact b { display:block; color:var(--text); font-size:18px; margin-bottom:8px; }
.contact p { color:var(--muted); font-size:15px; margin-bottom:18px; }
.clink { color:var(--accent); font-size:15px; font-weight:700; }

/* FINAL CTA */
.final { text-align:center; padding:80px 0 66px; }
.final h2 { font-size:40px; }
.final p { color:var(--muted); font-size:18px; max-width:720px; margin:0 auto 28px; }
.final .cta { justify-content:center; }
.contactrow { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
.contactrow a { color:var(--muted); text-decoration:none; font-size:15px; border:1px solid var(--line); border-radius:10px; padding:9px 18px; transition:color .2s, border-color .2s; }
.contactrow a:hover { color:var(--accent); border-color:rgba(55,208,200,.5); }

/* FOOTER */
footer { border-top:1px solid var(--line); padding:46px 0 58px; }
.footin { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
footer .brand { margin-bottom:10px; }
footer p { color:var(--muted); font-size:14px; }
footer h4 { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin-bottom:12px; }
footer ul { list-style:none; display:grid; gap:8px; }
footer ul a { color:var(--muted); text-decoration:none; font-size:14px; }
footer ul a:hover { color:var(--accent); }
.footbottom { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:760px){ .footin{ grid-template-columns:1fr; } }

/* REVEAL */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }
.d1 { transition-delay:.08s; } .d2 { transition-delay:.16s; } .d3 { transition-delay:.24s; } .d4 { transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} .orb{animation:none;} }

@media (max-width:840px){ .two{ grid-template-columns:1fr; } h1{ font-size:34px; } h2{ font-size:27px; } }

/* ADDONS */
.addon { display:grid; grid-template-columns:1fr; gap:0; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:18px; padding:26px 28px; }
.addon h3 { margin-bottom:6px; }
.addon p { color:var(--muted); font-size:15px; margin-bottom:14px; }
.aprice { font-size:22px; font-weight:900; color:var(--accent); }
.aprice small { font-size:13px; color:var(--muted); font-weight:600; }
.acat { font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.calc { max-width:720px; background:linear-gradient(180deg,var(--panel),var(--panel2)); border:1px solid rgba(55,208,200,.35); border-radius:18px; padding:30px; margin-top:8px; }
.calc h3 { font-size:20px; margin-bottom:4px; }
.calc .sub { color:var(--muted); font-size:14px; margin-bottom:22px; }
.calcrow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.calcrow span { color:var(--text); font-size:15px; }
.calcrow .unit { color:var(--muted); font-size:13px; }
.calc input[type=number] { width:110px; background:#0b1d2b; border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:16px; padding:9px 12px; }
.calc input[type=number]:focus { outline:none; border-color:var(--accent); }
.calcres { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:16px; color:var(--text); line-height:1.8; }
.calcres b { color:var(--accent); font-size:22px; }
.calchint { color:var(--muted); font-size:13px; margin-top:14px; }

/* LEGAL PAGES (offer / sla / rules) */
.legaltext { max-width:800px; }
.legaltext h2 { font-size:22px; margin:38px 0 12px; }
.legaltext h2:first-child { margin-top:0; }
.legaltext p { color:var(--muted); font-size:15.5px; line-height:1.7; margin-bottom:14px; }
.legal { margin-top:12px; color:var(--muted); font-size:12.5px; display:flex; gap:16px; flex-wrap:wrap; }
.legal a { color:var(--muted); text-decoration:none; }
.legal a:hover { color:var(--accent); }