:root{
      /* ✅ Light-blue clinic palette */
      --bg:#f4f9ff;
      --panel:#ffffff;
      --card:#ffffff;
      --card2:#f6fbff;

      --ink:#0b1730;
      --muted:#4b607a;
      --muted2:#6b7f99;
      --line: rgba(11,23,48,.10);

      --brand:#2563eb;      /* cobalt */
      --brand2:#60a5fa;     /* sky */
      --brand3:#22c55e;     /* green accent (ok) */
      --ok:#16a34a;

      --shadow: 0 18px 55px rgba(2,6,23,.10);
      --radius: 18px;
      --radius2: 24px;
      --max: 1180px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(1100px 680px at 12% -8%, rgba(96,165,250,.35), transparent 55%),
        radial-gradient(900px 560px at 95% 6%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(980px 620px at 10% 110%, rgba(34,197,94,.10), transparent 55%),
        linear-gradient(180deg, #f4f9ff 0%, #ffffff 55%, #f4f9ff 100%);
      overflow-x:hidden;
    }

    a{color:inherit;text-decoration:none}
    .wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

    /* Topbar */
    .topbar{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(244,249,255,.78);
      border-bottom: 1px solid var(--line);
    }
    .topbar .row{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 0; gap:12px;
    }
    .brand{
      display:flex;align-items:center;gap:10px;
      font-weight:900; letter-spacing:.2px;
    }
    .dot{
      width:12px;height:12px;border-radius:50%;
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      box-shadow: 0 0 0 6px rgba(37,99,235,.10);
    }
    .nav{
      display:flex;gap:16px;align-items:center;flex-wrap:wrap;
      color: rgba(11,23,48,.78);
      font-size:14px;
    }
    .nav a{opacity:.9}
    .nav a:hover{opacity:1}

    .btn{
      display:inline-flex;align-items:center;justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 999px;
      border:1px solid rgba(11,23,48,.12);
      background: rgba(255,255,255,.72);
      color: var(--ink);
      font-weight:800;
      box-shadow: 0 10px 26px rgba(2,6,23,.08);
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); background:#ffffff; border-color: rgba(11,23,48,.18)}
    .btn.primary{
      border-color: rgba(37,99,235,.28);
      color:#ffffff;
      background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(96,165,250,.95));
    }
    .btn.primary:hover{filter:brightness(1.03)}
    .pill{
      display:inline-flex;gap:8px;align-items:center;
      padding:7px 10px;border-radius:999px;
      border:1px solid rgba(37,99,235,.18);
      background: rgba(37,99,235,.08);
      font-size:12px;color: rgba(11,23,48,.82);
    }
    .pill b{color: var(--ink)}
    .spark{
      width:10px;height:10px;border-radius:3px;
      background: linear-gradient(135deg, var(--brand2), var(--brand));
      transform: rotate(10deg);
      box-shadow: 0 0 0 5px rgba(96,165,250,.16);
    }

    /* Hero */
    .hero{padding:34px 0 18px}
    .heroGrid{
      display:grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 18px;
      align-items: stretch;
    }
    .heroCard{
      background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.75));
      border:1px solid rgba(11,23,48,.10);
      border-radius: var(--radius2);
      padding: 22px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .glow{
      position:absolute;inset:-2px;
      background:
        radial-gradient(520px 220px at 20% 10%, rgba(96,165,250,.22), transparent 60%),
        radial-gradient(420px 220px at 80% 0%, rgba(37,99,235,.16), transparent 55%);
      pointer-events:none;
    }
    .hTitle{
      font-family: "Playfair Display", serif;
      font-weight:700;
      font-size: 42px;
      line-height: 1.05;
      margin: 10px 0 10px;
      letter-spacing:.2px;
    }
    .hTitle span{color: #1e40af}
    .lead{
      color: rgba(11,23,48,.82);
      font-size: 16px;
      line-height: 1.7;
      margin: 0 0 14px;
      max-width: 62ch;
    }
    .ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
    .mini{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

    .heroMedia{
      background: linear-gradient(180deg, rgba(96,165,250,.18), rgba(255,255,255,.75));
      border:1px solid rgba(11,23,48,.10);
      border-radius: var(--radius2);
      padding: 14px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
      min-height: 360px;
    }
    .mediaFrame{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(11,23,48,.10);
      background: rgba(255,255,255,.9);
    }
    .mediaFrame img{width:100%;height:auto;display:block}
    .imgMeta{
      margin-top:10px;
      display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
      font-size:12px;color: rgba(11,23,48,.70);
    }
    .imgMeta code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: rgba(11,23,48,.82);
      background: rgba(37,99,235,.08);
      padding: 4px 8px;
      border: 1px solid rgba(37,99,235,.12);
      border-radius: 999px;
    }

    /* Sections */
    section{padding: 18px 0}
    .sectionTitle{
      font-size: 22px;
      margin: 0 0 10px;
      letter-spacing:.2px;
    }
    .sectionSub{
      color: rgba(11,23,48,.76);
      line-height:1.7;
      margin: 0 0 14px;
    }
    .grid3{
      display:grid;
      grid-template-columns: repeat(3,1fr);
      gap: 14px;
    }
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
      border: 1px solid rgba(11,23,48,.10);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: 0 12px 30px rgba(2,6,23,.08);
    }
    .kpi{
      display:flex;align-items:flex-start;gap:12px;
    }
    .icon{
      width:40px;height:40px;border-radius:14px;
      background: linear-gradient(135deg, rgba(37,99,235,.98), rgba(96,165,250,.55));
      border:1px solid rgba(37,99,235,.12);
      box-shadow: 0 14px 30px rgba(37,99,235,.14);
      display:flex;align-items:center;justify-content:center;
      font-weight:900;
      color:#ffffff;
    }
    .kpi h3{margin:0 0 4px;font-size:16px}
    .kpi p{margin:0;color: rgba(11,23,48,.72);line-height:1.65;font-size:14px}

    .split{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .list{margin:10px 0 0; padding-left: 18px; color: rgba(11,23,48,.78); line-height:1.75}
    .tagRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
    .tag{
      padding:8px 10px;border-radius:999px;
      border:1px solid rgba(37,99,235,.16);
      background: rgba(37,99,235,.08);
      font-size:12px;color: rgba(11,23,48,.78);
    }

    .imgGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .ph{
      border-radius: 16px;
      overflow:hidden;
      border:1px solid rgba(11,23,48,.10);
      background: rgba(255,255,255,.95);
    }
    .ph img{width:100%;height:auto;display:block}
    .phCap{
      padding:10px 12px;
      border-top:1px solid rgba(11,23,48,.10);
      display:flex;flex-direction:column;gap:6px;
      color: rgba(11,23,48,.72);
      font-size:12px;
    }
    .phCap .row{
      display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
    }
    .phCap code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: rgba(11,23,48,.82);
      background: rgba(37,99,235,.08);
      padding: 4px 8px;
      border: 1px solid rgba(37,99,235,.12);
      border-radius: 999px;
    }

    table{width:100%;border-collapse:collapse;margin-top:10px;overflow:hidden;border-radius:16px}
    th,td{padding:12px 12px;border-bottom:1px solid rgba(11,23,48,.10);text-align:left}
    th{
      font-size:12px;text-transform:uppercase;letter-spacing:.12em;
      color: rgba(11,23,48,.70);
      background: rgba(37,99,235,.06);
    }
    td{color: rgba(11,23,48,.84);font-size:14px}
    tr:hover td{background: rgba(37,99,235,.04)}
    .note{color: rgba(11,23,48,.62);font-size:12px;line-height:1.6;margin-top:10px}

    details{
      background: rgba(37,99,235,.04);
      border:1px solid rgba(11,23,48,.10);
      border-radius: 16px;
      padding: 12px 12px;
    }
    details + details{margin-top:10px}
    summary{
      cursor:pointer;
      font-weight:900;
      list-style:none;
      display:flex;justify-content:space-between;gap:10px;align-items:center;
      color: rgba(11,23,48,.90);
    }
    summary::-webkit-details-marker{display:none}
    details p{margin:10px 0 0;color: rgba(11,23,48,.74);line-height:1.75;font-size:14px}

    .final{padding: 18px 0 34px;}
    .finalBox{
      background: linear-gradient(135deg, rgba(96,165,250,.20), rgba(255,255,255,.85));
      border:1px solid rgba(11,23,48,.10);
      border-radius: var(--radius2);
      padding: 18px;
      box-shadow: var(--shadow);
      display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;
    }
    .finalBox h3{margin:0;font-size:18px}
    .finalBox p{margin:6px 0 0;color: rgba(11,23,48,.72);line-height:1.6;max-width:70ch}

    @media (max-width: 980px){
      .heroGrid{grid-template-columns:1fr}
      .hTitle{font-size:36px}
      .grid3{grid-template-columns:1fr}
      .split{grid-template-columns:1fr}
      .imgGrid{grid-template-columns:1fr}
      .nav{display:none}
      .heroMedia{min-height:unset}
    }