:root {
      --bg-dark: #171311;
      --bg-light: #f6e6d3;
      --coral: #f2553d;
      --ink: #171311;
      --text-light: #f6e6d3;
      --line-light: rgba(246, 230, 211, .16);
      --line-dark: rgba(23, 19, 17, .14);
      --container: 1460px;
      --shadow-1: 0 22px 64px rgba(0, 0, 0, .2);
      --shadow-2: 0 16px 40px rgba(0, 0, 0, .14);
      --radius-lg: 40px;
      --radius-md: 28px;
      --radius-sm: 18px;
    }

    * { box-sizing: border-box; }

    html,
    body {
      margin: 0;
      padding: 0;
      font-family: "Manrope", system-ui, -apple-system, sans-serif;
      color: var(--text-light);
      background: var(--bg-dark);
      overflow-x: hidden;
    }
    html { scroll-behavior: smooth; }

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

    .container {
      width: min(100%, var(--container));
      margin: 0 auto;
      padding-inline: 22px;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 80;
      border-bottom: 1px solid var(--line-light);
      background: rgba(23, 19, 17, .88);
    }

    .header-inner {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .header-nav {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 7px;
      border: 1px solid rgba(246, 230, 211, .2);
      border-radius: 999px;
      background: rgba(246, 230, 211, .06);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    }

    .header-nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 0 16px;
      border: 1px solid rgba(246, 230, 211, .2);
      border-radius: 999px;
      background: rgba(246, 230, 211, .05);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .01em;
      color: rgba(246, 230, 211, .95);
      white-space: nowrap;
      transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .header-nav-link:hover {
      background: rgba(242, 85, 61, .22);
      border-color: rgba(242, 85, 61, .58);
      color: #fff4e4;
      transform: translateY(-1px);
      box-shadow: 0 7px 18px rgba(0, 0, 0, .22);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .brand-icon {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      border: 1px solid var(--line-light);
      background: rgba(246, 230, 211, .08);
      position: relative;
      overflow: hidden;
    }

    .brand-icon::before,
    .brand-icon::after {
      content: "";
      position: absolute;
      border-radius: 999px;
    }

    .brand-icon::before {
      width: 18px;
      height: 18px;
      background: var(--coral);
      left: 12px;
      top: 12px;
      opacity: .92;
    }

    .brand-icon::after {
      width: 30px;
      height: 2px;
      background: rgba(246, 230, 211, .35);
      left: 7px;
      top: 30px;
    }

    .brand-title {
      margin: 0;
      font-size: 13px;
      letter-spacing: .08em;
      font-weight: 800;
      text-transform: none;
      color: var(--text-light);
    }

    .brand-sub {
      margin: 2px 0 0;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(246, 230, 211, .52);
      white-space: nowrap;
    }

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

    #benefits,
    #workflow,
    #price {
      scroll-margin-top: 96px;
    }

    .btn {
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      border: 2px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
      will-change: transform;
      cursor: pointer;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    }

    .btn-ghost {
      border-color: var(--line-light);
      background: rgba(246, 230, 211, .06);
      color: var(--text-light);
    }
    .btn-ghost-light {
      border-color: rgba(246,230,211,.3);
      background: rgba(246,230,211,.12);
      color: var(--text-light);
    }

    .btn-solid {
      border-color: var(--bg-light);
      background: var(--bg-light);
      color: var(--ink);
    }

    .btn-dark {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--text-light);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .22em;
      border: 1px solid rgba(246, 230, 211, .16);
      background: rgba(246, 230, 211, .08);
      color: rgba(246, 230, 211, .84);
      font-weight: 700;
    }
    .eyebrow-dark-soft {
      background: rgba(23,19,17,.08);
      border-color: rgba(23,19,17,.16);
      color: rgba(23,19,17,.72);
    }
    .eyebrow-light-soft {
      background: rgba(246,230,211,.14);
      border-color: rgba(246,230,211,.26);
      color: rgba(246,230,211,.94);
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--coral);
      box-shadow: 0 0 0 6px rgba(242, 85, 61, .16);
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 40px 0 0;
      isolation: isolate;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(46px);
      opacity: .56;
      z-index: -1;
    }

    .hero::before {
      width: 420px;
      height: 420px;
      left: -120px;
      top: -60px;
      background: rgba(242, 85, 61, .22);
    }

    .hero::after {
      width: 360px;
      height: 360px;
      right: -100px;
      top: 40px;
      background: rgba(246, 230, 211, .14);
    }

    .hero-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: .76fr 1.24fr;
      align-items: center;
      padding: 16px 0 72px;
    }

    .hero-copy {
      position: relative;
      max-width: 620px;
      transform-style: preserve-3d;
    }

    .sticker {
      position: absolute;
      border-radius: 999px;
      padding: 9px 15px;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 800;
      border: 1px solid transparent;
      box-shadow: var(--shadow-2);
      z-index: 6;
      white-space: nowrap;
    }

    .sticker-coral {
      background: var(--coral);
      color: var(--text-light);
      border-color: var(--ink);
    }

    .sticker-dark {
      background: var(--ink);
      color: var(--text-light);
      border-color: var(--ink);
    }

    .hero-copy .sticker {
      --rot: 9deg;
      right: 48px;
      top: -22px;
      animation: bob 7.6s ease-in-out infinite;
    }

    .hero-title {
      margin: 14px 0 0;
      font-size: clamp(44px, 4.6vw, 84px);
      line-height: .86;
      font-weight: 800;
      letter-spacing: -.02em;
      text-transform: uppercase;
      text-wrap: balance;
    }
    .hero-title span {
      display: block;
    }

    .hero-note {
      margin-top: 16px;
      font-size: 20px;
      line-height: 1.45;
      color: rgba(246, 230, 211, .78);
      max-width: 660px;
    }

    .hero-list {
      margin-top: 14px;
      display: grid;
      gap: 7px;
      color: rgba(246, 230, 211, .9);
      font-size: 18px;
      line-height: 1.5;
    }

    .hero-list-mobile {
      display: none;
    }

    .hero-mobile-preview {
      display: none;
    }

    .hero-actions {
      margin-top: 24px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .hero-frame {
      position: relative;
      height: 690px;
      border-radius: 44px;
      border: 2px solid var(--ink);
      background: var(--bg-light);
      overflow: hidden;
      box-shadow: 0 32px 90px rgba(0, 0, 0, .36);
      transform-style: preserve-3d;
    }

    .hero-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 20%, rgba(242, 85, 61, .11), transparent 19%),
        radial-gradient(circle at 82% 18%, rgba(23, 19, 17, .08), transparent 23%),
        linear-gradient(to right, rgba(23, 19, 17, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23, 19, 17, .04) 1px, transparent 1px);
      background-size: auto, auto, 32px 32px, 32px 32px;
      pointer-events: none;
    }

    .hero-frame::after {
      content: none;
    }

    .hero-frame .sticker {
      --rot: 6deg;
      right: 16px;
      top: 16px;
      animation: bob 8.2s ease-in-out infinite;
    }

    .dashboard-shell {
      position: absolute;
      left: 6%;
      top: 13%;
      width: 88%;
      border-radius: 36px;
      border: 2px solid var(--ink);
      background: linear-gradient(180deg, #4a5059, #343a44);
      padding: 16px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
      transform: rotate(-1deg);
    }

    .dashboard {
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: linear-gradient(180deg, #3d424a, #2c3038);
      color: #f4f4f4;
      overflow: hidden;
    }

    .dash-top {
      border-bottom: 1px solid rgba(255, 255, 255, .12);
      padding: 12px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .dots {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .dots i {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .25);
    }

    .dash-tags {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .dash-tags span {
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .7);
      padding: 7px 10px;
      font-weight: 700;
    }

    .dash-body {
      display: grid;
      gap: 12px;
      grid-template-columns: 1.62fr .78fr;
      padding: 14px;
    }

    .dash-table {
      overflow: hidden;
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: linear-gradient(180deg, #0a0d13, #171b23);
    }

    .dash-row {
      display: grid;
      grid-template-columns: 2.35fr .95fr .92fr 1.08fr;
      gap: 8px;
      align-items: center;
      padding: 12px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      font-size: 13px;
      color: rgba(255, 255, 255, .88);
    }

    .dash-row > div {
      min-width: 0;
    }

    .dash-row:last-child { border-bottom: 0; }

    .dash-row.head {
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(255, 255, 255, .74);
    }

    .dash-row.head > div {
      white-space: nowrap;
    }

    .dash-price {
      justify-self: start;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 12px;
      background: rgba(255, 255, 255, .06);
      color: rgba(255, 255, 255, .72);
      padding: 6px 10px;
      min-width: 96px;
      white-space: nowrap;
      text-align: center;
    }

    .dash-side {
      display: grid;
      gap: 10px;
    }

    .dash-card {
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
      background: linear-gradient(180deg, #0b0e14, #171b22);
      padding: 12px;
    }

    .dash-card-label {
      margin: 0;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62);
      font-weight: 700;
    }

    .dash-card-value {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, .82);
      font-weight: 600;
    }

    .mini-chart {
      margin-top: 10px;
      height: 92px;
      display: flex;
      align-items: flex-end;
      gap: 6px;
    }

    .mini-chart i {
      flex: 1;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(180deg, #f2553d, #b13f2f);
      transform-origin: bottom;
    }

    .mini-chart i:nth-child(1) { height: 26%; animation-delay: .1s; }
    .mini-chart i:nth-child(2) { height: 38%; animation-delay: .28s; }
    .mini-chart i:nth-child(3) { height: 34%; animation-delay: .42s; }
    .mini-chart i:nth-child(4) { height: 54%; animation-delay: .6s; }
    .mini-chart i:nth-child(5) { height: 44%; animation-delay: .82s; }
    .mini-chart i:nth-child(6) { height: 62%; animation-delay: 1s; }
    .mini-chart i:nth-child(7) { height: 72%; animation-delay: 1.2s; }

    .float-note {
      position: absolute;
      border-radius: 24px;
      border: 2px solid var(--ink);
      padding: 12px;
      font-size: 13px;
      line-height: 1.45;
      box-shadow: var(--shadow-2);
      animation: bob 6.8s ease-in-out infinite;
      max-width: 220px;
      z-index: 4;
    }

    .float-note small {
      display: block;
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 6px;
      opacity: .72;
    }

    .float-note.dark {
      background: var(--ink);
      color: var(--text-light);
    }

    .float-note.coral {
      background: var(--coral);
      color: var(--text-light);
    }

    .float-note.light {
      background: #fff;
      color: var(--ink);
    }

    .float-a { left: 14px; bottom: 24px; transform: rotate(-4deg); }
    .float-b { right: 28px; bottom: 122px; transform: rotate(5deg); animation-delay: .8s; }
    .float-c { left: 44%; bottom: 18px; transform: rotate(-2deg); animation-delay: 1.4s; }

    .marquee-wrap {
      overflow: hidden;
      border-top: 1px solid var(--line-light);
      border-bottom: 1px solid var(--line-light);
      background: #151210;
      padding: 12px 0;
    }

    .marquee {
      display: flex;
      align-items: center;
      gap: 18px;
      width: max-content;
      animation: marquee 34s linear infinite;
      will-change: transform;
    }

    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: rgba(246, 230, 211, .6);
      font-weight: 700;
      white-space: nowrap;
    }

    .marquee-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--coral);
      box-shadow: 0 0 0 4px rgba(242, 85, 61, .16);
    }

    .wave {
      display: block;
      width: 100%;
      height: 96px;
      margin-top: -1px;
      margin-bottom: -1px;
    }

    .wave-on-light {
      background: var(--bg-light);
    }

    .light-block {
      background: var(--bg-light);
      color: var(--ink);
      padding: 90px 0;
      position: relative;
    }

    .dark-block {
      background: var(--bg-dark);
      color: var(--text-light);
      padding: 90px 0;
      position: relative;
      overflow: hidden;
    }

    .section-head {
      max-width: 900px;
    }

    .section-head h2 {
      margin: 18px 0 0;
      font-size: clamp(38px, 5vw, 70px);
      line-height: .92;
      letter-spacing: -.02em;
      font-weight: 800;
    }

    .section-head p {
      margin: 18px 0 0;
      font-size: 20px;
      line-height: 1.65;
      color: rgba(23, 19, 17, .7);
      max-width: 900px;
    }

    .dark-block .section-head p {
      color: rgba(246, 230, 211, .72);
    }

    .cards-3 {
      margin-top: 34px;
      display: grid;
      gap: 18px;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .benefit {
      border: 2px solid var(--ink);
      border-radius: 32px;
      padding: 22px;
      box-shadow: var(--shadow-2);
      transition: transform .24s ease;
      transform-style: preserve-3d;
    }

    .benefit:hover { transform: translateY(-7px) rotate(0deg); }

    .benefit.dark {
      background: var(--ink);
      color: var(--text-light);
      transform: rotate(-2deg);
    }

    .benefit.coral {
      background: var(--coral);
      color: var(--text-light);
      transform: rotate(2deg);
    }

    .benefit.light {
      background: #fff;
      color: var(--ink);
      transform: rotate(-1deg);
    }

    .benefit-icon {
      width: 50px;
      height: 50px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .22);
      margin-bottom: 16px;
      font-size: 20px;
      font-weight: 800;
    }

    .benefit.light .benefit-icon {
      border-color: rgba(23, 19, 17, .12);
      background: var(--coral);
      color: var(--text-light);
    }

    .benefit h3 {
      margin: 0;
      font-size: 34px;
      line-height: .95;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .benefit p {
      margin: 14px 0 0;
      font-size: 16px;
      line-height: 1.7;
      opacity: .84;
    }

    .cabinet {
      margin-top: 36px;
      border: 2px solid var(--ink);
      border-radius: var(--radius-lg);
      background: var(--ink);
      color: var(--text-light);
      padding: 28px;
      box-shadow: var(--shadow-1);
      position: relative;
      overflow: hidden;
    }

    .cabinet::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top left, rgba(242, 85, 61, .18), transparent 24%),
        radial-gradient(circle at bottom right, rgba(246, 230, 211, .08), transparent 22%);
      pointer-events: none;
    }

    .cabinet > * { position: relative; }

    .cabinet .sticker {
      right: 18px;
      top: 16px;
      transform: rotate(7deg);
    }

    .cabinet-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: 1.05fr .95fr;
      align-items: start;
    }

    .cabinet-left small {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .22em;
      color: rgba(246, 230, 211, .55);
      font-weight: 700;
    }

    .cabinet-left h3 {
      margin: 14px 0 0;
      font-size: clamp(34px, 4vw, 58px);
      line-height: .92;
      letter-spacing: -.02em;
      font-weight: 800;
    }

    .cabinet-left p {
      margin: 18px 0 0;
      max-width: 720px;
      font-size: 18px;
      line-height: 1.65;
      color: rgba(246, 230, 211, .76);
    }

    .cabinet-main-text {
      margin-top: 40px !important;
    }

    .cabinet-list {
      margin-top: 22px;
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cabinet-item {
      border: 1px solid rgba(246, 230, 211, .16);
      background: rgba(246, 230, 211, .07);
      border-radius: 20px;
      padding: 11px 12px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 14px;
      color: rgba(246, 230, 211, .9);
      line-height: 1.45;
    }

    .cabinet-item i {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(242, 85, 61, .2);
      color: var(--coral);
      font-size: 12px;
      font-style: normal;
      flex: 0 0 18px;
    }

    .cabinet-right {
      display: grid;
      gap: 12px;
    }

    .cab-card {
      border: 2px solid var(--ink);
      border-radius: 28px;
      padding: 16px;
      box-shadow: var(--shadow-2);
      transition: transform .2s ease;
    }

    .cab-card:hover { transform: translateY(-6px); }

    .cab-card.light { background: var(--bg-light); color: var(--ink); transform: rotate(-1deg); }
    .cab-card.coral { background: var(--coral); color: var(--text-light); transform: rotate(1deg); }
    .cab-card.white { background: #fff; color: var(--ink); transform: rotate(-1deg); }

    .cab-tag {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .18em;
      font-weight: 700;
      opacity: .6;
      margin: 0;
    }

    .cab-card h4 {
      margin: 10px 0 0;
      font-size: 29px;
      line-height: .98;
      letter-spacing: -.01em;
      font-weight: 800;
    }

    .chips {
      margin-top: 10px;
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
    }

    .chips span {
      border: 1px solid rgba(23, 19, 17, .15);
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .11em;
      font-weight: 700;
      color: rgba(23, 19, 17, .62);
    }

    .price-wrap {
      border: 2px solid var(--ink);
      border-radius: 40px;
      background: var(--coral);
      color: var(--text-light);
      box-shadow: var(--shadow-1);
      overflow: hidden;
      position: relative;
      padding: 30px;
    }

    .price-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top left, rgba(246, 230, 211, .12), transparent 24%),
        radial-gradient(circle at bottom right, rgba(23, 19, 17, .12), transparent 22%);
      pointer-events: none;
    }

    .price-wrap > * { position: relative; }

    .price-wrap .sticker {
      right: 14px;
      top: 14px;
      transform: rotate(7deg);
    }

    .price-grid {
      display: grid;
      gap: 18px;
      grid-template-columns: .9fr 1.1fr;
    }

    .price-col h3 {
      margin: 12px 0 0;
      font-size: clamp(34px, 4.2vw, 58px);
      line-height: .94;
      letter-spacing: -.02em;
      font-weight: 800;
      max-width: 760px;
    }

    .price-cards {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      width: 100%;
      max-width: 980px;
    }

    .price-card {
      border: 2px solid rgba(246, 230, 211, .36);
      border-radius: 22px;
      background: rgba(23, 19, 17, .2);
      padding: 12px 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .price-card span {
      display: block;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 700;
      color: rgba(246, 230, 211, .76);
    }

    .price-card b {
      display: block;
      margin-top: 2px;
      font-size: clamp(33px, 2.2vw, 42px);
      line-height: .96;
      font-weight: 800;
      letter-spacing: -.02em;
      white-space: normal;
      color: #fff4e4;
    }

    .price-card .price-note {
      display: block;
      font-size: 14px;
      line-height: 1.25;
      font-weight: 600;
      color: rgba(246, 230, 211, .9);
      margin-top: 0;
    }

    .price-col p {
      margin: 14px 0 0;
      font-size: 18px;
      line-height: 1.66;
      color: rgba(246, 230, 211, .88);
      max-width: 760px;
    }

    .price-actions {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    @media (max-width: 1280px) {
      .price-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

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

    .faq {
      border: 2px solid var(--ink);
      border-radius: 28px;
      background: var(--bg-light);
      color: var(--ink);
      padding: 16px;
      box-shadow: var(--shadow-2);
      transition: transform .2s ease;
    }

    .faq:hover { transform: translateY(-4px); }

    .faq h4 {
      margin: 0;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: -.01em;
    }

    .faq p {
      margin: 10px 0 0;
      font-size: 15px;
      line-height: 1.7;
      color: rgba(23, 19, 17, .72);
    }

    .footer-cta {
      margin-top: 34px;
      border: 1px solid rgba(23, 19, 17, .2);
      border-radius: 22px;
      padding: 14px 16px;
      background: rgba(255, 255, 255, .42);
      color: rgba(23, 19, 17, .82);
      font-size: 14px;
      line-height: 1.6;
    }

    .reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .55s ease, transform .55s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: translateY(0);
    }

    @keyframes drift {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, 16px, 0); }
    }

    @keyframes bob {
      0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
      50% { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
    }

    @keyframes sweep {
      0% { left: -140px; opacity: 0; }
      20% { opacity: .65; }
      55% { opacity: .5; }
      100% { left: 100%; opacity: 0; }
    }

    @keyframes bars {
      0%, 100% { transform: scaleY(.74); }
      50% { transform: scaleY(1.06); }
    }

    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @media (max-width: 1300px) {
      .hero-grid,
      .cabinet-grid,
      .price-grid,
      .cards-3 {
        grid-template-columns: 1fr;
      }

      .hero-frame {
        height: auto;
        min-height: 630px;
      }

      .dashboard-shell {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
      }

      .float-a { left: 16px; bottom: 18px; }
      .float-b { right: 16px; bottom: 104px; }
      .float-c { left: 42%; bottom: 8px; }
    }

    @media (max-width: 980px) {
      .container { padding-inline: 14px; }

      .header-inner {
        min-height: 64px;
        flex-wrap: wrap;
        padding: 8px 0 10px;
        gap: 8px;
      }

      .header-nav {
        width: 100%;
        order: 3;
        justify-content: center;
        overflow: visible;
        scrollbar-width: none;
        flex-wrap: wrap;
        gap: 8px;
        padding: 6px;
      }

      .header-nav-link {
        min-height: 34px;
        font-size: 11px;
        padding: 0 13px;
      }

      .brand-sub { white-space: normal; }

      .hero {
        padding-top: 14px;
      }

      .hero-grid {
        padding-bottom: 22px;
        gap: 14px;
      }

      .hero-copy .sticker {
        position: static;
        transform: none;
        margin-bottom: 10px;
        display: inline-flex;
      }

      .hero-title {
        font-size: clamp(36px, 11.6vw, 48px);
        line-height: .92;
        letter-spacing: -.018em;
      }

      .hero-note {
        font-size: 16px;
        margin-top: 12px;
      }

      .hero-list {
        font-size: 15px;
        line-height: 1.52;
      }

      .hero-actions {
        margin-top: 14px;
      }

      .hero-actions .btn {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
      }

      .hero-frame {
        min-height: 360px;
        max-height: 420px;
        border-radius: 24px;
        overflow: hidden;
        padding: 12px;
      }

      .dashboard-shell {
        border-radius: 24px;
        padding: 8px;
        transform: scale(.86);
        transform-origin: top center;
        width: 116%;
        left: -8%;
      }

      .dashboard {
        border-radius: 20px;
      }

      .dash-top {
        flex-direction: column;
        align-items: flex-start;
      }

      .dash-body {
        grid-template-columns: 1fr;
        padding: 10px;
      }

      .dash-row {
        grid-template-columns: 1.5fr 1fr;
      }

      .dash-row > div:nth-child(3),
      .dash-row > div:nth-child(4) {
        display: none;
      }

      .float-note {
        display: none;
      }

      .float-a,
      .float-b,
      .float-c {
        animation: none;
      }

      .light-block,
      .dark-block {
        padding: 62px 0;
      }

      .section-head h2 {
        font-size: clamp(31px, 10.2vw, 44px);
      }

      .section-head p {
        font-size: 16px;
      }

      .cabinet,
      .price-wrap {
        padding: 18px;
        border-radius: 28px;
      }

      .cabinet .sticker,
      .price-wrap .sticker {
        position: static;
        transform: none;
        margin-bottom: 10px;
        display: inline-flex;
      }

      .cabinet-left h3,
      .price-col h3,
      .benefit h3 {
        font-size: clamp(29px, 10vw, 42px);
      }

      .cabinet-list {
        grid-template-columns: 1fr;
      }

      .price-cards {
        grid-template-columns: 1fr;
      }

      .price-card b {
        font-size: clamp(28px, 9vw, 38px);
      }
    }

    @media (max-width: 560px) {
      .brand-title {
        font-size: 12px;
      }

      .brand-sub {
        display: none;
      }

      .header-actions {
        display: none;
      }

      .header-actions .btn {
        min-height: 38px;
        padding: 0 13px;
        font-size: 12px;
      }

      .hero-title {
        font-size: clamp(30px, 10vw, 35px);
        line-height: .9;
        letter-spacing: -.014em;
      }

      .hero-list {
        font-size: 14px;
      }

      .eyebrow {
        font-size: 9px;
        letter-spacing: .08em;
        white-space: normal;
        padding: 6px 10px;
        max-width: 100%;
      }

      .hero-note {
        font-size: 14px;
        line-height: 1.4;
        margin-top: 10px;
      }

      .hero-grid {
        padding-bottom: 16px;
      }

      .hero-frame {
        display: none;
      }

      .hero-copy {
        max-width: none;
        border: 1px solid rgba(246, 230, 211, .17);
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(246, 230, 211, .03), rgba(246, 230, 211, .01));
        padding: 12px;
      }

      .hero-copy .sticker {
        margin-bottom: 8px;
        font-size: 9px;
        padding: 7px 11px;
      }

      .hero-list-desktop {
        display: none;
      }

      .hero-list-mobile {
        display: grid;
        gap: 6px;
        margin-top: 10px;
        font-size: 13px;
        line-height: 1.4;
      }

      .hero-list-mobile div {
        position: relative;
        padding-left: 14px;
      }

      .hero-list-mobile div::before {
        content: "";
        position: absolute;
        left: 0;
        top: .55em;
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: var(--coral);
      }

      .hero-mobile-preview {
        display: block;
        margin-top: 12px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 14px;
        background: linear-gradient(180deg, #111722, #0b1018);
        padding: 10px;
      }

      .hero-mobile-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 11px;
        color: rgba(255, 255, 255, .72);
        text-transform: uppercase;
        letter-spacing: .07em;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding-bottom: 7px;
        margin-bottom: 7px;
      }

      .hero-mobile-preview-head b {
        color: #55d098;
        font-size: 12px;
        letter-spacing: 0;
      }

      .hero-mobile-preview-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 12px;
        color: rgba(255, 255, 255, .78);
        padding: 5px 0;
      }

      .hero-mobile-preview-row strong {
        color: #f6e6d3;
        font-size: 13px;
      }

      .hero-actions {
        margin-top: 12px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
    }

    /* Hard override for production cache mismatches */
    #price .price-cards {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      width: 100%;
      max-width: 980px;
    }
    @media (max-width: 980px) {
      #price .price-cards {
        grid-template-columns: 1fr !important;
      }
    }