:root{
  /* ===== Logo Theme Palette ===== */
  --c-navy:#103880;      /* main navy */
  --c-orange:#F88000;    /* logo orange */
  --c-blue:#3070B0;      /* secondary blue */
  --c-cyan:#50B0D0;      /* accent cyan */

  --bg:#ffffff;
  --surface:#F6F8FC;
  --card:#ffffff;

  /* Borders from navy */
  --border:rgba(16,56,128,.12);

  --text:#0b1220;
  --muted:rgba(11,18,32,.68);

  --shadow:0 16px 45px rgba(11,18,32,.10);
  --ease:cubic-bezier(.2,.8,.2,1);
}

body { margin:0; font-family:system-ui; background:#f5f6fb; color:#111; }

.container { max-width:1180px; margin:auto; padding:0 20px; }

.site-header { position:sticky; top:0; background:#0b1120cc; backdrop-filter:blur(12px); padding:12px 0; z-index:100; }
.header-inner { display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; gap:8px; align-items:center; color:#fff; font-weight:600; }
.logo-mark { background:#2563eb; color:#fff; padding:6px 10px; border-radius:8px; }

.main-nav ul { display:flex; gap:20px; }
.main-nav a { color:#c7d2fe; font-size:14px; }
.main-nav a.active { color:#fff; }

.nav-toggle { display:none; background:none; border:0; }
.hero{
  padding:84px 0 38px;
  background:
    radial-gradient(900px 520px at 10% -18%, rgba(16,56,128,.14), transparent 60%),
    radial-gradient(900px 520px at 90% -12%, rgba(80,176,208,.16), transparent 60%),
    radial-gradient(900px 520px at 60% 10%, rgba(248,128,0,.12), transparent 60%),
    radial-gradient(700px 420px at 72% 22%, rgba(48,112,176,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #F4F7FF 100%);
  border-bottom:1px solid var(--border);
}

.hero-head{ text-align:center; }

.eyebrow{
  display:inline-flex;
  padding:7px 10px;
  border:1px solid rgba(16,56,128,.18);
  background:rgba(16,56,128,.06);
  border-radius:999px;
  color:var(--c-navy);
  font-weight:800;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:0 0 12px;
}

.hero h1{ margin:0 0 10px; color:var(--text); font-size:44px; line-height:1.08; }
.subtitle{ margin:0 auto; max-width:72ch; color:var(--muted); }

.section{ padding:52px 0; }

.toggle-row{
  margin-top:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.toggle{
  display:flex;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(16,56,128,.14);
  background:#fff;
  box-shadow:0 10px 25px rgba(11,18,32,.06);
}

.toggleBtn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  color:rgba(11,18,32,.70);
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

/* Active = logo cyan/blue tint */
.toggleBtn.active{
  background:linear-gradient(135deg, rgba(80,176,208,.18), rgba(48,112,176,.14));
  color:var(--text);
}

.toggleHint{ font-size:13px; color:var(--muted); }

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}

.price-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  will-change:transform;
}

.price-card:hover{
  transform: translateY(-4px);
  border-color: rgba(80,176,208,.38);
  box-shadow:0 22px 60px rgba(11,18,32,.12);
}

/* Featured = orange emphasis (logo bar) */
.price-card.featured{
  border-color: rgba(248,128,0,.40);
  box-shadow:0 24px 70px rgba(248,128,0,.12);
}

.top{ margin-bottom:12px; }

.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(248,128,0,.24);
  background:rgba(248,128,0,.10);
  font-weight:900;
  font-size:12px;
  color:var(--text);
}

/* Badge variants updated to logo palette */
.badgeCyan{ border-color: rgba(80,176,208,.34); background:rgba(80,176,208,.14); }
.badgeNavy{ border-color: rgba(16,56,128,.22); background:rgba(16,56,128,.08); }

.price-card h3{ margin:10px 0 6px; font-size:18px; color:var(--text); }
.desc{ margin:0; color:var(--muted); }

.price{
  margin-top:6px;
  font-size:34px;
  font-weight:1000;
  color:var(--text);
  letter-spacing:-.02em;
}
.sub{ color:var(--muted); font-size:13px; margin-top:4px; }

.list{
  list-style:none;
  padding:0;
  margin:14px 0 18px;
  display:grid;
  gap:10px;
  color:rgba(11,18,32,.82);
}

.list li{
  padding-left:14px;
  position:relative;
}

/* bullets = logo orange */
.list li:before{
  content:"";
  width:6px; height:6px;
  border-radius:999px;
  background:var(--c-orange);
  position:absolute; left:0; top:.62em;
}

/* CTA = logo orange */
.btn-primary{
  margin-top:auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--c-orange), #FFA22E);
  color:#0B1220;
  font-weight:1000;
  text-decoration:none;
  box-shadow:0 14px 35px rgba(248,128,0,.24);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  will-change:transform;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow:0 18px 45px rgba(248,128,0,.30); }

/* Secondary = navy / cyan hover */
.btn-ghost{
  margin-top:auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:12px 14px;
  border-radius:14px;
  background:transparent;
  border:1px solid rgba(16,56,128,.20);
  color:var(--text);
  font-weight:900;
  text-decoration:none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}

.btn-ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(80,176,208,.50);
  box-shadow:0 12px 30px rgba(80,176,208,.10);
}

.faq{ margin-top:22px; }
.faq h2{ margin:0 0 12px; font-size:24px; color:var(--text); text-align:center; }

.faq-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.faq-item{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  padding:14px;
  box-shadow:0 12px 30px rgba(11,18,32,.06);
}

.faq-item summary{ cursor:pointer; font-weight:900; color:var(--text); }
.faq-item p{ margin:10px 0 0; color:var(--muted); line-height:1.6; }

/* FX */
.fx-reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change:transform, opacity;
}
.fx-reveal.reveal-right{ transform: translateX(18px); }
.fx-reveal.reveal-left{ transform: translateX(-18px); }
.fx-reveal.is-visible{ opacity:1; transform: translate(0,0); }

@media (max-width: 980px){
  .pricing-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
}

@media (prefers-reduced-motion: reduce){
  .fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .price-card{ transition:none !important; }
  .price-card:hover{ transform:none !important; }
  .btn-primary, .btn-ghost{ transition:none !important; }
  .btn-primary:hover, .btn-ghost:hover{ transform:none !important; }
}