/* +===================================================================+
       |  CSS - fwhp-ai                                                    |
       |  Desktop: 1200×310 horizontal | Mobile ≤1024: vertical timeline   |
       +===================================================================+ */

    /* ── 1. CSS VARIABLES ── */
    
    
    /* ── 3. SECTION LAYOUT & HEADER ── */
    .fwhp-ai-section {
      width: 100%; min-height: 45vh; background: var(--g0);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 36px 0; position: relative;
    }
    .fwhp-ai-section::before, .fwhp-ai-section::after {
      content: ''; position: absolute; left: 5%; right: 5%; height: 1px;
      background: linear-gradient(90deg, transparent, var(--g2), transparent);
    }
    .fwhp-ai-section::before { top: 0; } .fwhp-ai-section::after { bottom: 0; }

    .fwhp-ai-wrap { width: 100%; padding: 0 24px; position: relative; z-index: 2; }
    .fwhp-ai-header { text-align: center; margin-bottom: 0; }
    .fwhp-ai-badge {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
      background: var(--pu-l); border-radius: 100px; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 2px; color: var(--pu); margin-bottom: 12px;
    }
    .fwhp-ai-badge i { font-size: 11px; }
    .fwhp-ai-h2 { font-size: 38px; font-weight: 200; line-height: 1.1; letter-spacing: -1.5px; }
    .fwhp-ai-h2 b { font-weight: 700; }
    #fwhp-ai-accent { transition: color .4s ease; }
    .fwhp-ai-sub { font-size: 14px; color: var(--g5); font-weight: 300; margin-top: 8px; }

    /* ── 4. DESKTOP HORIZONTAL TIMELINE (1200×310) ── */
    /* ================================================================
       DESKTOP: horizontal 1200×310 stage
       ================================================================ */
    .fwhp-ai-scroll { width: 100%; }
    .fwhp-ai-stage { position: relative; width: 100%; max-width: 1200px; height: 310px; margin: 0 auto; }

    /* — 4a. Track line — */
    .fwhp-ai-track { position: absolute; top: 150px; left: 60px; width: 1080px; height: 3px; background: #D1D3D4; border-radius: 1.5px; z-index: 1; }

    /* — 4b. Colored segments — */
    .fwhp-ai-seg { position: absolute; top: 149px; height: 5px; width: 120px; border-radius: 2px; z-index: 2; }
    .fwhp-ai-seg[data-n="0"]{left:40px;background:var(--pk)}
    .fwhp-ai-seg[data-n="1"]{left:240px;background:var(--bl)}
    .fwhp-ai-seg[data-n="2"]{left:440px;background:var(--go)}
    .fwhp-ai-seg[data-n="3"]{left:640px;background:var(--co)}
    .fwhp-ai-seg[data-n="4"]{left:840px;background:var(--pu)}
    .fwhp-ai-seg[data-n="5"]{left:1040px;background:var(--tl)}

    /* — 4c. Dots on line — */
    .fwhp-ai-dot { position: absolute; top: 144px; width: 14px; height: 14px; border-radius: 50%; z-index: 5; }
    .fwhp-ai-dot[data-n="0"]{left:93px;background:var(--pk)}
    .fwhp-ai-dot[data-n="1"]{left:293px;background:var(--bl)}
    .fwhp-ai-dot[data-n="2"]{left:493px;background:var(--go)}
    .fwhp-ai-dot[data-n="3"]{left:693px;background:var(--co)}
    .fwhp-ai-dot[data-n="4"]{left:893px;background:var(--pu)}
    .fwhp-ai-dot[data-n="5"]{left:1093px;background:var(--tl)}

    /* — 4d. Double pulse rings — */
    .fwhp-ai-pulse, .fwhp-ai-pulse2 {
      position: absolute; top: 144px; width: 14px; height: 14px;
      border-radius: 50%; z-index: 4; opacity: 0.12; animation: fwhp-ai-pls 3s infinite;
    }
    .fwhp-ai-pulse2 { animation: fwhp-ai-pls2 3s infinite; }
    .fwhp-ai-pulse[data-n="0"]{left:93px;background:var(--pk)}
    .fwhp-ai-pulse[data-n="1"]{left:293px;background:var(--bl);animation-delay:.5s}
    .fwhp-ai-pulse[data-n="2"]{left:493px;background:var(--go);animation-delay:1s}
    .fwhp-ai-pulse[data-n="3"]{left:693px;background:var(--co);animation-delay:1.5s}
    .fwhp-ai-pulse[data-n="4"]{left:893px;background:var(--pu);animation-delay:2s}
    .fwhp-ai-pulse[data-n="5"]{left:1093px;background:var(--tl);animation-delay:2.5s}
    .fwhp-ai-pulse2[data-n="0"]{left:93px;background:var(--pk);animation-delay:.4s}
    .fwhp-ai-pulse2[data-n="1"]{left:293px;background:var(--bl);animation-delay:.9s}
    .fwhp-ai-pulse2[data-n="2"]{left:493px;background:var(--go);animation-delay:1.4s}
    .fwhp-ai-pulse2[data-n="3"]{left:693px;background:var(--co);animation-delay:1.9s}
    .fwhp-ai-pulse2[data-n="4"]{left:893px;background:var(--pu);animation-delay:2.4s}
    .fwhp-ai-pulse2[data-n="5"]{left:1093px;background:var(--tl);animation-delay:2.9s}
    @keyframes fwhp-ai-pls { 0%,100%{transform:scale(1);opacity:.15} 50%{transform:scale(2.4);opacity:0} }
    @keyframes fwhp-ai-pls2 { 0%,100%{transform:scale(1);opacity:.10} 50%{transform:scale(3);opacity:0} }

    /* — 4e. Timeline groups (zero-width positioned) — */
    .fwhp-ai-grp {
      position: absolute; top: 0; width: 0; height: 310px; z-index: 10;
      opacity: 0; transform: translateY(12px);
      transition: opacity .5s cubic-bezier(.25,1,.5,1), transform .5s cubic-bezier(.25,1,.5,1);
    }
    .fwhp-ai-grp.fwhp-ai-vis { opacity: 1; transform: translateY(0); }
    .fwhp-ai-grp[data-x="100"]{left:100px}.fwhp-ai-grp[data-x="300"]{left:300px}
    .fwhp-ai-grp[data-x="500"]{left:500px}.fwhp-ai-grp[data-x="700"]{left:700px}
    .fwhp-ai-grp[data-x="900"]{left:900px}.fwhp-ai-grp[data-x="1100"]{left:1100px}
    .fwhp-ai-grp[data-c="pk"]{color:var(--pk)}.fwhp-ai-grp[data-c="bl"]{color:var(--bl)}
    .fwhp-ai-grp[data-c="go"]{color:var(--go)}.fwhp-ai-grp[data-c="mt"]{color:var(--co)}
    .fwhp-ai-grp[data-c="pu"]{color:var(--pu)}.fwhp-ai-grp[data-c="tl"]{color:var(--tl)}

    /* — 4f. Vertical line segment (mobile only, hidden on desktop) — */
    /* Vertical line segment — hidden on desktop, shown on mobile */
    .fwhp-ai-vline { display: none; }

    /* — 4g. Teardrop badges — */
    .fwhp-ai-tear {
      position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%);
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 3px 8px rgba(15,23,42,0.06)) drop-shadow(0 1px 2px rgba(15,23,42,0.04));
      transition: filter .4s, transform .4s;
    }
    .fwhp-ai-grp:hover .fwhp-ai-tear {
      filter: drop-shadow(0 10px 24px rgba(15,23,42,0.14)) drop-shadow(0 2px 4px rgba(15,23,42,0.06));
      transform: translate(-50%, calc(-50% - 3px));
    }
    .fwhp-ai-tear--up { top: 78px; }
    .fwhp-ai-tear--dn { top: 225px; }

    .fwhp-ai-tear-bg { position: absolute; width: 58px; height: 58px; opacity: 0.45; }
    .fwhp-ai-tear-fg { position: absolute; width: 52px; height: 52px; }
    .fwhp-ai-tear--up .fwhp-ai-tear-bg, .fwhp-ai-tear--up .fwhp-ai-tear-fg { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
    .fwhp-ai-tear--up .fwhp-ai-tear-bg { background: linear-gradient(135deg, #fff, #D1D3D4); }
    .fwhp-ai-tear--up .fwhp-ai-tear-fg { background: linear-gradient(135deg, #D1D3D4, #fff); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-bg, .fwhp-ai-tear--dn .fwhp-ai-tear-fg { border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-bg { background: linear-gradient(135deg, #D1D3D4, #fff); }
    .fwhp-ai-tear--dn .fwhp-ai-tear-fg { background: linear-gradient(135deg, #fff, #D1D3D4); }

    /* — 4h. Inner circle + ring — */
    .fwhp-ai-tear-inner { position: absolute; width: 42px; height: 42px; background: #E6E7E8; border-radius: 50%; z-index: 2; }
    .fwhp-ai-tear-ring { position: absolute; width: 42px; height: 42px; border: 1.5px solid currentColor; border-radius: 50%; z-index: 3; }
    .fwhp-ai-tear i { position: absolute; z-index: 4; font-size: 14px; color: currentColor; }

    /* — 4i. Title + Description positioning — */
    .fwhp-ai-title, .fwhp-ai-desc { position: absolute; left: 0; text-align: center; white-space: nowrap; transition: transform .3s ease; }
    .fwhp-ai-title { font-size: 12px; font-weight: 700; color: currentColor; }
    .fwhp-ai-desc { font-size: clamp(10px, 0.9vw, 12px); font-weight: 300; color: #808285; line-height: 1.5; letter-spacing: 0.1px; }
    .fwhp-ai-title--above { top: 136px; transform: translate(-50%, -100%); }
    .fwhp-ai-desc--below { top: 170px; transform: translate(-50%, 0); }
    .fwhp-ai-title--below { top: 164px; transform: translate(-50%, 0); }
    .fwhp-ai-desc--above { top: 138px; transform: translate(-50%, -100%); }
    .fwhp-ai-grp:hover .fwhp-ai-title--above { transform: translate(-50%, calc(-100% - 2px)); }
    .fwhp-ai-grp:hover .fwhp-ai-desc--below { transform: translate(-50%, 2px); }
    .fwhp-ai-grp:hover .fwhp-ai-title--below { transform: translate(-50%, 2px); }
    .fwhp-ai-grp:hover .fwhp-ai-desc--above { transform: translate(-50%, calc(-100% - 2px)); }

    /* — 4j. Sperm traveler (head + tail joints) — */
    .fwhp-ai-sperm { position: absolute; width: 10px; height: 9px; transform: translate(-5px, -4.5px); z-index: 50; display: flex; align-items: center; }
    .fwhp-ai-sperm-head { position: absolute; width: 11px; height: 8px; background: currentColor; z-index: 2; right: 0; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; transform: rotate(-2deg); }
    .fwhp-ai-joint { position: absolute; height: 1.8px; background: currentColor; border-radius: 1px; transform-origin: right center; opacity: 0.6; }
    .fwhp-ai-j1 { right: 8px; width: 8px; animation: fwhp-ai-w1 .4s infinite alternate ease-in-out; }
    .fwhp-ai-j2 { right: 100%; width: 7px; animation: fwhp-ai-w2 .4s infinite alternate ease-in-out; }
    .fwhp-ai-j3 { right: 100%; width: 6px; animation: fwhp-ai-w1 .4s infinite alternate ease-in-out; }
    @keyframes fwhp-ai-w1 { 0%{transform:rotate(-25deg)} 100%{transform:rotate(25deg)} }
    @keyframes fwhp-ai-w2 { 0%{transform:rotate(40deg)} 100%{transform:rotate(-40deg)} }

    /* — 4k. Impact glow ring — */
    .fwhp-ai-glow { position: absolute; border: 2px solid currentColor; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 10; }

    /* — 4l. Scroll reveal animations — */
    .fwhp-ai-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s cubic-bezier(.25,1,.5,1), transform .6s cubic-bezier(.25,1,.5,1); }
    .fwhp-ai-vis { opacity: 1; transform: translateY(0); }

    /* ── 5. RESPONSIVE: LARGE DESKTOP (>1440px) ── */
    @media(min-width:1441px){ .fwhp-ai-section{padding:44px 0}.fwhp-ai-h2{font-size:42px} }

    /* ── 6. RESPONSIVE: MOBILE/TABLET VERTICAL TIMELINE (≤1024px) ── */
    /* ================================================================
       MOBILE / TABLET ≤1024px — VERTICAL TIMELINE
       Center line runs top-to-bottom at 50%
       Odd steps (1,3,5): icon LEFT, desc RIGHT
       Even steps (2,4,6): icon RIGHT, desc LEFT
       ================================================================ */
    @media(max-width:1024px){
      .fwhp-ai-section { padding: 32px 0; min-height: auto; }
      .fwhp-ai-wrap { padding: 0 14px; }
      .fwhp-ai-h2 { font-size: 30px; letter-spacing: -1px; }
      .fwhp-ai-sub { font-size: 12px; }
      .fwhp-ai-sub br { display: none; }

      .fwhp-ai-scroll { overflow: visible; }
      .fwhp-ai-stage { width: 100%; height: auto; position: relative; padding: 24px 0; }

      /* Vertical center line */
      .fwhp-ai-track {
        top: 0; bottom: 0; left: 50%; width: 3px; height: 100%;
        transform: translateX(-50%);
      }

      /* Hide horizontal elements */
      .fwhp-ai-seg, .fwhp-ai-dot, .fwhp-ai-pulse, .fwhp-ai-pulse2 { display: none; }

      /* Vertical colored segment on center line */
      .fwhp-ai-grp .fwhp-ai-vline {
        display: block; position: absolute; left: 50%; top: 50%;
        width: 5px; height: 50px; border-radius: 3px;
        background: currentColor; z-index: 2;
        transform: translate(-50%, -50%);
      }

      /* Groups become flow items */
      .fwhp-ai-grp {
        position: relative; width: 100%; height: auto;
        left: auto !important; top: auto;
        display: flex; align-items: center;
        padding: 20px 0; opacity: 0;
        transform: translateY(16px);
        min-height: 80px;
      }
      .fwhp-ai-grp.fwhp-ai-vis { opacity: 1; transform: translateY(0); }

      /* Vertical dot on center line */
      .fwhp-ai-grp::before {
        content: ''; position: absolute; left: 50%;
        width: 14px; height: 14px; border-radius: 50%;
        background: currentColor; z-index: 6;
        transform: translateX(-50%);
      }
      /* Pulse ring */
      .fwhp-ai-grp::after {
        content: ''; position: absolute; left: 50%;
        width: 14px; height: 14px; border-radius: 50%;
        background: currentColor; z-index: 5;
        margin-left: -7px;
        animation: fwhp-ai-pls 3s infinite;
      }

      /* Reset teardrops */
      .fwhp-ai-tear { position: relative; top: auto !important; transform: none; flex-shrink: 0; width: 54px; height: 54px; }
      .fwhp-ai-grp:hover .fwhp-ai-tear { transform: none; }
      .fwhp-ai-tear-bg { width: 48px; height: 48px; }
      .fwhp-ai-tear-fg { width: 42px; height: 42px; }
      .fwhp-ai-tear-inner { width: 34px; height: 34px; }
      .fwhp-ai-tear-ring { width: 34px; height: 34px; }

      /* UP steps (1,3,5): icon LEFT, text RIGHT */
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon {
        position: absolute; left: 0; width: calc(50% - 36px);
        display: flex; justify-content: flex-end; align-items: center;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent {
        margin-left: calc(50% + 18px); text-align: left; padding-right: 8px;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-bg,
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-fg {
        border-radius: 50% 50% 0 50% !important;
        transform: rotate(-45deg) !important;
      }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-bg { background: linear-gradient(135deg, #fff, #D1D3D4) !important; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-tear-fg { background: linear-gradient(135deg, #D1D3D4, #fff) !important; }

      /* DN steps (2,4,6): icon RIGHT, text LEFT */
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon {
        position: absolute; right: 0; width: calc(50% - 36px);
        display: flex; justify-content: flex-start; align-items: center;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent {
        margin-right: calc(50% + 18px); text-align: right; margin-left: 0; padding-left: 8px;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-bg,
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-fg {
        border-radius: 50% 50% 50% 0 !important;
        transform: rotate(45deg) !important;
      }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-bg { background: linear-gradient(135deg, #D1D3D4, #fff) !important; }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-tear-fg { background: linear-gradient(135deg, #fff, #D1D3D4) !important; }

      /* Title + desc flow */
      .fwhp-ai-title, .fwhp-ai-desc {
        position: relative; top: auto; left: auto;
        transform: none !important; white-space: normal;
      }
      .fwhp-ai-mcontent { display: flex; flex-direction: column; gap: 3px; }
      .fwhp-ai-mcontent .fwhp-ai-title { order: 1; }
      .fwhp-ai-mcontent .fwhp-ai-desc { order: 2; }
      .fwhp-ai-title { font-size: 13px; }
      .fwhp-ai-desc { font-size: 11px; line-height: 1.45; }
      .fwhp-ai-desc br { display: none; }

      /* Sperm hidden — JS creates vertical */
      .fwhp-ai-sperm { display: none; }
    }

    /* ── 7. RESPONSIVE: TABLET PORTRAIT (≤768px) ── */
    /* ═══ TABLET PORTRAIT (601-768px) ═══ */
    @media(max-width:768px){
      .fwhp-ai-section { padding: 28px 0; }
      .fwhp-ai-h2 { font-size: 28px; }
      .fwhp-ai-grp { padding: 16px 0; min-height: 72px; }
      .fwhp-ai-tear { width: 50px; height: 50px; }
      .fwhp-ai-tear-bg { width: 44px; height: 44px; }
      .fwhp-ai-tear-fg { width: 38px; height: 38px; }
      .fwhp-ai-tear-inner { width: 32px; height: 32px; }
      .fwhp-ai-tear-ring { width: 32px; height: 32px; }
      .fwhp-ai-tear i { font-size: 13px; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 42px; }
    }

    /* ── 8. RESPONSIVE: MOBILE (≤600px) ── */
    /* ═══ MOBILE — iPhone 14 Pro Max, Galaxy S series ═ */
    @media(max-width:600px){
      .fwhp-ai-section { padding: 24px 0; }
      .fwhp-ai-wrap { padding: 0 10px; }
      .fwhp-ai-h2 { font-size: 26px; }
      .fwhp-ai-sub { font-size: 11px; }
      .fwhp-ai-badge { padding: 5px 12px; font-size: 9px; }
      .fwhp-ai-grp { padding: 14px 0; min-height: 68px; }
      .fwhp-ai-tear { width: 46px; height: 46px; }
      .fwhp-ai-tear-bg { width: 40px; height: 40px; }
      .fwhp-ai-tear-fg { width: 34px; height: 34px; }
      .fwhp-ai-tear-inner { width: 28px; height: 28px; }
      .fwhp-ai-tear-ring { width: 28px; height: 28px; }
      .fwhp-ai-tear i { font-size: 11px; }
      .fwhp-ai-title { font-size: 12px; }
      .fwhp-ai-desc { font-size: 10px; line-height: 1.4; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 28px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 28px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 14px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 14px); }
      .fwhp-ai-grp .fwhp-ai-vline { height: 36px; }
      .fwhp-ai-grp::before { width: 12px; height: 12px; }
      .fwhp-ai-grp::after { width: 12px; height: 12px; margin-left: -6px; }
    }

    /* ── 9. RESPONSIVE: SMALL MOBILE (≤430px) ── */
    /* ═══ SMALL MOBILE — iPhone 13/14/15, Pixel ═══ */
    @media(max-width:430px){
      .fwhp-ai-section { padding: 20px 0; }
      .fwhp-ai-wrap { padding: 0 8px; }
      .fwhp-ai-h2 { font-size: 24px; }
      .fwhp-ai-sub { font-size: 10.5px; }
      .fwhp-ai-grp { padding: 12px 0; min-height: 62px; }
      .fwhp-ai-tear { width: 42px; height: 42px; }
      .fwhp-ai-tear-bg { width: 36px; height: 36px; }
      .fwhp-ai-tear-fg { width: 30px; height: 30px; }
      .fwhp-ai-tear-inner { width: 24px; height: 24px; }
      .fwhp-ai-tear-ring { width: 24px; height: 24px; }
      .fwhp-ai-tear i { font-size: 10px; }
      .fwhp-ai-title { font-size: 11px; }
      .fwhp-ai-desc { font-size: 9.5px; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 22px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 22px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 12px); padding-right: 4px; }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 12px); padding-left: 4px; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 30px; }
    }

    /* ── 10. RESPONSIVE: VERY SMALL (≤380px) ── */
    /* ═══ VERY SMALL — iPhone SE, Galaxy A series ═══ */
    @media(max-width:380px){
      .fwhp-ai-h2 { font-size: 22px; }
      .fwhp-ai-sub { font-size: 10px; }
      .fwhp-ai-badge { padding: 4px 10px; font-size: 8px; letter-spacing: 1.5px; }
      .fwhp-ai-grp { padding: 10px 0; }
      .fwhp-ai-tear { width: 38px; height: 38px; }
      .fwhp-ai-tear-bg { width: 32px; height: 32px; }
      .fwhp-ai-tear-fg { width: 26px; height: 26px; }
      .fwhp-ai-tear-inner { width: 22px; height: 22px; }
      .fwhp-ai-tear-ring { width: 22px; height: 22px; }
      .fwhp-ai-tear i { font-size: 9px; }
      .fwhp-ai-title { font-size: 10px; }
      .fwhp-ai-desc { font-size: 9px; }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-micon { width: calc(50% - 18px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-micon { width: calc(50% - 18px); }
      .fwhp-ai-grp[data-dir="up"] .fwhp-ai-mcontent { margin-left: calc(50% + 10px); }
      .fwhp-ai-grp[data-dir="dn"] .fwhp-ai-mcontent { margin-right: calc(50% + 10px); }
    }

    /* ── 11. RESPONSIVE: LANDSCAPE MOBILE ── */
    /* ═══ LANDSCAPE MOBILE (short height + wide) ═══ */
    @media(max-width:1024px) and (max-height:500px) and (orientation:landscape){
      .fwhp-ai-section { padding: 16px 0; }
      .fwhp-ai-header { margin-bottom: 0; }
      .fwhp-ai-h2 { font-size: 22px; }
      .fwhp-ai-sub { display: none; }
      .fwhp-ai-stage { padding: 12px 0; }
      .fwhp-ai-grp { padding: 8px 0; min-height: 52px; }
      .fwhp-ai-tear { width: 38px; height: 38px; }
      .fwhp-ai-tear-bg { width: 32px; height: 32px; }
      .fwhp-ai-tear-fg { width: 26px; height: 26px; }
      .fwhp-ai-tear-inner { width: 22px; height: 22px; }
      .fwhp-ai-tear-ring { width: 22px; height: 22px; }
      .fwhp-ai-tear i { font-size: 9px; }
      .fwhp-ai-title { font-size: 10px; }
      .fwhp-ai-desc { font-size: 9px; line-height: 1.3; }
      .fwhp-ai-grp .fwhp-ai-vline { height: 24px; }
      .fwhp-ai-grp::before { width: 10px; height: 10px; }
      .fwhp-ai-grp::after { width: 10px; height: 10px; margin-left: -5px; }
    }


    /* ── 12. ACCESSIBILITY: prefers-reduced-motion ── */
    @media(prefers-reduced-motion: reduce){
      .fwhp-ai-pulse, .fwhp-ai-pulse2, .fwhp-ai-grp::after { animation: none !important; }
      .fwhp-ai-joint { animation: none !important; }
      .fwhp-ai-sperm { display: none !important; }
      .fwhp-ai-grp { transition: none !important; opacity: 1 !important; transform: none !important; }
      .fwhp-ai-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
      .fwhp-ai-tear { transition: none !important; }
      .fwhp-ai-title, .fwhp-ai-desc { transition: none !important; }
      #fwhp-ai-accent { transition: none !important; color: var(--pk) !important; }
    }

    /* +===================================================================+
       |  CSS END - fwhp-ai                                                |
       |  Sections: 1-3 Base | 4 Desktop | 5-11 Responsive                |
       +===================================================================+ */

/* +================================== Section)                   |
	|  All classes prefixed: fw-rfc-*                                  |
	|  All IDs prefixed: fw-rfc-*                                      |
	|  Safe to deploy alongside any other FertilityWorld CSS           |
	+===================================================================+
	SECTION: "IVF" - Homepage Ecosystem Section
	TABS: Booking / Finance / At-Home
	LAYOUT: Desktop 3D phone | Tablet horizontal | Mobile vertical
	PREFIX: fw-rfc- (all classes and IDs)
	DEPS: Outfit font, Bootstrap Icons 1.11.3
=============================================================== */

/* -- Section Container -- */
.fw-rfc-section {
	position: relative; width: 100%; height: clamp(560px, 55vh, 650px);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	background: var(--wh); 
}
.fw-rfc-container {
	width: 100%; max-width: 1180px; padding: 0 24px;
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 50px; align-items: stretch;
	position: relative; z-index: 2; height: 480px; 
}

/* -- Left Panel: Text Content + Dock -- */
.fw-rfc-left { display: flex; flex-direction: column; justify-content: space-between; position: relative; }

.fw-rfc-badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 18px; background: var(--bl-l); border-radius: 100px;
	font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
	margin-bottom: 24px; align-self: flex-start;
	box-shadow: 0 2px 12px rgba(15, 23, 42, .06), 0 0 0 1px rgba(15, 23, 42, .03);
	transition: all 0.4s; color: var(--g6);
}
.fw-rfc-badge i { font-size: 13px; transition: color 0.4s; }

/* -- Content Morpher (slide transitions) -- */
.fw-rfc-morpher { position: relative; flex: 1; }
.fw-rfc-slide {
	position: absolute; top: 0; left: 0; width: 100%;
	opacity: 0; transform: translateY(15px); filter: blur(8px);
	transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); pointer-events: none;
}
.fw-rfc-slide.active { opacity: 1; transform: translateY(0); filter: blur(0); pointer-events: auto; }

/* -- Typography (Premium: ultra-light/bold contrast) -- */
.fw-rfc-slide h2 { font-size: 44px; font-weight: 200; line-height: 1.12; color: var(--dk); margin-bottom: 14px; letter-spacing: -1.5px; }
.fw-rfc-slide h2 b { font-weight: 700; transition: color 0.4s; }
#fw-rfc-txt-booking h2 b { color: var(--bl); }
#fw-rfc-txt-finance h2 b { color: var(--mt-d); }
#fw-rfc-txt-home h2 b { color: var(--pk); }
.fw-rfc-slide p { font-size: 15px; color: var(--g5); line-height: 1.6; max-width: 460px; margin-bottom: 30px; font-weight: 300; letter-spacing: 0.1px; }

/* -- Feature List (icon pills + hover slide) -- */
.fw-rfc-feats { display: flex; flex-direction: column; gap: 16px; }
.fw-rfc-feat { display: flex; align-items: flex-start; gap: 14px; transition: transform 0.2s; }
.fw-rfc-feat:hover { transform: translateX(4px); }
.fw-rfc-feat i { font-size: 18px; line-height: 1; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.3s; }
#fw-rfc-txt-booking .fw-rfc-feat i { background: var(--bl-l); color: var(--bl); }
#fw-rfc-txt-finance .fw-rfc-feat i { background: var(--mt-l); color: var(--mt-d); }
#fw-rfc-txt-home .fw-rfc-feat i { background: var(--pk-l); color: var(--pk); }
.fw-rfc-feat h4 { font-size: 14px; font-weight: 600; color: var(--dk); margin-bottom: 2px; letter-spacing: -0.2px; }
.fw-rfc-feat p { font-size: 13px; color: var(--g5); line-height: 1.4; margin: 0; font-weight: 300; }

/* -- Dock (floating tab bar with sliding pill) -- */
.fw-rfc-dock-wrap { padding-top: 16px; z-index: 10; }
.fw-rfc-dock {
	display: inline-flex; background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	border-radius: 100px; padding: 5px; box-shadow: var(--ios-shadow); position: relative; align-self: flex-start;
}
.fw-rfc-dock-pill {
	position: absolute; top: 5px; left: 5px; bottom: 5px; width: 130px; 
	background: var(--wh); border-radius: 100px;
	box-shadow: 0 4px 12px rgba(15,23,42,0.08), 0 1px 2px rgba(0,0,0,0.04);
	transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1;
}
.fw-rfc-dock-btn {
	position: relative; z-index: 2; padding: 12px 24px;
	font-family: var(--ff); font-size: 12.5px; font-weight: 600; color: var(--g5);
	background: transparent; border: none; cursor: pointer;
	display: flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.fw-rfc-dock-btn.active { color: var(--dk); }
.fw-rfc-dock-btn i { font-size: 15px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fw-rfc-dock-btn.active[data-id="booking"] i { color: var(--bl); transform: scale(1.15); }
.fw-rfc-dock-btn.active[data-id="finance"] i { color: var(--mt-d); transform: scale(1.15); }
.fw-rfc-dock-btn.active[data-id="home"] i { color: var(--pk); transform: scale(1.15); }

/* -- Right Panel: 3D Scene -- */
.fw-rfc-right { width: 100%; display: flex; justify-content: center; align-items: center; }
.fw-rfc-3d-scene { perspective: 2400px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.fw-rfc-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); opacity: 0.15; transition: background 0.8s ease; z-index: 0; background: var(--bl); }

/* -- 3D Phone Device Rig -- */
.fw-rfc-device-rig { position: relative; z-index: 2; transform-style: preserve-3d; width: 250px; height: 510px; margin: 0 auto; }

/* -- Floating Tooltip Badges -- */
@keyframes floatUp { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }
@keyframes floatDown { 0%, 100% { margin-top: 0; } 50% { margin-top: 12px; } }
.fw-rfc-float {
	position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px);
	border-radius: 14px; padding: 10px 14px; box-shadow: var(--ios-shadow);
	display: flex; align-items: center; gap: 10px; z-index: 300; opacity: 0; visibility: hidden; transition: 0.6s; pointer-events: none; white-space: nowrap; border: none;
}
.fw-rfc-float.active { opacity: 1; visibility: visible; transform: translateZ(90px) scale(1); }
.fw-rfc-float--top { top: 40px; left: -160px; transform: translateZ(90px) scale(0.9); animation: floatUp 4s ease-in-out infinite; } 
.fw-rfc-float--bot { bottom: 70px; right: -150px; transform: translateZ(80px) scale(0.9); animation: floatDown 4.5s ease-in-out infinite; } 
.fw-rfc-float-icon { font-size: 20px; line-height: 1; }
.fw-rfc-float-text b { font-size: 11px; font-weight: 700; color: var(--dk); display: block; margin-bottom: 2px;}
.fw-rfc-float-text span { font-size: 9px; color: var(--g5); font-weight: 500; text-transform: uppercase;}

/* -- Hardware Chassis (Titanium phone / MacBook morph) -- */
.fw-rfc-chassis {
	position: absolute; inset: 0; background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 40%, #94a3b8 100%);
	border-radius: 38px; padding: 5px; transform-style: preserve-3d;
	box-shadow: inset 0 0 0 1px #f8fafc, inset 0 0 0 4px #94a3b8, inset 0 0 0 6px #0f172a, 20px 30px 50px rgba(15,23,42,0.1), -10px -10px 20px rgba(255,255,255,0.8);
}
.fw-rfc-ph-action { position: absolute; left: -2px; top: 80px; width: 2px; height: 20px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-volup { position: absolute; left: -2px; top: 120px; width: 2px; height: 35px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-voldn { position: absolute; left: -2px; top: 165px; width: 2px; height: 35px; background: #64748b; border-radius: 2px 0 0 2px; }
.fw-rfc-ph-power { position: absolute; right: -2px; top: 140px; width: 2px; height: 50px; background: #64748b; border-radius: 0 2px 2px 0; }
.fw-rfc-lap-notch, .fw-rfc-lap-base { display: none; }

/* -- Screen & iOS UI Elements -- */
.fw-rfc-screen { width: 100%; height: 100%; background: #000; border-radius: 34px; position: relative; overflow: hidden; transform: translateZ(1px); }
.fw-rfc-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 22px; background: #000; border-radius: 20px; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; box-shadow: inset 0 -1px 2px rgba(255,255,255,0.15); }
.fw-rfc-island::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #111; border: 1px solid #222; }
.fw-rfc-island::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #058A4E; }
.fw-rfc-status-bar { position: absolute; top: 13px; left: 0; width: 100%; padding: 0 22px; display: flex; justify-content: space-between; align-items: center; z-index: 101; pointer-events: none; color: var(--dk); }
.fw-rfc-ios-time { font-size: 10px; font-weight: 600; letter-spacing: -0.2px; }
.fw-rfc-ios-icons { display: flex; gap: 4px; font-size: 11px; }
.fw-rfc-glare { position: absolute; inset: 0; border-radius: 34px; background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.2) 45%, rgba(255,255,255,0) 60%); pointer-events: none; z-index: 200; background-size: 200% 200%; background-position: 100% 100%; }

/* -- App Views (Booking / Finance / At-Home screens) -- */
.fw-rfc-app-view { position: absolute; inset: 0; background: var(--wh); display: flex; flex-direction: column; opacity: 0; visibility: hidden; z-index: 10; }
.fw-rfc-app-view.active { opacity: 1; visibility: visible; z-index: 20; }
.fw-rfc-app-wrap { height: 100%; display: flex; flex-direction: column; }
.fw-rfc-grid { display: grid; grid-template-columns: 1fr; gap: 10px; flex: 1; }
.fw-rfc-col { display: flex; flex-direction: column; gap: 10px; }
.fw-rfc-fin-grid { display: flex; flex-direction: column; gap: 6px; flex: 1;}
.fw-rfc-hdr { padding: 44px 14px 10px; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); box-shadow: 0 2px 10px rgba(0,0,0,0.02); display: flex; justify-content: space-between; align-items: center; z-index: 10; position: relative;}
.fw-rfc-logo { font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 4px; letter-spacing: -0.5px; transition: color 0.4s; }
.fw-rfc-body { padding: 12px; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; overflow-y: auto; scrollbar-width: none; }
.fw-rfc-body::-webkit-scrollbar { display: none; }
.fw-rfc-card { background: var(--wh); border-radius: 12px; padding: 12px; box-shadow: var(--ios-shadow); transition: background-color 0.3s; display: flex; flex-direction: column;}
.fw-rfc-btn { width: 100%; padding: 12px; border-radius: 100px; color: var(--wh); font-size: 12px; font-weight: 600; text-align: center; margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 8px; cursor: pointer; border: none; box-shadow: 0 4px 14px rgba(0,0,0,0.1); transition: transform 0.2s; position: relative; z-index: 5;}
.fw-rfc-btn:active { transform: scale(0.96); }

/* -- iOS-Style Dropdown -- */
.fw-rfc-dropdown { position: relative; z-index: 50; }
.fw-rfc-select { background: var(--wh); box-shadow: var(--ios-shadow); border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; cursor: pointer; transition: 0.2s; position: relative; }
.fw-rfc-select small { font-size: 9px; color: var(--g5); font-weight: 500; margin-bottom: 2px; display: block; letter-spacing: 0.2px;}
.fw-rfc-select-val { display: flex; align-items: center; gap: 8px; }
.fw-rfc-select-val img { width: 16px; border-radius: 2px; }
.fw-rfc-select-val b { font-size: 12px; font-weight: 600; color: var(--dk); transition: color 0.3s;}
.fw-rfc-select > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--g5); }
.fw-rfc-ios-menu { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(-5px); transition: all 0.2s ease; overflow: hidden; border: none; z-index: 100;}
.fw-rfc-ios-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.fw-rfc-ios-item { padding: 10px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--g6); border-bottom: 1px solid var(--g0); transition: 0.2s; }
.fw-rfc-ios-item:hover { background: var(--g0); }
.fw-rfc-ios-item img { width: 16px; border-radius: 2px; }
.fw-rfc-ios-item.selected { color: var(--dk); background: var(--g0); }

/* -- Chips, Time Slots & Interactive Elements -- */
.fw-rfc-chip-row { display: flex; gap: 6px; width: 100%; }
.fw-rfc-chip { flex: 1; text-align: center; padding: 8px 2px; background: var(--wh); box-shadow: var(--ios-shadow); border-radius: 8px; font-size: 8.5px; font-weight: 600; color: var(--g5); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; border: none;}
.fw-rfc-chip i { font-size: 11px; transition: 0.2s; }
.fw-rfc-chip.fw-rfc-th-bl.selected { background: var(--bl); color: var(--wh); box-shadow: 0 4px 8px rgba(20,120,200,0.2); }
.fw-rfc-chip.fw-rfc-th-pk.selected { background: var(--pk); color: var(--wh); box-shadow: 0 4px 8px rgba(233,52,138,0.2); }
.fw-rfc-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; margin-bottom: 8px;}
.fw-rfc-time-slot { padding: 8px 4px; text-align: center; border-radius: 8px; font-size: 9px; font-weight: 600; color: var(--g6); cursor: pointer; transition: 0.2s; background: var(--wh); box-shadow: var(--ios-shadow); border: none;}
.fw-rfc-time-slot.selected { background: var(--bl); color: var(--wh); box-shadow: 0 2px 6px rgba(20,120,200,0.2); }

/* -- Finance Display & EMI Cards -- */
.fw-rfc-fin-display { flex-direction: column; align-items: flex-start; }
.fw-rfc-fin-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.fw-rfc-box { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s; background: var(--wh); box-shadow: var(--ios-shadow); border: none; height: 100%;}
.fw-rfc-box-ic { font-size: 16px; color: var(--g4); transition: 0.2s; flex-shrink: 0; }
.fw-rfc-box-text { flex: 1; }
.fw-rfc-box > div:has(.fw-rfc-box-text) { flex: 1; }
.fw-rfc-box-text b { font-size: 10.5px; color: var(--dk); display: block; margin-bottom: 1px;}
.fw-rfc-box-text span { font-size: 8.5px; color: var(--g5); }
.fw-rfc-box-price { font-size: 10px; font-weight: 700; color: var(--mt-d); text-align: right; white-space: nowrap;}
.fw-rfc-box.selected { background: var(--mt-l); transform: scale(1.02); box-shadow: 0 4px 10px rgba(76,213,170,0.1); }
.fw-rfc-box.selected .fw-rfc-box-ic { color: var(--mt-d); }

/* -- Card Swap & Build Animations -- */
.fw-rfc-dyn { transition: all 0.3s; } .fw-rfc-dyn.fw-rfc-swapping { opacity: 0; transform: translateY(10px); }
.fw-rfc-icon-bare { font-size: 24px; line-height: 1; flex-shrink: 0; transition: color 0.3s; }
@keyframes fw-rfc-pulseMap { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.fw-rfc-anim { opacity: 0; transform: translateY(10px) scale(0.98); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fw-rfc-app-view.active .fw-rfc-anim { opacity: 1; transform: translateY(0) scale(1); }
.fw-rfc-app-view.active .fw-rfc-d1 { transition-delay: 0.05s; } .fw-rfc-app-view.active .fw-rfc-d2 { transition-delay: 0.1s; }
.fw-rfc-app-view.active .fw-rfc-d3 { transition-delay: 0.15s; } .fw-rfc-app-view.active .fw-rfc-d4 { transition-delay: 0.2s; }

/* -- Utility Classes -- */
.fw-rfc-row { display: flex; justify-content: space-between; align-items: center; }
.fw-rfc-txt-xs { font-size: 9px; color: var(--g5); transition: color 0.3s;}
.fw-rfc-txt-sm { font-size: 11px; color: var(--g6); }
.fw-rfc-txt-md { font-size: 12.5px; font-weight: 600; color: var(--dk); transition: color 0.3s;}


/* ===============================================================
	MOBILE (≤992px) - Vertical Column + MacBook Inversion
	Uses display:contents + CSS order for layout reflow
	No HTML duplication - single markup, CSS handles all
=============================================================== */
@media (max-width: 992px) {
	/* -- Section & Container -- */
	.fw-rfc-section { height: auto !important; min-height: auto !important; padding: 30px 0; } 
	.fw-rfc-container { grid-template-columns: 1fr; gap: 14px; height: auto !important; min-height: auto !important; display: flex; flex-direction: column; padding: 0 14px; }
	
	/* -- Layout Reflow via display:contents + order -- */
	.fw-rfc-left { height: auto !important; min-height: auto !important; display: contents;}
	.fw-rfc-left > div:first-child { display: contents; }
	.fw-rfc-morpher { display: contents; }
	.fw-rfc-slide { position: static !important; }
	.fw-rfc-slide:not(.active) { display: none !important; }
	.fw-rfc-slide.active { display: contents !important; }
	
	/* -- Order: badge(1) → h2(2) → p(3) → dock(4) → macbook(5) → features(6) -- */
	.fw-rfc-badge { padding: 5px 12px; font-size: 9px; order: 1; align-self: flex-start; margin-bottom: 0; width: fit-content; display: inline-flex; }
	.fw-rfc-badge i { font-size: 11px; }
	.fw-rfc-slide h2 { font-size: 28px; margin-bottom: 0; order: 2; }
	.fw-rfc-slide h2 br { display: none; }
	.fw-rfc-slide p { max-width: 100%; font-size: 13px; margin-bottom: 0; order: 3; }
	.fw-rfc-dock-wrap { padding-top: 0; margin-bottom: 0; order: 4; }
	.fw-rfc-right { width: 100%; display: block; order: 5; }
	
	/* -- Feature Cards (1x3 grid, below MacBook) -- */
	.fw-rfc-feats { order: 6; margin-top: 6px; }
	.fw-rfc-feats { gap: 4px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; align-content: normal; }
	.fw-rfc-feat { flex-direction: column; align-items: flex-start; justify-content:  flex-start; text-align: left; gap: 3px; background: var(--g0); border-radius: 10px; padding: 10px 8px; }
	.fw-rfc-feat i { font-size: 18px; margin-top: 0; width: auto; height: auto; background: none; }
	.fw-rfc-feat div { display: flex; flex-direction: column; align-items: flex-start; }
	.fw-rfc-feat h4 { font-size: 10px; margin-bottom: 1px; }
	.fw-rfc-feat p { font-size: 8.5px; line-height: 1.3; }
	.fw-rfc-feat:hover { transform: none; }
	
	/* -- Hide Desktop-Only Elements -- */
	.fw-rfc-float, .fw-rfc-glow, .fw-rfc-dock-pill { display: none !important; } 
	
	/* -- Dock Tabs (full width, pill shape, smooth transition) -- */
	.fw-rfc-dock { width: 100%; justify-content: space-between; }
	.fw-rfc-dock-btn { flex: 1; justify-content: center; font-size: 11.5px; padding: 10px 4px; border-radius: 100px; background: transparent; transition: background 0.3s, color 0.3s;}
	.fw-rfc-dock-btn.active[data-id="booking"] { background: var(--bl-l); color: var(--bl); }
	.fw-rfc-dock-btn.active[data-id="finance"] { background: var(--mt-l); color: var(--mt-d); }
	.fw-rfc-dock-btn.active[data-id="home"] { background: var(--pk-l); color: var(--pk); }
	
	/* -- MacBook Laptop Inversion -- */
	.fw-rfc-3d-scene { perspective: none; width: 100%; position: relative; height: auto !important; }
	.fw-rfc-device-rig { position: relative; width: 100%; aspect-ratio: 1.55; height: auto !important; transform: none !important; margin: 0; }
	.fw-rfc-chassis { background: linear-gradient(180deg, #E2E4E9 0%, #B9BDC5 100%); border-radius: 8px 8px 0 0; padding: 2% 2% 3% 2%; box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 15px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; }
	.fw-rfc-ph-action, .fw-rfc-ph-volup, .fw-rfc-ph-voldn, .fw-rfc-ph-power, .fw-rfc-island, .fw-rfc-status-bar, .fw-rfc-glare { display: none !important; }
	.fw-rfc-lap-notch { display: flex; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 8px; background: #000; border-radius: 0 0 4px 4px; z-index: 100; justify-content: center; align-items: center; }
	.fw-rfc-lap-notch::after { content: ''; width: 3px; height: 3px; background: #222; border-radius: 50%; }
	.fw-rfc-lap-base { display: flex; position: absolute; bottom: -8px; left: -2%; right: -2%; height: 8px; background: linear-gradient(180deg, #c3c7cf 0%, #9ca1a9 100%); border-radius: 0 0 8px 8px; justify-content: center; box-shadow: inset 0 2px 2px rgba(255,255,255,0.6), inset 0 -1px 3px rgba(0,0,0,0.4), 0 10px 20px rgba(0,0,0,0.3); }
	.fw-rfc-lap-lip { width: 40px; height: 3px; background: #9ca3af; border-radius: 0 0 2px 2px; }
	
	/* -- Screen & Internal App Layout -- */
	.fw-rfc-screen { border-radius: 4px; border: 4px solid #000; background: var(--wh); width: 100%; flex: 1; overflow: hidden; position: relative; }
	.fw-rfc-app-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	.fw-rfc-app-wrap { display: flex; flex-direction: column; height: 100%; width: 100%; }
	.fw-rfc-hdr { padding: 6px 10px; border-radius: 0; height: 32px; }
	.fw-rfc-logo { font-size: 9px; }
	.fw-rfc-logo i { font-size: 11px; }
	.fw-rfc-body { padding: 8px; height: calc(100% - 32px); overflow: hidden; } 
	.fw-rfc-grid { grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
	.fw-rfc-col { gap: 6px; justify-content: space-between; height: 100%;}
	
	/* -- Micro-Typography (fits inside MacBook screen) -- */
	.fw-rfc-select { padding: 6px 8px; border-radius: 6px;}
	.fw-rfc-select small { font-size: 6px; margin-bottom: 2px;}
	.fw-rfc-select-val b { font-size: 9px; }
	.fw-rfc-select-val img { width: 10px; }
	.fw-rfc-select > i { font-size: 8px; right: 8px; }
	.fw-rfc-ios-menu { border-radius: 6px; }
	.fw-rfc-ios-item { padding: 6px 10px; font-size: 8px; }
	.fw-rfc-ios-item img { width: 10px; }
	.fw-rfc-chip-row { gap: 4px; }
	.fw-rfc-chip { flex: 1; font-size: 7.5px; padding: 6px 0; border-radius: 6px; gap: 4px; letter-spacing: -0.2px;}
	.fw-rfc-chip i { font-size: 8.5px; }
	.fw-rfc-card { padding: 8px; border-radius: 8px; }
	.fw-rfc-icon-bare { font-size: 18px; margin:0;}
	.fw-rfc-txt-xs { font-size: 7px; }
	.fw-rfc-txt-sm { font-size: 9px; }
	.fw-rfc-txt-md { font-size: 10px; }
	.fw-rfc-time-grid { gap: 4px; margin: 4px 0; }
	.fw-rfc-time-slot { font-size: 7px; padding: 6px 4px; border-radius: 6px;}
	.fw-rfc-btn { font-size: 9px; padding: 8px; border-radius: 100px; margin-top: auto;}
	
	/* -- Finance Tab: Centered vertical, 1x4 EMI cards -- */
	#fw-rfc-app-finance .fw-rfc-body { display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
	#fw-rfc-app-finance .fw-rfc-grid { grid-template-columns: 1fr; gap: 4px; display: flex; flex-direction: column; height: auto; flex: none;}
	#fw-rfc-app-finance .fw-rfc-col { height: auto; flex: none; }
	.fw-rfc-fin-display { flex-direction: row; justify-content: space-between; align-items: center; padding: 6px 10px; height: auto !important; flex: none;}
	.fw-rfc-fin-top { flex-direction: column; align-items: flex-start; gap: 1px; width: auto;}
	.fw-rfc-fin-display #fw-rfc-finPrice { font-size: 14px; margin-top: 0;}
	.fw-rfc-fin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 3px;}
	.fw-rfc-box { padding: 4px 4px 6px; margin-bottom: 0; border-radius: 6px; gap: 2px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; height: auto;}
	.fw-rfc-box-ic { font-size: 16px; }
	.fw-rfc-box-text b { font-size: 7.5px; margin-bottom: 0;line-height: 0px;}
	.fw-rfc-box-text span { font-size: 6px; }
	.fw-rfc-box-price { font-size: 8px; margin-left: 0; font-weight: 700; color: var(--mt-d);}
	#fw-rfc-finBtn { margin-top: 4px; padding: 6px; font-size: 8px; }
	
	/* -- Home Tab Overrides -- */
	#fw-rfc-app-home .fw-rfc-anim.fw-rfc-d2 { min-height: 40px !important; border-radius: 6px; }
	#fw-rfc-mapRoute { top: 5px; left: 10%; width: 80%; height: 80%; stroke-width: 1.5; }
	#fw-rfc-mapPulse { width: 14px; height: 14px; border-width: 1px; }
	.fw-rfc-map-pulse2 { width: 10px; height: 10px; border-width: 1px; }
	#fw-rfc-mapPin { width: 6px; height: 6px; font-size: 3px; box-shadow: 0 0 0 2px var(--pk-l); }
	#fw-rfc-mapEta { font-size: 5px; padding: 2px 5px; }
	.fw-rfc-map-dest { width: 5px; height: 5px; border-width: 1px; }
	.fw-rfc-map-fade { background: radial-gradient(ellipse at center, transparent 30%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,1) 100%); }
	#fw-rfc-homeDynCard { padding: 6px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
	#fw-rfc-homeDynCard .fw-rfc-row { margin-bottom: 4px; padding-bottom: 4px; }
	#fw-rfc-homeAvatar { font-size: 16px; }
	#fw-rfc-homeName { font-size: 9px; }
	#fw-rfc-homeRole { font-size: 7px; }
	#fw-rfc-homeTask { font-size: 9px; margin-bottom: 0px !important;}
	#fw-rfc-homePrep { font-size: 7px; }
	.bi-telephone-fill { font-size: 7px !important; }
	#fw-rfc-homeDynCard > div:nth-child(2) { margin-bottom: 4px !important; gap: 6px !important; }
	#fw-rfc-homeDynCard > div:nth-child(2) > div:last-child { width: 14px !important; height: 14px !important; }
	#fw-rfc-homeDynCard > div:last-child { padding: 4px !important; border-radius: 4px !important; margin-top: 2px !important; }
	
	/* -- Booking Tab Overrides -- */
	#fw-rfc-clinicDynCard { flex-direction: column; text-align: center; gap: 4px; padding: 6px; flex: 1; justify-content: center;}
	#fw-rfc-clinicName { font-size: 10px; }
	#fw-rfc-clinicCount { font-size: 8px; }
	#fw-rfc-consultCount { font-size: 7px; }
}


/* ===============================================================
	TABLET & SMALL LAPTOP (601-992px)
	Overrides mobile column → horizontal row for MacBook + features
	Scales up micro-typography for larger screens
=============================================================== */
@media (min-width: 601px) and (max-width: 992px) {
	.fw-rfc-container { flex-wrap: wrap; flex-direction: row; gap: 16px; padding: 0 24px; }
	
	/* -- Top row: full width items -- */
	.fw-rfc-badge { width: fit-content !important; flex-basis: auto; align-self: flex-start; display: inline-flex; }
	.fw-rfc-slide h2 { flex-basis: 100%; font-size: 34px; }
	.fw-rfc-slide p { flex-basis: 100%; font-size: 14px; }
	.fw-rfc-dock-wrap { flex-basis: 100%; order: 4; }
	.fw-rfc-dock { width: 100% !important; }
	
	/* -- Bottom row: MacBook (left) + Features (right) -- */
	.fw-rfc-right { flex: 0 0 58%; max-width: 58%; order: 5; }
	.fw-rfc-feats { flex: 0 0 calc(42% - 16px); max-width: calc(42% - 16px); order: 6; margin-top: 0;
	grid-template-columns: 1fr; gap: 8px; align-self: stretch; align-content: normal; display: flex; flex-direction: column; }
	.fw-rfc-feat { flex-direction: row; text-align: left; align-items: center; padding: 10px 12px; flex: 1; 
	background: var(--g0); border-radius: 10px; gap: 10px; overflow: hidden; }
	.fw-rfc-feat i { font-size: 20px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; 
	background: var(--wh); border-radius: 8px; box-shadow: var(--ios-shadow); flex-shrink: 0; }
	.fw-rfc-feat div { align-items: flex-start; flex: 1; min-width: 0; }
	.fw-rfc-feat h4 { font-size: 12px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fw-rfc-feat p { font-size: 10px; line-height: 1.3; color: var(--g5); }
	
	/* -- Scale up MacBook UI for tablet -- */
	.fw-rfc-device-rig { aspect-ratio: 1.6; }
	.fw-rfc-hdr { height: 36px; padding: 8px 14px; }
	.fw-rfc-logo { font-size: 11px; }
	.fw-rfc-logo i { font-size: 13px; }
	.fw-rfc-body { padding: 10px 12px; }
	.fw-rfc-grid { gap: 10px; }
	.fw-rfc-col { gap: 8px; }
	.fw-rfc-select { padding: 8px 10px; }
	.fw-rfc-select small { font-size: 8px; }
	.fw-rfc-select-val b { font-size: 12px; }
	.fw-rfc-select-val img { width: 14px; }
	.fw-rfc-select > i { font-size: 11px; }
	.fw-rfc-ios-item { padding: 8px 12px; font-size: 10px; }
	.fw-rfc-ios-item img { width: 14px; }
	.fw-rfc-chip { font-size: 9px; padding: 8px 4px; }
	.fw-rfc-chip i { font-size: 10px; }
	.fw-rfc-card { padding: 10px; }
	.fw-rfc-icon-bare { font-size: 22px; }
	.fw-rfc-txt-xs { font-size: 9px; }
	.fw-rfc-txt-sm { font-size: 11px; }
	.fw-rfc-txt-md { font-size: 13px; }
	.fw-rfc-time-grid { gap: 6px; margin: 6px 0; }
	.fw-rfc-time-slot { font-size: 9px; padding: 8px 6px; }
	.fw-rfc-btn { font-size: 11px; padding: 10px; }
	.fw-rfc-fin-display { padding: 10px 14px; }
	.fw-rfc-fin-display #fw-rfc-finPrice { font-size: 18px; }
	.fw-rfc-fin-grid { gap: 5px; }
	.fw-rfc-box { padding: 6px; }
	.fw-rfc-box-ic { font-size: 14px; }
	.fw-rfc-box-text b { font-size: 8px; }
	.fw-rfc-box-text span { font-size: 6.5px; }
	.fw-rfc-box-price { font-size: 8px; }
	#fw-rfc-finBtn { padding: 8px; font-size: 10px; }
	#fw-rfc-app-home .fw-rfc-anim.fw-rfc-d2 { min-height: 60px !important; }
	#fw-rfc-mapPulse { width: 18px; height: 18px; }
	.fw-rfc-map-pulse2 { width: 14px; height: 14px; }
	#fw-rfc-mapPin { width: 8px; height: 8px; font-size: 5px; }
	#fw-rfc-mapEta { font-size: 6px; padding: 3px 6px; }
	.fw-rfc-map-dest { width: 6px; height: 6px; }
	#fw-rfc-homeDynCard { padding: 8px; }
	#fw-rfc-homeAvatar { font-size: 20px; }
	#fw-rfc-homeName { font-size: 11px; }
	#fw-rfc-homeRole { font-size: 9px; }
	#fw-rfc-homeTask { font-size: 11px; }
	#fw-rfc-homePrep { font-size: 9px; }
	#fw-rfc-clinicName { font-size: 13px; }
	#fw-rfc-clinicCount { font-size: 10px; }
	#fw-rfc-consultCount { font-size: 9px; }
}



/* -- Dynamic Price Color via data-color -- */
#fw-rfc-clinicPrice[data-color="bl"] { color: var(--bl); }
#fw-rfc-clinicPrice[data-color="mt"] { color: var(--mt-d); }
#fw-rfc-clinicPrice[data-color="go"] { color: var(--go); }
/* -- Dynamic Tab Colors via data-tab attribute -- */
.fw-rfc-mob-title[data-tab="booking"] { color: var(--bl); }
.fw-rfc-mob-title[data-tab="finance"] { color: var(--mt-d); }
.fw-rfc-mob-title[data-tab="home"] { color: var(--pk); }
/* -- Inline Style Replacements (fw-rfc- scoped) -- */
.fw-rfc-icon-bl { color: var(--bl); }
.fw-rfc-icon-mt { color: var(--mt-d); }
.fw-rfc-icon-pk { color: var(--pk); }
.fw-rfc-text-g6 { color: var(--g6); }
.fw-rfc-text-g4 { color: var(--g4); }
.fw-rfc-avatar-sm { width: 22px; height: 22px; background: var(--g1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fw-rfc-avatar-sm i { color: var(--g5); font-size: 12px; }
.fw-rfc-phone-circle { width: 24px; height: 24px; background: var(--wh); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--ios-shadow); }
.fw-rfc-phone-circle i { color: var(--pk); font-size: 10px; }
.fw-rfc-chip-wrap { background: var(--wh); padding: 3px; border-radius: 10px; box-shadow: var(--ios-shadow); }
.fw-rfc-divider { height: 1px; background: var(--g1); margin: 6px 0; }
.fw-rfc-col-between { justify-content: space-between; }
.fw-rfc-col-full { display: flex; flex-direction: column; height: 100%; }
.fw-rfc-flex-1 { flex: 1;line-height: 10px; }
.fw-rfc-card-booking { flex: 1; align-items: center; justify-content: center; text-align: center; background: var(--bl-l); }
.fw-rfc-card-booking .fw-rfc-icon-bare { color: var(--bl); margin-bottom: 6px; }
.fw-rfc-clinic-name { display: block; margin-bottom: 2px; color: var(--bl); }
.fw-rfc-clinic-count { display: block; color: var(--bl); margin-bottom: 1px; font-weight: 500; }
.fw-rfc-clinic-consult { display: block; color: var(--bl); opacity: 0.8; font-weight: 500; }
.fw-rfc-card-slots { flex: 1; display: flex; flex-direction: column; }
.fw-rfc-slots-label { font-weight: 700; color: var(--g5); }
.fw-rfc-rating { color: var(--go); font-weight: 700; }
.fw-rfc-time-center { margin-top: auto; margin-bottom: auto; }
.fw-rfc-btn-booking { background: var(--bl); }
.fw-rfc-btn-finance { background: var(--mt-d); }
.fw-rfc-btn-home { background: var(--pk); }
.fw-rfc-safe-badge { font-size: 8px; background: var(--g1); color: var(--g6); padding: 3px 8px; border-radius: 100px; font-weight: 700; }
.fw-rfc-live-badge { font-size: 8px; background: var(--pk-l); color: var(--pk); padding: 3px 8px; border-radius: 100px; font-weight: 700; }
.fw-rfc-fin-card { background: var(--dk); color: var(--wh); border: none; }
.fw-rfc-fin-price { font-weight: 300; line-height: 1; }
.fw-rfc-fin-tag { background: rgba(255,255,255,0.1); padding: 3px 6px; border-radius: 100px; font-size: 8px; font-weight: 600; }
.fw-rfc-plan-label { font-weight: 700; margin-bottom: 6px; color: var(--g5); }
.fw-rfc-emi-mo { font-size: 8px; font-weight: 400; color: var(--g5); }
/* -- Map: Premium Live Tracking -- */
.fw-rfc-map-box { flex: 1; min-height: 100px; background: var(--wh); border-radius: 12px; position: relative; overflow: hidden; box-shadow: var(--ios-shadow); }
.fw-rfc-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(233,52,138,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(233,52,138,0.04) 1px, transparent 1px); background-size: 20px 20px; }
.fw-rfc-map-fade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(255,255,255,0.7) 85%, rgba(255,255,255,1) 100%); pointer-events: none; z-index: 3; }
.fw-rfc-map-svg { position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; z-index: 2; }
@keyframes fw-rfc-routeCrawl { to { stroke-dashoffset: -16; } }
.fw-rfc-map-route-shadow { filter: drop-shadow(0 1px 3px rgba(233,52,138,0.25)); }
.fw-rfc-map-route-glow { stroke: var(--pk); stroke-width: 4; stroke-dasharray: 3 3; opacity: 0.1; filter: blur(2px); }
.fw-rfc-map-route-main { stroke: var(--pk); stroke-width: 1.5; stroke-dasharray: 5 3; animation: fw-rfc-routeCrawl 1.5s linear infinite; }
@keyframes fw-rfc-pulseRing1 { 0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.6; } 100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; } }
@keyframes fw-rfc-pulseRing2 { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 0.4; } 100% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } }
.fw-rfc-map-pulse { position: absolute; top: 25%; left: 15%; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--pk); transform: translate(-50%, -50%); animation: fw-rfc-pulseRing1 2.5s ease-out infinite; z-index: 3; }
.fw-rfc-map-pulse2 { position: absolute; top: 25%; left: 15%; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--pk); transform: translate(-50%, -50%); animation: fw-rfc-pulseRing2 2.5s ease-out 0.5s infinite; z-index: 3; }
.fw-rfc-map-pin { position: absolute; top: 25%; left: 15%; width: 12px; height: 12px; background: var(--pk); color: var(--wh); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 6px; box-shadow: 0 0 0 3px var(--pk-l), 0 1px 6px rgba(233,52,138,0.25); transition: 0.5s; z-index: 4; }
.fw-rfc-map-dest { position: absolute; top: 70%; left: 88%; width: 8px; height: 8px; background: var(--wh); border: 1.5px solid var(--pk); border-radius: 50%; transform: translate(-50%,-50%); z-index: 4; box-shadow: 0 0 0 2px var(--pk-l); }
.fw-rfc-map-dest::after { content: ''; position: absolute; inset: 1.5px; background: var(--pk); border-radius: 50%; opacity: 0.35; }
.fw-rfc-map-eta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(15,23,42,0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--wh); padding: 5px 10px; border-radius: 100px; font-size: 8px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 5; letter-spacing: 0.5px; }
.fw-rfc-home-header { margin-bottom: 8px; border-bottom: 1px solid var(--g1); padding-bottom: 6px; }
.fw-rfc-home-counter { font-weight: 700; color: var(--pk); }
.fw-rfc-home-staff { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; margin-top: auto; }
.fw-rfc-home-task-box { background: var(--pk-bg); padding: 8px; border-radius: 8px; margin-top: auto; }
.fw-rfc-home-task { display: block; color: var(--pk); margin-bottom: 2px; }
.fw-rfc-float-bl { color: var(--bl); }
.fw-rfc-float-mt { color: var(--mt-d); }
.fw-rfc-float-pk { color: var(--pk); }
#fw-rfc-homeAvatar { color: var(--pk); }

/* +===================================================================+
	|  CSS END - fw-hp-rfc (IVF Section)                     |
+===================================================================+ */


/* ══════════════════════════════════════════════════════════════
	SECTION LAYOUT — Main container, left/right columns -HUB
══════════════════════════════════════════════════════════════ */

.fw-hp-section {
	width: 100vw;
	height: 550px; 
	display: flex;
	align-items: center;
	gap: 40px;
	position: relative;
	overflow: hidden; 
}

.fw-hp-left-col {
	position: relative;
	width: 500px;
	height: 100%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.fw-hp-silhouette {
	position: absolute;
	top: 50%;
	left: -185px;
	transform: translateY(-50%);
	height: 80%;
	width: auto;
	z-index: 2; 
	color: var(--theme-base);
	transition: color 0.5s cubic-bezier(0.25, 1, 0.2, 1);
	pointer-events: none;
	opacity: 0.95;
	filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.15));
}

.fw-hp-arcs-wrapper {
	position: absolute;
	top: 50%;
	left: 0; 
	width: 550px;
	height: 550px;
	transform: translate(-50%, -50%); 
	z-index: 1; 
	pointer-events: none;
}

.fw-hp-arc-layer {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 20px solid var(--layer-color);
	box-sizing: border-box;
	transition: border-color 0.5s ease;
}

.fw-hp-arc-1 { width: 550px; height: 550px; --layer-color: var(--arc-1); }
.fw-hp-arc-2 { width: 510px; height: 510px; --layer-color: var(--arc-2); }
.fw-hp-arc-3 { width: 470px; height: 470px; --layer-color: var(--arc-3); }
.fw-hp-arc-4 { width: 430px; height: 430px; --layer-color: var(--arc-4); }
.fw-hp-arc-5 { width: 390px; height: 390px; --layer-color: var(--arc-5); }

.fw-hp-arc-center {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 350px; height: 350px;
	background-color: var(--wh);
	border-radius: 50%;
	box-shadow: inset -5px 0 20px rgba(0,0,0,0.03);
	z-index: 8;
}

.fw-hp-tabs-container {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-left: 225px; 
	width: 100%;
}

.fw-hp-tab {
	display: flex; align-items: center; gap: 15px;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	opacity: 0.6;
}

.fw-hp-tab-pos-1 { transform: translateX(0); }
.fw-hp-tab-pos-2 { transform: translateX(30px); }
.fw-hp-tab-pos-3 { transform: translateX(45px); }
.fw-hp-tab-pos-4 { transform: translateX(45px); }
.fw-hp-tab-pos-5 { transform: translateX(30px); }
.fw-hp-tab-pos-6 { transform: translateX(0); }

.fw-hp-tab-icon {
	width: 42px; height: 42px;
	background: var(--wh);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem; color: var(--g4);
	box-shadow: 0 4px 10px rgba(15,23,42,0.05);
	transition: all 0.3s;
	flex-shrink: 0;
	z-index: 2;
}

.fw-hp-tab-text {
	background: var(--wh);
	padding: 8px 18px;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(15,23,42,0.03);
	border: 1px solid var(--g2);
	width: 190px;
	transition: all 0.3s;
}

.fw-hp-tab-text h3 { font-size: 0.9rem; color: var(--g6); font-weight: 600; margin: 0;}

.fw-hp-tab:hover, .fw-hp-tab.active { opacity: 1; }
.fw-hp-tab.active .fw-hp-tab-icon { background: var(--theme-base); color: var(--wh); }
.fw-hp-tab.active .fw-hp-tab-text { border-color: var(--theme-base); box-shadow: var(--sh); }
.fw-hp-tab.active .fw-hp-tab-text h3 { color: var(--theme-base); }

/* ═══════════════════════════════════════════
	RIGHT COLUMN v10 — Unique per panel
═══════════════════════════════════════════ */

.fw-hp-right-col {
	flex: 1; height: 100%;
	padding: 18px 32px 18px 0;
	overflow: hidden;
	display: flex; align-items: center;
	position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
	PANELS — Tab content containers + Typography
══════════════════════════════════════════════════════════════ */
.fw-hp-panel { display: none; width: 100%; }
.fw-hp-panel.active {
	display: flex; flex-direction: column;
	animation: fwPIn 0.45s cubic-bezier(0.25,1,0.2,1) forwards;
}
@keyframes fwPIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ── Heading ── */
.fw-hp-rt {
	font-family: var(--ff); font-size: 1.85rem; font-weight: 700;
	color: var(--dk); line-height: 1.15; margin-bottom: 5px;
}
.fw-hp-rt span { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-sub {
font-family: var(--ff); font-size: 0.7rem; color: var(--theme-base); transition: color 0.5s;
font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
margin-bottom: 2px; transition: color 0.5s;
}
.fw-hp-rd {
font-family: var(--ff); font-size: 0.95rem; color: var(--g5);
line-height: 1.55; font-weight: 300; margin-bottom: 10px;
}

/* ═══ GLASS ZONE ═══ */
.fw-hp-gz {
background: rgba(255,255,255,0.4);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
padding: 18px 20px;
margin-bottom: 12px;
}

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
TAB 1: LIFECYCLE — Service tiles + Counter row — 2×2 icon tiles + counter row
Like image 1 icon strip + image 2 bento
═════════════════════════════════════ */
.fw-hp-tiles {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
}
.fw-hp-tile {
display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 6px;
padding: 8px 4px; transition: transform 0.3s;
}
.fw-hp-tile:hover { transform: translateX(4px); }
.fw-hp-tile-img {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; overflow: hidden;
}
.fw-hp-tile-img img { width: 24px; height: 24px; object-fit: contain; }
.fw-hp-tile-name {
font-family: var(--ff); font-size: 0.78rem; font-weight: 600;
color: var(--dk); line-height: 1.15;
}
.fw-hp-tile-sub {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g5); line-height: 1.25; margin-top: 1px;
}

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
SHARED: COUNTER ROW — Icon left, text right, ring palette hover — split: icon left (large centered), text right
Colors: ring palette always (icon=dark, number=base, text=lighter)
Hover: lift + intensify
═════════════════════════════════════ */
.fw-hp-ctrs {
display: flex; gap: 6px; margin-bottom: 10px;
}
.fw-hp-ctr {
flex: 1;
display: flex; align-items: stretch; gap: 0;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 14px;
box-shadow: 0 4px 18px rgba(15,23,42,0.03), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.4s cubic-bezier(0.25,1,0.2,1);
overflow: hidden;
}
.fw-hp-ctr:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
border-color: var(--theme-base);
}

/* Icon zone: full left column, centered */
.fw-hp-ctr-ico {
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
color: var(--theme-dark);
background: var(--theme-light);
transition: all 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-ico {
color: var(--wh);
background: var(--theme-base);
}

/* Text zone: right side */
.fw-hp-ctr-body {
flex: 1; min-width: 0;
padding: 8px 10px 7px 10px;
}

/* Number: theme base color always */
.fw-hp-ctr-val {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-dark); line-height: 1;
transition: color 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-val { color: var(--theme-base); }

/* Title: slightly lighter */
.fw-hp-ctr-lbl {
font-family: var(--ff); font-size: 0.7rem;
color: var(--theme-base);
font-weight: 600; margin-top: 2px;
transition: color 0.4s; opacity: 0.8;
}
.fw-hp-ctr:hover .fw-hp-ctr-lbl { opacity: 1; }

/* Paragraph: muted theme shade */
.fw-hp-ctr-desc {
font-family: var(--ff); font-size: 0.55rem;
color: var(--g5);
font-weight: 300; line-height: 1.35; margin-top: 4px;
transition: color 0.4s;
}
.fw-hp-ctr:hover .fw-hp-ctr-desc { color: var(--theme-dark); opacity: 0.7; }

/* ═════════════════════════════════════
══════════════════════════════════════════════════════════════
TAB 2: SEAMLESS — Split layout (list left, vertical bars right) — icon list left + vertical bars right
Split layout like image 3 (left list, right data)
═════════════════════════════════════ */
.fw-hp-split {
display: flex; gap: 16px; align-items: stretch;
}
.fw-hp-split-left { flex: 1.1; display: flex; flex-direction: column; gap: 0; }
.fw-hp-split-right {
flex: 0.9; display: flex; flex-direction: column; gap: 8px;
}
.fw-hp-sl-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--g1);
}
.fw-hp-sl-item:last-child { border-bottom: none; }
.fw-hp-sl-icon {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.fw-hp-sl-icon img { width: 24px; height: 24px; object-fit: contain; opacity: 0.6; }
.fw-hp-sl-name {
font-family: var(--ff); font-size: 1rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-sl-sub {
font-family: var(--ff); font-size: 0.76rem; font-weight: 300;
color: var(--g5); margin-top: 2px;
}

/* Vertical bars as glass tubes */
.fw-hp-vbars {
display: flex; gap: 10px; align-items: flex-end;
flex: 1; min-height: 100px;
padding: 10px 8px 8px;
}
.fw-hp-vb {
flex: 1; display: flex; flex-direction: column;
align-items: center; height: 100%;
}
.fw-hp-vb-val {
font-family: var(--ff); font-size: 0.78rem; font-weight: 700;
color: var(--dk); margin-bottom: 4px;
}
.fw-hp-vb-tube {
width: 24px; flex: 1; border-radius: 12px;
background: var(--theme-light);
position: relative; overflow: hidden;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
transition: background 0.5s;
}
.fw-hp-vb-fill {
position: absolute; bottom: 0; left: 0; right: 0;
border-radius: 12px;
background: var(--theme-base);
transition: height 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
height: 0;
}
.fw-hp-vb-lbl {
font-family: var(--ff); font-size: 0.6rem; color: var(--g4);
text-transform: uppercase; letter-spacing: 0.2px;
font-weight: 500; margin-top: 5px; text-align: center; line-height: 1.15;
}

/* ═════════════════════════════════════
PANEL 3: CLINICAL — horizontal bars + circle ring
Image 3 curability bars + image 2 pie charts
═════════════════════════════════════ */
.fw-hp-hbars { display: flex; flex-direction: column; gap: 12px; }
.fw-hp-hb {
display: flex; align-items: center; gap: 12px;
}
.fw-hp-hb-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fw-hp-hb-icon img { width: 22px; height: 22px; object-fit: contain; opacity: 0.55; }
.fw-hp-hb-info { flex: 1; }
.fw-hp-hb-row {
display: flex; justify-content: space-between; margin-bottom: 5px;
}
.fw-hp-hb-name {
font-family: var(--ff); font-size: 0.98rem; font-weight: 600; color: var(--dk);
}
.fw-hp-hb-pct {
font-family: var(--ff); font-size: 0.98rem; font-weight: 700;
}
.fw-hp-hb-track {
width: 100%; height: 10px; background: var(--g1); border-radius: 10px;
overflow: hidden;
}
.fw-hp-hb-fill {
height: 100%; border-radius: 10px;
transition: width 1.2s cubic-bezier(0.25,1,0.2,1); width: 0;
}
.fw-hp-hb-fill { background: var(--theme-base); transition: background 0.5s; }
.fw-hp-hb-pct { color: var(--theme-base); transition: color 0.5s; }

.fw-hp-cring {
display: flex; justify-content: space-around; align-items: flex-start;
padding: 14px 10px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(15,23,42,0.03);
margin-bottom: 10px;
}
.fw-hp-cr { text-align: center; }
.fw-hp-cr .rounded-skill { margin: 0 auto 5px; }
.fw-hp-cr-lbl {
font-family: var(--ff); font-size: 0.7rem; color: var(--g4);
font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ═════════════════════════════════════
PANEL 4: INNOVATION — timeline + counters
Clean minimal timeline (image 3 numbered steps)
═════════════════════════════════════ */
.fw-hp-tl {
position: relative; padding-left: 28px; margin-bottom: 14px;
}
.fw-hp-tl::before {
content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px;
width: 2px; background: var(--g2);
}
.fw-hp-tl-step {
position: relative; padding: 8px 0;
}
.fw-hp-tl-dot {
position: absolute; left: -28px; top: 10px;
width: 18px; height: 18px; border-radius: 50%;
border: 3px solid var(--g3); background: var(--wh);
z-index: 2;
}
.fw-hp-tl-step:nth-child(1) .fw-hp-tl-dot { border-color: var(--theme-base); background: var(--theme-base); }
.fw-hp-tl-step:nth-child(2) .fw-hp-tl-dot { border-color: var(--theme-base); background: var(--theme-base); }
.fw-hp-tl-step:nth-child(3) .fw-hp-tl-dot { border-color: var(--g3); }

.fw-hp-tl-top {
display: flex; justify-content: space-between; align-items: baseline;
}
.fw-hp-tl-name {
font-family: var(--ff); font-size: 1.05rem; font-weight: 600; color: var(--dk);
}
.fw-hp-tl-pct {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700; color: var(--g6);
}
.fw-hp-tl-txt {
font-family: var(--ff); font-size: 0.8rem; font-weight: 300;
color: var(--g5); line-height: 1.45; margin-top: 3px;
}
.fw-hp-tl-track {
width: 100%; height: 4px; background: var(--g2); border-radius: 4px;
margin-top: 6px; overflow: hidden;
}
.fw-hp-tl-fill {
height: 100%; border-radius: 4px;
transition: width 1.2s cubic-bezier(0.25,1,0.2,1); width: 0;
}
.fw-hp-tl-step:nth-child(1) .fw-hp-tl-fill { background: var(--theme-base); }
.fw-hp-tl-step:nth-child(2) .fw-hp-tl-fill { background: var(--theme-base); }
.fw-hp-tl-step:nth-child(3) .fw-hp-tl-fill { background: var(--g4); }

/* ═════════════════════════════════════
PANEL 5: PARTNERS — numbered list + stat table
Image 3 numbered cards style
═════════════════════════════════════ */
.fw-hp-nums { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.fw-hp-num-row {
display: flex; align-items: center; gap: 14px;
padding: 11px 0; border-bottom: 1px solid var(--g1);
transition: padding-left 0.3s;
}
.fw-hp-num-row:last-child { border-bottom: none; }
.fw-hp-num-row:hover { padding-left: 4px; }
.fw-hp-num-n {
width: 36px; height: 36px; border-radius: 50%;
background: var(--g0); border: 2px solid var(--g2);
display: flex; align-items: center; justify-content: center;
font-family: var(--ff); font-size: 0.85rem; font-weight: 700;
color: var(--g5); flex-shrink: 0;
transition: all 0.3s;
}
.fw-hp-num-n { border-color: var(--theme-base); transition: all 0.3s; }
.fw-hp-num-row:hover .fw-hp-num-n {
background: var(--theme-base); color: var(--wh);
}
.fw-hp-num-title {
font-family: var(--ff); font-size: 1.05rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-num-desc {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); margin-top: 3px; line-height: 1.45;
}

/* Stat table (image 1 stat rows style) */
.fw-hp-stbl {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--g2); border-radius: 12px; overflow: hidden;
margin-bottom: 10px;
}
.fw-hp-stbl-row {
display: flex; align-items: center; padding: 10px 16px;
border-bottom: 1px solid var(--g1);
}
.fw-hp-stbl-row:last-child { border-bottom: none; }
.fw-hp-stbl-row:nth-child(odd) { background: var(--g0); }
.fw-hp-stbl-lbl {
font-family: var(--ff); font-size: 0.88rem; font-weight: 500;
color: var(--g5); flex: 1;
}
.fw-hp-stbl-val {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-base); transition: color 0.5s;
}

/* ═════════════════════════════════════
PANEL 6: GLOBAL — feature list + circles + tags
Image 4 bullet points style
═════════════════════════════════════ */
.fw-hp-dots { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; }
.fw-hp-dot-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--g1);
}
.fw-hp-dot-row:last-child { border-bottom: none; }
.fw-hp-dot-mark {
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 2px; font-size: 1rem;
}
.fw-hp-dot-mark { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-dot-title {
font-family: var(--ff); font-size: 1.02rem; font-weight: 600;
color: var(--dk); line-height: 1.2;
}
.fw-hp-dot-desc {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); margin-top: 3px; line-height: 1.45;
}

/* ═══ CLINICAL: Hero circle left + bars right + counter chips ═══ */
.fw-hp-cl-split {
display: flex; gap: 18px; align-items: center; margin-bottom: 14px;
}
.fw-hp-cl-hero {
width: 160px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.fw-hp-cl-hero .rounded-skill { margin: 0 auto 8px; }
.fw-hp-cl-hero-label {
font-family: var(--ff); font-size: 0.7rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.5px; transition: color 0.5s;
}
.fw-hp-cl-hero-sub {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}

.fw-hp-cl-bars { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.fw-hp-cl-bar {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px;
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-cl-bar:hover { background: rgba(255,255,255,0.25); }
.fw-hp-cl-bar:hover .fw-hp-cl-bar-name { color: var(--theme-base); }
.fw-hp-cl-bar-ico {
font-size: 1.15rem; color: var(--theme-base);
flex-shrink: 0; width: 28px; text-align: center;
transition: color 0.5s;
}
.fw-hp-cl-bar-body { flex: 1; }
.fw-hp-cl-bar-top {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 4px;
}
.fw-hp-cl-bar-name {
font-family: var(--ff); font-size: 0.9rem; font-weight: 600; color: var(--dk);
transition: color 0.3s;
}
.fw-hp-cl-bar-pct {
font-family: var(--ff); font-size: 0.9rem; font-weight: 700;
color: var(--theme-base); transition: color 0.5s;
}
.fw-hp-cl-bar-desc {
font-family: var(--ff); font-size: 0.68rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-bottom: 6px;
}
.fw-hp-cl-bar-track {
width: 100%; height: 6px; background: var(--g2); border-radius: 6px;
overflow: hidden;
}
.fw-hp-cl-bar-fill {
height: 100%; border-radius: 6px;
background: var(--theme-base);
transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}

.fw-hp-cl-chips {
display: flex; gap: 8px; margin-bottom: 8px;
}
.fw-hp-cl-chip {
flex: 1; display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(15,23,42,0.02);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-cl-chip:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(15,23,42,0.05);
border-color: var(--theme-base);
}
.fw-hp-cl-chip-ico {
font-size: 1.1rem; color: var(--theme-dark);
flex-shrink: 0; transition: color 0.5s;
}
.fw-hp-cl-chip:hover .fw-hp-cl-chip-ico { color: var(--theme-base); }
.fw-hp-cl-chip-val {
font-family: var(--ff); font-size: 1.15rem; font-weight: 700;
color: var(--theme-dark); line-height: 1; transition: color 0.5s;
}
.fw-hp-cl-chip:hover .fw-hp-cl-chip-val { color: var(--theme-base); }
.fw-hp-cl-chip-lbl {
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g4); text-transform: uppercase; letter-spacing: 0.3px;
}

.fw-hp-cl-quote {
font-family: var(--ff); font-size: 0.72rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 4px; border-top: 1px solid var(--g1);
}
.fw-hp-cl-quote span {
color: var(--theme-base); font-weight: 600;
transition: color 0.5s;
}

/* ═══ INNOVATION: Premium roadmap ═══ */

/* Overall progress strip */
.fw-hp-prog-strip {
display: flex; align-items: center; gap: 0;
margin-bottom: 10px; height: 6px;
background: var(--g2); border-radius: 8px;
overflow: hidden; position: relative;
}
.fw-hp-prog-seg {
height: 100%; transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}
.fw-hp-prog-seg:first-child { border-radius: 8px 0 0 8px; }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(1) { background: var(--theme-dark); }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(2) { background: var(--theme-base); opacity: 0.7; }
.fw-hp-prog-strip .fw-hp-prog-seg:nth-child(3) { background: var(--theme-base); opacity: 0.3; }
.fw-hp-prog-labels {
display: flex; justify-content: space-between; margin-top: -4px; margin-bottom: 14px;
}
.fw-hp-prog-lbl {
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g4); text-transform: uppercase; letter-spacing: 0.3px;
}

/* Connected phase cards with roadmap dots */
.fw-hp-roadmap {
display: flex; gap: 0; align-items: stretch; margin-bottom: 8px;
position: relative;
}
.fw-hp-rm-card {
flex: 1; padding: 10px 10px; position: relative;
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-rm-card:hover { background: rgba(255,255,255,0.2); }

/* Connector dots between cards */
.fw-hp-rm-connector {
width: 20px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.fw-hp-rm-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--g3);
position: relative;
}
.fw-hp-rm-dot::before, .fw-hp-rm-dot::after {
content: ''; position: absolute; top: 50%;
height: 2px; background: var(--g2); width: 6px;
}
.fw-hp-rm-dot::before { right: 100%; transform: translateY(-50%); }
.fw-hp-rm-dot::after { left: 100%; transform: translateY(-50%); }

/* Status badge */
.fw-hp-rm-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 20px;
font-family: var(--ff); font-size: 0.55rem; font-weight: 600;
letter-spacing: 0.4px; text-transform: uppercase;
margin-bottom: 4px;
}
.fw-hp-rm-card:nth-child(1) .fw-hp-rm-badge {
background: var(--theme-light); color: var(--theme-dark);
transition: background 0.5s, color 0.5s;
}
.fw-hp-rm-card:nth-child(3) .fw-hp-rm-badge {
background: var(--theme-light); color: var(--theme-dark);
transition: background 0.5s, color 0.5s;
}
.fw-hp-rm-card:nth-child(5) .fw-hp-rm-badge {
background: var(--g1); color: var(--g5);
}

.fw-hp-rm-name {
font-family: var(--ff); font-size: 0.85rem; font-weight: 700;
color: var(--dk); margin-bottom: 2px;
}
.fw-hp-rm-pct {
font-family: var(--ff); font-size: 1.25rem; font-weight: 700;
color: var(--theme-base); line-height: 1; margin-bottom: 4px;
transition: color 0.5s;
}
.fw-hp-rm-txt {
font-family: var(--ff); font-size: 0.65rem; font-weight: 300;
color: var(--g5); line-height: 1.35;
}
.fw-hp-rm-bar {
width: 100%; height: 4px; background: var(--g2); border-radius: 4px;
margin-top: 5px; overflow: hidden;
}
.fw-hp-rm-fill {
height: 100%; border-radius: 4px;
background: var(--theme-base);
transition: width 1.2s cubic-bezier(0.25,1,0.2,1), background 0.5s;
width: 0;
}

/* Feature tags for roadmap */
.fw-hp-rm-tags {
display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px;
}
.fw-hp-rm-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 20px;
font-family: var(--ff); font-size: 0.58rem; font-weight: 500;
color: var(--g5); background: var(--g0);
border: 1px solid var(--g2);
transition: all 0.3s;
}
.fw-hp-rm-tag:hover {
color: var(--theme-base); border-color: var(--theme-base);
}
.fw-hp-rm-tag i { font-size: 0.55rem; }

/* ═══ PARTNER STAT COLUMNS ═══ */
.fw-hp-pcols {
display: flex; gap: 8px; margin-bottom: 10px;
}
.fw-hp-pcol {
flex: 1; text-align: center;
padding: 16px 8px;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 14px;
box-shadow: 0 3px 14px rgba(15,23,42,0.03);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-pcol:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.fw-hp-pcol-icon {
width: 36px; height: 36px; margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem;
}
.fw-hp-pcol-icon { color: var(--theme-base); transition: color 0.5s; }
.fw-hp-pcol-val {
font-family: var(--ff); font-size: 1.5rem; font-weight: 700;
color: var(--theme-base); line-height: 1; margin-bottom: 4px;
transition: color 0.5s;
}
.fw-hp-pcol-lbl {
font-family: var(--ff); font-size: 0.6rem; color: var(--g4);
text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500;
}

/* ═══ PARTNER: Premium partner section ═══ */

/* Partner type badges row */
.fw-hp-pt-types {
display: flex; gap: 6px; margin-bottom: 10px;
}
.fw-hp-pt-type {
flex: 1; display: flex; flex-direction: column; align-items: center;
gap: 4px; padding: 8px 6px;
background: rgba(255,255,255,0.35);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.6);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(15,23,42,0.02);
transition: all 0.35s cubic-bezier(0.25,1,0.2,1);
text-align: center;
}
.fw-hp-pt-type:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.05);
border-color: var(--theme-base);
}
.fw-hp-pt-type-ico {
font-size: 1.1rem; color: var(--theme-dark);
transition: color 0.4s;
}
.fw-hp-pt-type:hover .fw-hp-pt-type-ico { color: var(--theme-base); }
.fw-hp-pt-type-name {
font-family: var(--ff); font-size: 0.78rem; font-weight: 600;
color: var(--dk);
}
.fw-hp-pt-type:hover .fw-hp-pt-type-name { color: var(--theme-base); }
.fw-hp-pt-type-sub {
font-family: var(--ff); font-size: 0.52rem; font-weight: 300;
color: var(--g4); line-height: 1.25;
}

/* Partner split: benefits left, hero circle right */
.fw-hp-pt-split {
display: flex; gap: 14px; align-items: center; margin-bottom: 10px;
}
.fw-hp-pt-benefits { flex: 1.2; display: flex; flex-direction: column; gap: 0; }
.fw-hp-pt-ben {
display: flex; align-items: flex-start; gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--g1);
border-left: 3px solid var(--theme-base);
padding-left: 12px;
transition: all 0.3s;
}
.fw-hp-pt-ben:last-child { border-bottom: none; }
.fw-hp-pt-ben:hover { background: rgba(255,255,255,0.25); }
.fw-hp-pt-ben:hover .fw-hp-pt-ben-title { color: var(--theme-base); }
.fw-hp-pt-ben-num {
font-family: var(--ff); font-size: 0.72rem; font-weight: 700;
color: var(--theme-base); flex-shrink: 0;
min-width: 22px; transition: color 0.5s;
}
.fw-hp-pt-ben-title {
font-family: var(--ff); font-size: 0.82rem; font-weight: 600;
color: var(--dk); line-height: 1.2; transition: color 0.3s;
}
.fw-hp-pt-ben-desc {
font-family: var(--ff); font-size: 0.62rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-top: 1px;
}

/* Hero stat for partner */
.fw-hp-pt-hero {
width: 130px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.fw-hp-pt-hero .rounded-skill { margin: 0 auto 8px; }
.fw-hp-pt-hero-label {
font-family: var(--ff); font-size: 0.72rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.4px; transition: color 0.5s;
}
.fw-hp-pt-hero-sub {
font-family: var(--ff); font-size: 0.6rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}

/* Partner quote/CTA line */
.fw-hp-pt-cta {
font-family: var(--ff); font-size: 0.7rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 4px; border-top: 1px solid var(--g1);
}
.fw-hp-pt-cta span {
color: var(--theme-base); font-weight: 600;
transition: color 0.5s;
}

/* ═══ GLOBAL: Impact cards ═══ */
.fw-hp-gm-impact {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
margin-bottom: 12px;
}
.fw-hp-gm-card {
padding: 12px 10px; text-align: center;
background: rgba(255,255,255,0.4);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.65);
border-radius: 12px;
box-shadow: 0 3px 14px rgba(15,23,42,0.03), inset 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.4s cubic-bezier(0.25,1,0.2,1);
}
.fw-hp-gm-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15,23,42,0.06);
border-color: var(--theme-base);
}
.fw-hp-gm-card-ico {
font-size: 1.2rem; color: var(--theme-dark);
margin-bottom: 6px; transition: color 0.4s;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-ico { color: var(--theme-base); }
.fw-hp-gm-card-val {
font-family: var(--ff); font-size: 1.35rem; font-weight: 700;
color: var(--theme-dark); line-height: 1; margin-bottom: 3px;
transition: color 0.4s;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-val { color: var(--theme-base); }
.fw-hp-gm-card-lbl {
font-family: var(--ff); font-size: 0.62rem; font-weight: 600;
color: var(--theme-base); opacity: 0.8;
text-transform: uppercase; letter-spacing: 0.3px;
transition: color 0.5s;
}
.fw-hp-gm-card-desc {
font-family: var(--ff); font-size: 0.55rem; font-weight: 300;
color: var(--g4); line-height: 1.3; margin-top: 3px;
}
.fw-hp-gm-card:hover .fw-hp-gm-card-desc { color: var(--theme-dark); opacity: 0.7; }

.fw-hp-gm-stmt {
font-family: var(--ff); font-size: 0.82rem; font-weight: 300;
color: var(--g5); line-height: 1.55; margin-bottom: 12px;
}
.fw-hp-gm-stmt strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* ══════════════════════════════════════════════════════════════
TAB 6: GLOBAL — Impact circle + mission pillars + vision text
══════════════════════════════════════════════════════════════ */

/* Impact hero split: circle LEFT, pillars RIGHT */
.fw-hp-gm-hero {
display: flex; gap: 14px; align-items: stretch;
margin-bottom: 10px;
}
.fw-hp-gm-circle {
width: 120px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
justify-content: center; text-align: center;
}
.fw-hp-gm-circle .rounded-skill { margin: 0 auto 6px; }
.fw-hp-gm-circle-label {
font-family: var(--ff); font-size: 0.7rem; font-weight: 600;
color: var(--theme-base); text-transform: uppercase;
letter-spacing: 0.4px; transition: color 0.5s;
}
.fw-hp-gm-circle-sub {
font-family: var(--ff); font-size: 0.58rem; font-weight: 300;
color: var(--g4); margin-top: 2px;
}
.fw-hp-gm-vision {
flex: 1;
}
.fw-hp-gm-vision-text {
font-family: var(--ff); font-size: 0.78rem; font-weight: 300;
color: var(--g5); line-height: 1.55; margin-bottom: 10px;
}
.fw-hp-gm-vision-text strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* Mission pillars — horizontal strips */
.fw-hp-gm-pillars {
display: flex; flex-direction: column; gap: 0;
margin-bottom: 8px; flex: 1;
}
.fw-hp-gm-pillar {
display: flex; align-items: center; gap: 12px;
padding: 6px 0 6px 10px;
border-bottom: 1px solid var(--g1);
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-gm-pillar:last-child { border-bottom: none; }
.fw-hp-gm-pillar:hover { background: rgba(255,255,255,0.25); }
.fw-hp-gm-pillar:hover .fw-hp-gm-pil-title { color: var(--theme-base); }
.fw-hp-gm-pil-ico {
font-size: 1.15rem; color: var(--theme-dark);
flex-shrink: 0; width: 28px; text-align: center;
transition: color 0.5s;
}
.fw-hp-gm-pillar:hover .fw-hp-gm-pil-ico { color: var(--theme-base); }
.fw-hp-gm-pil-body { flex: 1; }
.fw-hp-gm-pil-title {
font-family: var(--ff); font-size: 0.85rem; font-weight: 600;
color: var(--dk); transition: color 0.3s;
}
.fw-hp-gm-pil-desc {
font-family: var(--ff); font-size: 0.65rem; font-weight: 300;
color: var(--g5); line-height: 1.35; margin-top: 1px;
}
.fw-hp-gm-pil-stat {
font-family: var(--ff); font-size: 1.1rem; font-weight: 700;
color: var(--theme-base); flex-shrink: 0;
min-width: 50px; text-align: right;
transition: color 0.5s;
}

/* Vision closing */
.fw-hp-gm-close {
font-family: var(--ff); font-size: 0.78rem; font-weight: 400;
color: var(--g4); text-align: center;
padding-top: 6px; border-top: 1px solid var(--g1);
line-height: 1.5;
}
.fw-hp-gm-close strong {
font-weight: 600; color: var(--theme-base);
transition: color 0.5s;
}

/* ══════════════════════════════════════════════════════════════
SHARED: CONTENT EFFECTS — Border accents, hovers — all use theme palette ═══ */
.fw-hp-hb {
padding: 8px 12px; border-radius: 0;
border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-hb:hover { background: rgba(255,255,255,0.25); }
.fw-hp-hb:hover .fw-hp-hb-name { color: var(--theme-base); }

.fw-hp-sl-item {
border-left: 3px solid var(--theme-base); padding-left: 10px;
transition: all 0.3s;
}
.fw-hp-sl-item:hover { background: rgba(255,255,255,0.25); }
.fw-hp-sl-item:hover .fw-hp-sl-name { color: var(--theme-base); }
.fw-hp-sl-item:hover .fw-hp-sl-sub { color: var(--theme-base); opacity: 0.7; }

.fw-hp-num-row {
border-left: 3px solid var(--theme-base); padding-left: 10px;
transition: all 0.3s;
}
.fw-hp-num-row:hover { background: rgba(255,255,255,0.25); }
.fw-hp-num-row:hover .fw-hp-num-title { color: var(--theme-base); }
.fw-hp-num-row:hover .fw-hp-num-desc { color: var(--theme-base); opacity: 0.7; }

.fw-hp-dot-row {
padding-left: 4px; border-left: 3px solid var(--theme-base);
transition: all 0.3s;
}
.fw-hp-dot-row:hover { background: rgba(255,255,255,0.25); }
.fw-hp-dot-row:hover .fw-hp-dot-title { color: var(--theme-base); }
.fw-hp-dot-row:hover .fw-hp-dot-desc { color: var(--theme-base); opacity: 0.7; }

/* ═══ UTILITY CLASSES (replacing inline styles) ═══ */
.fw-hp-rd-sm {
font-size: 0.82rem; margin: 8px 0 12px;
}
.fw-hp-rd-sm2 {
font-size: 0.82rem; margin: 8px 0 0;
}
.fw-hp-rd-sm3 {
font-size: 0.8rem; margin: 6px 0 0;
}
.fw-hp-rd-sm4 {
font-size: 0.82rem; margin: 4px 0 10px;
}
.fw-hp-sl-icon i,
.fw-hp-dot-mark i {
font-size: 1.1rem; color: var(--theme-base);
transition: color 0.5s;
}
.fw-hp-cring-inner {
font-size: 0.85rem; font-weight: 700;
}
.fw-hp-cring-inner-sm {
font-size: 0.9rem; font-weight: 700;
}
[data-color="#4CD5AA"] > .fw-hp-cring-inner { color: #4CD5AA; }
[data-color="#E5A93D"] > .fw-hp-cring-inner { color: #E5A93D; }
[data-color="#8B5CF6"] > .fw-hp-cring-inner { color: #8B5CF6; }
.fw-hp-split-gz {
padding: 14px 16px;
}
.fw-hp-dots-gz {
padding: 10px 16px;
}

/* ══════════════════════════════════════════════════════════════
SECTION BACKGROUND — Gradient overlay via ::before
══════════════════════════════════════════════════════════════ */
.fw-hp-section::before {
content: ''; position: absolute; inset: 0; z-index: 0;
background: var(--section-bg, linear-gradient(135deg, rgba(233,52,138,0.06) 0%, rgba(233,52,138,0.02) 45%, transparent 70%));
transition: background 0.7s cubic-bezier(0.25,1,0.2,1);
pointer-events: none;
}
.fw-hp-left-col { z-index: 1; }

/* ═══ STAGGER ═══ */
/* ══════════════════════════════════════════════════════════════
STAGGER ANIMATIONS — Fade-in delay per child element
══════════════════════════════════════════════════════════════ */
.fw-hp-panel.active .fw-hp-tile,
.fw-hp-panel.active .fw-hp-ctr,
.fw-hp-panel.active .fw-hp-sl-item,
.fw-hp-panel.active .fw-hp-hb,
.fw-hp-panel.active .fw-hp-cr,
.fw-hp-panel.active .fw-hp-tl-step,
.fw-hp-panel.active .fw-hp-num-row,
.fw-hp-panel.active .fw-hp-dot-row,
.fw-hp-panel.active .fw-hp-stbl-row,
.fw-hp-panel.active .fw-hp-gm-card,
.fw-hp-panel.active .fw-hp-gm-pillar,
.fw-hp-panel.active .fw-hp-pt-type,
.fw-hp-panel.active .fw-hp-pt-ben,
.fw-hp-panel.active .fw-hp-rm-card,
.fw-hp-panel.active .fw-hp-rm-tag,
.fw-hp-panel.active .fw-hp-cl-bar,
.fw-hp-panel.active .fw-hp-cl-chip,
.fw-hp-panel.active .fw-hp-pcol,
.fw-hp-panel.active .fw-hp-phase-card,
.fw-hp-panel.active .fw-hp-vb {
animation: fwUp 0.4s cubic-bezier(0.25,1,0.2,1) both;
}
.fw-hp-panel.active > :nth-child(n) > :nth-child(1) { animation-delay: 0.04s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(2) { animation-delay: 0.08s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(3) { animation-delay: 0.12s; }
.fw-hp-panel.active > :nth-child(n) > :nth-child(4) { animation-delay: 0.16s; }
@keyframes fwUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}



/* ══════════════════════════════════════════════════════════════
RESPONSIVE ≤1024px — Mobile/Tablet Native App Layout
Tab bar, swipe animations, content adaptations
═══════════════════════════════════════════ */

@media (max-width: 1024px) {

/* ── Section ── */
.fw-hp-section {
flex-direction: column; height: auto;
padding: 0; gap: 0; overflow-x: hidden;
}
.fw-hp-section::before { 
position: absolute; top: 0; left: 0; right: 0;
height: 300px; border-radius: 0;
}

/* ── Left col: tab bar container ── */
.fw-hp-left-col {
width: 100%; height: auto; flex-shrink: 0;
padding: 0; background: var(--wh);
}
.fw-hp-arcs-wrapper,
.fw-hp-silhouette,
.fw-hp-arc-center,
.fw-hp-arc-layer { display: none; }

/* ═══ TAB BAR: Clean bottom-border style, icon top text bottom ═══ */
.fw-hp-tabs-container {
padding: 0; flex-direction: row;
flex-wrap: nowrap; gap: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: var(--g0);
width: 100%;
}
.fw-hp-tabs-container::-webkit-scrollbar { display: none; }

.fw-hp-tab {
transform: none !important;
flex: 1; min-width: 0;
flex-direction: column; align-items: center;
gap: 3px; opacity: 1;
padding: 10px 6px 8px;
border: none;
border-bottom: 3px solid transparent;
border-radius: 0;
background: transparent;
transition: all 0.3s;
min-width: 0;
}
.fw-hp-tab.active {
border-bottom-color: var(--theme-base);
background: var(--wh);
}

.fw-hp-tab-icon {
width: 28px; height: 28px; font-size: 0.75rem;
border-radius: 50%; box-shadow: none;
background: none; color: var(--g4);
transition: all 0.3s;
}
.fw-hp-tab.active .fw-hp-tab-icon {
background: var(--theme-base); color: var(--wh);
}

.fw-hp-tab-text {
background: none; padding: 0; border: none;
box-shadow: none; width: auto;
}
.fw-hp-tab-text h3 {
font-size: 0.58rem; white-space: nowrap;
color: var(--g4); font-weight: 500;
line-height: 1.1; transition: color 0.3s;
}
.fw-hp-tab.active .fw-hp-tab-text h3 {
color: var(--theme-dark); font-weight: 700;
}

/* ═══ Content area ═══ */
.fw-hp-right-col {
width: 100%; height: auto; overflow: hidden;
padding: 18px 14px 28px;
}

/* Prevent any horizontal overflow from content */
.fw-hp-panel { max-width: 100%; overflow-x: hidden; }
.fw-hp-rm-tags { overflow-x: hidden; }
.fw-hp-roadmap { overflow: hidden; }

/* ═══ Slide animations ═══ */
.fw-hp-panel { display: none; width: 100%; }
.fw-hp-panel.active { display: flex; flex-direction: column; }
.fw-hp-panel.fw-hp-slide-right {
animation: fwSlideR 0.32s cubic-bezier(0.22,1,0.36,1) forwards;
}
.fw-hp-panel.fw-hp-slide-left {
animation: fwSlideL 0.32s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes fwSlideR {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes fwSlideL {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}

/* ═══ Typography ═══ */
.fw-hp-sub { font-size: 0.6rem; letter-spacing: 0.8px; margin-bottom: 2px; }
.fw-hp-rt { font-size: 1.4rem; margin-bottom: 4px; line-height: 1.2; }
.fw-hp-rd { font-size: 0.84rem; line-height: 1.5; margin-bottom: 12px; }

/* ═══ Tab 1: Service 2-col list — icon left, title+sub stacked right ═══ */
.fw-hp-tiles {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
margin-bottom: 12px;
}
.fw-hp-tile {
display: grid; grid-template-columns: 32px 1fr;
grid-template-rows: auto auto;
align-items: center;
text-align: left; gap: 0 10px;
padding: 7px 8px;
border-radius: 0;
transition: all 0.3s;
}
.fw-hp-tile:nth-child(odd) {
border-right: 1px solid var(--g1);
}
.fw-hp-tile:nth-child(-n+4) {
border-bottom: 1px solid var(--g1);
}
.fw-hp-tile:hover, .fw-hp-tile:active {
background: rgba(255,255,255,0.3);
}
.fw-hp-tile-img {
width: 32px; height: 32px; flex-shrink: 0;
grid-row: 1 / 3; grid-column: 1;
}
.fw-hp-tile-img img { width: 20px; height: 20px; }
.fw-hp-tile-name {
font-size: 0.72rem; font-weight: 600;
grid-row: 1; grid-column: 2;
align-self: end;
}
.fw-hp-tile-sub {
font-size: 0.55rem; display: block;
color: var(--g4); margin-top: 1px;
grid-row: 2; grid-column: 2;
align-self: start;
}

/* ═══ Counters: 2-col ═══ */
.fw-hp-ctrs { flex-wrap: wrap; gap: 8px; }
.fw-hp-ctr { flex: 0 0 calc(50% - 4px); border-radius: 12px; }
.fw-hp-ctr-ico { width: 40px; font-size: 1rem; border-radius: 12px 0 0 12px; }
.fw-hp-ctr-body { padding: 10px 10px 8px; }
.fw-hp-ctr-val { font-size: 1.15rem; }
.fw-hp-ctr-lbl { font-size: 0.6rem; }
.fw-hp-ctr-desc { font-size: 0.5rem; margin-top: 2px; }

/* ═══ Tab 2: Seamless — list left + tight vbars right ═══ */
.fw-hp-split {
flex-direction: row !important; gap: 10px !important;
padding: 0 !important; border-radius: 0 !important;
background: none !important; border: none !important;
box-shadow: none !important;
backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
align-items: stretch !important;
}
.fw-hp-split-left {
width: auto; flex: 1 !important;
display: flex !important; flex-direction: column !important;
gap: 0 !important;
}
.fw-hp-sl-item {
display: grid; grid-template-columns: 26px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0 8px;
padding: 6px 6px 6px 8px !important;
border-left: 3px solid var(--theme-base) !important;
}
.fw-hp-sl-item:not(:last-child) { border-bottom: 1px solid var(--g1); }
.fw-hp-sl-icon {
grid-row: 1 / 3; grid-column: 1;
display: flex; align-items: center; justify-content: center;
}
.fw-hp-sl-icon i { font-size: 0.88rem !important; }
.fw-hp-sl-name {
font-size: 0.72rem !important;
grid-row: 1; grid-column: 2; align-self: end;
}
.fw-hp-sl-sub {
font-size: 0.52rem !important;
grid-row: 2; grid-column: 2; align-self: start;
color: var(--g4);
}

.fw-hp-split-right {
width: auto; flex: 0 0 auto;
flex-direction: row;
}
.fw-hp-vbars {
min-height: auto; gap: 3px; padding: 4px 2px 4px;
flex: 1;
}
.fw-hp-vb { height: 100%; }
.fw-hp-vb-tube { width: 12px; border-radius: 6px; flex: 1; }
.fw-hp-vb-fill { border-radius: 6px; }
.fw-hp-vb-val { font-size: 0.58rem; font-weight: 700; }
.fw-hp-vb-lbl { font-size: 0.4rem; white-space: nowrap; }
.fw-hp-rd-sm2 { font-size: 0.72rem; margin: 6px 0 0; }

/* ═══ Tab 3: Clinical — stat number replaces circle on mobile ═══ */
.fw-hp-cl-split { flex-direction: column; gap: 12px; }
.fw-hp-cl-hero {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start;
}
/* Hide the circle on mobile */
.fw-hp-cl-hero .rounded-skill { display: none; }
/* Show big stat number instead */
.fw-hp-cl-hero-label {
font-size: 0.62rem;
text-transform: uppercase; letter-spacing: 0.4px;
text-align: left;
}
.fw-hp-cl-hero-label::before {
content: '98%\A';
white-space: pre;
font-size: 2rem; font-weight: 700;
color: var(--theme-base);
letter-spacing: -1px;
line-height: 1;
}
.fw-hp-cl-hero-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }
.fw-hp-cl-bars { width: 100%; }
.fw-hp-cl-bar { padding: 7px 8px; gap: 8px; }
.fw-hp-cl-bar-ico { font-size: 0.9rem; width: 22px; }
.fw-hp-cl-bar-name { font-size: 0.75rem; }
.fw-hp-cl-bar-pct { font-size: 0.75rem; }
.fw-hp-cl-bar-desc { font-size: 0.58rem; margin-bottom: 4px; }
.fw-hp-cl-bar-track { height: 5px; }
.fw-hp-cl-chips { flex-wrap: wrap; gap: 6px; }
.fw-hp-cl-chip { flex: 0 0 calc(50% - 3px); padding: 8px 10px; border-radius: 10px; }
.fw-hp-cl-chip-val { font-size: 1rem; }
.fw-hp-cl-chip-ico { font-size: 0.9rem; }
.fw-hp-cl-quote { font-size: 0.62rem; }

/* ═══ Tab 4: Roadmap — 3 phases in one row, 3 counters in one row ═══ */
.fw-hp-prog-strip { height: 5px; margin-bottom: 8px; }
.fw-hp-roadmap { flex-direction: row; gap: 6px; align-items: stretch; }
.fw-hp-rm-connector { display: none; }
.fw-hp-rm-card {
flex: 1; padding: 8px 6px; border-radius: 10px;
position: relative;
display: flex; flex-direction: column;
}
.fw-hp-rm-badge {
position: absolute; top: 6px; right: 6px;
margin-bottom: 0; width: fit-content;
font-size: 0.42rem; padding: 2px 6px;
}
.fw-hp-rm-name { font-size: 0.7rem; margin-bottom: 1px; padding-top: 2px; }
.fw-hp-rm-pct { font-size: 1.05rem; margin-bottom: 2px; }
.fw-hp-rm-txt { font-size: 0.5rem; line-height: 1.3; margin-bottom: 8px; }
.fw-hp-rm-bar { margin-top: auto; height: 3px; }
.fw-hp-rm-tags { gap: 4px; }
.fw-hp-rm-tag { padding: 3px 7px; font-size: 0.52rem; }

/* Counters: 3 in one row for Tab 4 */
#fw-hp-panel-3 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-3 .fw-hp-ctr { flex: 1; }

/* ═══ Tab 5: Partner — types row, benefits 2×2, big stat, counters row ═══ */

/* 4 partner types in one row */
.fw-hp-pt-types { flex-wrap: nowrap; gap: 4px; }
.fw-hp-pt-type {
flex: 1; padding: 8px 4px; border-radius: 8px;
gap: 3px;
}
.fw-hp-pt-type-ico { font-size: 0.9rem; }
.fw-hp-pt-type-name { font-size: 0.58rem; }
.fw-hp-pt-type-sub { font-size: 0.42rem; display: block; line-height: 1.25; }

/* Split: benefits + hero stat */
.fw-hp-pt-split { flex-direction: column; gap: 10px; }

/* Benefits as 2×2 grid */
.fw-hp-pt-benefits {
display: grid !important; grid-template-columns: 1fr 1fr;
gap: 0;
}
.fw-hp-pt-ben {
display: grid !important; grid-template-columns: 20px 1fr;
grid-template-rows: auto auto;
align-items: center;
gap: 0 6px;
padding: 7px 6px 7px 8px !important;
border-left: none !important; border-bottom: none !important;
}
.fw-hp-pt-ben:nth-child(odd) { border-right: 1px solid var(--g1) !important; }
.fw-hp-pt-ben:nth-child(-n+2) { border-bottom: 1px solid var(--g1) !important; }
.fw-hp-pt-ben-num {
grid-row: 1 / 3; grid-column: 1;
font-size: 0.62rem; min-width: auto;
}
.fw-hp-pt-ben-title {
font-size: 0.68rem !important;
grid-row: 1; grid-column: 2; align-self: end;
}
.fw-hp-pt-ben-desc {
font-size: 0.5rem !important;
grid-row: 2; grid-column: 2; align-self: start;
}

/* Hero: hide circle, show big stat number */
.fw-hp-pt-hero {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start;
}
.fw-hp-pt-hero .rounded-skill { display: none; }
.fw-hp-pt-hero-label {
font-size: 0.62rem; text-align: left;
}
.fw-hp-pt-hero-label::before {
content: '7x\A';
white-space: pre;
font-size: 2rem; font-weight: 700;
color: var(--theme-base);
letter-spacing: -1px; line-height: 1;
}
.fw-hp-pt-hero-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }

/* Counters: 3 in one row */
#fw-hp-panel-4 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-4 .fw-hp-ctr { flex: 1; }

.fw-hp-pt-cta { font-size: 0.6rem; }

/* ═══ Tab 6: Global — big stat, pillars 2×2, counters row ═══ */
.fw-hp-gm-hero {
flex-direction: column; gap: 8px; align-items: stretch;
}
/* Hide circle, show big stat */
.fw-hp-gm-circle {
width: 100%; flex-direction: column;
gap: 2px; align-items: flex-start; text-align: left;
}
.fw-hp-gm-circle .rounded-skill { display: none; }
.fw-hp-gm-circle-label {
font-size: 0.62rem;
text-transform: uppercase; letter-spacing: 0.4px;
text-align: left;
}
.fw-hp-gm-circle-label::before {
content: '50K+\A';
white-space: pre;
font-size: 2rem; font-weight: 700;
color: var(--theme-base);
letter-spacing: -1px; line-height: 1;
}
.fw-hp-gm-circle-sub { text-align: left; font-size: 0.55rem; margin-top: 0; }

/* Pillars as 2×2 grid: icon+text left, stat right per cell */
.fw-hp-gm-pillars {
display: grid !important; grid-template-columns: 1fr 1fr;
gap: 0; flex: none; width: 100%; margin-bottom: 10px;
}
.fw-hp-gm-pillar {
display: flex !important; align-items: center;
gap: 6px; padding: 7px 6px 7px 8px;
border-left: none !important; border-bottom: none !important;
}
.fw-hp-gm-pillar:nth-child(odd) { border-right: 1px solid var(--g1) !important; }
.fw-hp-gm-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--g1) !important; }
.fw-hp-gm-pil-ico {
font-size: 0.8rem; width: 20px; flex-shrink: 0;
text-align: center;
}
.fw-hp-gm-pil-body { flex: 1; min-width: 0; }
.fw-hp-gm-pil-title { font-size: 0.65rem; }
.fw-hp-gm-pil-desc { font-size: 0.48rem; margin-top: 1px; }
.fw-hp-gm-pil-stat {
font-size: 0.9rem; font-weight: 700;
text-align: right; min-width: 32px; flex-shrink: 0;
}

/* Counters: 3 in one row */
#fw-hp-panel-5 .fw-hp-ctrs { flex-wrap: nowrap; gap: 6px; }
#fw-hp-panel-5 .fw-hp-ctr { flex: 1; }

.fw-hp-gm-vision-text { font-size: 0.7rem; line-height: 1.5; }
.fw-hp-gm-close { font-size: 0.62rem; }

/* ═══ Shared mobile adjustments ═══ */
.fw-hp-gz {
padding: 12px; border-radius: 12px;
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fw-hp-cring {
padding: 10px; border-radius: 12px;
gap: 8px; flex-wrap: wrap; justify-content: center;
}
.fw-hp-gm-close, .fw-hp-cl-quote, .fw-hp-pt-cta {
font-size: 0.62rem; padding-top: 8px;
}
.fw-hp-hb, .fw-hp-sl-item, .fw-hp-num-row,
.fw-hp-dot-row, .fw-hp-gm-pillar, .fw-hp-pt-ben {
border-left-width: 3px;
}
}

/* ═══ SMALL MOBILE (≤480px) ═══ */
@media (max-width: 480px) {
/* Tabs: scrollable, not squeezed */
.fw-hp-tab {
flex: 0 0 auto; min-width: 0;
padding: 6px 10px 8px;
}
.fw-hp-tab-icon { width: 26px; height: 26px; font-size: 0.68rem; }
.fw-hp-tab-text h3 { font-size: 0.52rem; }
.fw-hp-rt { font-size: 1.25rem; }
.fw-hp-rd { font-size: 0.78rem; }

/* Partner types: hide sub-text on small screens */
.fw-hp-pt-type-sub { display: none !important; }

/* Phase cards tighter */
.fw-hp-rm-card { padding: 6px 5px; }
.fw-hp-rm-name { font-size: 0.62rem; }
.fw-hp-rm-pct { font-size: 0.9rem; }
.fw-hp-rm-txt { font-size: 0.45rem; }
.fw-hp-rm-badge { font-size: 0.38rem; padding: 2px 4px; }

/* Counters tighter in 3-row */
#fw-hp-panel-3 .fw-hp-ctr-ico,
#fw-hp-panel-4 .fw-hp-ctr-ico,
#fw-hp-panel-5 .fw-hp-ctr-ico { width: 32px; font-size: 0.85rem; }
#fw-hp-panel-3 .fw-hp-ctr-val,
#fw-hp-panel-4 .fw-hp-ctr-val,
#fw-hp-panel-5 .fw-hp-ctr-val { font-size: 0.95rem; }
#fw-hp-panel-3 .fw-hp-ctr-desc,
#fw-hp-panel-4 .fw-hp-ctr-desc,
#fw-hp-panel-5 .fw-hp-ctr-desc { display: none; }

/* Clinical chips tighter */
.fw-hp-cl-chip { padding: 6px 8px; }
.fw-hp-cl-chip-val { font-size: 0.88rem; }
.fw-hp-cl-chip-ico { font-size: 0.78rem; }

/* Global pillars tighter */
.fw-hp-gm-pil-title { font-size: 0.6rem; }
.fw-hp-gm-pil-desc { font-size: 0.44rem; }
.fw-hp-gm-pil-stat { font-size: 0.8rem; min-width: 28px; }

/* Partner benefits tighter */
.fw-hp-pt-ben-title { font-size: 0.6rem !important; }
.fw-hp-pt-ben-desc { font-size: 0.45rem !important; }

/* Feature tags */
.fw-hp-rm-tag { padding: 2px 5px; font-size: 0.48rem; }
}

/* ═══ VERY SMALL (≤380px) ═══ */
@media (max-width: 380px) {
.fw-hp-right-col { padding: 14px 10px 24px; }
.fw-hp-tabs-container { padding: 10px 8px 0; }
.fw-hp-tab { padding: 5px 8px 7px; }
.fw-hp-tab-icon { width: 24px; height: 24px; font-size: 0.62rem; }
.fw-hp-tab-text h3 { font-size: 0.48rem; }
.fw-hp-rt { font-size: 1.15rem; }

/* Tiles 2-col on very small */
.fw-hp-tiles { grid-template-columns: 1fr 1fr; }
.fw-hp-tile:nth-child(5),
.fw-hp-tile:nth-child(6) { border-bottom: none; }
.fw-hp-tile:nth-child(3),
.fw-hp-tile:nth-child(4) { border-bottom: 1px solid var(--g1); }

/* Phase cards: stack if too cramped */
.fw-hp-rm-name { font-size: 0.58rem; }
.fw-hp-rm-pct { font-size: 0.82rem; }
.fw-hp-rm-txt { font-size: 0.42rem; }

/* Partner types: 2×2 on very small */
.fw-hp-pt-types { flex-wrap: wrap !important; }
.fw-hp-pt-type { flex: 0 0 calc(50% - 2px) !important; }

/* 3-row counters: hide desc */
.fw-hp-ctr-desc { display: none; }
.fw-hp-ctr-lbl { font-size: 0.52rem; }
.fw-hp-ctr-val { font-size: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
HOMEPAGE BLOG SECTION (fw-hp-blog)
─ Swiper 11.0.5 carousel
─ IMG icon tabs with CSS filter color switching
─ Compact premium cards with skeleton loading
─ Smooth filter + hover transitions
═══════════════════════════════════════════════════════════ */

.fw-hp-blog{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--g0)
}

/* ── Decorative background ── */
.fw-hp-blog::before{
content:'';position:absolute;width:450px;height:450px;border-radius:50%;
background:radial-gradient(circle,rgba(20,120,200,.03) 0%,transparent 70%);
top:-140px;right:-100px;pointer-events:none
}


/* ═══════════════════════════════════
SECTION HEADER
═══════════════════════════════════ */

.fw-hp-blog__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}

/* Label */
.fw-hp-blog__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--bl);margin-bottom:10px
}
.fw-hp-blog__label span{
width:20px;height:1.5px;background:var(--bl);border-radius:2px
}

/* Title + nav row */
.fw-hp-blog__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}

.fw-hp-blog__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-blog__title em{
font-style:normal;color:var(--bl);
font-family: 'Outfit', sans-serif;
}


/* ═══════════════════════════════════
TABS + ARROWS ROW (single line)
Desktop: tabs left, arrows right
Mobile: tabs only, scroll
═══════════════════════════════════ */

.fw-hp-blog__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px;
display:flex;align-items:center;gap:12px
}

.fw-hp-blog__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-blog__tabs-track::-webkit-scrollbar{display:none}

/* Tab pill */
.fw-hp-blog__tab{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-blog__tab:hover{
border-color:var(--bl);color:var(--bl);background:var(--bl-bg)
}

/* Tab icon — IMG with CSS filter */
.fw-hp-blog__tab-icon{
width:15px;height:15px;flex-shrink:0;object-fit:contain;
transition:filter .25s;
filter:brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(300%) hue-rotate(180deg)
}
.fw-hp-blog__tab:hover .fw-hp-blog__tab-icon{
filter:brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1200%) hue-rotate(190deg)
}

/* Active tab — brand blue */
.fw-hp-blog__tab.active{
background:var(--bl);border-color:var(--bl);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(20,120,200,.2)
}
.fw-hp-blog__tab.active .fw-hp-blog__tab-icon{
filter:brightness(0) invert(1)
}

.fw-hp-blog__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-blog__tab.active .fw-hp-blog__tab-count{
background:rgba(255,255,255,.2)
}

/* Arrow buttons */
.fw-hp-blog__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-blog__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh)
}
.fw-hp-blog__arrow:hover{
background:var(--bl);color:var(--wh);border-color:var(--bl)
}
.fw-hp-blog__arrow.swiper-button-disabled{
opacity:.3;pointer-events:none
}


/* ═══════════════════════════════════
SWIPER CONTAINER
═══════════════════════════════════ */

.fw-hp-blog .swiper{
padding:2px 28px 6px;overflow:visible
}
.fw-hp-blog .swiper-slide{
width:236px;height:auto;
transition:opacity .4s ease,transform .4s ease
}

/* Filter animation — hide/show slides */
.fw-hp-blog .swiper-slide.hiding{
opacity:0;transform:scale(.95)
}


/* ═══════════════════════════════════
SKELETON LOADER
Shown before images load
═══════════════════════════════════ */

@keyframes fw-hp-blog-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-blog__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-blog-shimmer 1.5s ease infinite
}
.fw-hp-blog__skel--img{
height:148px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-blog__skel--text{
height:12px;border-radius:6px;margin-bottom:8px
}
.fw-hp-blog__skel--text.w70{width:70%}
.fw-hp-blog__skel--text.w90{width:90%}
.fw-hp-blog__skel--text.w50{width:50%}
.fw-hp-blog__skel--circle{
width:26px;height:26px;border-radius:50%
}

/* Skeleton card wrapper */
.fw-hp-blog__card-skel{
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:1px solid rgba(15,23,42,.06)
}
.fw-hp-blog__card-skel .body{padding:14px}
.fw-hp-blog__card-skel .row{display:flex;align-items:center;gap:8px;margin-bottom:10px}

/* Hide skeleton when loaded */
.fw-hp-blog.loaded .fw-hp-blog__card-skel{display:none}
.fw-hp-blog:not(.loaded) .fw-hp-blog__card{opacity:0}
.fw-hp-blog.loaded .fw-hp-blog__card{opacity:1}


/* ═══════════════════════════════════
CARD — clean, compact, premium
═══════════════════════════════════ */

.fw-hp-blog__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s;
border:1px solid rgba(15,23,42,.06)
}
.fw-hp-blog__card:hover{
transform:translateY(-5px);
box-shadow:0 12px 36px rgba(15,23,42,.09);
border-color:transparent
}

/* ── Image area — only badge + bookmark ── */
.fw-hp-blog__card-img{
position:relative;height:148px;overflow:hidden;display:block
}
.fw-hp-blog__card-img img{
width:100%;height:100%;object-fit:cover;
transition:transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-blog__card:hover .fw-hp-blog__card-img img{
transform:scale(1.05)
}

/* Category badge — IMG icon */
.fw-hp-blog__card-cat{
position:absolute;top:10px;left:10px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:600;color:var(--wh);
z-index:2;display:inline-flex;align-items:center;gap:4px;
letter-spacing:.2px
}
.fw-hp-blog__card-cat img{
width:12px;height:12px;object-fit:contain;
filter:brightness(0) invert(1)
}
/* Badge color is set dynamically via data-color attribute on .fw-hp-blog__card-cat
Example: <span class="fw-hp-blog__card-cat" data-color="#E9348A">
JS applies background-color from data-color on init */

/* Bookmark — checkbox toggle */
.fw-hp-blog__card-save{position:absolute;top:10px;right:10px;z-index:2}
.fw-hp-blog__card-save input{display:none}
.fw-hp-blog__card-save label{
width:28px;height:28px;border-radius:50%;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
display:flex;align-items:center;justify-content:center;
color:var(--wh);font-size:12px;cursor:pointer;
transition:all .25s;border:1px solid rgba(255,255,255,.15)
}
.fw-hp-blog__card-save label:hover{background:rgba(255,255,255,.35)}
.fw-hp-blog__card-save input:checked+label{background:var(--pk);border-color:var(--pk)}
.fw-hp-blog__card-save input:checked+label .bi-bookmark{display:none}
.fw-hp-blog__card-save input:checked+label .bi-bookmark-fill{display:inline}
.fw-hp-blog__card-save label .bi-bookmark-fill{display:none}

/* ── Card body ── */
.fw-hp-blog__card-body{
padding:14px 14px 16px;flex:1;display:flex;flex-direction:column
}

/* Author row */
.fw-hp-blog__card-author{
display:flex;align-items:center;gap:8px;margin-bottom:10px
}
.fw-hp-blog__card-avatar{
width:26px;height:26px;border-radius:50%;object-fit:cover;flex-shrink:0
}
.fw-hp-blog__card-aname{
font-size:11px;font-weight:600;color:var(--dk);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-blog__card-dot{
width:3px;height:3px;border-radius:50%;background:var(--g3);flex-shrink:0
}
.fw-hp-blog__card-adate{
font-size:10px;color:var(--g4);white-space:nowrap;flex-shrink:0
}

/* Title — Outfit bold, readable */
.fw-hp-blog__card-title{
font-family:var(--ff);
font-size:14px;font-weight:700;
color:var(--dk);line-height:1.4;
margin-bottom:6px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
transition:color .3s
}
.fw-hp-blog__card:hover .fw-hp-blog__card-title{color:var(--bl)}

/* Excerpt — ellipsis overflow */
.fw-hp-blog__card-excerpt{
font-size:11.5px;color:var(--g5);line-height:1.55;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
flex:1;margin-bottom:12px
}

/* Footer — read time left, read more right */
.fw-hp-blog__card-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:10px;border-top:1px solid var(--g1)
}
.fw-hp-blog__card-meta{
font-size:10px;color:var(--g4);display:flex;align-items:center;gap:4px
}
.fw-hp-blog__card-meta i{font-size:10px}
.fw-hp-blog__card-link{
font-size:11px;font-weight:600;color:var(--bl);
display:flex;align-items:center;gap:4px;
transition:color .25s,gap .25s
}
.fw-hp-blog__card:hover .fw-hp-blog__card-link{color:var(--pk);gap:6px}
.fw-hp-blog__card-link i{font-size:9px;transition:transform .2s}
.fw-hp-blog__card:hover .fw-hp-blog__card-link i{transform:translateX(2px)}


/* ═══════════════════════════════════
RESPONSIVE BREAKPOINTS
═══════════════════════════════════ */

/* 13" Laptop ≤1366px */
@media(max-width:1366px){
.fw-hp-blog__title{font-size:26px}
.fw-hp-blog .swiper-slide{width:224px}
.fw-hp-blog__card-img{height:138px}
}

/* Small laptop ≤1024px */
@media(max-width:1024px){
.fw-hp-blog{padding:36px 0 40px}
.fw-hp-blog__title{font-size:23px}
.fw-hp-blog .swiper-slide{width:210px}
.fw-hp-blog__card-img{height:128px}
.fw-hp-blog__card-title{font-size:13px}
}

/* Tablet ≤768px */
@media(max-width:768px){
.fw-hp-blog{padding:30px 0 34px}
.fw-hp-blog__top{padding:0 14px;margin-bottom:14px}
.fw-hp-blog__title{font-size:21px}
.fw-hp-blog__nav{padding:0 14px;margin-bottom:16px}
.fw-hp-blog__arrows{display:none}
.fw-hp-blog__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-blog__tab-icon{width:13px;height:13px}
.fw-hp-blog .swiper{padding:2px 14px 4px}
.fw-hp-blog .swiper-slide{width:195px}
.fw-hp-blog__card-img{height:118px}
.fw-hp-blog__card-body{padding:10px 12px 12px}
.fw-hp-blog__card-avatar{width:22px;height:22px}
.fw-hp-blog__card-aname{font-size:10px}
.fw-hp-blog__card-adate{font-size:9px}
.fw-hp-blog__card-author{gap:6px;margin-bottom:8px}
.fw-hp-blog__card-title{font-size:12.5px;margin-bottom:4px}
.fw-hp-blog__card-excerpt{font-size:10.5px;margin-bottom:10px}
.fw-hp-blog__card-foot{padding-top:8px}
.fw-hp-blog__card-meta{font-size:9px}
.fw-hp-blog__card-link{font-size:10px}
}

/* Mobile ≤480px */
@media(max-width:480px){
.fw-hp-blog{padding:24px 0 28px}
.fw-hp-blog__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-blog__title{font-size:18px}
.fw-hp-blog__nav{margin-bottom:14px}
.fw-hp-blog__tab{padding:5px 10px;font-size:10px}
.fw-hp-blog__tab-icon{width:12px;height:12px}
.fw-hp-blog .swiper-slide{width:170px}
.fw-hp-blog__card-img{height:105px}
.fw-hp-blog__card-cat{font-size:8.5px;padding:3px 7px;gap:3px}
.fw-hp-blog__card-cat img{width:10px;height:10px}
.fw-hp-blog__card-save label{width:24px;height:24px;font-size:10px}
.fw-hp-blog__card-body{padding:8px 10px 10px}
.fw-hp-blog__card-avatar{width:20px;height:20px}
.fw-hp-blog__card-aname{font-size:9.5px}
.fw-hp-blog__card-dot{width:2px;height:2px}
.fw-hp-blog__card-adate{font-size:8.5px}
.fw-hp-blog__card-author{gap:5px;margin-bottom:6px}
.fw-hp-blog__card-title{font-size:11.5px}
.fw-hp-blog__card-excerpt{font-size:9.5px;margin-bottom:8px}
.fw-hp-blog__card-link{font-size:9.5px}
.fw-hp-blog__card-meta{font-size:8.5px}
}

/* Small mobile ≤360px — native app feel */
@media(max-width:360px){
.fw-hp-blog{padding:20px 0 24px}
.fw-hp-blog__top{padding:0 10px;margin-bottom:10px}
.fw-hp-blog__title{font-size:16px}
.fw-hp-blog__label{display:none}
.fw-hp-blog__nav{padding:0 10px;margin-bottom:10px}
.fw-hp-blog__tab{padding:4px 8px;font-size:9px}
.fw-hp-blog__tab-count{display:none}
.fw-hp-blog .swiper{padding:2px 10px 2px}
.fw-hp-blog .swiper-slide{width:150px}
.fw-hp-blog__card-img{height:90px}
.fw-hp-blog__card-cat{font-size:7.5px;padding:2px 6px}
.fw-hp-blog__card-save label{width:20px;height:20px;font-size:9px}
.fw-hp-blog__card-body{padding:6px 8px 8px}
.fw-hp-blog__card-author{margin-bottom:5px}
.fw-hp-blog__card-adate{display:none}
.fw-hp-blog__card-dot{display:none}
.fw-hp-blog__card-title{font-size:10.5px}
.fw-hp-blog__card-excerpt{display:none}
.fw-hp-blog__card-foot{padding-top:5px}
}

/* ── Entrance animation ── */
.fw-hp-blog__card{opacity:0;transform:translateY(14px)}
.fw-hp-blog.in-view .fw-hp-blog__card{
opacity:1;transform:translateY(0);
transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-blog.in-view .swiper-slide:nth-child(1) .fw-hp-blog__card{transition-delay:.03s}
.fw-hp-blog.in-view .swiper-slide:nth-child(2) .fw-hp-blog__card{transition-delay:.06s}
.fw-hp-blog.in-view .swiper-slide:nth-child(3) .fw-hp-blog__card{transition-delay:.09s}
.fw-hp-blog.in-view .swiper-slide:nth-child(4) .fw-hp-blog__card{transition-delay:.12s}
.fw-hp-blog.in-view .swiper-slide:nth-child(5) .fw-hp-blog__card{transition-delay:.15s}
.fw-hp-blog.in-view .swiper-slide:nth-child(6) .fw-hp-blog__card{transition-delay:.18s}
.fw-hp-blog.in-view .swiper-slide:nth-child(7) .fw-hp-blog__card{transition-delay:.21s}
.fw-hp-blog.in-view .swiper-slide:nth-child(8) .fw-hp-blog__card{transition-delay:.24s}
.fw-hp-blog__top,.fw-hp-blog__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-blog.in-view .fw-hp-blog__top,.fw-hp-blog.in-view .fw-hp-blog__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-blog.in-view .fw-hp-blog__nav{transition-delay:.05s}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE CLINIC SECTION (fw-hp-cln)
   ─ Swiper 11.0.5 carousel (parallel to fw-hp-blog)
   ─ City-based filter tabs
   ─ Premium clinic cards: image + success/rating pills + logo
     overlap + specialty chips + stats row + CTA
   ═══════════════════════════════════════════════════════════ */

.fw-hp-cln{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--wh)
}

/* ── Decorative background — pink whisper top-left, blue whisper bottom-right ── */
.fw-hp-cln::before{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(233,52,138,.035) 0%,transparent 70%);
top:-160px;left:-120px;pointer-events:none
}
.fw-hp-cln::after{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(20,120,200,.03) 0%,transparent 70%);
bottom:-180px;right:-140px;pointer-events:none
}


/* ═══════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════ */

.fw-hp-cln__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}

/* Label */
.fw-hp-cln__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--pk);margin-bottom:10px
}
.fw-hp-cln__label span{
width:20px;height:1.5px;background:var(--pk);border-radius:2px
}

/* Title + see-all row */
.fw-hp-cln__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}

.fw-hp-cln__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-cln__title em{
font-style:normal;color:var(--pk);
font-family:'Outfit',sans-serif
}

.fw-hp-cln__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--bl);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-cln__see-all:hover{color:var(--bl-d);gap:9px}
.fw-hp-cln__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-cln__see-all:hover i{transform:translateX(2px)}


/* ═══════════════════════════════════
   TABS + ARROWS ROW
   ═══════════════════════════════════ */

.fw-hp-cln__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px;
display:flex;align-items:center;gap:12px
}

.fw-hp-cln__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-cln__tabs-track::-webkit-scrollbar{display:none}

/* Tab pill */
.fw-hp-cln__tab{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-cln__tab:hover{
border-color:var(--pk);color:var(--pk);background:var(--pk-bg)
}

/* SVG category icon — gray by default, pink on hover, white when active.
   Uploaded into /static/icons/category/<slug>.svg (single-color SVGs that
   the filter recolors via CSS). */
.fw-hp-cln__tab-icon{
width:15px;height:15px;flex-shrink:0;object-fit:contain;
transition:filter .25s;
filter:brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(300%) hue-rotate(280deg)
}
.fw-hp-cln__tab:hover .fw-hp-cln__tab-icon{
filter:brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(2200%) hue-rotate(310deg)
}

/* Active tab — brand pink */
.fw-hp-cln__tab.active{
background:var(--pk);border-color:var(--pk);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(233,52,138,.22)
}
.fw-hp-cln__tab.active .fw-hp-cln__tab-icon{
filter:brightness(0) invert(1)
}

.fw-hp-cln__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-cln__tab.active .fw-hp-cln__tab-count{
background:rgba(255,255,255,.22)
}

/* Arrow buttons */
.fw-hp-cln__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-cln__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh)
}
.fw-hp-cln__arrow:hover{
background:var(--pk);color:var(--wh);border-color:var(--pk)
}
.fw-hp-cln__arrow.swiper-button-disabled{
opacity:.3;pointer-events:none
}


/* ═══════════════════════════════════
   SWIPER CONTAINER
   ═══════════════════════════════════ */

.fw-hp-cln .swiper{
padding:6px 28px 10px;overflow:visible
}
.fw-hp-cln .swiper-slide{
width:286px;height:auto;
transition:opacity .4s ease,transform .4s ease
}
.fw-hp-cln .swiper-slide.hiding{
opacity:0;transform:scale(.96)
}


/* ═══════════════════════════════════
   SKELETON LOADER
   ═══════════════════════════════════ */

@keyframes fw-hp-cln-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-cln__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-cln-shimmer 1.5s ease infinite
}
.fw-hp-cln__skel--img{
height:160px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-cln__skel--text{
height:12px;border-radius:6px;margin-bottom:10px
}
.fw-hp-cln__skel--text.w70{width:70%}
.fw-hp-cln__skel--text.w90{width:90%}
.fw-hp-cln__skel--text.w50{width:50%}

/* Skeleton + real card occupy the SAME slot inside the slide — skeleton
   is absolutely positioned over the card, so when it disappears there's
   no layout collapse (no "the card jumps up" effect). */
.fw-hp-cln .swiper-slide{position:relative}
.fw-hp-cln__card-skel{
position:absolute;inset:0;z-index:5;
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:1px solid rgba(15,23,42,.06);
transition:opacity .35s ease,visibility .35s ease
}
.fw-hp-cln__card-skel .body{padding:16px}

/* When the images are loaded, fade the skeleton out gracefully —
   no `display:none` swap, no layout shift. */
.fw-hp-cln.loaded .fw-hp-cln__card-skel{opacity:0;visibility:hidden;pointer-events:none}
.fw-hp-cln:not(.loaded) .fw-hp-cln__card{opacity:0}
.fw-hp-cln.loaded .fw-hp-cln__card{opacity:1}


/* ═══════════════════════════════════
   CARD — premium clinic card
   ═══════════════════════════════════ */

.fw-hp-cln__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s;
border:1px solid rgba(15,23,42,.06);
position:relative
}
.fw-hp-cln__card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(15,23,42,.10);
border-color:transparent
}

/* ── Image area ──
   Use `> img` (direct child) so nested icons inside child <span> tags
   (e.g. the specialty-tag icon) don't accidentally inherit width:100% /
   height:100% and blow up to fill the whole card image. */
.fw-hp-cln__card-img{
position:relative;height:160px;overflow:hidden;display:block
}
.fw-hp-cln__card-img > img{
width:100%;height:100%;object-fit:cover;
transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.fw-hp-cln__card:hover .fw-hp-cln__card-img > img{
transform:scale(1.06)
}
/* Soft dark gradient at the image bottom — makes overlay logo readable */
.fw-hp-cln__card-img::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:62%;
background:linear-gradient(to top,rgba(15,23,42,.55) 0%,rgba(15,23,42,.05) 70%,transparent 100%);
pointer-events:none
}

/* Specialty tag (top-left) — color-coded per FW vertical */
.fw-hp-cln__card-tag{
position:absolute;top:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:700;color:var(--wh);
text-transform:uppercase;letter-spacing:.5px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.16)
}
.fw-hp-cln__card-tag i{font-size:11px;line-height:1}
.fw-hp-cln__card-tag-icon{
width:12px;height:12px;object-fit:contain;flex-shrink:0;
filter:brightness(0) invert(1)
}
.fw-hp-cln__card-tag--fertility{background:rgba(233,52,138,.95);box-shadow:0 2px 8px rgba(233,52,138,.32)}
.fw-hp-cln__card-tag--maternity{background:rgba(240,115,78,.95);box-shadow:0 2px 8px rgba(240,115,78,.32)}
.fw-hp-cln__card-tag--gyno{background:rgba(20,120,200,.95);box-shadow:0 2px 8px rgba(20,120,200,.32)}
.fw-hp-cln__card-tag--pediatric{background:rgba(56,181,142,.95);box-shadow:0 2px 8px rgba(56,181,142,.32)}

/* Rating star pill (top-right) — includes review count after the dot */
.fw-hp-cln__card-rate{
position:absolute;top:11px;right:11px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:100px;
font-size:11.5px;font-weight:700;color:var(--dk);
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.12)
}
.fw-hp-cln__card-rate i{font-size:10px;color:var(--go);line-height:1}
.fw-hp-cln__card-rate em{
font-style:normal;font-size:10px;font-weight:600;
color:var(--g4);letter-spacing:.1px;margin-left:1px
}

/* ── Card body ── (no more overlapping logo, so less top padding) */
.fw-hp-cln__card-body{
padding:16px 16px 16px;flex:1;display:flex;flex-direction:column
}

/* Clinic name + inline branch/location on one line.
   Name reads bold, branch reads lighter — visually one statement. */
.fw-hp-cln__card-name{
font-family:var(--ff);
font-size:15px;font-weight:700;
color:var(--dk);line-height:1.35;
margin-bottom:8px;letter-spacing:-.15px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;text-overflow:ellipsis;
transition:color .3s
}
.fw-hp-cln__card:hover .fw-hp-cln__card-name{color:var(--pk)}

/* Address row — flag + full address */
.fw-hp-cln__card-loc{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:500;color:var(--g5);
margin-bottom:10px;line-height:1.4
}
.fw-hp-cln__card-loc img{
border-radius:2px;flex-shrink:0;display:inline-block
}

/* Open-status row — pulsing green dot + status text + hours */
.fw-hp-cln__card-status{
display:flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:500;color:var(--g6);
margin-bottom:10px;letter-spacing:.1px
}
.fw-hp-cln__card-status b{
font-weight:700;color:var(--mt-d)
}
.fw-hp-cln__card-status-dot{
width:7px;height:7px;border-radius:50%;
background:var(--mt-d);flex-shrink:0;
box-shadow:0 0 0 0 rgba(56,181,142,.55);
animation:fw-hp-cln-pulse 2s ease-out infinite
}
@keyframes fw-hp-cln-pulse{
0%{box-shadow:0 0 0 0 rgba(56,181,142,.55)}
70%{box-shadow:0 0 0 8px rgba(56,181,142,0)}
100%{box-shadow:0 0 0 0 rgba(56,181,142,0)}
}

/* Featured "today + closes/opens in X hrs" pill — amber accent for urgency.
   Sits right under the open-status row to give a "live" feel without
   needing real client-side time logic for every card. */
.fw-hp-cln__card-soon{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:700;
color:var(--go-d);background:var(--go-l);
padding:5px 10px;border-radius:6px;
margin-bottom:12px;letter-spacing:.2px;text-transform:uppercase
}
.fw-hp-cln__card-soon i{font-size:12px;line-height:1}
/* "Always open" variant — green accent for 24×7 clinics */
.fw-hp-cln__card-soon--always{
color:var(--mt-d);background:var(--mt-l)
}

/* Service chips */
.fw-hp-cln__card-chips{
display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px
}
.fw-hp-cln__card-chip{
display:inline-flex;align-items:center;
padding:3px 9px;border-radius:6px;
font-size:10px;font-weight:600;color:var(--bl-d);
background:var(--bl-bg);
letter-spacing:.2px
}

/* Trust-badge strip — accreditations + milestone counter.
   Sits flush against the CTA button below (no margin-bottom) so the two
   read as a connected "credentials + action" footer block. */
.fw-hp-cln__card-trust{
display:flex;align-items:center;gap:6px;
font-size:10px;font-weight:600;color:var(--g6);
padding:7px 10px;margin-bottom:10px;
background:var(--g0);border-radius:8px;
letter-spacing:.1px
}
.fw-hp-cln__card-trust i{
font-size:12px;color:var(--mt-d);flex-shrink:0;line-height:1
}

/* CTA button */
.fw-hp-cln__card-cta{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 16px;border-radius:10px;
font-size:12.5px;font-weight:600;color:var(--wh);
background:var(--pk);
transition:background .25s,gap .25s,box-shadow .25s;
margin-top:auto
}
.fw-hp-cln__card-cta:hover{background:var(--pk-d);gap:9px;box-shadow:0 4px 14px rgba(233,52,138,.3)}
.fw-hp-cln__card-cta i{font-size:11px;transition:transform .2s}
.fw-hp-cln__card-cta:hover i{transform:translateX(2px)}


/* ═══════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════ */

/* 13" laptop ≤1366px */
@media(max-width:1366px){
.fw-hp-cln__title{font-size:26px}
.fw-hp-cln .swiper-slide{width:268px}
.fw-hp-cln__card-img{height:150px}
}

/* Small laptop ≤1024px */
@media(max-width:1024px){
.fw-hp-cln{padding:36px 0 40px}
.fw-hp-cln__title{font-size:23px}
.fw-hp-cln .swiper-slide{width:256px}
.fw-hp-cln__card-img{height:140px}
}

/* Tablet ≤768px */
@media(max-width:768px){
.fw-hp-cln{padding:30px 0 34px}
.fw-hp-cln__top{padding:0 14px;margin-bottom:14px}
.fw-hp-cln__title{font-size:21px}
.fw-hp-cln__see-all{font-size:12px}
.fw-hp-cln__nav{padding:0 14px;margin-bottom:18px}
.fw-hp-cln__arrows{display:none}
.fw-hp-cln__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-cln .swiper{padding:6px 14px 8px}
.fw-hp-cln .swiper-slide{width:240px}
.fw-hp-cln__card-img{height:130px}
.fw-hp-cln__card-body{padding:14px 14px 14px}
.fw-hp-cln__card-name{font-size:13.5px}
.fw-hp-cln__card-tag{font-size:9.5px;padding:3px 9px}
.fw-hp-cln__card-soon{font-size:9.5px;padding:4px 9px}
}

/* Mobile ≤480px */
@media(max-width:480px){
.fw-hp-cln{padding:24px 0 28px}
.fw-hp-cln__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-cln__title{font-size:18px}
.fw-hp-cln__see-all span{display:none}
.fw-hp-cln__nav{margin-bottom:14px}
.fw-hp-cln__tab{padding:5px 10px;font-size:10px}
.fw-hp-cln .swiper-slide{width:215px}
.fw-hp-cln__card-img{height:118px}
.fw-hp-cln__card-tag{font-size:9px;padding:3px 8px;letter-spacing:.4px}
.fw-hp-cln__card-rate{font-size:10.5px;padding:3px 8px}
.fw-hp-cln__card-rate em{font-size:9px}
.fw-hp-cln__card-body{padding:12px 12px 12px}
.fw-hp-cln__card-name{font-size:13px;margin-bottom:6px}
.fw-hp-cln__card-loc{font-size:9.5px;margin-bottom:8px}
.fw-hp-cln__card-soon{font-size:9px;padding:3px 8px;margin-bottom:10px;letter-spacing:.1px}
.fw-hp-cln__card-status{font-size:9.5px;margin-bottom:8px}
.fw-hp-cln__card-chip{font-size:9px;padding:2px 7px}
.fw-hp-cln__card-trust{font-size:9px;padding:6px 9px;margin-bottom:12px}
.fw-hp-cln__card-cta{padding:9px 14px;font-size:11.5px}
}

/* Small mobile ≤360px */
@media(max-width:360px){
.fw-hp-cln{padding:20px 0 24px}
.fw-hp-cln__top{padding:0 10px;margin-bottom:10px}
.fw-hp-cln__title{font-size:16px}
.fw-hp-cln__label{display:none}
.fw-hp-cln__nav{padding:0 10px;margin-bottom:12px}
.fw-hp-cln__tab{padding:4px 8px;font-size:9px}
.fw-hp-cln__tab-count{display:none}
.fw-hp-cln .swiper{padding:6px 10px 8px}
.fw-hp-cln .swiper-slide{width:190px}
.fw-hp-cln__card-img{height:104px}
.fw-hp-cln__card-chips{margin-bottom:10px}
.fw-hp-cln__card-trust{padding:5px 8px;margin-bottom:10px}
}

/* ── Entrance animation ──
   Cards fade in only — NO translateY slide. The old slide-up combined
   with the still-visible skeleton looked like a layout shift, so we
   keep just the opacity transition (managed in the loaded/in-view
   rules above) and let the staggered transition-delays handle rhythm. */
.fw-hp-cln__card{
transition:opacity .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-cln.in-view .swiper-slide:nth-child(1) .fw-hp-cln__card{transition-delay:.03s}
.fw-hp-cln.in-view .swiper-slide:nth-child(2) .fw-hp-cln__card{transition-delay:.06s}
.fw-hp-cln.in-view .swiper-slide:nth-child(3) .fw-hp-cln__card{transition-delay:.09s}
.fw-hp-cln.in-view .swiper-slide:nth-child(4) .fw-hp-cln__card{transition-delay:.12s}
.fw-hp-cln.in-view .swiper-slide:nth-child(5) .fw-hp-cln__card{transition-delay:.15s}
.fw-hp-cln.in-view .swiper-slide:nth-child(6) .fw-hp-cln__card{transition-delay:.18s}
.fw-hp-cln.in-view .swiper-slide:nth-child(7) .fw-hp-cln__card{transition-delay:.21s}
.fw-hp-cln.in-view .swiper-slide:nth-child(8) .fw-hp-cln__card{transition-delay:.24s}
.fw-hp-cln__top,.fw-hp-cln__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-cln.in-view .fw-hp-cln__top,.fw-hp-cln.in-view .fw-hp-cln__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-cln.in-view .fw-hp-cln__nav{transition-delay:.05s}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE DOCTOR SECTION (fw-hp-dr)
   ─ Swiper carousel (sibling of clinic + blog)
   ─ Specialty filter tabs (same 4 verticals as clinic)
   ─ Premium doctor cards: portrait image + verified-pro chip +
     star rating · name · spec · quals · stats · langs · CTA
   ═══════════════════════════════════════════════════════════ */

.fw-hp-dr{
padding:44px 0 48px;
position:relative;
overflow:hidden;
background:var(--g0)
}

/* Decorative whisper — blue this time so the rhythm alternates
   (white clinic → off-white doctor → white aipower etc.) */
.fw-hp-dr::before{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(20,120,200,.04) 0%,transparent 70%);
top:-160px;right:-120px;pointer-events:none
}
.fw-hp-dr::after{
content:'';position:absolute;width:480px;height:480px;border-radius:50%;
background:radial-gradient(circle,rgba(233,52,138,.025) 0%,transparent 70%);
bottom:-180px;left:-140px;pointer-events:none
}


/* ── Section header ── */
.fw-hp-dr__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:20px
}
.fw-hp-dr__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--bl);margin-bottom:10px
}
.fw-hp-dr__label span{
width:20px;height:1.5px;background:var(--bl);border-radius:2px
}
.fw-hp-dr__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}
.fw-hp-dr__title{
font-family:var(--ff);
font-size:28px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.2px
}
.fw-hp-dr__title em{
font-style:normal;color:var(--bl);
font-family:'Outfit',sans-serif
}
.fw-hp-dr__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--bl);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-dr__see-all:hover{color:var(--bl-d);gap:9px}
.fw-hp-dr__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-dr__see-all:hover i{transform:translateX(2px)}


/* ── Tabs + arrows ── */
.fw-hp-dr__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px;
display:flex;align-items:center;gap:12px
}
.fw-hp-dr__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:2px
}
.fw-hp-dr__tabs-track::-webkit-scrollbar{display:none}
.fw-hp-dr__tab{
display:inline-flex;align-items:center;gap:6px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-dr__tab:hover{
border-color:var(--bl);color:var(--bl);background:var(--bl-bg)
}
.fw-hp-dr__tab-icon{
width:15px;height:15px;flex-shrink:0;object-fit:contain;
transition:filter .25s;
filter:brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(300%) hue-rotate(180deg)
}
.fw-hp-dr__tab:hover .fw-hp-dr__tab-icon{
filter:brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(1200%) hue-rotate(190deg)
}
.fw-hp-dr__tab.active{
background:var(--bl);border-color:var(--bl);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(20,120,200,.22)
}
.fw-hp-dr__tab.active .fw-hp-dr__tab-icon{
filter:brightness(0) invert(1)
}
.fw-hp-dr__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-dr__tab.active .fw-hp-dr__tab-count{
background:rgba(255,255,255,.22)
}
.fw-hp-dr__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-dr__arrow{
width:34px;height:34px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--g6);
transition:all .2s;background:var(--wh)
}
.fw-hp-dr__arrow:hover{
background:var(--bl);color:var(--wh);border-color:var(--bl)
}
.fw-hp-dr__arrow.swiper-button-disabled{opacity:.3;pointer-events:none}


/* ── Swiper container ── */
.fw-hp-dr .swiper{
padding:6px 28px 10px;overflow:visible
}
.fw-hp-dr .swiper-slide{
width:244px;height:auto;position:relative;
transition:opacity .4s ease,transform .4s ease
}
.fw-hp-dr .swiper-slide.hiding{
opacity:0;transform:scale(.96)
}


/* ── Skeleton ── (absolute overlay so card doesn't shift) */
@keyframes fw-hp-dr-shimmer{
0%{background-position:-400px 0}
100%{background-position:400px 0}
}
.fw-hp-dr__skel{
background:linear-gradient(90deg,var(--g1) 25%,var(--g2) 50%,var(--g1) 75%);
background-size:800px 100%;
animation:fw-hp-dr-shimmer 1.5s ease infinite
}
.fw-hp-dr__skel--img{
height:280px;border-radius:var(--rx) var(--rx) 0 0
}
.fw-hp-dr__skel--text{
height:12px;border-radius:6px;margin-bottom:10px
}
.fw-hp-dr__skel--text.w70{width:70%}
.fw-hp-dr__skel--text.w90{width:90%}
.fw-hp-dr__skel--text.w50{width:50%}
.fw-hp-dr__card-skel{
position:absolute;inset:0;z-index:5;
border-radius:var(--rx);overflow:hidden;
background:var(--wh);border:1px solid rgba(15,23,42,.06);
transition:opacity .35s ease,visibility .35s ease
}
.fw-hp-dr__card-skel .body{padding:16px}
.fw-hp-dr.loaded .fw-hp-dr__card-skel{opacity:0;visibility:hidden;pointer-events:none}
.fw-hp-dr:not(.loaded) .fw-hp-dr__card{opacity:0}
.fw-hp-dr.loaded .fw-hp-dr__card{opacity:1}


/* ── Doctor card ── */
.fw-hp-dr__card{
height:100%;border-radius:var(--rx);overflow:hidden;
background:var(--wh);display:flex;flex-direction:column;
transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s;
border:1px solid rgba(15,23,42,.06);
position:relative
}
.fw-hp-dr__card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(15,23,42,.10);
border-color:transparent
}

/* Portrait image — tall, premium framing */
.fw-hp-dr__card-img{
position:relative;height:280px;overflow:hidden;display:block
}
.fw-hp-dr__card-img > img{
width:100%;height:100%;object-fit:cover;object-position:center 20%;
transition:transform .6s cubic-bezier(.22,1,.36,1)
}
.fw-hp-dr__card:hover .fw-hp-dr__card-img > img{
transform:scale(1.05)
}
/* Bottom gradient — improves readability of bottom-placed chips */
.fw-hp-dr__card-img::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:55%;
background:linear-gradient(to top,rgba(15,23,42,.50) 0%,rgba(15,23,42,.05) 70%,transparent 100%);
pointer-events:none
}

/* Specialty tag (top-left) — color-coded per vertical */
.fw-hp-dr__card-tag{
position:absolute;top:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:100px;
font-size:10px;font-weight:700;color:var(--wh);
text-transform:uppercase;letter-spacing:.5px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.16)
}
.fw-hp-dr__card-tag-icon{
width:12px;height:12px;object-fit:contain;flex-shrink:0;
filter:brightness(0) invert(1)
}
.fw-hp-dr__card-tag--fertility{background:rgba(233,52,138,.95);box-shadow:0 2px 8px rgba(233,52,138,.32)}
.fw-hp-dr__card-tag--maternity{background:rgba(240,115,78,.95);box-shadow:0 2px 8px rgba(240,115,78,.32)}
.fw-hp-dr__card-tag--gyno{background:rgba(20,120,200,.95);box-shadow:0 2px 8px rgba(20,120,200,.32)}
.fw-hp-dr__card-tag--pediatric{background:rgba(56,181,142,.95);box-shadow:0 2px 8px rgba(56,181,142,.32)}

/* Rating pill (top-right) */
.fw-hp-dr__card-rate{
position:absolute;top:11px;right:11px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:100px;
font-size:11.5px;font-weight:700;color:var(--dk);
background:rgba(255,255,255,.96);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 8px rgba(15,23,42,.12)
}
.fw-hp-dr__card-rate i{font-size:10px;color:var(--go);line-height:1}
.fw-hp-dr__card-rate em{
font-style:normal;font-size:10px;font-weight:600;
color:var(--g4);letter-spacing:.1px;margin-left:1px
}

/* "FW Verified" pro chip (bottom of image) — every doctor is FW-vetted */
.fw-hp-dr__card-pro{
position:absolute;bottom:11px;left:11px;z-index:2;
display:inline-flex;align-items:center;gap:4px;
padding:4px 9px;border-radius:6px;
font-size:9.5px;font-weight:700;color:var(--wh);
background:rgba(20,120,200,.92);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
text-transform:uppercase;letter-spacing:.4px;
box-shadow:0 2px 8px rgba(20,120,200,.32)
}
.fw-hp-dr__card-pro i{font-size:11px;line-height:1}


/* ── Card body ── */
.fw-hp-dr__card-body{
padding:14px 14px 14px;flex:1;display:flex;flex-direction:column
}

/* Doctor name */
.fw-hp-dr__card-name{
font-family:var(--ff);
font-size:15px;font-weight:700;
color:var(--dk);line-height:1.3;
margin-bottom:2px;letter-spacing:-.15px;
transition:color .3s
}
.fw-hp-dr__card:hover .fw-hp-dr__card-name{color:var(--bl)}

/* Specialty line */
.fw-hp-dr__card-spec{
font-size:11.5px;font-weight:600;color:var(--bl);
margin-bottom:4px;letter-spacing:-.1px
}

/* Qualifications — quieter, smaller */
.fw-hp-dr__card-qual{
font-size:10.5px;font-weight:500;color:var(--g5);
margin-bottom:12px;letter-spacing:.1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

/* Stats — inline experience + patients */
.fw-hp-dr__card-meta{
display:flex;align-items:center;gap:10px;
padding:8px 0;margin-bottom:10px;
border-top:1px solid var(--g1);border-bottom:1px solid var(--g1)
}
.fw-hp-dr__card-stat{
flex:1;display:inline-flex;align-items:center;gap:5px;
font-size:10.5px;color:var(--g6);letter-spacing:.1px
}
.fw-hp-dr__card-stat i{font-size:11px;color:var(--bl);line-height:1}
.fw-hp-dr__card-stat b{font-size:11px;font-weight:700;color:var(--dk)}
.fw-hp-dr__card-stat-sep{
width:1px;height:14px;background:var(--g2);flex-shrink:0
}

/* Languages — small chips with flag + code */
.fw-hp-dr__card-langs{
display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px
}
.fw-hp-dr__card-lang{
display:inline-flex;align-items:center;gap:4px;
padding:2px 7px;border-radius:6px;
font-size:9.5px;font-weight:600;color:var(--g6);
background:var(--g0);letter-spacing:.3px
}
.fw-hp-dr__card-lang img{
border-radius:2px;flex-shrink:0;display:inline-block
}

/* CTA — primary blue (matches doctor section accent) */
.fw-hp-dr__card-cta{
display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:10px 16px;border-radius:10px;
font-size:12.5px;font-weight:600;color:var(--wh);
background:var(--bl);
transition:background .25s,gap .25s,box-shadow .25s;
margin-top:auto
}
.fw-hp-dr__card-cta:hover{background:var(--bl-d);gap:9px;box-shadow:0 4px 14px rgba(20,120,200,.3)}
.fw-hp-dr__card-cta i{font-size:11px;transition:transform .2s}
.fw-hp-dr__card-cta:hover i{transform:translateX(2px)}


/* ── Responsive ── */
@media(max-width:1366px){
.fw-hp-dr__title{font-size:26px}
.fw-hp-dr .swiper-slide{width:232px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:260px}
}
@media(max-width:1024px){
.fw-hp-dr{padding:36px 0 40px}
.fw-hp-dr__title{font-size:23px}
.fw-hp-dr .swiper-slide{width:222px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:248px}
}
@media(max-width:768px){
.fw-hp-dr{padding:30px 0 34px}
.fw-hp-dr__top{padding:0 14px;margin-bottom:14px}
.fw-hp-dr__title{font-size:21px}
.fw-hp-dr__see-all{font-size:12px}
.fw-hp-dr__nav{padding:0 14px;margin-bottom:18px}
.fw-hp-dr__arrows{display:none}
.fw-hp-dr__tab{padding:6px 12px;font-size:11px;gap:5px}
.fw-hp-dr .swiper{padding:6px 14px 8px}
.fw-hp-dr .swiper-slide{width:210px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:228px}
.fw-hp-dr__card-name{font-size:13.5px}
.fw-hp-dr__card-spec{font-size:11px}
.fw-hp-dr__card-qual{font-size:9.5px}
.fw-hp-dr__card-tag{font-size:9.5px;padding:3px 9px}
}
@media(max-width:480px){
.fw-hp-dr{padding:24px 0 28px}
.fw-hp-dr__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-dr__title{font-size:18px}
.fw-hp-dr__see-all span{display:none}
.fw-hp-dr__nav{margin-bottom:14px}
.fw-hp-dr__tab{padding:5px 10px;font-size:10px}
.fw-hp-dr .swiper-slide{width:192px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:204px}
.fw-hp-dr__card-rate{font-size:10.5px;padding:3px 8px}
.fw-hp-dr__card-rate em{font-size:9px}
.fw-hp-dr__card-body{padding:12px 12px 12px}
.fw-hp-dr__card-name{font-size:13px}
.fw-hp-dr__card-spec{font-size:10.5px}
.fw-hp-dr__card-qual{font-size:9px;margin-bottom:10px}
.fw-hp-dr__card-meta{padding:6px 0;margin-bottom:8px}
.fw-hp-dr__card-stat{font-size:9.5px}
.fw-hp-dr__card-stat b{font-size:10px}
.fw-hp-dr__card-langs{gap:4px;margin-bottom:10px}
.fw-hp-dr__card-lang{font-size:9px;padding:2px 6px}
.fw-hp-dr__card-cta{padding:9px 14px;font-size:11.5px}
}
@media(max-width:360px){
.fw-hp-dr{padding:20px 0 24px}
.fw-hp-dr__top{padding:0 10px;margin-bottom:10px}
.fw-hp-dr__title{font-size:16px}
.fw-hp-dr__label{display:none}
.fw-hp-dr__nav{padding:0 10px;margin-bottom:12px}
.fw-hp-dr__tab{padding:4px 8px;font-size:9px}
.fw-hp-dr__tab-count{display:none}
.fw-hp-dr .swiper{padding:6px 10px 8px}
.fw-hp-dr .swiper-slide{width:170px}
.fw-hp-dr__card-img,.fw-hp-dr__skel--img{height:184px}
.fw-hp-dr__card-meta{flex-wrap:wrap;gap:6px}
.fw-hp-dr__card-stat-sep{display:none}
}

/* Entrance — opacity-only fade-in matching clinic.
   (Skeleton overlays the card so no slide-up needed.) */
.fw-hp-dr__card{
transition:opacity .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-dr.in-view .swiper-slide:nth-child(1) .fw-hp-dr__card{transition-delay:.03s}
.fw-hp-dr.in-view .swiper-slide:nth-child(2) .fw-hp-dr__card{transition-delay:.06s}
.fw-hp-dr.in-view .swiper-slide:nth-child(3) .fw-hp-dr__card{transition-delay:.09s}
.fw-hp-dr.in-view .swiper-slide:nth-child(4) .fw-hp-dr__card{transition-delay:.12s}
.fw-hp-dr.in-view .swiper-slide:nth-child(5) .fw-hp-dr__card{transition-delay:.15s}
.fw-hp-dr.in-view .swiper-slide:nth-child(6) .fw-hp-dr__card{transition-delay:.18s}
.fw-hp-dr.in-view .swiper-slide:nth-child(7) .fw-hp-dr__card{transition-delay:.21s}
.fw-hp-dr.in-view .swiper-slide:nth-child(8) .fw-hp-dr__card{transition-delay:.24s}
.fw-hp-dr__top,.fw-hp-dr__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-dr.in-view .fw-hp-dr__top,.fw-hp-dr.in-view .fw-hp-dr__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-dr.in-view .fw-hp-dr__nav{transition-delay:.05s}




/* ═══════════════════════════════════════════════════════════
   HOMEPAGE LOCATION SECTION (fw-hp-loc)
   ─ Native CSS scroll-snap horizontal scroller (NOT Swiper)
     so end-of-list scroll respects content width exactly — no
     extra whitespace gap when navigating to the last column.
   ─ 2 rows via CSS Grid (`grid-template-rows: repeat(2,…)`).
   ─ Cards: Airbnb-style — image hero on top, clean body below.
     Brand color appears only in section title; everything else
     is neutral/dark to keep the premium international feel.
   ═══════════════════════════════════════════════════════════ */

.fw-hp-loc{
padding:50px 0 54px;
position:relative;
overflow:hidden;
background:var(--wh)
}


/* ── Section header ── */
.fw-hp-loc__top{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px
}
.fw-hp-loc__label{
display:inline-flex;align-items:center;gap:8px;
font-size:10.5px;font-weight:600;text-transform:uppercase;
letter-spacing:2.5px;color:var(--go-d);margin-bottom:10px
}
.fw-hp-loc__label span{
width:20px;height:1.5px;background:var(--go-d);border-radius:2px
}
.fw-hp-loc__head-row{
display:flex;align-items:center;justify-content:space-between;gap:16px
}
.fw-hp-loc__title{
font-family:var(--ff);
font-size:30px;font-weight:700;
color:var(--dk);line-height:1.15;letter-spacing:-.4px
}
/* Brand color reserved exclusively for the title em */
.fw-hp-loc__title em{
font-style:normal;color:var(--go-d);
font-family:'Outfit',sans-serif
}
.fw-hp-loc__see-all{
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:600;color:var(--dk);
white-space:nowrap;flex-shrink:0;
transition:gap .25s,color .25s
}
.fw-hp-loc__see-all:hover{color:var(--g7);gap:9px}
.fw-hp-loc__see-all i{font-size:11px;transition:transform .25s}
.fw-hp-loc__see-all:hover i{transform:translateX(2px)}


/* ── Filter tabs + scroller arrows ── */
.fw-hp-loc__nav{
position:relative;z-index:1;
padding:0 28px;margin-bottom:22px;
display:flex;align-items:center;gap:12px
}
.fw-hp-loc__tabs-track{
display:flex;gap:8px;overflow-x:auto;flex:1;
scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px
}
.fw-hp-loc__tabs-track::-webkit-scrollbar{display:none}
.fw-hp-loc__tab{
display:inline-flex;align-items:center;gap:7px;
padding:7px 16px;font-size:12px;font-weight:500;
color:var(--g6);background:var(--wh);
border:1.5px solid var(--g2);border-radius:100px;
white-space:nowrap;transition:all .25s;flex-shrink:0
}
.fw-hp-loc__tab i{font-size:13px;line-height:1}
.fw-hp-loc__tab-flag{
border-radius:2px;flex-shrink:0;display:inline-block;
box-shadow:0 0 0 1px rgba(0,0,0,.05)
}
.fw-hp-loc__tab:hover{
border-color:var(--g4);color:var(--dk);background:var(--g0)
}
/* Active tab is dark — brand color stays only in the title. */
.fw-hp-loc__tab.active{
background:var(--dk);border-color:var(--dk);color:var(--wh);
font-weight:600;box-shadow:0 4px 14px rgba(15,23,42,.18)
}
.fw-hp-loc__tab-count{
font-size:9.5px;font-weight:700;
background:rgba(0,0,0,.06);padding:1px 6px;border-radius:100px
}
.fw-hp-loc__tab.active .fw-hp-loc__tab-count{
background:rgba(255,255,255,.22)
}
.fw-hp-loc__arrows{display:flex;gap:6px;flex-shrink:0}
.fw-hp-loc__arrow{
width:36px;height:36px;border-radius:50%;
border:1.5px solid var(--g3);
display:flex;align-items:center;justify-content:center;
font-size:13px;color:var(--g7);
transition:all .2s;background:var(--wh);cursor:pointer
}
.fw-hp-loc__arrow:hover{
background:var(--dk);color:var(--wh);border-color:var(--dk)
}
.fw-hp-loc__arrow:disabled{opacity:.35;pointer-events:none}


/* ── Native scroll container — CSS Grid, 2 rows, horizontal scroll-snap ── */
.fw-hp-loc__scroller{
display:grid;
grid-template-rows:repeat(2,200px);
grid-auto-flow:column;
grid-auto-columns:228px;
column-gap:16px;
row-gap:16px;
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
padding:4px 28px 16px;
/* Ensure the last card has a bit of trailing breathing room — but
   nothing crazy. This is what prevents the "whitespace at the end"
   issue: the scroller is sized to its content, no Swiper miscalc. */
scroll-padding-left:28px
}
.fw-hp-loc__scroller::-webkit-scrollbar{display:none}


/* ── Premium destination card (Airbnb-style) ── */
.fw-hp-loc__card{
display:flex;flex-direction:column;
height:100%;border-radius:16px;overflow:hidden;
background:var(--wh);border:1px solid var(--g2);
transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),border-color .3s;
scroll-snap-align:start;
text-decoration:none;color:inherit
}
.fw-hp-loc__card:hover{
transform:translateY(-4px);
box-shadow:0 16px 36px rgba(15,23,42,.12);
border-color:var(--g3)
}

/* Image hero — full-width, generous height, with neutral pin-icon
   fallback that shows if the city <img> 404s (img has onerror→opacity:0). */
.fw-hp-loc__card-img{
position:relative;height:132px;overflow:hidden;
background-color:var(--g1);
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2394A3B8'%3E%3Cpath d='M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:center;
background-size:36px
}
.fw-hp-loc__card-img > img{
position:relative;z-index:1;
width:100%;height:100%;object-fit:cover;
transition:transform .65s cubic-bezier(.22,1,.36,1)
}
.fw-hp-loc__card:hover .fw-hp-loc__card-img > img{
transform:scale(1.08)
}
/* Soft top gradient — makes the flag chip pop without a hard edge */
.fw-hp-loc__card-img::after{
content:'';position:absolute;left:0;right:0;top:0;height:40%;
background:linear-gradient(to bottom,rgba(15,23,42,.18) 0%,transparent 100%);
pointer-events:none;z-index:2
}

/* Country flag chip — top-right, premium glass look */
.fw-hp-loc__card-flag{
position:absolute;top:10px;right:10px;z-index:3;
display:inline-flex;
padding:3px 6px;border-radius:6px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
box-shadow:0 2px 6px rgba(15,23,42,.18);line-height:1
}
.fw-hp-loc__card-flag img{
display:block;border-radius:2px
}

/* Card body — generous padding, premium typography */
.fw-hp-loc__card-body{
padding:14px 16px 16px;flex:1;
display:flex;flex-direction:column;justify-content:center;gap:5px;
min-width:0
}
.fw-hp-loc__card-name{
font-family:var(--ff);
font-size:16px;font-weight:700;
color:var(--dk);line-height:1.2;letter-spacing:-.3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-loc__card-meta{
font-size:11.5px;font-weight:500;color:var(--g5);letter-spacing:.1px;
display:inline-flex;align-items:center;gap:4px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.fw-hp-loc__card-meta b{font-weight:700;color:var(--dk)}
.fw-hp-loc__card-meta i{font-size:10px;color:var(--go);line-height:1;margin:0 1px 0 3px}
.fw-hp-loc__card-dot{
display:inline-block;width:3px;height:3px;border-radius:50%;
background:var(--g3);flex-shrink:0;margin:0 3px
}


/* ── Filter hiding (display:none, CSS Grid auto-reflows columns) ── */
.fw-hp-loc__card.is-hidden{display:none}


/* ── Responsive ── */
@media(max-width:1366px){
.fw-hp-loc__title{font-size:28px}
.fw-hp-loc__scroller{
grid-template-rows:repeat(2,194px);grid-auto-columns:220px
}
.fw-hp-loc__card-img{height:128px}
}
@media(max-width:1024px){
.fw-hp-loc{padding:42px 0 46px}
.fw-hp-loc__title{font-size:24px}
.fw-hp-loc__scroller{
grid-template-rows:repeat(2,184px);grid-auto-columns:208px
}
.fw-hp-loc__card-img{height:120px}
}
@media(max-width:768px){
.fw-hp-loc{padding:34px 0 38px}
.fw-hp-loc__top{padding:0 14px;margin-bottom:14px}
.fw-hp-loc__title{font-size:22px}
.fw-hp-loc__see-all{font-size:12px}
.fw-hp-loc__nav{padding:0 14px;margin-bottom:18px}
.fw-hp-loc__arrows{display:none}
.fw-hp-loc__tab{padding:6px 12px;font-size:11px;gap:6px}
.fw-hp-loc__scroller{
padding:4px 14px 14px;
grid-template-rows:repeat(2,176px);grid-auto-columns:196px;
column-gap:12px;row-gap:12px;
scroll-padding-left:14px
}
.fw-hp-loc__card-img{height:112px}
.fw-hp-loc__card-body{padding:12px 14px 14px}
.fw-hp-loc__card-name{font-size:15px}
.fw-hp-loc__card-meta{font-size:11px}
}
@media(max-width:480px){
.fw-hp-loc{padding:28px 0 32px}
.fw-hp-loc__label{font-size:9px;letter-spacing:2px;margin-bottom:7px}
.fw-hp-loc__title{font-size:19px}
.fw-hp-loc__see-all span{display:none}
.fw-hp-loc__nav{margin-bottom:14px}
.fw-hp-loc__tab{padding:5px 10px;font-size:10px}
.fw-hp-loc__scroller{
grid-template-rows:repeat(2,166px);grid-auto-columns:178px;
column-gap:10px;row-gap:10px
}
.fw-hp-loc__card-img{height:104px;background-size:30px}
.fw-hp-loc__card-body{padding:10px 12px 12px}
.fw-hp-loc__card-name{font-size:14px}
.fw-hp-loc__card-meta{font-size:10.5px}
}
@media(max-width:360px){
.fw-hp-loc{padding:24px 0 28px}
.fw-hp-loc__top{padding:0 10px;margin-bottom:10px}
.fw-hp-loc__title{font-size:17px}
.fw-hp-loc__label{display:none}
.fw-hp-loc__nav{padding:0 10px;margin-bottom:12px}
.fw-hp-loc__tab{padding:4px 8px;font-size:9px}
.fw-hp-loc__tab-count{display:none}
.fw-hp-loc__scroller{
padding:4px 10px 12px;
grid-template-rows:repeat(2,150px);grid-auto-columns:160px;
column-gap:8px;row-gap:8px;
scroll-padding-left:10px
}
.fw-hp-loc__card-img{height:90px;background-size:24px}
.fw-hp-loc__card-body{padding:8px 10px 10px}
.fw-hp-loc__card-name{font-size:13.5px}
.fw-hp-loc__card-meta{font-size:10px}
}


/* ── Entrance fade ── */
.fw-hp-loc__card{opacity:0}
.fw-hp-loc.in-view .fw-hp-loc__card{
opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1)
}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(1){transition-delay:.02s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(2){transition-delay:.04s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(3){transition-delay:.06s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(4){transition-delay:.08s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(5){transition-delay:.10s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(6){transition-delay:.12s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(7){transition-delay:.14s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(8){transition-delay:.16s}
.fw-hp-loc.in-view .fw-hp-loc__card:nth-child(n+9){transition-delay:.18s}
.fw-hp-loc__top,.fw-hp-loc__nav{
opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s
}
.fw-hp-loc.in-view .fw-hp-loc__top,.fw-hp-loc.in-view .fw-hp-loc__nav{
opacity:1;transform:translateY(0)
}
.fw-hp-loc.in-view .fw-hp-loc__nav{transition-delay:.05s}