/* media card used in hero */
.media-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 12px 24px rgba(11,31,85,.08)}
.media-card img{display:block;width:100%;height:auto}
.media-caption{display:block;padding:8px 12px;color:#6a7691}

/* story block */
.story-block{align-items:center;gap:28px}
.story-media{position:relative}
.story-media .story-logo{position:absolute;left:12px;bottom:12px;height:28px;background:#fff;padding:6px;border-radius:8px;border:1px solid var(--line)}
.story-copy hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.story-actions{display:flex;gap:10px;margin-top:12px}

/* icon grid */
.cx-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.cx-icons article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 10px 22px rgba(11,31,85,.06)}
.cx-icons .i{font-size:20px;display:inline-grid;width:38px;height:38px;border-radius:10px;place-items:center;background:#eef2ff;color:#0B1F55;margin-bottom:8px}

/* support */
.support .ph.tall{display:block;width:100%;border-radius:16px;background:linear-gradient(180deg,#f3f6ff,#e6ecff);border:1px dashed #cdd5ea;object-fit:cover}

/* responsive */
@media (max-width:1024px){
  .cx-icons{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .cx-icons{grid-template-columns:1fr}
}


/* ============ Why Choose Us ============ */
.why{ padding:48px 0; }
.why__head{ text-align:center; margin-bottom:20px; }
.why__head .display-hero{ margin:6px 0 10px; }
.grad{
  background: linear-gradient(90deg,#2B56FF, #7bc6ff, #FFB200);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.why__chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:12px; }
.chip{ display:inline-block; padding:8px 12px; border-radius:999px; font-weight:800; font-size:.9rem; border:1px solid var(--line); }
.chip--navy{ background:#e8edff; color:#0B1F55; }
.chip--gold{ background:#fff5dc; color:#7a4a00; border-color:#f6e0a6; }
.chip--sky{ background:#e7f5ff; color:#0b3c5a; border-color:#cfe9ff; }
.chip--lime{ background:#eefbea; color:#204b1f; border-color:#d6f0cf; }

.panel{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px 18px; box-shadow:0 10px 24px rgba(11,31,85,.06);
}

.pillar{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:flex-start; margin:16px 0; }
.pillar__icon{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:#eef2ff; border:1px solid #dbe4ff; font-size:22px; color:#0B1F55;
}
.ticks{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.ticks li{ position:relative; padding-left:24px; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:#0B1F55; font-weight:800; }

/* Grid list badges */
.grid-list{ list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.grid-list .badge{
  display:inline-block; padding:4px 10px; border-radius:999px; background:#eef2ff; color:#2B56FF; font-weight:800; margin-bottom:6px;
}
.grid-list p{ margin:0; color:#51607a; }
@media (max-width:860px){ .grid-list{ grid-template-columns:1fr; } }

/* Tabs */
.tabs--soft{ display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.tabs--soft .tab{
  appearance:none; border:1px solid var(--line); background:#fff; color:#0b1f55;
  border-radius:10px; padding:.55rem .8rem; font-weight:700; cursor:pointer;
}
.tabs--soft .tab.is-active{ outline:2px solid #f59e0b; background:#fbfcff; }
.tabpanes{ border:1px solid var(--line); border-radius:12px; padding:12px; background:#fbfcff; }
.tabpane{ display:none; }
.tabpane.is-active{ display:block; }

/* Comparison */
.why__compare{ margin-top:18px; }
.compare{ display:grid;gap:16px; align-items:start; }
@media (max-width:960px){ .compare{ grid-template-columns:1fr; } }

.compare__table{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(11,31,85,.06); }
.compare .row{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.compare .row.head{ background:#f7f9ff; border-top:none; font-weight:800; color:#0b1f55; }
.compare .cell{ padding:12px 14px; display: flex;gap:3px; }
.compare .cell .icon {min-width: 2rem;;}
@media (max-width:720px){
  .compare-cards{ display:grid; gap:10px; }  /* (Optional alt) */
}
.panel--cta{ display:grid; gap:10px; }

.reveal{ opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; }
.reveal.is-in{ opacity:1; transform:none; }