/* ===== Page shell ===== */
:root{
    --ink:#0e2431;
    --muted:#5d7280;
    --line:#eef2f5;
    --brand:#12b2e8;
    --brand2:#0ed3a5;
    --max:1150px;
    --radius:18px;
    --shadow:0 10px 24px rgba(0,0,0,.10);
  }
  
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{ font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif; color:var(--ink); }
  
  /* ===== Hero ===== */
  .hero{ position:relative; isolation:isolate; }
  .hero img{ width:100%; height:56vh; min-height:340px; object-fit:cover; filter:brightness(.78) }
  .hero-overlay{
    position:absolute; inset:0; display:grid; place-content:center; gap:12px; text-align:center; color:#fff;
    text-shadow:0 6px 22px rgba(0,0,0,.4);
  }
  .hero-overlay h1{ margin:0; font-size:clamp(1.9rem, 3.8vw, 2.8rem); font-weight:900; letter-spacing:.4px; }
  .hero-overlay p{ margin:0; opacity:.95; font-weight:650; }
  
  /* ===== Section container ===== */
  .section{ padding:34px 0 64px; }
  .container{ width:min(100%, var(--max)); margin-inline:auto; padding:0 20px; }
  .eyebrow{ margin:0 0 6px; font:900 1rem/1 system-ui,Segoe UI,Inter; letter-spacing:.25px; color:#163142; text-transform:uppercase; }
  .sub{ margin:0 0 18px; color:var(--muted); }
  
  /* ===== Cards ===== */
  .card-grid{
    display:grid; gap:22px;
  }
  .card-grid.halves{ grid-template-columns: repeat(2, 1fr); }
  
  .card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); transition: transform .18s ease;
  }
  .card:hover{ transform: translateY(-3px); }
  .card img{ width:100%; aspect-ratio: 16/10; object-fit:cover; display:block; }
  
  .card-body{
    position:relative;
    padding:16px 16px 18px;
    display:flex; flex-direction:column; gap:10px;
  }
  .card-body .dot{
    width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 0 rgba(18,178,232,.5);
    position:absolute; top:16px; right:16px;
    animation: dot-pulse 2.2s ease-out infinite;
  }
  @keyframes dot-pulse{
    0% { box-shadow:0 0 0 0 rgba(18,178,232,.45); }
    70%{ box-shadow:0 0 0 10px rgba(18,178,232,0); }
    100%{ box-shadow:0 0 0 0 rgba(18,178,232,0); }
  }
  
  .card-body h3{ margin:0; font-size:1.2rem; font-weight:900; letter-spacing:.2px; }
  .card-body p{ margin:0 0 6px; color:#3a5666; }
  
  /* CTA */
  .btn{
    align-self:flex-start;
    text-decoration:none; border:none; cursor:pointer;
    padding:.78rem 1.15rem; border-radius:999px; font-weight:900; letter-spacing:.25px;
    color:#052734;
    background:linear-gradient(100deg, var(--brand), var(--brand2) 60%, var(--brand));
    background-size:200% 100%;
    box-shadow:0 12px 26px rgba(0,0,0,.10);
    transition: background-position .35s ease, transform .12s ease, box-shadow .25s ease;
  }
  .btn:hover{
    background-position:100% 0;
    transform: translateY(-1px);
    box-shadow:0 16px 36px rgba(0,0,0,.14);
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 900px){
    .card-grid.halves{ grid-template-columns: 1fr; }
  }