:root{
  --navy:#0b2545;
  --navy-2:#13366b;
  --blue:#2563eb;
  --blue-light:#3b82f6;
  --green:#22b14c;
  --green-2:#16a34a;
  --ink:#1e2a3a;
  --muted:#5b6b80;
  --line:#e4ebf3;
  --bg:#f3f8fd;
  --card:#ffffff;
  --radius:14px;
  --shadow:0 10px 30px rgba(13,42,82,.10);
  --shadow-sm:0 4px 14px rgba(13,42,82,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand img{height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a.link{font-weight:600;color:#2b3a4f;font-size:15px}
.nav-links a.link:hover{color:var(--blue)}
.nav-divider{width:1px;height:26px;background:var(--line)}
.login{display:flex;align-items:center;gap:6px;font-weight:600;font-size:15px}
.login.member{color:var(--blue)}
.login.advertiser{color:var(--green)}
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-weight:700;border:none;cursor:pointer;border-radius:10px;
  padding:11px 20px;font-size:15px;transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-blue{background:linear-gradient(180deg,var(--blue-light),var(--blue));color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.35)}
.btn-green{background:linear-gradient(180deg,#2bc55a,var(--green-2));color:#fff;box-shadow:0 6px 16px rgba(34,177,76,.35)}
.btn-lg{padding:15px 28px;font-size:17px}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--navy)}
.hamburger .icon{width:26px;height:26px}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 500px at 80% -10%,#1b4a8f 0%,transparent 60%),
             linear-gradient(135deg,#0b2545 0%,#103161 55%,#0b2545 100%);
}
.hero::after{
  content:"";position:absolute;right:-120px;top:40px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.18),transparent 65%);
}
.hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:center;padding:70px 0 84px;
}
.hero h1{font-size:54px;line-height:1.08;margin:0 0 22px;font-weight:800;letter-spacing:-.5px}
.hero h1 .accent{color:#5aa0ff}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:7px 13px;border-radius:999px;color:#dbe9ff;
}
.chip .icon{color:#5dd07f}
.chip.badge .icon{color:#5aa0ff}
.hero p.lead{font-size:18px;color:#c4d6ef;margin:0 0 28px;max-width:520px}
.hero-cta-note{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px;color:#bcd0ea;font-size:14px}
.hero-cta-note span{display:inline-flex;align-items:center;gap:7px}
.hero-cta-note .icon{color:#5aa0ff}

/* ---------- Dashboard preview ---------- */
.dash{
  background:#fff;border-radius:18px;box-shadow:0 30px 60px rgba(2,12,30,.45);
  overflow:hidden;color:var(--ink);border:1px solid rgba(255,255,255,.4);
}
.dash-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.dash-top b{font-size:15px}
.dash-date{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:#fff;padding:13px 12px}
.stat .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat .val{font-size:18px;font-weight:800;margin-top:3px}
.stat .delta{font-size:11px;color:var(--green);font-weight:700}
.dash-ads{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;padding:14px 18px;background:#fafcff}
.adbox{height:54px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;text-align:center;padding:6px;line-height:1.15}
.ad1{background:linear-gradient(135deg,#f59e0b,#ef4444)}
.ad2{background:linear-gradient(135deg,#0b2545,#1d4ed8)}
.ad3{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.rotate-i{color:var(--blue);font-size:20px;display:flex}
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 18px 20px}
.mini{border:1px solid var(--line);border-radius:10px;padding:10px}
.mini .t{font-size:11px;color:var(--muted);margin-bottom:4px}
.mini .v{font-size:16px;font-weight:800}
.mini .v small{color:var(--green);font-size:11px;font-weight:700;margin-left:6px}
.spark{width:100%;height:46px}
.spark-sm{width:100%;height:30px}

/* ---------- Section base ---------- */
section{padding:64px 0}
.section-flush-top{padding-top:0}
.sec-head{text-align:center;max-width:680px;margin:0 auto 44px}
.sec-head h2{font-size:32px;margin:0 0 12px;color:var(--navy);font-weight:800}
.sec-head p{color:var(--muted);font-size:17px;margin:0}

/* ---------- 4 feature cards ---------- */
.features-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:-50px;position:relative;z-index:3}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px;text-align:center;box-shadow:var(--shadow-sm)}
.fcard .bubble{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#fff;font-size:26px}
.b-blue{background:var(--blue)}
.b-green{background:var(--green)}
.b-indigo{background:#4f46e5}
.b-sky{background:#0ea5e9}
.fcard h3{margin:0 0 8px;font-size:18px;color:var(--navy)}
.fcard p{margin:0;color:var(--muted);font-size:14px}

/* ---------- Why choose ---------- */
.why{background:#fff}
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.col{padding:26px 22px}
.col-us{background:linear-gradient(160deg,#eef5ff,#dbeafe);border:2px solid var(--blue)}
.col-them{background:#f7f9fc;border:1px solid var(--line)}
.col h4{margin:0 0 4px;font-size:17px}
.col-us h4{color:var(--blue)}
.col-them h4{color:var(--muted)}
.price{font-size:30px;font-weight:900;margin:6px 0 16px}
.col-us .price{color:var(--navy)}
.col-them .price{color:var(--muted);font-size:16px;font-weight:700}
.clist{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.clist li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.clist .icon{font-size:16px}
.col-us .clist .icon{color:var(--green)}
.col-them .clist .icon{color:#ef4444}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--blue);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--blue);font-size:14px;box-shadow:var(--shadow-sm)}
.why-text h2{font-size:30px;color:var(--navy);margin:0 0 16px;font-weight:800}
.why-text h2 .accent{color:var(--blue)}
.why-text p{color:var(--muted);font-size:16px;margin:0 0 16px}
.why-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.wp{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px}
.wp .icon{font-size:18px}
.wp.p1 .icon{color:var(--blue)}
.wp.p2 .icon{color:var(--green)}
.wp.p3 .icon{color:#f59e0b}

/* ---------- Pro features grid ---------- */
.pro-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 18px;text-align:center;box-shadow:var(--shadow-sm)}
.pcard .pi{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px;background:#eef4ff;color:var(--blue)}
.pcard:nth-child(2) .pi{background:#eafaf0;color:var(--green)}
.pcard:nth-child(3) .pi{background:#eef2ff;color:#4f46e5}
.pcard:nth-child(4) .pi{background:#fff5e8;color:#f59e0b}
.pcard:nth-child(5) .pi{background:#eefbff;color:#0ea5e9}
.pcard h3{margin:0 0 8px;font-size:15.5px;color:var(--navy)}
.pcard p{margin:0;color:var(--muted);font-size:13px}

/* ---------- Stats bar ---------- */
.stats-bar{background:linear-gradient(135deg,#0b2545,#13366b);color:#fff;padding:0}
.stats-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:42px 20px}
.sb{display:flex;align-items:center;gap:14px;justify-content:center}
.sb .icon{font-size:30px;color:#5aa0ff}
.sb .num{font-size:26px;font-weight:900;line-height:1}
.sb .cap{font-size:13px;color:#bcd0ea}

/* ---------- Final CTA ---------- */
.final{background:var(--bg)}
.cta-card{
  background:radial-gradient(900px 400px at 90% -30%,rgba(59,130,246,.18),transparent 60%),linear-gradient(135deg,#0b2545,#13366b);
  border-radius:22px;color:#fff;padding:46px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow)
}
.cta-card h2{font-size:30px;margin:0 0 8px;font-weight:800}
.cta-card p{margin:0;color:#c4d6ef;font-size:16px}
.cta-right{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta-right small{color:#bcd0ea;font-size:13px}

/* ---------- Footer ---------- */
footer{background:#0b2545;color:#cdd9ea}
.foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 20px}
.foot-brand{height:34px;width:auto;background:#fff;padding:6px 12px;border-radius:8px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{font-size:14px;color:#cdd9ea}
.foot-links a:hover{color:#fff}
.foot-copy{border-top:1px solid rgba(255,255,255,.12);text-align:center;font-size:13px;color:#9fb2cc;padding:14px 20px}
.foot-copy .ver{color:#6b86a8;margin-left:6px}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px}
.notfound img{width:220px;height:auto;margin-bottom:24px}
.notfound h1{font-size:40px;color:var(--navy);margin:0 0 10px}
.notfound p{color:var(--muted);font-size:17px;margin:0 0 24px}

/* ---------- Mobile ---------- */
@media(max-width:980px){
  .hero h1{font-size:42px}
  .features-4{grid-template-columns:repeat(2,1fr)}
  .pro-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:820px){
  .hamburger{display:inline-flex}
  .nav-links{
    position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0;display:none;box-shadow:var(--shadow)
  }
  .nav-links.open{display:flex}
  .nav-links a.link,.nav-links .login{padding:13px 22px;width:100%}
  .nav-divider{display:none}
  .nav-links .btn{margin:8px 22px}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding:48px 0 70px}
  .stats-bar .wrap{grid-template-columns:repeat(2,1fr);gap:30px}
  .cta-card{flex-direction:column;align-items:flex-start;text-align:left}
}
@media(max-width:560px){
  .hero h1{font-size:34px}
  .features-4{grid-template-columns:1fr;margin-top:-30px}
  .pro-grid{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .vs{display:none}
  .sec-head h2{font-size:26px}
  .dash-charts{grid-template-columns:1fr}
  .foot{flex-direction:column;text-align:center}
}