:root {
      --g900: #052e1c;
      --g800: #0a5e3a;
      --g700: #0c8855;
      --g600: #12a86a;
      --g500: #1ec97f;
      --g400: #0c8855;
      --g300: #0a5e3a;
      --g200: #b4f1d8;
      --g100: #d5f7e8;
      --g50: #f0faf5;
      --d950: #0c1a12;
      --d900: #ffffff;
      --d800: #f8faf9;
      --d700: #ffffff;
      --d600: #f3f5f4;
      --d500: #eaedeb;
      --t50: rgba(0, 0, 0, .03);
      --t100: rgba(0, 0, 0, .06);
      --t200: rgba(0, 0, 0, .1);
      --t300: rgba(0, 0, 0, .2);
      --t400: rgba(0, 0, 0, .45);
      --t500: rgba(0, 0, 0, .55);
      --t600: rgba(0, 0, 0, .7);
      --t700: rgba(0, 0, 0, .85);
      --t800: #1a1c1e;
      --font: 'Inter', system-ui, sans-serif;
      --serif: 'Source Serif 4', Georgia, serif;
      --r-sm: 8px;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 20px;
      --r-2xl: 28px;
      --r-full: 9999px;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased
    }

    body {
      font-family: var(--font);
      background: var(--d900);
      color: var(--t500);
      line-height: 1.65;
      overflow-x: hidden
    }

    ::-webkit-scrollbar {
      width: 5px
    }

    ::-webkit-scrollbar-track {
      background: #f5f5f5
    }

    ::-webkit-scrollbar-thumb {
      background: var(--g600);
      border-radius: 3px
    }

    .skip {
      position: absolute;
      top: -60px;
      left: 16px;
      background: var(--g600);
      color: #fff;
      padding: 10px 20px;
      border-radius: 0 0 8px 8px;
      font-weight: 600;
      z-index: 9999;
      transition: top .2s;
      text-decoration: none
    }

    .skip:focus {
      top: 0
    }

    /* NAV */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      transition: all .35s
    }

    #nav .ni {
      padding: 0 clamp(20px, 4vw, 48px);
      transition: all .35s;
      border-bottom: 1px solid transparent
    }

    #nav:not(.scrolled) .logo-t {
      color: #fff
    }

    #nav:not(.scrolled) .logo-sub {
      color: rgba(255, 255, 255, .5)
    }

    #nav:not(.scrolled) .nlinks a {
      color: rgba(255, 255, 255, .6)
    }

    #nav:not(.scrolled) .nlinks a:hover {
      color: #fff;
      background: rgba(255, 255, 255, .1)
    }

    #nav:not(.scrolled) .nbtn {
      color: rgba(255, 255, 255, .7)
    }

    #nav:not(.scrolled) .nbtn:hover {
      color: #fff;
      background: rgba(255, 255, 255, .1)
    }

    #nav:not(.scrolled) .nsrch {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .12);
      color: rgba(255, 255, 255, .5)
    }

    #nav:not(.scrolled) .burg span {
      background: #fff
    }

    #nav.scrolled .ni {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(16px) saturate(1.3);
      border-color: var(--t100);
      box-shadow: 0 1px 8px rgba(0, 0, 0, .06)
    }

    .nw {
      max-width: 1320px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none
    }

    .logo-m {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s;
      flex-shrink: 0;
      position: relative
    }

    .logo-m img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      position: absolute;
      inset: 0;
      transition: opacity .3s
    }

    .logo-m .logo-light {
      opacity: 1
    }

    .logo-m .logo-dark {
      opacity: 0
    }

    #nav.scrolled .logo-m .logo-light {
      opacity: 0
    }

    #nav.scrolled .logo-m .logo-dark {
      opacity: 1
    }

    .logo:hover .logo-m {
      transform: scale(1.06) rotate(-3deg)
    }

    .logo-t {
      font-family: var(--serif);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--t800)
    }

    .logo-t em {
      font-style: normal;
      color: var(--g400)
    }

    .logo-sub {
      font-size: .65rem;
      color: var(--t400);
      display: block;
      margin-top: -2px;
      letter-spacing: .04em;
      white-space: nowrap
    }

    .nlinks {
      display: flex;
      align-items: center;
      gap: 4px
    }

    .nlinks a {
      font-size: .82rem;
      font-weight: 500;
      color: var(--t500);
      text-decoration: none;
      transition: all .2s;
      padding: 6px 9px;
      border-radius: var(--r-md);
      white-space: nowrap
    }

    .nlinks a:hover {
      color: var(--t800);
      background: var(--t50)
    }

    .nlinks a[aria-current="page"] {
      color: var(--g700);
      background: var(--g50);
      font-weight: 600;
    }

    #nav:not(.scrolled) .nlinks a[aria-current="page"] {
      color: #fff;
      background: rgba(255, 255, 255, .14);
    }

    #mmenu a[aria-current="page"] {
      color: var(--g700);
      background: var(--g50);
      font-weight: 600;
    }

    .ncta {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .nsrch {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--t50);
      border: 1px solid var(--t100);
      border-radius: var(--r-md);
      padding: 6px 14px;
      font-size: .78rem;
      color: var(--t400);
      cursor: pointer;
      transition: all .2s
    }

    .nsrch:hover {
      border-color: var(--t200);
      background: var(--t100)
    }

    .nsrch svg {
      opacity: .5
    }

    .nbtn {
      font-size: .78rem;
      font-weight: 500;
      color: var(--t600);
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px 12px;
      border-radius: var(--r-md);
      transition: all .2s;
      text-decoration: none
    }

    .nbtn:hover {
      color: var(--t800);
      background: var(--t50)
    }

    .nbtn-p {
      font-size: .78rem;
      font-weight: 600;
      color: #fff;
      background: var(--g600);
      border: none;
      cursor: pointer;
      padding: 7px 18px;
      border-radius: var(--r-md);
      transition: all .2s;
      text-decoration: none
    }

    .nbtn-p:hover {
      background: var(--g700);
      transform: translateY(-1px)
    }

    .burg {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      border-radius: var(--r-sm);
      width: 38px;
      height: 38px;
      flex-direction: column;
      gap: 5px;
      align-items: center;
      justify-content: center
    }

    .burg:hover {
      background: var(--t50)
    }

    .burg span {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--t600);
      border-radius: 2px;
      transition: all .3s
    }

    .burg.open span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px)
    }

    .burg.open span:nth-child(2) {
      opacity: 0
    }

    .burg.open span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px)
    }

    #mmenu {
      display: none;
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, .98);
      backdrop-filter: blur(20px);
      padding: 16px 20px 24px;
      border-bottom: 1px solid var(--t100);
      z-index: 99;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .08)
    }

    #mmenu.open {
      display: block
    }

    #mmenu a {
      display: block;
      padding: 12px 10px;
      font-size: .95rem;
      font-weight: 500;
      color: var(--t500);
      text-decoration: none;
      border-radius: var(--r-md);
      transition: all .15s
    }

    #mmenu a:hover {
      background: var(--g50);
      color: var(--g700)
    }

    .mob-cta {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--t100);
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    @media(max-width:900px) {

      .nlinks,
      .ncta {
        display: none
      }

      .burg {
        display: flex
      }
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      padding-top: 64px;
      background: linear-gradient(160deg, #073D2A 0%, #0B5E3F 35%, #0E6B47 60%, #0A5538 100%)
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0
    }

    .hero-img {
      position: absolute;
      inset: -3%;
      width: 106%;
      height: 106%;
      object-fit: cover;
      object-position: center right;
      filter: blur(1.5px) brightness(.72) saturate(.88) contrast(.95);
      z-index: 0
    }

    .hero-veil {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(100deg, rgba(5, 46, 28, .78) 0%, rgba(7, 61, 42, .62) 35%, rgba(10, 85, 56, .28) 62%, rgba(14, 107, 71, .1) 100%), linear-gradient(180deg, rgba(5, 46, 28, .15) 0%, transparent 40%, rgba(5, 46, 28, .35) 100%)
    }

    @media(max-width:960px) {
      .hero-veil {
        background: linear-gradient(180deg, rgba(5, 46, 28, .7) 0%, rgba(7, 61, 42, .65) 50%, rgba(10, 85, 56, .55) 100%)
      }
    }

    @media(prefers-reduced-motion:no-preference) {
      .hero-img {
        transition: transform 8s ease-out
      }
    }

    .hero-ring,
    .hero-orb,
    .hero-grid-bg,
    .hero-glow {
      position: absolute;
      z-index: 2
    }

    .hero-ring {
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .hero-ring-1 {
      width: 700px;
      height: 700px;
      right: -100px;
      top: 50%;
      transform: translateY(-50%)
    }

    .hero-ring-2 {
      width: 500px;
      height: 500px;
      right: 0;
      top: 50%;
      transform: translateY(-50%)
    }

    .hero-glow {
      position: absolute;
      width: 400px;
      height: 400px;
      right: 100px;
      top: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, transparent 70%)
    }

    .hero-main {
      flex: 1;
      display: flex;
      align-items: center;
      max-width: 1320px;
      margin: 0 auto;
      width: 100%;
      padding: 60px clamp(20px, 4vw, 48px) 40px;
      gap: 80px
    }

    @media(max-width:960px) {
      .hero-main {
        flex-direction: column;
        gap: 40px;
        padding: 40px 20px 30px;
        text-align: center
      }
    }

    .hero-left {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 2
    }

    .hero-right {
      flex: 0 0 380px;
      position: relative;
      z-index: 2
    }

    @media(max-width:960px) {
      .hero-right {
        flex: none;
        width: 100%;
        max-width: 380px
      }
    }

    /* Hide demo card on mobile to prevent scroll jump from auto-search animation */
    @media(max-width:768px) {
      .hero-right {
        display: none
      }
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: var(--r-full);
      padding: 6px 16px;
      margin-bottom: 28px
    }

    .hero-badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4dd9a0;
      animation: pulse 2s ease-in-out infinite
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(.7)
      }
    }

    .hero-badge span {
      color: #b4f1d8;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase
    }

    .hero h1 {
      font-family: var(--serif);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -.02em;
      margin-bottom: 20px;
      text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 30px rgba(5, 46, 28, .7)
    }

    @media(prefers-contrast:more) {
      .hero-img {
        opacity: .2;
        filter: blur(4px) brightness(.25) saturate(.5)
      }

      .hero-sub {
        color: #fff
      }
    }

    @media(prefers-reduced-data:reduce) {
      .hero-img {
        display: none
      }
    }

    .hero h1 em {
      font-style: normal;
      color: #4dd9a0;
      display: block
    }

    .hero-sub {
      color: rgba(255, 255, 255, .92);
      font-size: .95rem;
      line-height: 1.8;
      margin-bottom: 32px;
      max-width: 460px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(5, 46, 28, .6)
    }

    @media(max-width:960px) {
      .hero-sub {
        margin: 0 auto 32px
      }
    }

    /* Feature badges */
    .hero-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 20px;
      margin-bottom: 32px;
      max-width: 400px
    }

    @media(max-width:960px) {
      .hero-features {
        margin: 0 auto 32px;
        max-width: 360px
      }
    }

    .hf {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .hf-ico {
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hf-ico svg {
      color: #4dd9a0
    }

    .hf span {
      font-size: .82rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .8)
    }

    /* CTAs */
    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 24px
    }

    @media(max-width:960px) {
      .hero-ctas {
        justify-content: center
      }
    }

    .btn-main {
      background: #fff;
      color: var(--g800);
      font-weight: 700;
      font-size: .88rem;
      padding: 13px 28px;
      border-radius: var(--r-lg);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .15)
    }

    .btn-main:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .2)
    }

    .btn-sec {
      background: transparent;
      color: rgba(255, 255, 255, .85);
      font-weight: 600;
      font-size: .88rem;
      padding: 12px 26px;
      border-radius: var(--r-lg);
      border: 1.5px solid rgba(255, 255, 255, .2);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
      text-decoration: none
    }

    .btn-sec:hover {
      border-color: rgba(255, 255, 255, .5);
      color: #fff;
      transform: translateY(-2px)
    }

    .hero-version {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center
    }

    @media(max-width:960px) {
      .hero-version {
        justify-content: center
      }
    }

    .hv-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: var(--r-full);
      padding: 4px 12px;
      font-size: .68rem;
      color: rgba(255, 255, 255, .5);
      font-weight: 500
    }

    .hv-tag svg {
      width: 12px;
      height: 12px;
      opacity: .6
    }

    /* Demo Card */
    .hcard {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: var(--r-2xl);
      padding: 24px;
      width: 100%;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
      animation: hfloat 6s ease-in-out infinite
    }

    @keyframes hfloat {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-8px)
      }
    }

    .hc-lbl {
      font-size: .65rem;
      font-weight: 600;
      color: var(--t300);
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 10px
    }

    .hc-inp-w {
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--g50);
      border: 1px solid var(--g100);
      border-radius: var(--r-md);
      padding: 10px 14px;
      margin-bottom: 12px
    }

    .hc-inp {
      background: none;
      border: none;
      outline: none;
      color: var(--t800);
      font-size: .85rem;
      font-family: var(--font);
      flex: 1
    }

    .hc-inp::placeholder {
      color: var(--t300)
    }

    .hc-cursor {
      width: 2px;
      height: 16px;
      background: var(--g600);
      border-radius: 1px;
      animation: blink 1s step-end infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    .hcres {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: var(--r-md);
      position: relative;
      margin-bottom: 5px
    }

    .hcres.best {
      background: var(--g50);
      border: 1px solid var(--g100)
    }

    .hcres:not(.best) {
      background: var(--t50)
    }

    .hcr-ico {
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .hcr-name {
      font-size: .78rem;
      font-weight: 600;
      color: var(--t800)
    }

    .hcr-addr {
      font-size: .68rem;
      color: var(--t400);
      margin-top: 1px
    }

    .hcr-price {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--g700);
      margin-left: auto;
      white-space: nowrap
    }

    .hcr-price small {
      font-size: .58rem;
      color: var(--t400);
      font-family: var(--font);
      font-weight: 400
    }

    .hcr-best {
      position: absolute;
      top: 4px;
      right: 7px;
      background: var(--g600);
      color: #fff;
      font-size: .58rem;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: var(--r-full)
    }

    .hc-map {
      border-radius: var(--r-md);
      height: 110px;
      position: relative;
      overflow: hidden;
      margin-top: 8px;
      border: 1px solid rgba(0, 0, 0, .06)
    }

    .hc-map .leaflet-container {
      height: 100%;
      width: 100%;
      border-radius: var(--r-md)
    }

    .hc-map .leaflet-control-zoom,
    .hc-map .leaflet-control-attribution {
      display: none !important
    }

    /* Stats Row */
    .hero-stats-row {
      background: #fff;
      border-top: 1px solid rgba(0, 0, 0, .06);
      padding: 0 clamp(20px, 4vw, 48px);
      position: relative;
      z-index: 2
    }

    .stats-inner {
      max-width: 1320px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0
    }

    @media(max-width:700px) {
      .stats-inner {
        grid-template-columns: 1fr 1fr
      }
    }

    .stat-card {
      padding: 28px 24px;
      text-align: center;
      border-right: 1px solid rgba(0, 0, 0, .06);
      transition: background .2s
    }

    .stat-card:last-child {
      border-right: none
    }

    @media(max-width:700px) {
      .stat-card:nth-child(2) {
        border-right: none
      }

      .stat-card:nth-child(3),
      .stat-card:nth-child(4) {
        border-top: 1px solid rgba(0, 0, 0, .06)
      }
    }

    .stat-card:hover {
      background: var(--g50)
    }

    .sc-n {
      font-family: var(--serif);
      font-size: clamp(1.6rem, 2.5vw, 2rem);
      font-weight: 700;
      color: var(--g700);
      line-height: 1
    }

    .sc-l {
      font-size: .78rem;
      color: var(--t400);
      margin-top: 6px
    }

    /* SECTIONS */
    .sec {
      padding: 100px clamp(20px, 4vw, 48px)
    }

    .sec-alt {
      background: #f8faf9
    }

    .sec-dark {
      background: var(--d950);
      padding: 100px clamp(20px, 4vw, 48px);
      position: relative;
      overflow: hidden
    }

    .si {
      max-width: 1320px;
      margin: 0 auto
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(18, 168, 106, .08);
      color: var(--g400);
      border: 1px solid rgba(18, 168, 106, .15);
      border-radius: var(--r-full);
      padding: 5px 14px;
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 16px
    }

    .sh2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 700;
      color: var(--t800);
      line-height: 1.2;
      letter-spacing: -.015em;
      margin-bottom: 14px
    }

    .ssub {
      color: var(--t400);
      font-size: .95rem;
      line-height: 1.7;
      max-width: 500px;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 48px
    }

    /* SEARCH */
    .sbox {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: var(--r-2xl);
      padding: 24px 28px;
      transition: all .2s;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .04)
    }

    .sbox:focus-within {
      border-color: var(--g600);
      box-shadow: 0 0 0 4px rgba(18, 168, 106, .06)
    }

    .srow {
      display: flex;
      gap: 10px;
      margin-bottom: 10px
    }

    @media(max-width:600px) {
      .srow {
        flex-direction: column
      }
    }

    .sinw {
      flex: 1;
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f7f8f7;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-md);
      padding: 11px 14px;
      transition: all .2s
    }

    .sinw:focus-within {
      border-color: var(--g600);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(18, 168, 106, .08)
    }

    .sico {
      flex-shrink: 0;
      color: var(--t400)
    }

    .sinput {
      background: none;
      border: none;
      outline: none;
      font-size: .9rem;
      font-family: var(--font);
      color: var(--t800);
      flex: 1
    }

    .sinput::placeholder {
      color: var(--t400)
    }

    .sclear {
      background: var(--t100);
      border: none;
      border-radius: 6px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      display: none;
      align-items: center;
      justify-content: center;
      color: var(--t500);
      flex-shrink: 0;
      font-size: .75rem;
      transition: all .15s
    }

    .sclear:hover {
      background: var(--t200);
      color: var(--t800)
    }

    .sbtn {
      background: var(--g600);
      color: #fff;
      font-weight: 600;
      font-size: .9rem;
      padding: 11px 24px;
      border-radius: var(--r-md);
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .sbtn:hover {
      background: var(--g500);
      transform: translateY(-1px)
    }

    .shint {
      font-size: .78rem;
      color: var(--t300);
      margin-bottom: 16px
    }

    .sfil {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
      border-top: 1px solid var(--t100);
      padding-top: 16px
    }

    .fg {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .flbl {
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--t400)
    }

    .fsel {
      background: #f7f8f7;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: var(--r-sm);
      padding: 7px 12px;
      font-size: .82rem;
      font-family: var(--font);
      color: var(--t600);
      cursor: pointer;
      outline: none;
      transition: border .2s
    }

    .fsel:focus {
      border-color: var(--g600)
    }

    .rw {
      flex: 1;
      min-width: 180px
    }

    .rw-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 6px
    }

    .rv {
      font-size: .85rem;
      font-weight: 700;
      color: var(--g400);
      font-variant-numeric: tabular-nums
    }

    .range-wrap {
      position: relative;
      padding: 6px 0
    }

    input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 5px;
      border-radius: 3px;
      background: var(--t100);
      cursor: pointer;
      outline: none
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 5px;
      border-radius: 3px;
      background: linear-gradient(to right, var(--g600) 0%, var(--g600) var(--fill, 21%), var(--t100) var(--fill, 21%), var(--t100) 100%)
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid var(--g600);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
      cursor: pointer;
      margin-top: -7.5px;
      transition: transform .15s
    }

    input[type=range]:hover::-webkit-slider-thumb {
      transform: scale(1.15)
    }

    .range-labels {
      display: flex;
      justify-content: space-between;
      font-size: .65rem;
      color: var(--t300);
      margin-top: 4px
    }

    .range-bubble {
      position: absolute;
      top: -28px;
      background: var(--g600);
      color: #fff;
      font-size: .7rem;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: var(--r-full);
      white-space: nowrap;
      pointer-events: none;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity .2s
    }

    .range-bubble::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid var(--g600)
    }

    input[type=range]:active~.range-bubble,
    input[type=range]:focus~.range-bubble {
      opacity: 1
    }

    .togw {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer
    }

    .togtr {
      width: 40px;
      height: 22px;
      background: rgba(0, 0, 0, .12);
      border-radius: 11px;
      position: relative;
      transition: background .25s
    }

    .togtr.on {
      background: var(--g600)
    }

    .togth {
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      transition: transform .25s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
    }

    .togtr.on .togth {
      transform: translateX(18px)
    }

    .toglt {
      font-size: .82rem;
      font-weight: 500;
      color: var(--t500)
    }

    .stags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--t100)
    }

    .taglbl {
      font-size: .7rem;
      color: var(--t300);
      width: 100%;
      margin-bottom: 2px
    }

    .tagbtn {
      background: var(--t50);
      color: var(--t500);
      font-size: .78rem;
      font-weight: 500;
      padding: 5px 12px;
      border-radius: var(--r-full);
      border: 1px solid var(--t100);
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      font-family: var(--font)
    }

    .tagbtn:hover {
      background: rgba(18, 168, 106, .1);
      color: var(--g400);
      border-color: rgba(18, 168, 106, .2)
    }

    .ac {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .1);
      border-radius: var(--r-lg);
      box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
      z-index: 200;
      overflow: hidden;
      display: none
    }

    .ac.show {
      display: block
    }

    .ac-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      cursor: pointer;
      transition: background .1s
    }

    .ac-item:hover,
    .ac-item.active {
      background: var(--g50)
    }

    .ac-ico {
      width: 30px;
      height: 30px;
      border-radius: var(--r-sm);
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .ac-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--t800)
    }

    .ac-dci {
      font-size: .7rem;
      color: var(--t400)
    }

    .ac-badge {
      margin-left: auto;
      font-size: .65rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--r-full)
    }

    .ac-ordo {
      background: rgba(245, 158, 11, .12);
      color: #f59e0b
    }

    .ac-libre {
      background: rgba(18, 168, 106, .1);
      color: var(--g400)
    }

    .ac-sep {
      padding: 5px 16px;
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--t300);
      background: #f7f8f7
    }

    /* RESULTS */
    #sres {
      display: none;
      padding: 60px clamp(20px, 4vw, 48px);
      background: #f7f8f7
    }

    .rhdr {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 24px
    }

    .rtit {
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--t800)
    }

    .rcnt {
      font-size: .85rem;
      color: var(--t400);
      margin-top: 3px
    }

    .stabs {
      display: flex;
      gap: 5px;
      flex-wrap: wrap
    }

    .stab {
      background: var(--t50);
      border: 1px solid var(--t100);
      color: var(--t400);
      font-size: .78rem;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--r-sm);
      cursor: pointer;
      transition: all .15s;
      font-family: var(--font)
    }

    .stab.act {
      background: var(--g600);
      border-color: var(--g600);
      color: #fff
    }

    .stab:hover:not(.act) {
      border-color: var(--t200);
      color: var(--t600)
    }

    .rgrid {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 16px;
      align-items: start
    }

    @media(max-width:900px) {
      .rgrid {
        grid-template-columns: 1fr
      }
    }

    .rlist {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    .rc {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-xl);
      padding: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: flex-start;
      transition: all .25s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    .rc::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: transparent;
      border-radius: 3px 0 0 3px;
      transition: background .2s
    }

    .rc:hover {
      border-color: var(--t200);
      transform: translateY(-2px)
    }

    .rc:hover::before,
    .rc.best::before {
      background: var(--g400)
    }

    .rc.best {
      border-color: rgba(18, 168, 106, .3)
    }

    .rcico {
      width: 44px;
      height: 44px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background: var(--g50);
      border: 1px solid var(--g100)
    }

    .rcbody {
      flex: 1;
      min-width: 0
    }

    .rcname {
      font-weight: 700;
      font-size: .9rem;
      color: var(--t800)
    }

    .rcaddr {
      font-size: .78rem;
      color: var(--t400);
      margin-top: 2px
    }

    .rcmeta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 8px
    }

    .bge {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: .68rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: var(--r-full)
    }

    .bgg {
      background: rgba(18, 168, 106, .08);
      color: var(--g700)
    }

    .bga {
      background: rgba(245, 158, 11, .08);
      color: #d97706
    }

    .bgr {
      background: rgba(239, 68, 68, .08);
      color: #ef4444
    }

    .bgs {
      background: rgba(0, 0, 0, .04);
      color: var(--t400)
    }

    .bgb {
      background: rgba(59, 130, 246, .08);
      color: #3b82f6
    }

    .rcright {
      text-align: right;
      flex-shrink: 0
    }

    .rcprice {
      font-family: var(--serif);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--g700);
      line-height: 1
    }

    .rcunit {
      font-size: .68rem;
      color: var(--t400)
    }

    .rcold {
      font-size: .68rem;
      color: var(--t300);
      text-decoration: line-through;
      margin-top: 2px
    }

    .rcact {
      margin-top: 8px;
      background: var(--g600);
      color: #fff;
      font-size: .78rem;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: var(--r-sm);
      border: none;
      cursor: pointer;
      transition: all .15s;
      font-family: var(--font)
    }

    .rcact:hover {
      background: var(--g500)
    }

    .rcbt {
      width: calc(100% + 36px);
      margin: -18px -18px 0;
      padding: 5px 18px;
      background: var(--g600);
      color: #fff;
      font-size: .65rem;
      font-weight: 700;
      border-radius: 0;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .altb-box {
      background: #fef3c7;
      border: 1px solid #fbbf24;
      border-radius: var(--r-xl);
      padding: 18px;
      margin-top: 6px
    }

    .alttit {
      font-weight: 700;
      color: #92400e;
      margin-bottom: 4px;
      font-size: .88rem;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .altsub {
      font-size: .78rem;
      color: #78350f;
      margin-bottom: 12px
    }

    .altch {
      background: #fff;
      border: 1px solid #d97706;
      color: #92400e;
      font-size: .78rem;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: var(--r-md);
      cursor: pointer;
      transition: all .15s;
      font-family: var(--font);
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .altch:hover {
      background: #fef3c7;
      transform: translateY(-1px)
    }

    .empty {
      text-align: center;
      padding: 60px 20px
    }

    .eemoji {
      margin-bottom: 14px;
      opacity: .4
    }

    .etit {
      font-family: var(--serif);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--t700);
      margin-bottom: 6px
    }

    .esub {
      color: var(--t400);
      font-size: .9rem
    }

    /* Map */
    .msticky {
      position: sticky;
      top: 80px
    }

    .mbox {
      background: #fff;
      border-radius: var(--r-xl);
      overflow: hidden;
      height: 440px;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .08);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .04)
    }

    .mbox .leaflet-container {
      height: 100%;
      width: 100%;
      border-radius: inherit
    }

    .mbox .leaflet-control-attribution {
      font-size: 9px !important;
      background: rgba(255, 255, 255, .7) !important;
      color: rgba(0, 0, 0, .4) !important;
      max-width: 180px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap
    }

    .mpill {
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: var(--r-full);
      padding: 4px 12px;
      font-size: .7rem;
      color: var(--t600);
      font-weight: 500;
      white-space: nowrap
    }

    .movl {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      gap: 6px;
      pointer-events: none;
      z-index: 800
    }

    .mleg {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: var(--r-md);
      padding: 8px 12px;
      z-index: 800
    }

    .mli {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .68rem;
      color: var(--t500);
      margin-bottom: 4px
    }

    .mli:last-child {
      margin-bottom: 0
    }

    .mdot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 2px solid var(--t300)
    }

    /* FEATURES */
    .fgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 0
    }

    @media(max-width:900px) {
      .fgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .fgrid {
        grid-template-columns: 1fr
      }
    }

    .fc {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-xl);
      padding: 24px;
      transition: all .3s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    .fc:hover {
      border-color: rgba(0, 0, 0, .1);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06)
    }

    .fci {
      width: 44px;
      height: 44px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      transition: transform .3s
    }

    .fc:hover .fci {
      transform: scale(1.1) rotate(-4deg)
    }

    .fcn {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 600;
      color: var(--t800);
      margin-bottom: 8px
    }

    .fcd {
      font-size: .82rem;
      color: var(--t400);
      line-height: 1.7
    }

    .fc.hl {
      background: var(--g50);
      border-color: var(--g100)
    }

    .fc.hl .fcd {
      color: var(--t500)
    }

    /* STEPS */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 48px;
      position: relative
    }

    .steps::before {
      content: '';
      position: absolute;
      top: 38px;
      left: calc(16.66% + 52px);
      right: calc(16.66% + 52px);
      height: 2px;
      background: linear-gradient(to right, var(--g600), var(--t100));
      pointer-events: none
    }

    @media(max-width:700px) {
      .steps {
        grid-template-columns: 1fr
      }

      .steps::before {
        display: none
      }
    }

    .step {
      text-align: center
    }

    .stepnum {
      width: 76px;
      height: 76px;
      border-radius: var(--r-xl);
      background: var(--g600);
      color: #fff;
      font-family: var(--serif);
      font-size: 1.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      box-shadow: 0 6px 24px rgba(18, 168, 106, .18);
      position: relative;
      transition: transform .3s
    }

    .step:hover .stepnum {
      transform: rotate(-5deg) scale(1.05)
    }

    .stepico {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 24px;
      height: 24px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-full);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .08)
    }

    .stepname {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--t800);
      margin-bottom: 8px
    }

    .stepdesc {
      font-size: .85rem;
      color: var(--t400);
      line-height: 1.7
    }

    .steptip {
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(18, 168, 106, .08);
      color: var(--g400);
      font-size: .68rem;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: var(--r-full);
      border: 1px solid rgba(18, 168, 106, .12)
    }

    /* PHARMACIES */
    .pgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 36px
    }

    @media(max-width:900px) {
      .pgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .pgrid {
        grid-template-columns: 1fr
      }
    }

    .pcard {
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-xl);
      overflow: hidden;
      transition: all .3s;
      cursor: pointer;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    .pcard:hover {
      border-color: rgba(0, 0, 0, .1);
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06)
    }

    .ptop {
      height: 4px
    }

    .pbody {
      padding: 18px
    }

    .phdr {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 12px
    }

    .pav {
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 700
    }

    .pstat {
      font-size: .68rem;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: var(--r-full)
    }

    .ps-open {
      background: rgba(18, 168, 106, .1);
      color: var(--g400)
    }

    .ps-close {
      background: var(--t50);
      color: var(--t400)
    }

    .ps-closing {
      background: rgba(245, 158, 11, .1);
      color: #f59e0b
    }

    .pname {
      font-weight: 700;
      font-size: .9rem;
      color: var(--t800);
      margin-bottom: 2px
    }

    .paddr {
      font-size: .78rem;
      color: var(--t400)
    }

    .pstats {
      display: flex;
      gap: 12px;
      margin: 12px 0;
      padding: 10px 0;
      border-top: 1px solid var(--t100);
      border-bottom: 1px solid var(--t100)
    }

    .psv {
      text-align: center;
      flex: 1
    }

    .psvn {
      font-family: var(--serif);
      font-size: 1rem;
      font-weight: 700;
      color: var(--t800)
    }

    .psvl {
      font-size: .65rem;
      color: var(--t300);
      margin-top: 2px
    }

    .pfooter {
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .pupd {
      font-size: .68rem;
      color: var(--t300);
      display: flex;
      align-items: center;
      gap: 4px
    }

    .pcta {
      font-size: .75rem;
      font-weight: 600;
      color: var(--g400);
      background: rgba(18, 168, 106, .08);
      padding: 5px 12px;
      border-radius: var(--r-full);
      border: 1px solid rgba(18, 168, 106, .12);
      cursor: pointer;
      transition: all .15s;
      text-decoration: none;
      font-family: var(--font)
    }

    .pcta:hover {
      background: rgba(18, 168, 106, .15)
    }

    .joincta {
      background: #f7f8f7;
      border: 1.5px dashed rgba(0, 0, 0, .1);
      border-radius: var(--r-xl);
      padding: 32px;
      text-align: center;
      margin-top: 14px;
      grid-column: 1/-1
    }

    .joincta h3 {
      font-family: var(--serif);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--t800);
      margin-bottom: 6px
    }

    .joincta p {
      color: var(--t400);
      font-size: .88rem;
      margin-bottom: 16px
    }

    /* TESTIMONIALS */
    .tgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 36px
    }

    @media(max-width:900px) {
      .tgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .tgrid {
        grid-template-columns: 1fr
      }
    }

    .tcard {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-xl);
      padding: 22px;
      transition: all .3s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03)
    }

    .tcard:hover {
      border-color: rgba(0, 0, 0, .1);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, .06)
    }

    .stars {
      color: var(--g600);
      font-size: .8rem;
      margin-bottom: 8px
    }

    .tquo {
      font-size: 2.2rem;
      line-height: 1;
      color: rgba(0, 0, 0, .06);
      font-family: Georgia, serif;
      margin-bottom: 2px
    }

    .ttxt {
      font-size: .85rem;
      color: var(--t500);
      line-height: 1.75;
      margin-bottom: 16px
    }

    .tau {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .tav {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .8rem
    }

    .tname {
      font-weight: 700;
      font-size: .82rem;
      color: var(--t800)
    }

    .trole {
      font-size: .7rem;
      color: var(--t300)
    }

    /* FAQ */
    .flist {
      max-width: 680px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .fi {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-lg);
      overflow: hidden;
      transition: border .2s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .03)
    }

    .fi.open {
      border-color: rgba(18, 168, 106, .3)
    }

    .fq {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      font-weight: 600;
      font-size: .88rem;
      color: var(--t800);
      background: none;
      border: none;
      text-align: left;
      width: 100%;
      transition: background .15s;
      gap: 10px;
      font-family: var(--font)
    }

    .fq:hover {
      background: var(--t50)
    }

    .fch {
      width: 18px;
      height: 18px;
      border-radius: var(--r-full);
      background: var(--t100);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all .25s;
      font-size: .6rem;
      color: var(--t500)
    }

    .fi.open .fch {
      background: var(--g600);
      color: #fff;
      transform: rotate(180deg)
    }

    .fa {
      display: none;
      padding: 0 20px 16px;
      font-size: .88rem;
      color: var(--t400);
      line-height: 1.8
    }

    .fi.open .fa {
      display: block
    }

    /* CTA BAND */
    .cta-band {
      background: linear-gradient(135deg, var(--g700) 0%, var(--g500) 100%);
      padding: 80px clamp(20px, 4vw, 48px);
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0, 0, 0, .15) 0%, transparent 60%);
      pointer-events: none
    }

    .cta-band h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      font-weight: 700;
      color: #fff;
      margin-bottom: 14px;
      position: relative
    }

    .cta-band p {
      color: rgba(255, 255, 255, .65);
      font-size: .95rem;
      max-width: 500px;
      margin: 0 auto 36px;
      line-height: 1.7;
      position: relative
    }

    .cta-band .btns {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
      position: relative
    }

    .btn-w {
      background: #fff;
      color: var(--g800);
      font-weight: 700;
      font-size: .9rem;
      padding: 13px 28px;
      border-radius: var(--r-lg);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
      text-decoration: none
    }

    .btn-w:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .2)
    }

    .btn-o {
      background: transparent;
      color: #fff;
      font-weight: 600;
      font-size: .9rem;
      padding: 12px 26px;
      border-radius: var(--r-lg);
      border: 1.5px solid rgba(255, 255, 255, .3);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all .25s;
      text-decoration: none
    }

    .btn-o:hover {
      border-color: #fff;
      transform: translateY(-2px)
    }

    /* FOOTER */
    footer {
      background: #0c1a12;
      border-top: none;
      padding: 48px clamp(20px, 4vw, 48px) 24px
    }

    .fg-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 36px;
      max-width: 1320px;
      margin: 0 auto 40px
    }

    @media(max-width:900px) {
      .fg-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .fg-grid {
        grid-template-columns: 1fr
      }
    }

    footer .logo-t {
      color: #fff
    }

    footer .logo-sub {
      color: rgba(255, 255, 255, .4)
    }

    .fbrand p {
      color: rgba(255, 255, 255, .35);
      font-size: .82rem;
      line-height: 1.75;
      margin: 12px 0 16px;
      max-width: 260px
    }

    .fsoc {
      display: flex;
      gap: 6px
    }

    .fsb {
      width: 34px;
      height: 34px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: var(--r-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .35);
      text-decoration: none;
      transition: all .2s;
      font-size: .82rem
    }

    .fsb:hover {
      background: var(--g800);
      color: #fff;
      border-color: var(--g700)
    }

    .fcol h4 {
      font-size: .7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .3);
      margin-bottom: 14px
    }

    .fcol ul {
      list-style: none
    }

    .fcol ul li {
      margin-bottom: 8px
    }

    .fcol ul li a {
      color: rgba(255, 255, 255, .45);
      text-decoration: none;
      font-size: .82rem;
      transition: color .2s
    }

    .fcol ul li a:hover {
      color: #4dd9a0
    }

    .fbot {
      max-width: 1320px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .06)
    }

    .fcp {
      color: rgba(255, 255, 255, .2);
      font-size: .78rem
    }

    .fbot-r {
      display: flex;
      gap: 16px;
      align-items: center;
      font-size: .78rem;
      color: rgba(255, 255, 255, .25)
    }

    .fbot-r span {
      display: flex;
      align-items: center;
      gap: 4px
    }

    /* ANIMATIONS */
    .rev {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .55s ease, transform .55s ease
    }

    .rev.vis {
      opacity: 1;
      transform: none
    }

    .rd1 {
      transition-delay: .1s
    }

    .rd2 {
      transition-delay: .2s
    }

    .rd3 {
      transition-delay: .3s
    }

    .rd4 {
      transition-delay: .4s
    }

    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(80px);
      background: #fff;
      color: var(--t800);
      padding: 10px 20px;
      border-radius: var(--r-md);
      font-size: .82rem;
      font-weight: 500;
      z-index: 9999;
      opacity: 0;
      transition: all .35s;
      box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(0, 0, 0, .08);
      font-family: var(--font)
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1
    }

    .skel {
      background: linear-gradient(90deg, var(--t50) 25%, var(--t100) 50%, var(--t50) 75%);
      background-size: 200% 100%;
      animation: skelw 1.4s ease-in-out infinite;
      border-radius: var(--r-md)
    }

    @keyframes skelw {
      0% {
        background-position: 200% 0
      }

      100% {
        background-position: -200% 0
      }
    }

    .fdiv {
      width: 1px;
      background: var(--t100);
      height: 48px;
      align-self: flex-end
    }

    /* MARQUEE */
    .marq {
      background: #f7f8f7;
      border-top: 1px solid rgba(0, 0, 0, .04);
      border-bottom: 1px solid rgba(0, 0, 0, .04);
      padding: 16px 0;
      overflow: hidden;
      position: relative
    }

    .marq::before,
    .marq::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none
    }

    .marq::before {
      left: 0;
      background: linear-gradient(to right, #f7f8f7, transparent)
    }

    .marq::after {
      right: 0;
      background: linear-gradient(to left, #f7f8f7, transparent)
    }

    .marq-track {
      display: flex;
      gap: 0;
      animation: marqscroll 40s linear infinite;
      width: max-content
    }

    .marq-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 28px;
      white-space: nowrap;
      flex-shrink: 0
    }

    .marq-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g600);
      opacity: .4;
      flex-shrink: 0
    }

    .marq-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--t600)
    }

    .marq-q {
      font-size: .72rem;
      color: var(--t300);
      font-weight: 400
    }

    @keyframes marqscroll {
      0% {
        transform: translateX(0)
      }

      100% {
        transform: translateX(-50%)
      }
    }

    /* SCROLL PROGRESS */
    #sprog {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, var(--g500), var(--g600), #4dd9a0);
      z-index: 10001;
      transition: width .1s linear;
      box-shadow: 0 0 10px rgba(30, 201, 127, .5)
    }

    /* HERO MESH ORBS */
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: .4;
      pointer-events: none;
      animation: orbfloat 20s ease-in-out infinite
    }

    .hero-orb-1 {
      width: 420px;
      height: 420px;
      background: radial-gradient(circle, #1ec97f 0%, transparent 70%);
      top: 10%;
      left: -80px
    }

    .hero-orb-2 {
      width: 360px;
      height: 360px;
      background: radial-gradient(circle, #4dd9a0 0%, transparent 70%);
      bottom: 5%;
      right: 20%;
      animation-delay: -7s
    }

    .hero-orb-3 {
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, #12a86a 0%, transparent 70%);
      top: 40%;
      left: 40%;
      animation-delay: -14s;
      opacity: .25
    }

    @keyframes orbfloat {

      0%,
      100% {
        transform: translate(0, 0) scale(1)
      }

      33% {
        transform: translate(40px, -30px) scale(1.1)
      }

      66% {
        transform: translate(-30px, 20px) scale(.95)
      }
    }

    .hero-grid-bg {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
      pointer-events: none
    }

    /* GRADIENT TEXT */
    .gradtxt {
      background: linear-gradient(135deg, #4dd9a0 0%, #1ec97f 50%, #0c8855 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    /* TRUST STRIP */
    .trust {
      background: #fff;
      padding: 28px clamp(20px, 4vw, 48px);
      border-top: 1px solid var(--t100);
      border-bottom: 1px solid var(--t100)
    }

    .trust-inner {
      max-width: 1320px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      align-items: center;
      justify-content: space-around
    }

    .trust-t {
      font-size: .72rem;
      font-weight: 600;
      color: var(--t400);
      letter-spacing: .08em;
      text-transform: uppercase;
      width: 100%;
      text-align: center;
      margin-bottom: 4px
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: var(--r-md);
      transition: all .25s
    }

    .trust-item:hover {
      background: var(--g50);
      transform: translateY(-2px)
    }

    .trust-ico {
      width: 36px;
      height: 36px;
      border-radius: var(--r-md);
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--g600)
    }

    .trust-lbl {
      font-size: .82rem;
      font-weight: 600;
      color: var(--t700)
    }

    .trust-sub {
      font-size: .68rem;
      color: var(--t400)
    }

    /* SAVINGS CALCULATOR */
    .calc-wrap {
      background: linear-gradient(135deg, var(--g50) 0%, #fff 60%);
      border-radius: var(--r-2xl);
      padding: 40px;
      border: 1px solid var(--g100);
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(18, 168, 106, .06)
    }

    .calc-wrap::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(30, 201, 127, .15), transparent 70%);
      pointer-events: none
    }

    .calc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
      position: relative;
      z-index: 2
    }

    @media(max-width:800px) {
      .calc-grid {
        grid-template-columns: 1fr;
        gap: 24px
      }
    }

    .calc-ctrl {
      display: flex;
      flex-direction: column;
      gap: 20px
    }

    .calc-lbl {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 8px
    }

    .calc-lbl-t {
      font-size: .82rem;
      font-weight: 600;
      color: var(--t700)
    }

    .calc-lbl-v {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--g700)
    }

    .calc-result {
      background: #fff;
      border-radius: var(--r-xl);
      padding: 28px;
      border: 1px solid var(--t100);
      box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
      text-align: center
    }

    .calc-saved-l {
      font-size: .72rem;
      font-weight: 600;
      color: var(--t400);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 8px
    }

    .calc-saved-v {
      font-family: var(--serif);
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 700;
      line-height: 1;
      margin-bottom: 4px
    }

    .calc-saved-u {
      font-size: 1rem;
      color: var(--t500);
      font-weight: 500
    }

    .calc-saved-year {
      margin-top: 18px;
      padding-top: 18px;
      border-top: 1px dashed var(--t100);
      font-size: .85rem;
      color: var(--t500)
    }

    .calc-saved-year strong {
      color: var(--g700);
      font-weight: 700
    }

    .calc-chart {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 60px;
      margin-top: 20px;
      justify-content: center
    }

    .calc-bar {
      flex: 1;
      max-width: 24px;
      background: linear-gradient(to top, var(--g600), #4dd9a0);
      border-radius: 3px 3px 0 0;
      min-height: 8px;
      transition: height .6s cubic-bezier(.25, .8, .25, 1);
      opacity: .85
    }

    .calc-bar:hover {
      opacity: 1
    }

    /* MOBILE APP SHOWCASE */
    .app-sec {
      background: linear-gradient(160deg, #0a2119 0%, #073D2A 40%, #0B5E3F 100%);
      padding: 100px clamp(20px, 4vw, 48px);
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .app-sec::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 30% 20%, rgba(77, 217, 160, .15) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(30, 201, 127, .1) 0%, transparent 50%);
      pointer-events: none
    }

    .app-grid {
      max-width: 1320px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 2
    }

    @media(max-width:900px) {
      .app-grid {
        grid-template-columns: 1fr;
        text-align: center
      }
    }

    .app-left .pill {
      background: rgba(77, 217, 160, .12);
      color: #4dd9a0;
      border-color: rgba(77, 217, 160, .2)
    }

    .app-left h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      color: #fff;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.015em;
      margin-bottom: 16px
    }

    .app-left h2 em {
      font-style: normal;
      color: #4dd9a0
    }

    .app-left p {
      color: rgba(255, 255, 255, .7);
      font-size: .95rem;
      line-height: 1.75;
      margin-bottom: 28px;
      max-width: 480px
    }

    @media(max-width:900px) {
      .app-left p {
        margin: 0 auto 28px
      }
    }

    .app-bullets {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 32px
    }

    @media(max-width:900px) {
      .app-bullets {
        max-width: 400px;
        margin: 0 auto 32px
      }
    }

    .app-bullet {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      text-align: left
    }

    .app-bullet-ico {
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      background: rgba(77, 217, 160, .12);
      border: 1px solid rgba(77, 217, 160, .2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #4dd9a0;
      flex-shrink: 0
    }

    .app-bullet-t {
      font-weight: 600;
      font-size: .88rem;
      color: #fff;
      margin-bottom: 2px
    }

    .app-bullet-d {
      font-size: .78rem;
      color: rgba(255, 255, 255, .6);
      line-height: 1.6
    }

    .app-stores {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    @media(max-width:900px) {
      .app-stores {
        justify-content: center
      }
    }

    .app-store {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      color: #073D2A;
      padding: 10px 20px;
      border-radius: var(--r-lg);
      text-decoration: none;
      font-weight: 600;
      transition: all .25s;
      border: 1px solid rgba(255, 255, 255, .15)
    }

    .app-store:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
    }

    .app-store.dark {
      background: rgba(255, 255, 255, .08);
      color: #fff;
      border-color: rgba(255, 255, 255, .15)
    }

    .app-store.dark:hover {
      background: rgba(255, 255, 255, .12)
    }

    .app-store.direct {
      background: rgba(77, 217, 160, .16);
      color: #fff;
      border-color: rgba(77, 217, 160, .28);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .12)
    }

    .app-store.direct:hover {
      background: rgba(77, 217, 160, .24);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .2)
    }

    .app-store-s {
      font-size: .62rem;
      opacity: .7;
      display: block;
      font-weight: 500;
      line-height: 1
    }

    .app-store-l {
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.2
    }

    .app-right {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 500px
    }

    .phone {
      width: 280px;
      height: 560px;
      background: #0c1a12;
      border-radius: 42px;
      padding: 12px;
      position: relative;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .4), 0 0 0 2px rgba(255, 255, 255, .05);
      animation: phonefloat 7s ease-in-out infinite
    }

    @keyframes phonefloat {

      0%,
      100% {
        transform: translateY(0) rotate(-2deg)
      }

      50% {
        transform: translateY(-12px) rotate(2deg)
      }
    }

    .phone::before {
      content: '';
      position: absolute;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
      height: 22px;
      background: #0c1a12;
      border-radius: 12px;
      z-index: 2
    }

    .phone-screen {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, #f0faf5 0%, #fff 100%);
      border-radius: 32px;
      overflow: hidden;
      position: relative
    }

    .phone-status {
      padding: 14px 22px 6px;
      display: flex;
      justify-content: space-between;
      font-size: .62rem;
      font-weight: 700;
      color: #0c1a12
    }

    .phone-content {
      padding: 30px 18px 18px
    }

    .phone-h {
      font-family: var(--serif);
      font-size: 1.1rem;
      font-weight: 700;
      color: #0c1a12;
      margin-bottom: 4px
    }

    .phone-sub {
      font-size: .65rem;
      color: var(--t400);
      margin-bottom: 14px
    }

    .phone-search {
      background: #fff;
      border: 1px solid var(--t100);
      border-radius: var(--r-md);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .72rem;
      color: var(--t400);
      margin-bottom: 14px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .04)
    }

    .phone-card {
      background: #fff;
      border: 1px solid var(--t100);
      border-radius: var(--r-md);
      padding: 10px;
      margin-bottom: 8px;
      display: flex;
      gap: 8px;
      align-items: center;
      transition: transform .4s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .03)
    }

    .phone-card.best {
      border-color: var(--g400);
      background: var(--g50)
    }

    .phone-cico {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .phone-cbody {
      flex: 1;
      min-width: 0
    }

    .phone-cname {
      font-size: .68rem;
      font-weight: 700;
      color: #0c1a12
    }

    .phone-caddr {
      font-size: .56rem;
      color: var(--t400);
      margin-top: 1px
    }

    .phone-cprice {
      font-family: var(--serif);
      font-size: .82rem;
      font-weight: 700;
      color: var(--g700)
    }

    .phone-glow {
      position: absolute;
      inset: -40px;
      background: radial-gradient(circle at center, rgba(77, 217, 160, .15), transparent 60%);
      z-index: 0;
      pointer-events: none
    }

    /* IN-PHARMACY FALLBACK + CALL CENTER */
    .inpx-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-top: 48px
    }

    @media(max-width:900px) {
      .inpx-grid {
        grid-template-columns: 1fr
      }
    }

    .inpx-card {
      background: #fff;
      border: 1px solid var(--t100);
      border-radius: var(--r-2xl);
      padding: 36px;
      position: relative;
      overflow: hidden;
      transition: all .3s;
      box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    .inpx-card:hover {
      transform: translateY(-4px);
      border-color: var(--g200);
      box-shadow: 0 18px 40px rgba(0, 0, 0, .07)
    }

    .inpx-card.soon {
      background: linear-gradient(160deg, #f8faf9 0%, #fff 60%);
      border-style: dashed
    }

    .inpx-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px
    }

    .inpx-ico {
      width: 56px;
      height: 56px;
      border-radius: var(--r-xl);
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--g600);
      flex-shrink: 0
    }

    .inpx-card.soon .inpx-ico {
      background: rgba(100, 116, 139, .08);
      border-color: rgba(100, 116, 139, .15);
      color: var(--t600)
    }

    .inpx-badge {
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: 5px 11px;
      border-radius: var(--r-full);
      background: var(--g50);
      color: var(--g700);
      border: 1px solid var(--g100);
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .inpx-badge.next {
      background: rgba(100, 116, 139, .08);
      color: var(--t700);
      border-color: rgba(100, 116, 139, .18)
    }

    .inpx-badge .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--g500);
      animation: pulse 2s ease-in-out infinite
    }

    .inpx-badge.next .dot {
      background: var(--t400);
      animation: none
    }

    .inpx-h {
      font-family: var(--serif);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--t800);
      line-height: 1.25;
      letter-spacing: -.01em
    }

    .inpx-p {
      font-size: .9rem;
      color: var(--t500);
      line-height: 1.7
    }

    .inpx-p strong {
      color: var(--t800);
      font-weight: 600
    }

    .inpx-flow {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 4px
    }

    .inpx-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 10px 14px;
      background: var(--g50);
      border: 1px solid var(--g100);
      border-radius: var(--r-md)
    }

    .inpx-card.soon .inpx-step {
      background: rgba(100, 116, 139, .04);
      border-color: rgba(100, 116, 139, .1)
    }

    .inpx-sn {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--g600);
      color: #fff;
      font-weight: 700;
      font-size: .72rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px
    }

    .inpx-card.soon .inpx-sn {
      background: var(--t600)
    }

    .inpx-st {
      font-size: .82rem;
      color: var(--t700);
      line-height: 1.55
    }

    .inpx-st b {
      color: var(--t800)
    }

    .inpx-tel {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      background: #fff;
      border: 1px solid var(--t200);
      border-radius: var(--r-lg);
      box-shadow: 0 4px 12px rgba(0, 0, 0, .04)
    }

    .inpx-tel-ico {
      width: 40px;
      height: 40px;
      border-radius: var(--r-md);
      background: var(--g600);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0
    }

    .inpx-tel-n {
      font-family: var(--serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--t800);
      letter-spacing: .02em;
      line-height: 1.1
    }

    .inpx-tel-s {
      font-size: .72rem;
      color: var(--t400);
      margin-top: 2px
    }

    .inpx-perks {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 4px
    }

    .inpx-perk {
      font-size: .72rem;
      color: var(--t600);
      background: var(--d800);
      border: 1px solid var(--t100);
      border-radius: var(--r-full);
      padding: 5px 11px;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .inpx-perk svg {
      color: var(--g600);
      flex-shrink: 0
    }

    .inpx-qr {
      width: 92px;
      height: 92px;
      background: #fff;
      border: 1px solid var(--t200);
      border-radius: var(--r-md);
      padding: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
      flex-shrink: 0
    }

    .inpx-qr svg {
      width: 100%;
      height: 100%;
      display: block
    }

    /* PHARMACIST CTA SECTION */
    .phcta-wrap {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 56px;
      align-items: center;
      max-width: 1320px;
      margin: 0 auto
    }

    @media(max-width:900px) {
      .phcta-wrap {
        grid-template-columns: 1fr;
        gap: 36px
      }
    }

    .phcta-txt .pill {
      margin-bottom: 18px
    }

    .phcta-txt h2 {
      font-family: var(--serif);
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      color: var(--t800);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.015em;
      margin-bottom: 14px
    }

    .phcta-txt h2 em {
      font-style: normal;
      color: var(--g400)
    }

    .phcta-txt p {
      color: var(--t500);
      font-size: .95rem;
      line-height: 1.7;
      margin-bottom: 24px;
      max-width: 520px
    }

    .phcta-bens {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 28px;
      max-width: 520px
    }

    @media(max-width:560px) {
      .phcta-bens {
        grid-template-columns: 1fr
      }
    }

    .phcta-ben {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: .85rem;
      color: var(--t600);
      line-height: 1.5
    }

    .phcta-ben svg {
      width: 18px;
      height: 18px;
      color: var(--g600);
      flex-shrink: 0;
      margin-top: 2px
    }

    .phcta-ben b {
      color: var(--t800);
      font-weight: 600
    }

    .phcta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .phcta-img-w {
      position: relative;
      aspect-ratio: 4/5;
      max-height: 560px
    }

    .phcta-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--r-2xl);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .15)
    }

    .phcta-tag {
      position: absolute;
      background: #fff;
      border: 1px solid var(--t100);
      border-radius: var(--r-lg);
      padding: 12px 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--t800)
    }

    .phcta-tag.t1 {
      top: 24px;
      left: -20px;
      animation: phonefloat 6s ease-in-out infinite
    }

    .phcta-tag.t2 {
      bottom: 40px;
      right: -20px;
      animation: phonefloat 6s ease-in-out infinite;
      animation-delay: -3s
    }

    @media(max-width:560px) {
      .phcta-tag.t1 {
        left: 8px
      }

      .phcta-tag.t2 {
        right: 8px
      }
    }

    .phcta-tag-ico {
      width: 32px;
      height: 32px;
      border-radius: var(--r-md);
      background: var(--g50);
      color: var(--g600);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--g100);
      flex-shrink: 0
    }

    .phcta-tag-sub {
      font-size: .68rem;
      font-weight: 500;
      color: var(--t400);
      margin-top: 1px
    }

    /* MEDICINE GALLERY STRIP */
    .medgal {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 32px
    }

    @media(max-width:900px) {
      .medgal {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .medgal-it {
      position: relative;
      aspect-ratio: 1/1;
      border-radius: var(--r-lg);
      overflow: hidden;
      cursor: pointer;
      transition: transform .3s
    }

    .medgal-it:hover {
      transform: translateY(-4px)
    }

    .medgal-it img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .medgal-it:hover img {
      transform: scale(1.08)
    }

    .medgal-it::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .6) 100%)
    }

    .medgal-lbl {
      position: absolute;
      left: 14px;
      bottom: 12px;
      color: #fff;
      font-weight: 700;
      font-size: .88rem;
      z-index: 2;
      text-shadow: 0 1px 4px rgba(0, 0, 0, .3)
    }

    .medgal-sub {
      position: absolute;
      left: 14px;
      bottom: 12px;
      transform: translateY(-18px);
      color: rgba(255, 255, 255, .8);
      font-size: .68rem;
      z-index: 2
    }

    /* MODALS */
    .mdlov {
      position: fixed;
      inset: 0;
      background: rgba(12, 26, 18, .55);
      backdrop-filter: blur(6px);
      z-index: 10000;
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 32px 16px;
      overflow-y: auto;
      animation: mdlFade .25s ease
    }

    .mdlov.show {
      display: flex
    }

    @keyframes mdlFade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .mdl {
      background: #fff;
      border-radius: var(--r-2xl);
      width: 100%;
      max-width: 460px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
      position: relative;
      overflow: hidden;
      animation: mdlUp .35s cubic-bezier(.25, .8, .25, 1);
      margin: auto
    }

    .mdl-pharm {
      max-width: 640px
    }

    @keyframes mdlUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(.97)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .mdl-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--t50);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--t600);
      transition: all .2s;
      z-index: 3
    }

    .mdl-close:hover {
      background: var(--t100);
      color: var(--t800);
      transform: rotate(90deg)
    }

    .mdl-hd {
      padding: 32px 32px 0;
      text-align: center
    }

    .mdl-logo {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px
    }

    .mdl-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block
    }

    .mdl-h {
      font-family: var(--serif);
      font-size: 1.45rem;
      font-weight: 700;
      color: var(--t800);
      margin-bottom: 6px;
      line-height: 1.25
    }

    .mdl-sub {
      font-size: .85rem;
      color: var(--t400);
      line-height: 1.55;
      max-width: 360px;
      margin: 0 auto
    }

    .mdl-tabs {
      display: flex;
      gap: 4px;
      background: var(--d800);
      border: 1px solid var(--t100);
      border-radius: var(--r-md);
      padding: 4px;
      margin: 20px 32px 0
    }

    .mdl-tab {
      flex: 1;
      background: none;
      border: none;
      cursor: pointer;
      padding: 9px 14px;
      border-radius: var(--r-sm);
      font-weight: 600;
      font-size: .82rem;
      color: var(--t500);
      transition: all .2s;
      font-family: var(--font)
    }

    .mdl-tab.active {
      background: #fff;
      color: var(--t800);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .06)
    }

    .mdl-tab:hover:not(.active) {
      color: var(--t700)
    }

    .mdl-body {
      padding: 24px 32px 32px
    }

    .mdl-pane {
      display: none
    }

    .mdl-pane.active {
      display: block;
      animation: paneIn .3s ease
    }

    @keyframes paneIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .ffield {
      margin-bottom: 14px
    }

    .flab {
      display: block;
      font-size: .78rem;
      font-weight: 600;
      color: var(--t700);
      margin-bottom: 6px
    }

    .flab .req {
      color: #ef4444;
      margin-left: 2px
    }

    .fin-wrap {
      position: relative
    }

    .fin-ico {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--t400);
      pointer-events: none;
      display: flex
    }

    .fin {
      width: 100%;
      background: #fff;
      border: 1px solid var(--t200);
      border-radius: var(--r-md);
      padding: 11px 14px 11px 40px;
      font-size: .88rem;
      font-family: var(--font);
      color: var(--t800);
      outline: none;
      transition: all .2s
    }

    .fin.nosvg {
      padding-left: 14px
    }

    .fin:focus {
      border-color: var(--g600);
      box-shadow: 0 0 0 3px rgba(18, 168, 106, .1)
    }

    .fin::placeholder {
      color: var(--t300)
    }

    .fin-eye {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--t400);
      padding: 4px;
      display: flex
    }

    .fin-eye:hover {
      color: var(--t700)
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    @media(max-width:480px) {
      .frow {
        grid-template-columns: 1fr
      }
    }

    .fhint {
      font-size: .72rem;
      color: var(--t400);
      margin-top: 6px;
      line-height: 1.5
    }

    .fchk {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: .78rem;
      color: var(--t500);
      line-height: 1.5;
      cursor: pointer;
      user-select: none
    }

    .fchk input {
      margin-top: 2px;
      accent-color: var(--g600);
      width: 15px;
      height: 15px;
      flex-shrink: 0
    }

    .fchk a {
      color: var(--g400);
      font-weight: 600;
      text-decoration: none
    }

    .fchk a:hover {
      text-decoration: underline
    }

    .mdl-opts {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 4px 0 18px;
      font-size: .78rem
    }

    .mdl-opts a {
      color: var(--g400);
      font-weight: 600;
      text-decoration: none
    }

    .mdl-opts a:hover {
      text-decoration: underline
    }

    .fbtn {
      width: 100%;
      background: var(--g600);
      color: #fff;
      border: none;
      border-radius: var(--r-md);
      padding: 12px 20px;
      font-weight: 600;
      font-size: .92rem;
      cursor: pointer;
      transition: all .25s;
      font-family: var(--font);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px
    }

    .fbtn:hover {
      background: var(--g700);
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(18, 168, 106, .28)
    }

    .fbtn.ghost {
      background: transparent;
      color: var(--t700);
      border: 1px solid var(--t200)
    }

    .fbtn.ghost:hover {
      background: var(--t50);
      color: var(--t800);
      border-color: var(--t300);
      box-shadow: none;
      transform: none
    }

    .mdl-div {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 18px 0;
      color: var(--t300);
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    .mdl-div::before,
    .mdl-div::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--t100)
    }

    .mdl-soc {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .mdl-soc-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fff;
      border: 1px solid var(--t200);
      border-radius: var(--r-md);
      padding: 10px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--t700);
      cursor: pointer;
      transition: all .2s;
      font-family: var(--font)
    }

    .mdl-soc-btn:hover {
      border-color: var(--t300);
      background: var(--t50)
    }

    .mdl-foot-t {
      margin-top: 20px;
      text-align: center;
      font-size: .82rem;
      color: var(--t500)
    }

    .mdl-foot-t a {
      color: var(--g400);
      font-weight: 600;
      text-decoration: none;
      cursor: pointer
    }

    .mdl-foot-t a:hover {
      text-decoration: underline
    }

    /* pharmacy modal steps */
    .mdl-prog {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 22px 32px 0;
      padding: 0;
      list-style: none
    }

    .mdl-prog li {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .72rem;
      color: var(--t400);
      font-weight: 600
    }

    .mdl-prog li::before {
      content: attr(data-n);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--t50);
      color: var(--t400);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .72rem;
      border: 1px solid var(--t100);
      flex-shrink: 0
    }

    .mdl-prog li.active {
      color: var(--t800)
    }

    .mdl-prog li.active::before {
      background: var(--g600);
      color: #fff;
      border-color: var(--g600)
    }

    .mdl-prog li.done::before {
      content: '✓';
      background: var(--g600);
      color: #fff;
      border-color: var(--g600)
    }

    .mdl-prog li:not(:last-child)::after {
      content: '';
      height: 1px;
      background: var(--t100);
      flex: 1
    }

    .mdl-prog li.done:not(:last-child)::after {
      background: var(--g600)
    }

    .mdl-nav {
      display: flex;
      gap: 10px;
      margin-top: 20px
    }

    .mdl-nav .fbtn {
      flex: 1
    }

    .fdrop {
      background: #fafafa;
      border: 2px dashed var(--t200);
      border-radius: var(--r-md);
      padding: 22px 20px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
      color: var(--t500);
      font-size: .82rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      position: relative;
      overflow: hidden
    }

    .fdrop:hover {
      border-color: var(--g600);
      background: var(--g50);
      color: var(--g700)
    }

    .fdrop>svg,
    .fdrop>div>svg {
      color: var(--g600)
    }

    .fdrop b {
      color: var(--g700)
    }

    .fdrop input[type="file"] {
      position: absolute !important;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
      left: -9999px
    }

    /* NEWSLETTER */
    .nlet {
      background: linear-gradient(135deg, #f0faf5 0%, #fff 100%);
      border: 1px solid var(--g100);
      border-radius: var(--r-2xl);
      padding: 48px;
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, .03)
    }

    .nlet::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(30, 201, 127, .15), transparent 70%);
      pointer-events: none
    }

    .nlet::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -60px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(77, 217, 160, .12), transparent 70%);
      pointer-events: none
    }

    .nlet-ico {
      width: 60px;
      height: 60px;
      background: var(--g600);
      border-radius: var(--r-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      color: #fff;
      box-shadow: 0 8px 20px rgba(18, 168, 106, .25);
      position: relative;
      z-index: 2
    }

    .nlet h3 {
      font-family: var(--serif);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--t800);
      margin-bottom: 8px;
      position: relative;
      z-index: 2
    }

    .nlet p {
      color: var(--t500);
      margin-bottom: 24px;
      font-size: .92rem;
      max-width: 440px;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      z-index: 2
    }

    .nlet-form {
      display: flex;
      gap: 8px;
      max-width: 440px;
      margin: 0 auto;
      position: relative;
      z-index: 2
    }

    @media(max-width:560px) {
      .nlet-form {
        flex-direction: column
      }
    }

    .nlet-inp {
      flex: 1;
      background: #fff;
      border: 1px solid var(--t200);
      border-radius: var(--r-md);
      padding: 12px 16px;
      font-size: .88rem;
      font-family: var(--font);
      color: var(--t800);
      outline: none;
      transition: all .2s
    }

    .nlet-inp:focus {
      border-color: var(--g600);
      box-shadow: 0 0 0 3px rgba(18, 168, 106, .1)
    }

    .nlet-btn {
      background: var(--g600);
      color: #fff;
      border: none;
      border-radius: var(--r-md);
      padding: 12px 24px;
      font-weight: 600;
      font-size: .88rem;
      cursor: pointer;
      transition: all .25s;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font)
    }

    .nlet-btn:hover {
      background: var(--g500);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(18, 168, 106, .3)
    }

    .nlet-note {
      margin-top: 14px;
      font-size: .72rem;
      color: var(--t400);
      position: relative;
      z-index: 2
    }

    /* BLOG / NEWS */
    .bgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 36px
    }

    @media(max-width:900px) {
      .bgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .bgrid {
        grid-template-columns: 1fr
      }
    }

    .bcard {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .06);
      border-radius: var(--r-xl);
      overflow: hidden;
      transition: all .3s;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
      display: flex;
      flex-direction: column
    }

    .bcard:hover {
      transform: translateY(-4px);
      border-color: rgba(0, 0, 0, .1);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .08)
    }

    .bcard-img {
      height: 160px;
      background: linear-gradient(135deg, var(--g400), var(--g600));
      position: relative;
      overflow: hidden
    }

    .bcard-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .3) 100%)
    }

    .bcard-img svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: .18
    }

    .bcard-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(8px);
      color: var(--g700);
      font-size: .65rem;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: var(--r-full);
      z-index: 2;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .bcard-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .bcard-date {
      font-size: .7rem;
      color: var(--t400);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .bcard-t {
      font-family: var(--serif);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--t800);
      line-height: 1.35;
      margin-bottom: 8px
    }

    .bcard-d {
      font-size: .82rem;
      color: var(--t500);
      line-height: 1.6;
      flex: 1;
      margin-bottom: 14px
    }

    .bcard-r {
      font-size: .78rem;
      font-weight: 600;
      color: var(--g400);
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap .2s
    }

    .bcard:hover .bcard-r {
      gap: 10px
    }

    /* FLOATING EMERGENCY BUTTON */
    .fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 9998;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end
    }

    .fab-main {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 30px rgba(239, 68, 68, .35), 0 0 0 6px rgba(239, 68, 68, .1);
      transition: all .3s;
      animation: fabpulse 2.4s ease-in-out infinite;
      position: relative
    }

    @keyframes fabpulse {

      0%,
      100% {
        box-shadow: 0 8px 30px rgba(239, 68, 68, .35), 0 0 0 6px rgba(239, 68, 68, .1)
      }

      50% {
        box-shadow: 0 8px 30px rgba(239, 68, 68, .45), 0 0 0 14px rgba(239, 68, 68, 0)
      }
    }

    .fab-main:hover {
      transform: scale(1.08)
    }

    .fab-main svg {
      width: 26px;
      height: 26px
    }

    .fab-lbl {
      background: #fff;
      color: var(--t800);
      font-size: .78rem;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: var(--r-full);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
      border: 1px solid var(--t100);
      white-space: nowrap;
      opacity: 0;
      transform: translateX(10px);
      transition: all .25s;
      pointer-events: none
    }

    .fab:hover .fab-lbl {
      opacity: 1;
      transform: translateX(0)
    }

    .fab-top {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(10px);
      border: 1px solid var(--t100);
      color: var(--t700);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
      transition: all .25s;
      opacity: 0;
      pointer-events: none
    }

    .fab-top.show {
      opacity: 1;
      pointer-events: auto
    }

    .fab-top:hover {
      background: var(--g600);
      color: #fff;
      transform: translateY(-2px)
    }

    /* COOKIE BANNER */
    .cookie {
      position: fixed;
      bottom: 24px;
      left: 24px;
      max-width: 380px;
      background: rgba(12, 26, 18, .97);
      backdrop-filter: blur(16px);
      color: #fff;
      padding: 20px;
      border-radius: var(--r-xl);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
      z-index: 9999;
      transform: translateY(calc(100% + 40px));
      transition: transform .5s cubic-bezier(.25, .8, .25, 1);
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .cookie.show {
      transform: translateY(0)
    }

    @media(max-width:560px) {
      .cookie {
        left: 12px;
        right: 12px;
        max-width: none;
        bottom: 12px
      }
    }

    .cookie-h {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      font-size: .92rem;
      margin-bottom: 8px
    }

    .cookie p {
      font-size: .78rem;
      color: rgba(255, 255, 255, .7);
      line-height: 1.6;
      margin-bottom: 14px
    }

    .cookie-btns {
      display: flex;
      gap: 8px
    }

    .cookie-btn {
      flex: 1;
      font-size: .78rem;
      padding: 8px 14px;
      border-radius: var(--r-sm);
      cursor: pointer;
      font-weight: 600;
      font-family: var(--font);
      border: none;
      transition: all .2s
    }

    .cookie-acc {
      background: var(--g500);
      color: #fff
    }

    .cookie-acc:hover {
      background: var(--g400)
    }

    .cookie-ref {
      background: rgba(255, 255, 255, .08);
      color: rgba(255, 255, 255, .8);
      border: 1px solid rgba(255, 255, 255, .15)
    }

    .cookie-ref:hover {
      background: rgba(255, 255, 255, .12)
    }

    /* LIVE ACTIVITY */
    .liveact {
      position: fixed;
      bottom: 28px;
      left: 28px;
      background: #fff;
      border: 1px solid var(--t100);
      border-radius: var(--r-lg);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
      z-index: 9997;
      max-width: 320px;
      transform: translateY(calc(100% + 40px));
      transition: transform .5s cubic-bezier(.25, .8, .25, 1)
    }

    body.cookie-visible .liveact {
      bottom: calc(24px + 220px)
    }

    .liveact.show {
      transform: translateY(0)
    }

    @media(max-width:700px) {
      .liveact {
        display: none
      }
    }

    .liveact-ico {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--g50);
      border: 1px solid var(--g100);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--g600);
      flex-shrink: 0
    }

    .liveact-t {
      font-size: .78rem;
      font-weight: 600;
      color: var(--t800);
      line-height: 1.3
    }

    .liveact-d {
      font-size: .68rem;
      color: var(--t400);
      margin-top: 2px;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .liveact-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--g500);
      animation: pulse 2s ease-in-out infinite
    }

    .liveact-close {
      background: none;
      border: none;
      color: var(--t300);
      cursor: pointer;
      padding: 4px;
      font-size: .75rem;
      line-height: 1
    }

    /* THEME TOGGLE */
    .thm-tog {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .15);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .7);
      transition: all .25s
    }

    #nav.scrolled .thm-tog {
      border-color: var(--t200);
      color: var(--t600)
    }

    .thm-tog:hover {
      transform: rotate(20deg)
    }

    #nav.scrolled .thm-tog:hover {
      background: var(--t50)
    }

    .thm-tog svg {
      width: 16px;
      height: 16px
    }

    /* ENHANCED CARD TILT */
    .fc,
    .pcard,
    .tcard,
    .bcard {
      transform-style: preserve-3d;
      will-change: transform
    }

    /* STAT ANIMATED NUMBERS */
    .sc-n {
      transition: transform .3s
    }

    .stat-card:hover .sc-n {
      transform: scale(1.08)
    }

    /* SEARCH WAVE FX */
    .sbox {
      position: relative
    }

    .sbox::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      background: linear-gradient(135deg, var(--g400), var(--g600), #4dd9a0);
      z-index: -1;
      opacity: 0;
      transition: opacity .3s;
      filter: blur(12px)
    }

    .sbox:focus-within::after {
      opacity: .4
    }

    /* RC shine */
    .rc {
      position: relative
    }

    .rc.best::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(30, 201, 127, .08) 50%, transparent 70%);
      animation: shine 3.5s ease-in-out infinite;
      pointer-events: none;
      border-radius: inherit
    }

    @keyframes shine {
      0% {
        transform: translateX(-100%)
      }

      100% {
        transform: translateX(100%)
      }
    }

    /* BACK UP animations (fade-in on scroll) */
    .fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: all .7s cubic-bezier(.25, .8, .25, 1)
    }

    .fade-up.vis {
      opacity: 1;
      transform: none
    }

    /* ENHANCED BUTTONS */
    .btn-main,
    .btn-w,
    .sbtn,
    .nbtn-p {
      position: relative;
      overflow: hidden
    }

    .btn-main::after,
    .btn-w::after,
    .sbtn::after,
    .nbtn-p::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .4);
      transform: translate(-50%, -50%);
      transition: width .6s, height .6s
    }

    .btn-main:active::after,
    .btn-w:active::after,
    .sbtn:active::after,
    .nbtn-p:active::after {
      width: 300px;
      height: 300px
    }

    /* ORDONNANCES DIGITALES */
    .ordo-hd{text-align:center;max-width:720px;margin:0 auto 44px}
    .ordo-flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:44px;position:relative}
    @media(max-width:900px){.ordo-flow{grid-template-columns:1fr;gap:18px}}
    .ordo-step{background:#fff;border:1px solid var(--t100);border-radius:var(--r-xl);padding:30px 24px 26px;text-align:center;position:relative;transition:all .3s}
    .ordo-step:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.06);border-color:var(--g200)}
    .ordo-n{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:36px;height:36px;background:var(--g600);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--serif);font-size:.95rem;box-shadow:0 4px 14px rgba(18,168,106,.4);z-index:3}
    .ordo-ico{width:60px;height:60px;background:var(--g50);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:10px auto 14px;border:1px solid var(--g100);color:var(--g700)}
    .ordo-role{font-size:.6rem;font-weight:800;color:var(--g700);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
    .ordo-step h3{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--t800);margin-bottom:6px}
    .ordo-step p{font-size:.85rem;color:var(--t500);line-height:1.55}
    .ordo-arrow{position:absolute;top:50%;right:-16px;transform:translateY(-50%);width:32px;height:32px;background:#fff;border:1px solid var(--g200);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g700);z-index:2;box-shadow:0 4px 10px rgba(0,0,0,.05)}
    @media(max-width:900px){.ordo-arrow{display:none}}

    .ordo-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:linear-gradient(135deg,var(--g50) 0%,#fff 100%);border:1px solid var(--g100);border-radius:var(--r-xl);padding:26px 28px;margin-bottom:44px}
    @media(max-width:700px){.ordo-trust{grid-template-columns:1fr 1fr}}
    .ordo-tr{display:flex;align-items:flex-start;gap:10px;font-size:.78rem;color:var(--t500);line-height:1.5}
    .ordo-tr svg{color:var(--g600);flex-shrink:0;margin-top:2px}
    .ordo-tr b{color:var(--t800);display:block;font-weight:700;font-size:.85rem;margin-bottom:2px}

    .ordo-preview{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
    @media(max-width:900px){.ordo-preview{grid-template-columns:1fr;gap:30px}}
    .ordo-pv-txt h3{font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--t800);margin-bottom:12px;line-height:1.2}
    .ordo-pv-txt h3 em{font-style:normal;color:var(--g600)}
    .ordo-pv-txt p{color:var(--t500);line-height:1.7;margin-bottom:18px;font-size:.95rem}
    .ordo-pv-list{display:flex;flex-direction:column;gap:11px;margin-bottom:22px;list-style:none;padding:0}
    .ordo-pv-list li{display:flex;gap:10px;font-size:.88rem;color:var(--t600);line-height:1.5}
    .ordo-pv-list svg{color:var(--g600);flex-shrink:0;margin-top:3px}
    .ordo-pv-cta{display:flex;flex-wrap:wrap;gap:10px}

    /* Prescription mockup card */
    .ordo-rx{background:#fff;border:1px solid var(--t200);border-radius:var(--r-xl);padding:28px;box-shadow:0 24px 60px rgba(0,0,0,.1);position:relative;max-width:440px;margin:0 auto;font-family:var(--font)}
    .ordo-rx::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--g600),var(--g500));border-radius:var(--r-xl) var(--r-xl) 0 0}
    .ordo-rx-hd{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px dashed var(--t200);margin-bottom:16px;gap:12px}
    .ordo-rx-doc{font-family:var(--serif);font-weight:700;color:var(--t800);font-size:1rem;line-height:1.2}
    .ordo-rx-doc small{display:block;font-family:var(--font);font-weight:400;color:var(--t400);font-size:.72rem;margin-top:3px}
    .ordo-rx-badge{background:var(--g50);border:1px solid var(--g200);color:var(--g700);font-size:.6rem;font-weight:800;padding:5px 10px;border-radius:99px;letter-spacing:.1em;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
    .ordo-rx-pt{font-size:.68rem;color:var(--t400);margin-bottom:4px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
    .ordo-rx-pn{font-weight:700;color:var(--t800);margin-bottom:16px;font-size:1rem}
    .ordo-rx-med{background:var(--g50);border:1px solid var(--g100);border-radius:var(--r-md);padding:12px 14px;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;font-size:.85rem;gap:10px}
    .ordo-rx-med .info b{color:var(--t800);font-weight:700;font-size:.88rem;display:block}
    .ordo-rx-med .info small{color:var(--t500);font-size:.75rem}
    .ordo-rx-qty{color:var(--g700);font-weight:700;white-space:nowrap;font-family:var(--serif);font-size:.92rem;text-align:right}
    .ordo-rx-ft{margin-top:16px;padding-top:14px;border-top:1px dashed var(--t200);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.7rem;color:var(--t400);flex-wrap:wrap}
    .ordo-rx-sig{display:inline-flex;align-items:center;gap:5px;color:var(--g700);font-weight:700;font-size:.75rem}
    .ordo-rx-ph{background:#fff;border:1px solid var(--g200);border-radius:var(--r-md);padding:10px 14px;margin-top:14px;display:flex;align-items:center;gap:10px;font-size:.82rem}
    .ordo-rx-ph svg{color:var(--g600);flex-shrink:0}
    .ordo-rx-ph b{color:var(--t800);font-weight:700}

    /* RAPPELS DE PRISE */
    .rap-hd{text-align:center;max-width:720px;margin:0 auto 44px}
    .rap-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;margin-bottom:56px}
    @media(max-width:960px){.rap-wrap{grid-template-columns:1fr;gap:40px}}
    .rap-txt h3{font-family:var(--serif);font-size:1.75rem;font-weight:700;color:var(--t800);line-height:1.2;margin-bottom:12px}
    .rap-txt h3 em{font-style:normal;color:var(--g600)}
    .rap-txt>p{color:var(--t500);line-height:1.7;margin-bottom:20px;font-size:.95rem}
    .rap-feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}
    @media(max-width:520px){.rap-feat{grid-template-columns:1fr}}
    .rap-fi{background:#fff;border:1px solid var(--t100);border-radius:var(--r-lg);padding:16px 16px 14px;transition:all .3s}
    .rap-fi:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.06);border-color:var(--g200)}
    .rap-fi-ico{width:38px;height:38px;background:var(--g50);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--g700);border:1px solid var(--g100);margin-bottom:10px}
    .rap-fi h4{font-family:var(--serif);font-size:.98rem;font-weight:700;color:var(--t800);margin-bottom:4px}
    .rap-fi p{font-size:.8rem;color:var(--t500);line-height:1.5}
    .rap-cta{display:flex;flex-wrap:wrap;gap:10px}

    /* Phone mockup */
    .rap-phone{position:relative;width:300px;max-width:100%;margin:0 auto;aspect-ratio:9/18.5;background:linear-gradient(135deg,#1b2a24,#0f1a16);border-radius:44px;padding:14px;box-shadow:0 32px 70px rgba(0,0,0,.22),0 0 0 2px rgba(255,255,255,.05) inset}
    .rap-phone::before{content:'';position:absolute;top:16px;left:50%;transform:translateX(-50%);width:110px;height:22px;background:#0a100d;border-radius:99px;z-index:3}
    .rap-screen{width:100%;height:100%;background:linear-gradient(180deg,#eefaf3 0%,#fff 40%);border-radius:32px;overflow:hidden;position:relative;display:flex;flex-direction:column}
    .rap-status{display:flex;justify-content:space-between;align-items:center;padding:10px 22px 0;font-size:.66rem;font-weight:700;color:var(--t700)}
    .rap-status span{display:flex;align-items:center;gap:3px}
    .rap-header{padding:26px 20px 14px;background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;margin:6px 10px 0;border-radius:20px;box-shadow:0 12px 30px rgba(18,168,106,.3)}
    .rap-header .hello{font-size:.68rem;opacity:.85;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
    .rap-header .name{font-family:var(--serif);font-size:1.15rem;font-weight:700;margin:2px 0 10px}
    .rap-header .today{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.14);border-radius:10px;padding:8px 10px;font-size:.68rem;backdrop-filter:blur(4px)}
    .rap-header .today b{font-size:.88rem;font-weight:700}
    .rap-list{flex:1;padding:16px 14px 20px;overflow:hidden;display:flex;flex-direction:column;gap:8px}
    .rap-item{background:#fff;border:1px solid var(--t100);border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:10px;position:relative;transition:all .3s}
    .rap-item.done{opacity:.55}
    .rap-item.next{border-color:var(--g300);background:linear-gradient(135deg,#fff,var(--g50));box-shadow:0 6px 18px rgba(18,168,106,.15)}
    .rap-item.next::after{content:'';position:absolute;top:-3px;right:-3px;width:10px;height:10px;background:#ef4444;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(239,68,68,.3);animation:rapPulse 1.8s ease-in-out infinite}
    @keyframes rapPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.75}}
    .rap-time{width:42px;text-align:center;flex-shrink:0}
    .rap-time .h{font-family:var(--serif);font-weight:800;color:var(--t800);font-size:.88rem;line-height:1}
    .rap-time .p{font-size:.55rem;color:var(--t400);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-top:2px}
    .rap-med{flex:1;min-width:0}
    .rap-med b{display:block;font-weight:700;color:var(--t800);font-size:.78rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .rap-med small{font-size:.64rem;color:var(--t500);display:block;margin-top:1px}
    .rap-qty{background:var(--g600);color:#fff;font-family:var(--serif);font-weight:800;font-size:.7rem;padding:4px 7px;border-radius:7px;flex-shrink:0;min-width:28px;text-align:center;letter-spacing:.02em}
    .rap-item.done .rap-qty{background:var(--t300)}
    .rap-check{width:18px;height:18px;border-radius:50%;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}

    /* Floating notification */
    .rap-notif{position:absolute;top:68%;left:50%;transform:translate(-50%,-50%);width:88%;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-radius:16px;padding:12px 14px;box-shadow:0 20px 50px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04);display:flex;align-items:flex-start;gap:10px;animation:rapSlide 3.5s ease-in-out infinite}
    @keyframes rapSlide{0%,15%{transform:translate(-50%,-140%);opacity:0}25%,75%{transform:translate(-50%,-50%);opacity:1}90%,100%{transform:translate(-50%,-50%);opacity:0}}
    .rap-notif-ico{width:32px;height:32px;background:linear-gradient(135deg,var(--g600),var(--g500));color:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(18,168,106,.4)}
    .rap-notif-txt{flex:1;min-width:0}
    .rap-notif-txt .app{font-size:.58rem;font-weight:700;color:var(--g700);letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:5px}
    .rap-notif-txt .app::after{content:'• maintenant';color:var(--t400);font-weight:500;letter-spacing:0;text-transform:none}
    .rap-notif-txt b{display:block;font-weight:700;color:var(--t800);font-size:.78rem;margin:2px 0 1px;line-height:1.2}
    .rap-notif-txt p{font-size:.7rem;color:var(--t500);line-height:1.35}

    /* Schedule builder strip */
    .rap-builder{background:linear-gradient(135deg,var(--g50) 0%,#fff 100%);border:1px solid var(--g100);border-radius:var(--r-xl);padding:28px 32px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
    @media(max-width:820px){.rap-builder{grid-template-columns:1fr;text-align:center;padding:24px 22px;gap:18px}}
    .rap-bd-ico{width:60px;height:60px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;color:var(--g700);box-shadow:0 6px 18px rgba(18,168,106,.1);justify-self:center}
    .rap-bd-txt h4{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--t800);margin-bottom:4px}
    .rap-bd-txt p{font-size:.85rem;color:var(--t500);line-height:1.5}
    .rap-bd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;justify-content:flex-start}
    @media(max-width:820px){.rap-bd-chips{justify-content:center}}
    .rap-chip{background:#fff;border:1px solid var(--g200);color:var(--g700);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:4px}
    .rap-chip svg{color:var(--g600)}

    /* === À PROPOS / FOUNDER STORY === */
    .about-wrap{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:72px;align-items:center;max-width:1180px;margin:0 auto}
    @media(max-width:980px){.about-wrap{grid-template-columns:1fr;gap:48px;max-width:640px;text-align:center}}
    .about-portrait{position:relative;justify-self:center}
    .about-portrait::before{content:"";position:absolute;inset:-22px -22px -14px -14px;background:radial-gradient(circle at 30% 30%,rgba(18,168,106,.18),rgba(18,168,106,0) 70%);border-radius:32px;z-index:0}
    .about-portrait::after{content:"";position:absolute;top:-8px;right:-8px;bottom:20px;left:20px;border:2px solid var(--g200);border-radius:28px;z-index:0}
    .about-photo{position:relative;z-index:1;width:100%;max-width:360px;border-radius:24px;background:linear-gradient(160deg,#f7fbf9 0%,#eaf6f0 100%);padding:16px 16px 0;box-shadow:0 30px 60px -20px rgba(10,94,58,.35),0 0 0 1px rgba(18,168,106,.08);display:block}
    .about-photo img{display:block;width:100%;height:auto;border-radius:16px 16px 8px 8px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.18))}
    .about-badge{position:absolute;z-index:2;bottom:-18px;right:-8px;background:#fff;border:1px solid var(--g100);border-radius:var(--r-lg);padding:10px 14px;box-shadow:0 12px 30px rgba(12,136,85,.18);display:flex;align-items:center;gap:10px;max-width:220px}
    @media(max-width:980px){.about-badge{right:50%;transform:translateX(50%)}}
    .about-badge-dot{width:10px;height:10px;border-radius:50%;background:var(--g500);box-shadow:0 0 0 4px rgba(30,201,127,.2);flex-shrink:0}
    .about-badge-txt{font-size:.72rem;line-height:1.3;color:var(--t600)}
    .about-badge-txt b{display:block;color:var(--t800);font-size:.82rem;font-weight:700}
    .about-content{position:relative}
    .about-kicker{font-family:'Caveat',cursive;font-size:1.9rem;font-weight:600;color:var(--g600);line-height:1;margin-bottom:6px;transform:rotate(-1.5deg);display:inline-block}
    .about-title{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:700;color:var(--t800);line-height:1.15;letter-spacing:-.015em;margin:10px 0 22px}
    .about-title em{font-style:italic;color:var(--g400);position:relative}
    .about-title em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:10px;background:rgba(30,201,127,.22);border-radius:4px;z-index:-1}
    .about-handwritten{font-family:'Caveat',cursive;font-size:1.42rem;line-height:1.55;color:var(--t700);margin-bottom:28px;max-width:620px;font-weight:500}
    @media(max-width:980px){.about-handwritten{margin-left:auto;margin-right:auto}}
    .about-handwritten p{margin-bottom:14px}
    .about-handwritten .hl{background:linear-gradient(180deg,transparent 55%,rgba(30,201,127,.35) 55%);padding:0 2px}
    .about-handwritten .uline{text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:rgba(12,136,85,.55);text-underline-offset:3px;text-decoration-skip-ink:auto}
    .about-quote{border-left:3px solid var(--g500);padding:6px 0 6px 18px;margin:28px 0 22px;font-family:var(--serif);font-style:italic;font-size:1.05rem;line-height:1.55;color:var(--t700);max-width:560px}
    @media(max-width:980px){.about-quote{margin-left:auto;margin-right:auto;text-align:left}}
    .about-quote b{font-style:normal;color:var(--g400);font-weight:700}
    .about-sign{display:flex;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap}
    @media(max-width:980px){.about-sign{justify-content:center}}
    .about-sign-mark{font-family:'Homemade Apple',cursive;font-size:2.1rem;color:var(--g400);line-height:1;transform:rotate(-4deg);padding-bottom:6px}
    .about-sign-meta{border-left:1px solid var(--t200);padding-left:18px;line-height:1.4}
    @media(max-width:980px){.about-sign-meta{border-left:none;padding-left:0;border-top:1px solid var(--t200);padding-top:10px}}
    .about-sign-meta .name{font-family:var(--serif);font-weight:700;color:var(--t800);font-size:1rem}
    .about-sign-meta .role{font-size:.78rem;color:var(--t400);letter-spacing:.02em}
    .about-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
    @media(max-width:980px){.about-stack{justify-content:center}}
    .about-chip{background:#fff;border:1px solid var(--g200);color:var(--g700);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:99px}
    .about-contact{margin-top:28px;padding-top:22px;border-top:1px dashed var(--t200);display:flex;flex-direction:column;gap:10px;max-width:560px}
    @media(max-width:980px){.about-contact{margin-left:auto;margin-right:auto}}
    .about-contact-title{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t400);margin-bottom:2px}
    .about-c-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .about-c-row .ico{width:34px;height:34px;border-radius:10px;background:var(--g50);border:1px solid var(--g100);color:var(--g600);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .about-c-main{font-family:var(--font);font-size:.9rem;font-weight:600;color:var(--t800);text-decoration:none;transition:color .15s}
    .about-c-main:hover{color:var(--g600)}
    .about-c-links{display:inline-flex;gap:6px;margin-left:auto}
    @media(max-width:560px){.about-c-links{margin-left:46px}}
    .about-c-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-size:.72rem;font-weight:700;text-decoration:none;border:1px solid transparent;transition:all .15s}
    .about-c-btn.call{background:var(--g50);color:var(--g700);border-color:var(--g100)}
    .about-c-btn.call:hover{background:var(--g100)}
    .about-c-btn.wa{background:#e8f8ef;color:#0a7b42;border-color:#c4ebd3}
    .about-c-btn.wa:hover{background:#d1f1de}
    .about-c-btn svg{width:12px;height:12px}