:root {
      --primary:    #1a5cff;
      --primary-dk: #0f3db5;
      --primary-lt: #e8f0ff;
      --accent:     #2fd4a2;
      --dark-head:  #0b1f4e;
      --body-bg:    #eef3fb;
      --card-bg:    #ffffff;
      --text-muted2:#6b7a99;
      --green-dot:  #4ccd5e;
      --shadow-sm:  0 4px 20px rgba(26,92,255,.10);
      --shadow-md:  0 8px 40px rgba(26,92,255,.16);
    }
/* 
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--body-bg);
      color: #1e2a45;
      overflow-x: hidden;
    } */

    /* ─── NAV (minimal) ─────────────────────────────────── */
    /* .site-nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 18px 48px;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(238,243,251,.85);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(26,92,255,.08);
    }
    .site-nav .logo {
      font-family: 'Sora', sans-serif;
      font-weight: 800; font-size: 1.35rem;
      color: var(--primary-dk);
      letter-spacing: -.5px;
    }
    .site-nav .logo span { color: var(--primary); }
    .site-nav .nav-links a {
      font-size: .9rem; font-weight: 500;
      color: var(--dark-head); text-decoration: none;
      margin-left: 32px; transition: color .2s;
    }
    .site-nav .nav-links a:hover { color: var(--primary); }
    .site-nav .btn-nav {
      background: var(--primary); color: #fff;
      border: none; border-radius: 50px;
      padding: 9px 26px; font-size: .88rem;
      font-weight: 600; cursor: pointer;
      transition: background .25s, transform .2s;
    }
    .site-nav .btn-nav:hover { background: var(--primary-dk); transform: scale(1.04); } */

    /* ─── HERO SECTION ──────────────────────────────────── */
    .hero {
      min-height: 100vh;
      padding: 120px 0 60px;
      position: relative;
      overflow: hidden;
    }

    /* floating blobs bg */
    .hero-blob {
      position: absolute; border-radius: 50%;
      filter: blur(80px); opacity: .18; pointer-events: none;
    }
    .blob1 { width: 520px; height: 520px; background: var(--primary); top: -120px; right: 30%; }
    .blob2 { width: 360px; height: 360px; background: var(--accent);  bottom: 40px; left: -80px; }

    /* left column */
    .hero-left { padding-right: 20px; }

    .badge-pill {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid rgba(26,92,255,.15);
      border-radius: 50px; padding: 6px 18px;
      font-size: .8rem; font-weight: 600; color: var(--primary);
      margin-bottom: 24px;
      box-shadow: var(--shadow-sm);
      animation: fadeSlideDown .6s ease both;
    }
    .badge-pill .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--accent); animation: pulse 1.8s infinite;
    }
    @keyframes pulse {
      0%,100% { transform: scale(1); opacity: 1; }
      50%      { transform: scale(1.5); opacity: .5; }
    }

    .hero-title {
      font-family: 'Sora', sans-serif;
      line-height: 1.12; margin-bottom: 20px;
      animation: fadeSlideDown .7s .1s ease both;
    }
    .hero-title .t1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 700; color: var(--dark-head); display: block; }
    .hero-title .t2 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 800; color: var(--primary); display: block; }

    .hero-desc {
      font-size: clamp(.92rem, 1.3vw, 1.05rem);
      color: var(--text-muted2); line-height: 1.7;
      max-width: 480px; margin-bottom: 36px;
      animation: fadeSlideDown .7s .2s ease both;
    }

    /* search bar */
    .search-bar {
      display: flex; align-items: center;
      background: #fff;
      border-radius: 40px;
      box-shadow: var(--shadow-md);
      overflow: hidden;
      max-width: 560px;
      animation: fadeSlideDown .7s .3s ease both;
      border: 1.5px solid rgba(26,92,255,.10);
      transition: box-shadow .3s;
    }
    .search-bar:focus-within { box-shadow: 0 0 0 3px rgba(26,92,255,.18), var(--shadow-md); }

    .city-select {
      display: flex; align-items: center; gap: 8px;
      padding: 0 20px;
      border-right: 1.5px solid #e2e8f6;
      min-width: 150px; cursor: pointer;
      font-weight: 600; font-size: .9rem;
      color: var(--dark-head);
      white-space: nowrap;
    }
    .city-select i { color: var(--primary); font-size: 1rem; }

    .search-input {
      flex: 1; border: none; outline: none;
      padding: 18px 16px;
      font-size: .9rem; color: var(--dark-head);
      background: transparent;
      font-family: 'DM Sans', sans-serif;
    }
    .search-input::placeholder { color: #a0adc4; }

    .search-btn {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--primary); border: none;
      color: #fff; font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      margin: 6px; cursor: pointer;
      transition: background .25s, transform .2s;
      flex-shrink: 0;
    }
    .search-btn:hover { background: var(--primary-dk); transform: scale(1.08); }

    /* stats row */
    .hero-stats {
      display: flex; gap: 32px; margin-top: 36px;
      animation: fadeSlideDown .7s .4s ease both;
    }
    .stat-item .num {
      font-family: 'Sora', sans-serif;
      font-size: 1.6rem; font-weight: 800; color: var(--dark-head);
    }
    .stat-item .lbl { font-size: .8rem; color: var(--text-muted2); margin-top: 2px; }

    /* ─── RIGHT VISUAL ──────────────────────────────────── */
    .hero-right {
      position: relative;
      display: flex; align-items: flex-end; justify-content: center;
      min-height: 480px;
    }

    /* dot grid */
    .dot-grid {
      position: absolute; top: -10px; left: 0; right: 0;
      width: 100%; height: 100%;
      background-image: radial-gradient(circle, rgba(26,92,255,.25) 1.5px, transparent 1.5px);
      background-size: 22px 22px;
      pointer-events: none; z-index: 0;
      opacity: .55;
    }

    /* blue arch */
    .blue-arch {
      position: absolute;
      bottom: 0;
      width: 340px; height: 440px;
      background: linear-gradient(160deg, #1a5cff 60%, #3b82f6);
      border-radius: 200px 200px 0 0;
      z-index: 1;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(26,92,255,.35);
      /* slide-in animation */
      animation: archSlide .9s .2s cubic-bezier(.22,.68,0,1.2) both;
    }
    @keyframes archSlide {
      from { transform: translateY(100%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }

    /* floating top-to-bottom arch shimmer */
    .blue-arch::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 60%);
      animation: shimmerMove 4s linear infinite;
    }
    @keyframes shimmerMove {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(200%); }
    }

    /* doctor image */
    .doctor-img {
      position: absolute;
      bottom: 0; left: 50%; transform: translateX(-50%);
      /* width: 300px; */
      z-index: 3;
      /* animation: doctorEntry 1s .5s cubic-bezier(.22,.68,0,1.1) both; */
      filter: drop-shadow(0 16px 40px rgba(26,92,255,.3));
    }
    @keyframes doctorEntry {
      from { transform: translateX(-50%) translateY(60px); opacity: 0; }
      to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
    }

    /* floating continuous bob */
    .doctor-img { animation: doctorEntry 1s .5s cubic-bezier(.22,.68,0,1.1) both, doctorBob 4s 1.6s ease-in-out infinite; }
    @keyframes doctorBob {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(-12px); }
    }

    /* review card */
    .review-card {
      position: absolute;
      right: -10px; top: 40px;
      background: #fff; border-radius: 18px;
      padding: 18px 22px;
      box-shadow: 0 12px 40px rgba(26,92,255,.18);
      z-index: 4; width: 160px;
      animation: reviewPop .8s .8s cubic-bezier(.34,1.56,.64,1) both;
      border: 1px solid rgba(26,92,255,.08);
    }
    @keyframes reviewPop {
      from { transform: scale(.6) translateX(30px); opacity: 0; }
      to   { transform: scale(1) translateX(0);      opacity: 1; }
    }
    .review-card .score {
      font-family: 'Sora', sans-serif;
      font-size: 1.9rem; font-weight: 800; color: var(--dark-head);
      line-height: 1;
    }
    .review-card .score span { font-size: 1rem; font-weight: 600; color: var(--text-muted2); }
    .review-card .label { font-size: .72rem; color: var(--text-muted2); margin: 4px 0 8px; }
    .review-card .stars i { color: #f7b731; font-size: .95rem; }

    /* outer arc border */
    .arc-border {
      position: absolute;
      bottom: 0;
      width: 390px; height: 495px;
      border: 2px solid rgba(26,92,255,.25);
      border-radius: 210px 210px 0 0;
      z-index: 0;
      animation: archSlide .9s .1s cubic-bezier(.22,.68,0,1.2) both;
    }

    /* floating badges */
    .float-badge {
      position: absolute; z-index: 5;
      background: #fff; border-radius: 50px;
      padding: 8px 16px;
      box-shadow: var(--shadow-md);
      font-size: .78rem; font-weight: 600; color: var(--dark-head);
      display: flex; align-items: center; gap: 8px;
      border: 1px solid rgba(26,92,255,.10);
    }
    .float-badge .fb-icon {
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .85rem;
    }
    .badge-consult { top: 15%; left: -30px; animation: badgePop .7s 1.1s both, badgeFloat 5s 1.8s ease-in-out infinite; }
    .badge-exp     { bottom: 18%; left: -40px; animation: badgePop .7s 1.3s both, badgeFloat2 6s 2s ease-in-out infinite; }
    @keyframes badgePop {
      from { transform: scale(.5); opacity: 0; }
      to   { transform: scale(1);  opacity: 1; }
    }
    @keyframes badgeFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
    @keyframes badgeFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

    /* ─── SERVICES SECTION ──────────────────────────────── */
    .services-section {
      padding: 60px 0 80px;
      background: var(--body-bg);
    }

    .service-card {
      background: var(--card-bg);
      border-radius: 20px;
      padding: 30px 24px 24px;
      box-shadow: 0 4px 24px rgba(26,92,255,.08);
      position: relative;
      transition: transform .3s, box-shadow .3s;
      border: 1px solid rgba(26,92,255,.07);
      opacity: 0; transform: translateY(30px);
      transition: transform .4s, box-shadow .4s, opacity .4s;
    }
    .service-card.visible {
      opacity: 1; transform: translateY(0);
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(26,92,255,.16);
    }

    .svc-icon-wrap {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; margin-bottom: 18px;
      position: relative;
    }
    .svc-icon-wrap::after {
      content: '';
      position: absolute; inset: -4px;
      border-radius: 50%;
      border: 2px dashed currentColor;
      opacity: .3;
      animation: spinDash 8s linear infinite;
    }
    @keyframes spinDash {
      to { transform: rotate(360deg); }
    }

    .svc-title {
      font-family: 'Sora', sans-serif;
      font-size: 1.05rem; font-weight: 700;
      color: var(--dark-head); margin-bottom: 8px;
      line-height: 1.3;
    }
    .svc-desc { font-size: .85rem; color: var(--text-muted2); line-height: 1.6; }

    .svc-arrow {
      position: absolute; bottom: 20px; right: 20px;
      width: 38px; height: 38px; border-radius: 50%;
      background: #fff; box-shadow: 0 4px 16px rgba(26,92,255,.14);
      display: flex; align-items: center; justify-content: center;
      color: var(--primary); font-size: .95rem;
      transition: background .25s, color .25s, transform .25s;
      border: 1px solid rgba(26,92,255,.10);
    }
    .service-card:hover .svc-arrow {
      background: var(--primary); color: #fff; transform: rotate(-45deg);
    }

    /* color themes per card */
    .c-blue  { background: rgba(26,92,255,.12); color: var(--primary); }
    .c-green { background: rgba(76,205,94,.15);  color: #27a83d; }
    .c-sky   { background: rgba(56,189,248,.15); color: #0284c7; }
    .c-purp  { background: rgba(168,85,247,.12); color: #9333ea; }

    /* ─── ANIMATIONS UTILITIES ──────────────────────────── */
    @keyframes fadeSlideDown {
      from { opacity: 0; transform: translateY(-22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── RESPONSIVE ────────────────────────────────────── */
    @media (max-width: 991px) {
      .hero-right { min-height: 360px; margin-top: 48px; }
      .blue-arch  { width: 280px; height: 360px; }
      .arc-border { width: 320px; height: 410px; }
      .doctor-img { width: 240px; }
      .review-card { right: 0; }
      .badge-consult, .badge-exp { display: none; }
    }
    @media (max-width: 767px) {
      .site-nav { padding: 14px 20px; }
      .site-nav .nav-links { display: none; }
      .hero { padding: 90px 0 40px; }
      .hero-stats { flex-wrap: wrap; gap: 16px; }
      .search-bar { max-width: 100%; }
      .city-select { min-width: 110px; font-size: .82rem; }
    }
    @media (max-width: 575px) {
      .blue-arch  { width: 220px; height: 300px; }
      .arc-border { width: 255px; height: 345px; }
      .doctor-img { width: 200px; }
      .review-card { width: 130px; padding: 12px 14px; right: -5px; top: 20px; }
      .review-card .score { font-size: 1.5rem; }
    }

    /* scroll reveal helper */
    .reveal { opacity: 0; transform: translateY(30px); transition: opacity .55s, transform .55s; }
    .reveal.in { opacity: 1; transform: none; }