/* ========================================================
   ? BEAUTYLINK — ЛЕНДІНГ (HOME PAGE) ?
   ========================================================
   Стилі головної / лендінг-сторінки.

   ПРАВИЛА ДЛЯ ШІ ТА РОЗРОБНИКІВ:
   - Кольори > theme tokens або var(--primary) тощо; не hex
   - Кнопки > .btn .btn-primary тощо з light-styles.css
   - МОБІЛЬНИЙ ПРІОРИТЕТ: лендінг переглядається з телефону — mobile hero першим
   - !important: не додавати в нові стилі — підвищуй специфічність
   - Z-INDEX: тільки var(--z-nav), var(--z-modal) тощо з tokens.css
   - ЄДНІСТЬ САЙТУ + МОБІЛЬНИЙ ПРІОРИТЕТ > tokens.css (шапка файлу)
   ======================================================== */

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

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      color: var(--ink);
      background:
        linear-gradient(160deg, rgb(var(--white-rgb) / .86) 0 18%, transparent 18.2%),
        linear-gradient(23deg, rgb(var(--accent-soft-rgb) / .42) 0 31%, transparent 31.2%),
        radial-gradient(circle at 18% 18%, rgb(var(--white-rgb) / .92) 0 15%, transparent 32%),
        radial-gradient(circle at 86% 22%, rgb(var(--accent-rgb) / .24) 0 16%, transparent 34%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 54%, var(--surface-soft) 100%);
      font-family: var(--font-ui);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background-image:
        linear-gradient(rgb(var(--primary-rgb) / .045) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--primary-rgb) / .035) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: linear-gradient(180deg, var(--text) 0, transparent 86%);
    }

    body::after {
      content: "";
      position: fixed;
      top: 78px;
      right: -170px;
      z-index: -1;
      width: min(54vw, 680px);
      height: min(70vw, 760px);
      border-radius: 48% 0 0 52%;
      background: linear-gradient(150deg, rgb(var(--accent-soft-rgb) / .7), rgb(var(--accent-soft-rgb) / .24));
      transform: rotate(-9deg);
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    textarea,
    select {
      font-family: var(--font-ui);
      font-size: inherit;
    }

    .page {
      width: min(100%, 1180px);
      margin: 0 auto;
      padding: 22px 24px 64px;
    }

    .site-header {
      position: sticky;
      top: 14px;
      z-index: 20;
      min-height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 10px 14px;
      border: 1px solid rgb(var(--white-rgb) / .72);
      border-radius: var(--radius-24);
      background: rgb(var(--white-rgb) / .58);
      box-shadow: 0 16px 38px rgb(var(--text-secondary-rgb) / .08);
      backdrop-filter: blur(18px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .1px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: var(--radius-circle);
      color: var(--white);
      background: linear-gradient(135deg, var(--primary), var(--coral));
      box-shadow: 0 10px 22px rgb(var(--primary-rgb) / .2);
    }

    .spark {
      position: relative;
      width: 17px;
      height: 17px;
      color: currentColor;
    }

    .spark::before {
      content: "";
      position: absolute;
      inset: 0;
      background: currentColor;
      clip-path: polygon(50% 0, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0 50%, 39% 37%);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 28px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 650;
    }

    .nav a {
      transition: color .18s ease;
    }

    .nav a:hover {
      color: var(--primary-dark);
    }

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

    .m-action.primary {
      position: relative;
      overflow: hidden;
    }

    .m-action.primary::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0 34%, rgb(var(--white-rgb) / .28) 44%, transparent 58%);
      transform: translateX(-120%);
      transition: transform .55s ease;
      pointer-events: none;
    }

    .m-action.primary:hover::after {
      transform: translateX(120%);
    }

    @keyframes ctaBreath {
      0%, 100% {
        box-shadow: 0 16px 30px rgb(var(--primary-rgb) / .25);
      }
      50% {
        box-shadow: 0 20px 38px rgb(var(--primary-rgb) / .34);
      }
    }

    @keyframes arrowNudge {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(4px); }
    }

    @keyframes mobileRise {
      from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes phoneFloat {
      0%, 100% { transform: translateY(0) rotate(6deg); }
      50% { transform: translateY(-5px) rotate(5deg); }
    }

    @keyframes iconGlow {
      0%, 100% { box-shadow: 0 0 0 transparent; }
      50% { box-shadow: 0 0 0 5px rgb(var(--primary-rgb) / .08); }
    }


    .hero {
      min-height: calc(100vh - 112px);
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
      align-items: center;
      gap: 52px;
      padding: 62px 0 54px;
    }

    .eyebrow {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      padding: 11px 14px;
      border: 1px solid rgb(var(--primary-rgb) / .16);
      border-radius: var(--radius);
      color: var(--primary-dark);
      background: rgb(var(--white-rgb) / .7);
      box-shadow: 0 10px 24px rgb(var(--text-secondary-rgb) / .06);
      font-size: 14px;
      font-weight: 800;
    }

    h1,
    h2,
    h3 {
      font-family: var(--font-display);
      color: var(--ink);
    }

    h1 {
      max-width: 680px;
      font-size: clamp(48px, 7vw, 88px);
      line-height: .96;
      font-weight: 500;
      letter-spacing: 0;
    }

    h1 span {
      display: block;
    }

    .accent-line {
      width: 64px;
      height: 2px;
      margin: 28px 0 20px;
      border-radius: var(--radius-full);
      background: var(--primary);
    }

    .hero-text {
      max-width: 540px;
      color: var(--text);
      font-size: 20px;
      line-height: 1.55;
    }

    .btn > span,
    .m-action > span {
      position: relative;
      z-index: 1;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .hero-actions .btn {
      min-height: var(--button-height-xl);
      padding-inline: 25px;
      font-size: 16px;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      max-width: 570px;
      margin-top: 38px;
    }

    .metric {
      min-height: 94px;
      padding: 18px;
      border: 1px solid rgb(var(--white-rgb) / .76);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgb(var(--white-rgb) / .86), rgb(var(--bg-soft-rgb) / .7));
      box-shadow: 0 14px 34px rgb(var(--text-secondary-rgb) / .08);
    }

    .metric strong {
      display: block;
      margin-bottom: 6px;
      color: var(--primary-dark);
      font-family: var(--font-display);
      font-size: 28px;
      line-height: 1;
    }

    .metric span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.28;
    }

    .visual {
      position: relative;
      min-height: 610px;
      display: grid;
      place-items: center;
    }

    .visual::before {
      content: "";
      position: absolute;
      width: min(88%, 470px);
      height: 470px;
      border-radius: 42% 58% 47% 53%;
      background: linear-gradient(145deg, rgb(var(--primary-soft-rgb) / .94), rgb(var(--accent-soft-rgb) / .46));
      transform: rotate(-13deg);
    }

    .leaf {
      position: absolute;
      right: 7%;
      top: 19%;
      width: 134px;
      height: 213px;
      opacity: .86;
    }

    .stone-tall,
    .stone-low {
      position: absolute;
      box-shadow: 0 22px 38px rgb(var(--text-secondary-rgb) / .14);
    }

    .stone-tall {
      right: 3%;
      bottom: 9%;
      width: 112px;
      height: 224px;
      border-radius: 54% 46% 48% 52% / 60% 56% 44% 40%;
      transform: rotate(7deg);
      background:
        linear-gradient(118deg, rgb(var(--white-rgb) / .92) 0 18%, transparent 18.5%),
        linear-gradient(120deg, var(--theme-clay) 0%, var(--theme-clay) 48%, var(--theme-clay) 100%);
    }

    .stone-low {
      right: 26%;
      bottom: 8%;
      width: 160px;
      height: 84px;
      border-radius: 52% 48% 43% 57%;
      transform: rotate(-8deg);
      background:
        linear-gradient(120deg, rgb(var(--white-rgb) / .9) 0 22%, transparent 22.5%),
        linear-gradient(130deg, var(--bg-soft) 0%, var(--theme-clay) 70%, var(--theme-clay) 100%);
    }

    .phone {
      position: relative;
      z-index: 2;
      width: min(78vw, 330px);
      height: 610px;
      padding: 13px;
      border-radius: var(--radius-42);
      background: var(--text);
      box-shadow: 0 34px 70px rgb(var(--text-rgb) / .25), 0 0 0 10px rgb(var(--white-rgb) / .42);
      transform: rotate(5deg);
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 25px;
      left: 50%;
      z-index: 3;
      width: 82px;
      height: 21px;
      border-radius: var(--radius-full);
      background: var(--text);
      transform: translateX(-50%);
    }

    .phone-screen {
      height: 100%;
      overflow: hidden;
      border-radius: var(--radius-31);
      background: radial-gradient(circle at 25% 5%, var(--white) 0 18%, transparent 38%), linear-gradient(180deg, var(--theme-surface) 0%, var(--bg) 100%);
      padding: 72px 22px 22px;
    }

    .profile {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 31px;
    }

    .avatar {
      width: 64px;
      height: 64px;
      flex: 0 0 auto;
      overflow: hidden;
      border: 3px solid rgb(var(--white-rgb) / .9);
      border-radius: var(--radius-circle);
      background:
        linear-gradient(164deg, var(--text) 0 24%, transparent 24.5%),
        linear-gradient(110deg, transparent 0 33%, var(--primary) 33.5% 63%, transparent 63.5%),
        linear-gradient(135deg, var(--theme-clay) 0%, var(--theme-clay) 100%);
      box-shadow: 0 10px 20px rgb(var(--text-secondary-rgb) / .13);
    }

    .profile b {
      display: block;
      margin-bottom: 6px;
      font-family: var(--font-display);
      font-size: 16px;
      line-height: 1;
    }

    .profile span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      line-height: 1;
    }

    .mini-title {
      margin-bottom: 10px;
      color: var(--text-secondary);
      font-size: 12px;
      line-height: 1;
      font-weight: 800;
    }

    .services {
      margin-bottom: 21px;
      overflow: hidden;
      border: 1px solid rgb(var(--primary-dark-rgb) / .15);
      border-radius: var(--radius);
      background: rgb(var(--white-rgb) / .58);
    }

    .service {
      min-height: 49px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-bottom: 1px solid rgb(var(--primary-dark-rgb) / .1);
    }

    .service:last-child {
      border-bottom: 0;
    }

    .service b {
      display: block;
      font-size: 12px;
      line-height: 1;
    }

    .service small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 10px;
      line-height: 1;
    }

    .service em {
      color: var(--primary);
      font-size: 18px;
      font-style: normal;
      line-height: 1;
    }

    .calendar {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 3px;
      margin: 11px 0 15px;
      color: var(--muted);
      text-align: center;
      font-size: 10px;
      line-height: 1;
    }

    .calendar span,
    .calendar strong {
      display: grid;
      place-items: center;
      margin: 7px auto 0;
      color: var(--text-secondary);
      font-size: 11px;
      font-weight: 800;
    }

    .calendar strong {
      width: 28px;
      height: 28px;
      border-radius: var(--radius-circle);
      color: var(--white);
      background: var(--primary);
    }

    .times {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 7px;
      margin-bottom: 18px;
    }

    .time {
      height: 33px;
      display: grid;
      place-items: center;
      border: 1px solid rgb(var(--primary-dark-rgb) / .16);
      border-radius: var(--radius-7);
      background: var(--white);
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 800;
    }

    .time.active {
      border-color: var(--primary);
      background: var(--primary);
      color: var(--white);
    }

    .book {
      width: 100%;
      min-height: 51px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 38px;
      border: 0;
      border-radius: var(--radius);
      color: var(--white);
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      cursor: pointer;
      font-size: 13px;
      font-weight: 900;
    }

    .section {
      padding: 72px 0 0;
    }

    .section-heading {
      max-width: 660px;
      margin-bottom: 28px;
    }

    .section-kicker {
      margin-bottom: 9px;
      color: var(--primary-dark);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    h2 {
      font-size: clamp(34px, 4.4vw, 54px);
      line-height: 1.04;
      font-weight: 500;
    }

    .section-heading p {
      margin-top: 16px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.55;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .feature,
    .step,
    .benefit {
      border: 1px solid rgb(var(--white-rgb) / .76);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgb(var(--white-rgb) / .9), rgb(var(--bg-soft-rgb) / .76));
      box-shadow: 0 18px 42px rgb(var(--text-secondary-rgb) / .08);
      backdrop-filter: blur(14px);
    }

    .feature {
      min-height: 235px;
      padding: 26px;
    }

    .icon {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      margin-bottom: 22px;
      padding: 15px;
      border-radius: var(--radius-circle);
      color: var(--primary);
      background: linear-gradient(145deg, var(--surface-soft), var(--primary-soft));
    }

    .icon svg {
      width: 100%;
      height: 100%;
    }

    .feature h3,
    .step h3,
    .benefit h3 {
      margin-bottom: 10px;
      font-size: 23px;
      line-height: 1.05;
      font-weight: 650;
    }

    .feature p,
    .step p,
    .benefit p {
      color: var(--muted);
      font-size: 15px;
      line-height: 1.52;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .step {
      min-height: 210px;
      padding: 24px;
    }

    .step-number {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      margin-bottom: 22px;
      border: 1px solid rgb(var(--primary-rgb) / .22);
      border-radius: var(--radius-circle);
      color: var(--primary-dark);
      background: var(--white);
      font-weight: 900;
    }

    .benefit-band {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 28px;
      align-items: stretch;
      padding: 34px;
      border: 1px solid rgb(var(--white-rgb) / .76);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgb(var(--white-rgb) / .84), rgb(var(--bg-soft-rgb) / .74)),
        linear-gradient(120deg, rgb(var(--theme-success-rgb) / .16), transparent 46%);
      box-shadow: var(--shadow);
    }

    .benefit-lead {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 330px;
      padding: 10px 0;
    }

    .benefit-lead p {
      max-width: 390px;
      margin-top: 18px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.55;
    }

    .benefit-list {
      display: grid;
      gap: 12px;
    }

    .benefit {
      min-height: 96px;
      display: grid;
      grid-template-columns: 58px 1fr;
      gap: 16px;
      align-items: center;
      padding: 18px;
      box-shadow: none;
    }

    .benefit .icon {
      width: 50px;
      height: 50px;
      margin: 0;
      padding: 13px;
    }

    .cta {
      margin-top: 72px;
      padding: 42px;
      border-radius: var(--radius);
      color: var(--white);
      background:
        linear-gradient(135deg, rgb(var(--primary-dark-rgb) / .96), rgb(var(--primary-rgb) / .96)),
        linear-gradient(90deg, rgb(var(--white-rgb) / .18), transparent);
      box-shadow: 0 20px 46px rgb(var(--primary-rgb) / .22);
    }

    .cta-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .cta h2 {
      color: var(--white);
      font-size: clamp(32px, 4vw, 48px);
    }

    .cta p {
      max-width: 620px;
      margin-top: 13px;
      color: rgb(var(--white-rgb) / .88);
      font-size: 18px;
      line-height: 1.55;
    }

    .cta .btn {
      color: var(--primary-dark);
      background: var(--white);
      box-shadow: 0 14px 26px rgb(var(--text-rgb) / .18);
    }

    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-top: 30px;
      color: var(--muted);
      font-size: 14px;
    }

    .mobile-app {
      display: none;
    }

    @media (max-width: 940px) {
      .page {
        padding-inline: 18px;
      }

      .nav {
        display: none;
      }

      .hero {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 46px 0 36px;
      }

    .hero-copy {
      min-width: 0;
      max-width: 720px;
    }

    .metric {
      min-width: 0;
    }

    .hero-copy p,
    .metric span,
    .metric strong {
      overflow-wrap: anywhere;
    }

      .visual {
        min-height: 560px;
      }

      .features,
      .steps,
      .benefit-band,
      .cta-inner {
        grid-template-columns: 1fr;
      }

      .benefit-lead {
        min-height: auto;
      }
    }

    @media (max-width: 620px) {
      html,
      body {
        height: 100%;
        overflow: hidden;
      }

      body {
        background:
          linear-gradient(150deg, rgb(var(--white-rgb) / .88) 0 22%, transparent 22.2%),
          linear-gradient(180deg, var(--bg) 0%, var(--bg) 56%, var(--surface-soft) 100%);
      }

      body::before,
      body::after {
        display: none;
      }

      .page {
        width: min(100%, 390px);
        max-width: 390px;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        overflow: hidden;
        padding: 0;
      }

      .site-header,
      .desktop-site,
      .footer {
        display: none;
      }

      .mobile-app {
        position: relative;
        display: grid;
        grid-template-rows: 368px 112px 96px minmax(52px, 1fr);
        gap: 9px;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        padding: 16px 14px 18px;
        background:
          linear-gradient(128deg, rgb(var(--white-rgb) / .68) 0 18%, transparent 18.2%),
          linear-gradient(24deg, rgb(var(--primary-soft-rgb) / .34) 0 32%, transparent 32.2%);
      }

      .mobile-app::before {
        content: "";
        position: absolute;
        right: -74px;
        top: 54px;
        width: 246px;
        height: 308px;
        border: 1px solid rgb(var(--white-rgb) / .74);
        border-radius: var(--radius-34) 0 0 var(--radius-52);
        background: linear-gradient(145deg, rgb(var(--white-rgb) / .72), rgb(var(--primary-soft-rgb) / .38));
        box-shadow: 0 24px 52px rgb(var(--text-secondary-rgb) / .09);
        transform: rotate(-7deg);
      }

      .mobile-app::after {
        content: "";
        position: absolute;
        left: -64px;
        bottom: 86px;
        width: 258px;
        height: 172px;
        border-radius: 0 var(--radius-34) var(--radius-34) 0;
        background: linear-gradient(135deg, rgb(var(--white-rgb) / .58), rgb(var(--bg-soft-rgb) / .38));
        transform: rotate(11deg);
      }

      .m-hero,
      .m-features,
      .m-master-note,
      .m-actions {
        position: relative;
        z-index: 2;
      }

      .m-hero {
        min-width: 0;
      }

      .m-brand {
        height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 13px;
        border-radius: var(--radius-full);
        color: var(--white);
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        box-shadow: 0 10px 22px rgb(var(--primary-rgb) / .18);
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
      }

      .m-brand .spark {
        width: 15px;
        height: 15px;
      }

      .m-copy {
        position: relative;
        z-index: 4;
        width: 56%;
        min-width: 206px;
        margin-top: 18px;
      }

      .m-copy h1 {
        font-size: clamp(31px, 8.9vw, 38px);
        line-height: .98;
        font-weight: 500;
      }

      .m-copy h1 span {
        display: block;
      }

      .m-copy .accent-line {
        width: 48px;
        margin: 14px 0 10px;
      }

      .m-art {
        position: absolute;
        right: 8px;
        top: 64px;
        z-index: 3;
        width: 156px;
        height: 260px;
      }

      .m-art::before,
      .m-art::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .m-art::before {
        inset: 20px -7px 8px 21px;
        z-index: 1;
        border: 1px solid rgb(var(--white-rgb) / .78);
        border-radius: var(--radius-30);
        background:
          linear-gradient(160deg, rgb(var(--white-rgb) / .72), rgb(var(--primary-soft-rgb) / .38)),
          linear-gradient(90deg, rgb(var(--primary-rgb) / .12), transparent 56%);
        box-shadow: 0 22px 42px rgb(var(--text-secondary-rgb) / .11);
        transform: rotate(-8deg);
      }

      .m-art::after {
        right: 3px;
        top: 46px;
        z-index: 2;
        width: 34px;
        height: 168px;
        border-radius: var(--radius-full);
        border: 1px solid rgb(var(--primary-rgb) / .16);
        background: linear-gradient(180deg, rgb(var(--white-rgb) / .5), rgb(var(--accent-rgb) / .18));
      }

      .m-phone {
        position: absolute;
        left: 0;
        top: 6px;
        z-index: 4;
        width: 132px;
        height: 248px;
        padding: 6px;
        border-radius: var(--radius-22);
        background: var(--text);
        box-shadow: 0 20px 34px rgb(var(--text-rgb) / .24);
        transform: rotate(6deg);
        animation: phoneFloat 5.4s ease-in-out infinite;
      }

      .m-phone::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        z-index: 5;
        width: 36px;
        height: 9px;
        border-radius: var(--radius-full);
        background: var(--text);
        transform: translateX(-50%);
      }

      .m-screen {
        height: 100%;
        overflow: hidden;
        border-radius: var(--radius-17);
        background: radial-gradient(circle at 25% 5%, var(--white) 0 18%, transparent 38%), linear-gradient(180deg, var(--theme-surface) 0%, var(--bg) 100%);
        padding: 27px 8px 7px;
      }

      .m-profile {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
      }

      .m-avatar {
        width: 25px;
        height: 25px;
        flex: 0 0 auto;
        border: 2px solid var(--white);
        border-radius: var(--radius-circle);
        background: linear-gradient(135deg, var(--theme-clay) 0%, var(--theme-clay) 100%);
      }

      .m-profile b {
        display: block;
        margin-bottom: 3px;
        font-family: var(--font-display);
        font-size: 7px;
      }

      .m-profile span,
      .m-mini-title,
      .m-service small,
      .m-day,
      .m-time {
        font-size: 4.7px;
      }

      .m-profile span,
      .m-service small,
      .m-day {
        color: var(--muted);
      }

      .m-mini-title {
        margin-bottom: 4px;
        font-weight: 800;
      }

      .m-services {
        margin-bottom: 5px;
        overflow: hidden;
        border: 1px solid rgb(var(--primary-dark-rgb) / .14);
        border-radius: var(--radius-5);
        background: rgb(var(--white-rgb) / .58);
      }

      .m-service {
        min-height: 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2px 5px;
        border-bottom: 1px solid rgb(var(--primary-dark-rgb) / .1);
      }

      .m-service:last-child {
        border-bottom: 0;
      }

      .m-service b {
        display: block;
        font-size: 5.2px;
      }

      .m-service small {
        display: block;
        margin-top: 2px;
      }

      .m-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
        margin: 4px 0 5px;
        text-align: center;
      }

      .m-day span,
      .m-day strong {
        display: grid;
        place-items: center;
        margin: 3px auto 0;
        color: var(--ink);
        font-size: 5px;
      }

      .m-day strong {
        width: 13px;
        height: 13px;
        border-radius: var(--radius-circle);
        color: var(--white);
        background: var(--primary);
      }

      .m-times {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 3px;
        margin-bottom: 5px;
      }

      .m-time {
        height: 14px;
        display: grid;
        place-items: center;
        border: 1px solid rgb(var(--primary-dark-rgb) / .16);
        border-radius: var(--radius-4);
        background: var(--white);
        color: var(--text-muted);
        font-weight: 800;
      }

      .m-time.active {
        border-color: var(--primary);
        background: var(--primary);
        color: var(--white);
      }

      .m-book {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        border: 0;
        border-radius: var(--radius-5);
        color: var(--white);
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        font-size: 5.5px;
        font-weight: 900;
      }

      .m-features {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .m-feature {
        min-width: 0;
        padding: 10px 5px 7px;
        border: 1px solid rgb(var(--white-rgb) / .78);
        border-radius: var(--radius-14);
        background: linear-gradient(145deg, rgb(var(--white-rgb) / .92), rgb(var(--bg-soft-rgb) / .78));
        box-shadow: 0 12px 28px rgb(var(--text-secondary-rgb) / .09);
        text-align: center;
        animation: mobileRise .55s ease both;
      }

      .m-feature:nth-child(2) {
        animation-delay: .08s;
      }

      .m-feature:nth-child(3) {
        animation-delay: .16s;
      }

      .m-feature-icon {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 9px;
        margin: 0 auto 8px;
        border-radius: var(--radius-circle);
        color: var(--primary);
        background: linear-gradient(145deg, var(--surface-soft), var(--primary-soft));
        animation: iconGlow 3.2s ease-in-out infinite;
      }

      .m-feature svg {
        width: 100%;
        height: 100%;
      }

      .m-feature h3 {
        margin-bottom: 3px;
        font-size: 11px;
        line-height: .95;
        font-weight: 650;
      }

      .m-feature p {
        color: var(--muted);
        font-size: 7px;
        line-height: 1.18;
      }

      .m-master-note {
        min-height: 96px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .m-master-card {
        min-width: 0;
        padding: 9px 5px 7px;
        border: 1px solid rgb(var(--white-rgb) / .82);
        border-radius: var(--radius-14);
        background: linear-gradient(145deg, rgb(var(--white-rgb) / .94), rgb(var(--bg-soft-rgb) / .78));
        box-shadow: 0 12px 24px rgb(var(--text-secondary-rgb) / .075);
        text-align: center;
        animation: mobileRise .55s ease both;
        animation-delay: .22s;
      }

      .m-master-card:nth-child(2) {
        animation-delay: .3s;
      }

      .m-master-card:nth-child(3) {
        animation-delay: .38s;
      }

      .m-master-card-icon {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        margin: 0 auto 6px;
        padding: 8px;
        border-radius: var(--radius-circle);
        color: var(--primary);
        background: linear-gradient(145deg, var(--surface-soft), var(--primary-soft));
        animation: iconGlow 3.4s ease-in-out infinite;
      }

      .m-master-card svg {
        width: 100%;
        height: 100%;
      }

      .m-master-card h3 {
        margin-bottom: 3px;
        font-size: 10.2px;
        line-height: .95;
        font-weight: 650;
      }

      .m-master-card p {
        color: var(--muted);
        font-size: 6.7px;
        line-height: 1.16;
      }

      .m-actions {
        display: grid;
        gap: 8px;
        align-content: center;
        padding-top: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }

      .m-action {
        position: relative;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-16);
        cursor: pointer;
        font-weight: 900;
        text-align: center;
        letter-spacing: .01em;
        overflow: hidden;
        transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      }

      .m-action:active {
        transform: translateY(1px) scale(.985);
      }

      .m-action.primary {
        border: 0;
        color: var(--white);
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary) 48%, var(--coral) 100%);
        box-shadow: 0 16px 30px rgb(var(--primary-rgb) / .25);
        font-size: 15px;
        animation: ctaBreath 3s ease-in-out infinite;
      }

      .m-action.secondary {
        height: 42px;
        border: 1px solid rgb(var(--primary-rgb) / .42);
        color: var(--primary-dark);
        background: rgb(var(--white-rgb) / .74);
        box-shadow: 0 10px 22px rgb(var(--text-secondary-rgb) / .06);
        font-size: 14px;
      }

      .m-action .spark {
        position: absolute;
        left: 18px;
        width: 20px;
        height: 20px;
      }

      .m-action span:nth-child(2) {
        width: 100%;
        text-align: center;
      }

      .m-action span:last-child {
        position: absolute;
        right: 18px;
      }

      .m-action.primary span:last-child {
        animation: arrowNudge 2.4s ease-in-out infinite;
      }

    }

    @media (max-width: 620px) and (max-height: 790px) {
      .mobile-app {
        grid-template-rows: 320px 96px 82px minmax(50px, 1fr);
        gap: 6px;
        padding-top: 12px;
        padding-bottom: 10px;
      }

      .m-copy {
        margin-top: 13px;
      }

      .m-copy h1 {
        font-size: clamp(28px, 8.1vw, 33px);
      }

      .m-copy p {
        font-size: 11.5px;
        line-height: 1.28;
      }

      .m-art {
        top: 54px;
        transform: scale(.88);
        transform-origin: right top;
      }

      .m-feature {
        padding-top: 8px;
      }

      .m-feature-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
      }

      .m-feature h3 {
        font-size: 10.5px;
      }

      .m-feature p {
        font-size: 7px;
      }

      .m-master-note {
        min-height: 82px;
        gap: 4px;
      }

      .m-master-card {
        padding: 7px 4px 5px;
      }

      .m-master-card-icon {
        width: 26px;
        height: 26px;
        padding: 7px;
        margin-bottom: 5px;
      }

      .m-master-card h3 {
        margin-bottom: 2px;
        font-size: 9.3px;
      }

      .m-master-card p {
        font-size: 6.1px;
      }

      .m-action.primary {
        height: 44px;
      }

      .m-action.secondary {
        height: 38px;
      }

    }

    @media (max-width: 620px) and (max-height: 700px) {
      .mobile-app {
        grid-template-rows: 270px 74px 68px minmax(44px, 1fr);
        gap: 5px;
        padding: 9px 14px 8px;
      }

      .m-brand {
        height: 28px;
        padding: 0 11px;
        font-size: 12px;
      }

      .m-brand .spark {
        width: 13px;
        height: 13px;
      }

      .m-copy {
        margin-top: 10px;
        min-width: 195px;
      }

      .m-copy h1 {
        font-size: clamp(25px, 7.5vw, 30px);
      }

      .m-copy .accent-line {
        width: 40px;
        margin: 10px 0 7px;
      }

      .m-copy p {
        max-width: 194px;
        font-size: 10.5px;
        line-height: 1.24;
      }

      .m-art {
        top: 42px;
        right: 4px;
        transform: scale(.72);
      }

      .m-feature {
        padding: 7px 4px 5px;
      }

      .m-feature-icon {
        width: 26px;
        height: 26px;
        padding: 7px;
        margin-bottom: 4px;
      }

      .m-feature h3 {
        margin-bottom: 2px;
        font-size: 9.3px;
      }

      .m-feature p {
        font-size: 6.4px;
      }

      .m-master-note {
        min-height: 68px;
        gap: 3px;
      }

      .m-master-card {
        padding: 5px 3px 4px;
        border-radius: var(--radius-12);
      }

      .m-master-card-icon {
        width: 22px;
        height: 22px;
        padding: 6px;
        margin-bottom: 3px;
      }

      .m-master-card h3 {
        margin-bottom: 1px;
        font-size: 8.1px;
      }

      .m-master-card p {
        font-size: 5.3px;
      }

      .m-action.primary {
        height: 38px;
        font-size: 13px;
      }

      .m-action.secondary {
        height: 34px;
        font-size: 12px;
      }

      .m-action .spark {
        left: 15px;
        width: 17px;
        height: 17px;
      }

      .m-action span:last-child {
        right: 15px;
      }


    }

    @media (prefers-reduced-motion: reduce) {
      .btn,
      .m-phone,
      .m-feature,
      .m-feature-icon,
      .m-master-card,
      .m-master-card-icon,
      .m-action,
      .m-action.primary,
      .m-action.primary span:last-child {
        animation: none !important;
        transition: none !important;
      }

      .m-feature,
      .m-master-card {
        opacity: 1;
        transform: none;
      }
    }