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

    :root {
      //--accent: #6C63FF;
      --accent: #ff2661;
      //--accent2: #00D4FF;
      --accent2: #5f3e49;
      --text: #1d1d1f;
      --text-muted: rgba(29,29,31,0.6);
      --text-dim: rgba(29,29,31,0.4);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
      background: #fff;
      color: var(--text);
      line-height: 1.5;
      overflow-x: hidden;
    }

    /* ── LIQUID GLASS NAV ── */
    .nav-wrapper {
      position: fixed; top: 20px; left: 0; right: 0; z-index: 100;
      display: flex; justify-content: center; pointer-events: none;
    }

    .liquidGlass-wrapper {
      pointer-events: all;
      position: relative;
      display: flex;
      font-weight: 600;
      overflow: hidden;
      box-shadow: 0 6px 6px rgba(0,0,0,0.2), 0 0 20px rgba(0,0,0,0.1);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    }

    .liquidGlass-effect {
      position: absolute; z-index: 0; inset: 0;
      backdrop-filter: blur(3px);
      filter: url(#glass-distortion);
      overflow: hidden;
    }

    .liquidGlass-tint {
      z-index: 1; position: absolute; inset: 0;
      background: rgba(255,255,255,0.50);
    }

    .liquidGlass-shine {
      position: absolute; inset: 0; z-index: 2; overflow: hidden;
      box-shadow:
        inset 2px 2px 1px 0 rgba(255,255,255,0.5),
        inset -1px -1px 1px 1px rgba(255,255,255,0.5);
    }

    .liquidGlass-text {
      z-index: 3; color: black;
    }

    .dock {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; border-radius: 2rem; padding: 0.4rem;
    }
    .dock, .dock > div { border-radius: 2rem; }

    .nav-logo {
      font-size: 15px; font-weight: 700; color: var(--text);
      text-decoration: none; letter-spacing: -0.3px;
      //background: rgba(0,0,0,0.06);
      padding: 8px 16px; border-radius: 24px;
      //border: 1px solid rgba(0,0,0,0.08);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
      white-space: nowrap;
    }
    .nav-logo:hover,
    .nav-logo.active { background: rgba(0,0,0,0.1); transform: scale(0.95); }
    .nav-logo span { color: var(--accent); }
    .nav-links { display: flex; gap: 4px; list-style: none; }
    .nav-links a {
      color: rgba(29,29,31,0.65); text-decoration: none; font-size: 13px;
      font-weight: 500; padding: 8px 14px; border-radius: 24px;
      border: 1px solid transparent;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
      display: block; white-space: nowrap;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: #1d1d1f; background: rgba(0,0,0,0.06);
      border-color: rgba(0,0,0,0.08); transform: scale(0.95);
    }
    .nav-cta {
      background: #6C63FF; color: #fff;
      padding: 8px 18px; border-radius: 24px; font-size: 13px;
      font-weight: 700; cursor: pointer; text-decoration: none;
      border: none; white-space: nowrap;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    }
    .nav-cta:hover { background: var(--accent2); transform: scale(0.95); }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      padding: 150px 5% 80px;
      background: #f5f5f7;
      gap: 48px;
    }
    .hero-eyebrow {
      font-size: 17px; font-weight: 500; color: var(--accent);
      letter-spacing: 0.02em;
    }
    .hero h1 {
      font-size: clamp(48px, 8vw, 76px);
      font-weight: 800; line-height: 1.0;
      letter-spacing: -0.04em;
      color: #1d1d1f;
    }
    .hero h1 em {
      font-style: normal;
      background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }
    .hero-sub {
      margin: 0 auto 0; max-width: 500px;
      font-size: 19px; font-weight: 400; color: rgba(29,29,31,0.6);
      line-height: 1.6;
    }
    /* Fades in whenever it scrolls into view — including scrolling back
       up to the top after visiting a lower section. */
    .hero-eyebrow, .hero h1, .hero-sub, .hero-actions {
      opacity: 0; transform: translateY(18px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .hero-eyebrow.in-view, .hero h1.in-view, .hero-sub.in-view, .hero-actions.in-view {
      opacity: 1 !important; transform: translateY(0) !important;
    }
    .hero-actions {
      display: flex; gap: 12px; justify-content: center;
      flex-wrap: wrap; margin-top: 2px;
    }
    .btn-primary {
      background: #1d1d1f; color: #fff; padding: 14px 30px;
      border-radius: 980px; font-size: 15px; font-weight: 600;
      text-decoration: none; transition: opacity 0.2s;
      display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-primary:hover { opacity: 0.8; }
    /* Pre-launch: rendered as a span, not a link — there is nowhere to send
       anyone yet. Restore the anchor and the Play URL at launch. */
    .btn-primary.is-disabled {
      opacity: 0.55; cursor: default; pointer-events: none;
    }
    .btn-ghost {
      background: transparent; color: var(--accent);
      padding: 14px 30px; border-radius: 980px; font-size: 15px;
      font-weight: 600; text-decoration: none;
      border: 1px solid rgba(108,99,255,0.4);
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-ghost:hover { background: rgba(108,99,255,0.08); border-color: var(--accent); }

    /* App image area */
    .hero-visual {
      width: 100%; display: flex; justify-content: center;
    }
    .tv-mockup {
      position: relative;
      width: min(1090px, 92vw);
      filter: drop-shadow(0 40px 80px rgba(0,0,0,0.18));
    }
    .tv-mockup .tv-frame {
      width: 100%; display: block;
    }
    /* Screen overlay positioned over the black panel of the TV image.
       The TV bezel sits ~2.6% from left/right, ~3.2% from top, ~9% from bottom (stand). */
    .tv-mockup .tv-screen {
      position: absolute;
      top: 1.5%;
      left: 1%;
      width: 98%;
      height: 97%;
      overflow: hidden;
      border-radius: 2px;
    }
    .tv-mockup .tv-screen img {
      width: 100%; height: 100%; display: block;
    }
    .hero-scroll-hint {
      font-size: 12px; color: rgba(29,29,31,0.35); letter-spacing: 0.1em;
      text-transform: uppercase; display: flex; flex-direction: column;
      align-items: center; gap: 6px;
    }
    .scroll-arrow {
      width: 1px; height: 40px;
      background: linear-gradient(to bottom, rgba(29,29,31,0.3), transparent);
    }

    /* ── DIVIDER ── */
    .divider { height: 1px; background: rgba(0,0,0,0.08); }

    /* ── SERVICES BAR ── */
    .services-bar {
      background: #fff; padding: 36px 5%; text-align: center;
    }
    .services-bar p {
      font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
      color: rgba(29,29,31,0.4); margin-bottom: 24px;
    }
    .services-row {
      display: flex; justify-content: center; align-items: center;
      flex-wrap: wrap; gap: 10px;
    }
    .service-chip {
      font-size: 13px; font-weight: 500; color: rgba(29,29,31,0.5);
      padding: 6px 16px; border-radius: 999px;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(0,0,0,0.03);
    }

    /* ── STATEMENT SECTION ── */
    .statement {
      background: #fff; padding: 120px 5%;
      text-align: center;
    }
    .statement h2 {
      font-size: clamp(36px, 5.5vw, 68px); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.1;
      max-width: 800px; margin: 0 auto;
      color: #1d1d1f;
    }
    .statement h2 span { color: rgba(29,29,31,0.4); }

    /* ── FEATURES CINEMATIC ── */
    .feature-full {
      min-height: 80vh;
      display: flex; align-items: center; justify-content: center;
      padding: 80px 0;
      position: relative;
    }
    .feature-full.dark  { background: #fff; }
    .feature-full.dark2 { background: #f5f5f7; }
    .feature-full.dark3 { background: #fff; }
    .feature-full-inner {
      display: grid; grid-template-columns: 0.8fr 1.2fr;
      gap: 60px; align-items: center;
      width: 100%; /*max-width: 1600px;*/
      margin: 0 auto;
      padding: 0 5%;
    }
    .feature-full-inner > div:first-child { max-width: 480px; margin-left: auto; }
    .feature-full-inner .feature-visual {
      justify-self: center;
      width: min(906px, 100%);
    }
    .feature-full-inner.reverse { direction: rtl; }
    .feature-full-inner.reverse > * { direction: ltr; }
    .feature-label {
      font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
    }
    .feature-full h2 {
      font-size: clamp(32px, 4vw, 52px); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.1;
      margin-bottom: 20px;
    }
    .feature-full p {
      font-size: 17px; color: var(--text-muted); line-height: 1.7;
      margin-bottom: 28px;
    }
    .feature-full a {
      color: var(--accent); text-decoration: none; font-size: 15px;
      font-weight: 500;
    }
    .feature-full a:hover { text-decoration: underline; }
    .feature-visual {
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .feature-visual-glow {
      position: absolute; //inset: -40px;
      background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(108,99,255,0.15), transparent);
    }
    .feature-visual-glow img{
      width: 100%;
      height: 100%
    }
    .feature-visual-badge {
      position: absolute; top: 16px; left: 16px;
      background: rgba(108,99,255,0.25); backdrop-filter: blur(8px);
      border: 1px solid rgba(108,99,255,0.4);
      border-radius: 999px; padding: 5px 12px;
      font-size: 12px; color: #fff;
    }
    .feature-mini-icon {
      font-size: 56px; opacity: 0.15;
    }
    .feature-visual-rotator { position: relative; width: 100%; height: 100%; }
    .feature-visual-rotator img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; opacity: 0; animation: featureRotate 4s infinite;
    }
    .feature-visual-rotator img:nth-child(1) { animation-delay: 0s; }
    .feature-visual-rotator img:nth-child(2) { animation-delay: 2s; }
    @keyframes featureRotate {
      0%, 3% { opacity: 0; }
      8%, 42% { opacity: 1; }
      47%, 100% { opacity: 0; }
    }

    /* ── ROOMS (Apple-style: text scrolls normally, visual stays pinned + wipes) ── */
    .rooms {
      position: relative;
      background: #f5f5f7;
    }
    /* Full-bleed color bands, positioned via JS to exactly match each text item's
       height. Anchored to .rooms itself (full viewport width) rather than the
       narrow text column, so there's no gap on the visual side and no seams
       between adjacent bands. */
    .rooms-bg-layer {
      position: absolute; inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .rooms-bg-band {
      position: absolute; left: 0; right: 0;
      background: #f5f5f7;
    }
    /* Each band declares a solid background-color as well as its gradient. The
       gradient alone leaves computed background-color transparent, and browsers that
       tint their chrome from the page (Safari, Arc, Dia) then sample through to body
       and show white. Visually identical — the gradient paints over the colour. */
    .rooms-bg-band[data-room="0"] { background-color: #f5f5f7; }
    .rooms-bg-band[data-room="1"] { background-color: #00b368; background-image: radial-gradient(at top right, #00d17a, #00b368); }
    .rooms-bg-band[data-room="2"] { background-color: #4b3fd6; background-image: radial-gradient(at top right, #6C63FF, #4b3fd6); }
    //.rooms-bg-band[data-room="3"] { background: #17171a; }
    .rooms-bg-band[data-room="3"] { background-color: #c81c49; background-image: radial-gradient(at top right, #ff2661, #c81c49); }
    .rooms-bg-band[data-room="4"] { background-color: #d97300; background-image: radial-gradient(at top right, #ff9500, #d97300); }
    .rooms-inner {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: 0.8fr 1.2fr;
      gap: 60px; align-items: start;
      width: 100%; /*max-width: 1600px;*/
      margin: 0 auto;
      padding: 0 5%;
    }
    .rooms-text-col { display: flex; flex-direction: column; max-width: 480px; margin-left: auto; }
    .rooms-text-item {
      min-height: 101vh;
      display: flex; flex-direction: column; justify-content: center;
    }
    .rooms-text-item h2 {
      font-size: clamp(32px, 4vw, 52px); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.1;
      margin-bottom: 20px;
    }
    .rooms-text-item p {
      font-size: 17px; color: var(--text-muted); line-height: 1.7;
      margin-bottom: 28px;
    }
    .rooms-text-item a {
      color: var(--accent); text-decoration: none; font-size: 15px;
      font-weight: 500;
    }
    .rooms-text-item a:hover { text-decoration: underline; }
    .rooms-mobile-media { display: none; }
    .rooms-text-item[data-room="1"],
    .rooms-text-item[data-room="2"],
    .rooms-text-item[data-room="3"],
    .rooms-text-item[data-room="4"] { color: #fff; },
    //.rooms-text-item[data-room="5"] { color: #fff; }
    .rooms-text-item[data-room="1"] .feature-label,
    .rooms-text-item[data-room="2"] .feature-label,
    .rooms-text-item[data-room="3"] .feature-label,
    .rooms-text-item[data-room="4"] .feature-label { color: rgba(255,255,255,0.8); },
    //.rooms-text-item[data-room="5"] .feature-label { color: rgba(255,255,255,0.8); }
    .rooms-text-item[data-room="1"] p,
    .rooms-text-item[data-room="2"] p,
    .rooms-text-item[data-room="3"] p,
    .rooms-text-item[data-room="4"] p { color: rgba(255,255,255,0.75); },
    //.rooms-text-item[data-room="5"] p { color: rgba(255,255,255,0.75); }
    .rooms-text-item[data-room="1"] a,
    .rooms-text-item[data-room="2"] a,
    .rooms-text-item[data-room="3"] a,
    .rooms-text-item[data-room="4"] a { color: #fff; },
    //.rooms-text-item[data-room="5"] a { color: #fff; }
    .rooms-visual-col {
      position: sticky; top: 0vh;
      height: 101vh;
      justify-self: center;
      width: min(906px, 100%);
      display: flex; align-items: center;
    }
    .rooms-tv-mockup {
      position: relative;
      width: 100%;
      top: 3vh;
    }
    /* tv_hardware_large_2x.png carries its drop shadow inside the canvas, so
       the solid TV body only occupies the top-left 91% x 85.4% of the image.
       The frame fills its box and the screen is positioned against the panel's
       real bounds, measured off the asset — earlier this was a 110%-wide frame
       with a 100%-wide screen, which pushed the shadow outside the layout box
       and made the page 34px wider than the viewport on narrow screens. */
    .rooms-tv-mockup .tv-frame { width: 100%; display: block; }
    .rooms-tv-mockup .tv-screen {
      position: absolute; top: 0.5%; left: 0.2%;
      width: 91%; height: 85.4%;
      overflow: hidden; border-radius: 2px;
    }
    .rooms-tv-mockup .tv-screen .room-media {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: cover;
      display: block;
      clip-path: inset(100% 0 0 0);
    }
    .rooms-tv-mockup .tv-screen .room-media:first-child { clip-path: inset(0 0 0 0); }
    /* Between the stacking breakpoint and the desktop layout — foldables
       unfolded in landscape, small tablets — 0.8fr/1.2fr leaves the text
       column too narrow to read. Even it out. */
    @media (min-width: 700px) and (max-width: 1100px) {
      .rooms-inner,
      .feature-full-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    }
    /* Stacking is about the space available, not "is it a phone": a Fold in
       landscape is ~830x750 CSS px, which fits the pinned layout fine but
       used to fall into a flat max-width:900px rule and lose the visual.
       Stack only when the viewport is genuinely narrow, or so short that a
       101vh sticky pane has nothing to show (the same max-height:500px
       landscape-phone threshold used further down). 700px keeps a Fold in
       portrait (~750px) on the pinned layout too. */
    @media (max-width: 699px), (max-height: 500px) {
      .rooms-inner { grid-template-columns: 1fr; padding: 0 5%; }
      /* The pinned/scroll-wipe treatment only makes sense with a sticky
         visual sitting beside scrolling text. When it stacks into one
         column, each room gets its own plain image inline with its text —
         no pinning, no scroll-driven wipe. */
      .rooms-visual-col { display: none; }
      .rooms-text-col { margin-left: 0; max-width: none; }
      .rooms-text-item { min-height: 0; padding: 24px 0; }
      /* .feature-full-inner is laid out identically to .rooms-inner, so it
         stacks on the same condition — width OR height. Keying it to width
         alone left a landscape phone with a two-column feature section above a
         stacked rooms section. */
      .feature-full { padding: 80px 5%; }
      .feature-full-inner { grid-template-columns: 1fr; gap: 40px; padding: 0; }
      .feature-full-inner.reverse { direction: ltr; }
      .feature-full-inner > div:first-child { margin-left: 0; max-width: none; }
      /* Visual first, then the text — matching .rooms-mobile-media's order:-1,
         so every stacked section reads picture-above-copy. */
      .feature-full-inner .feature-visual { justify-self: stretch; width: auto; margin-right: 0; order: -1; }
      .rooms-mobile-media {
        display: block; width: 100%; border-radius: 20px;
        order: -1;
        margin: 0 0 24px;
        box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
      }
      /* The feature section's video still sat inside the TV frame here, so it
         read as a hard-edged black rectangle next to the plain rounded images
         above. Drop the frame and present the video exactly like them. */
      .feature-full-inner .rooms-tv-mockup { top: 0; aspect-ratio: 16 / 9; }
      .feature-full-inner .rooms-tv-mockup .tv-frame { display: none; }
      .feature-full-inner .rooms-tv-mockup .tv-screen {
        position: relative; inset: auto;
        width: 100%; height: 100%;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
      }
      /* Same treatment for the hero's TV photo, so every visual on the page
         has the same corner radius once it stacks. */
      .hero .tv-mockup { border-radius: 20px; overflow: hidden; }
    }

    /* ── FEATURES GRID ── */
    .features-grid-section {
      background: #f5f5f7; padding: 80px 5%;
    }
    .features-grid-section .section-header {
      text-align: center; margin-bottom: 72px;
    }
    .section-label {
      font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
    }
    .section-title {
      font-size: clamp(32px, 4vw, 52px); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.1;
    }
    .features-bento {
      display: grid; gap: 16px; max-width: 1100px; margin: 0 auto;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: auto;
    }
    .bento-card {
      background: #fff; border: 1px solid rgba(0,0,0,0.07);
      border-radius: 20px; padding: 36px 28px;
      transition: border-color 0.25s;
      position: relative; overflow: hidden;
    }
    .bento-card:hover { border-color: rgba(108,99,255,0.35); }
    .bento-card.wide { grid-column: span 2; }
    /* Spans the whole row. The five cards are 2+1+1+2 column-units followed by this one;
       without the full span it lands alone on row three with two empty columns. */
    .bento-card.full { grid-column: 1 / -1; }
    .bento-card .card-icon {
      font-size: 32px; margin-bottom: 20px; display: block;
    }
    .bento-card h3 {
      font-size: 20px; font-weight: 700; margin-bottom: 10px;
      letter-spacing: -0.02em;
    }
    .bento-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; }
    .bento-card-glow {
      position: absolute; bottom: -40px; right: -40px; width: 150px; height: 150px;
      background: radial-gradient(circle, rgba(108,99,255,0.12), transparent 70%);
      pointer-events: none;
    }

    /* ── PRICING ── */
    .pricing-section { background: #fff; padding: 120px 5%; text-align: center; }
    .pricing-section .section-header { margin-bottom: 64px; }
    .pricing-grid {
      display: grid; gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      max-width: 900px; margin: 0 auto;
    }
    .price-card {
      background: #f5f5f7; border: 1px solid rgba(0,0,0,0.07);
      border-radius: 24px; padding: 40px 32px;
      text-align: left; position: relative;
    }
    .price-card.featured {
      background: linear-gradient(135deg, #ede9ff 0%, #e4e0ff 100%);
      border-color: rgba(108,99,255,0.3);
    }
    .popular-badge {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--accent); color: #fff;
      padding: 4px 18px; border-radius: 999px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    }
    .plan-name { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
    .plan-price { font-size: 52px; font-weight: 800; letter-spacing: -0.04em; margin: 16px 0 4px; }
    .plan-price sup { font-size: 22px; font-weight: 600; vertical-align: super; }
    .plan-period { font-size: 14px; color: var(--text-muted); margin-bottom: 32px; }
    .plan-divider { height: 1px; background: rgba(0,0,0,0.08); margin-bottom: 24px; }
    .plan-features { list-style: none; margin-bottom: 36px; }
    .plan-features li {
      display: flex; align-items: center; gap: 10px;
      font-size: 14px; color: var(--text-muted);
      padding: 7px 0;
    }
    .check { color: #4ade80; font-size: 15px; }
    .cross { color: #ccc; font-size: 15px; }
    .plan-btn {
      width: 100%; padding: 15px; border-radius: 980px;
      font-size: 15px; font-weight: 600; cursor: pointer;
      border: none; transition: opacity 0.2s, transform 0.15s;
    }
    .plan-btn-outline.free {margin-top: 35px;}
    .plan-btn:hover { opacity: 0.85; transform: scale(1.02); }
    /* Pre-launch: the buttons name a destination that doesn't exist yet, so they
       announce rather than invite a click. Swap for the Play badge at launch. */
    .plan-btn[disabled] { cursor: default; opacity: 0.55; }
    .plan-btn[disabled]:hover { opacity: 0.55; transform: none; }
    .plan-btn-dark { background: #1d1d1f; color: #fff; }
    .plan-btn-accent { background: var(--accent); color: #fff; }
    .plan-btn-outline { background: transparent; color: #1d1d1f; border: 1px solid rgba(0,0,0,0.2); }

    /* ── TESTIMONIALS ── */
    .reviews-section { background: #f5f5f7; padding: 120px 5%; }
    .reviews-section .section-header { text-align: center; margin-bottom: 64px; }
    .reviews-grid {
      display: grid; gap: 16px; max-width: 1100px; margin: 0 auto;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .review-card {
      background: #fff; border: 1px solid rgba(0,0,0,0.07);
      border-radius: 20px; padding: 32px 28px;
    }
    .review-stars { color: #FFB800; font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
    .review-text { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin-bottom: 24px; }
    .review-author { display: flex; align-items: center; gap: 12px; }
    .review-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: rgba(108,99,255,0.2); display: flex;
      align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; color: #a89fff; flex-shrink: 0;
    }
    .review-name { font-size: 14px; font-weight: 600; }
    .review-meta { font-size: 12px; color: var(--text-dim); }

    /* ── CTA FULL ── */
    .cta-full {
      background: #fff; padding: 160px 5%;
      text-align: center;
      background-image: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(108,99,255,0.08) 0%, transparent 70%);
    }
    .cta-full h2 {
      font-size: clamp(40px, 6vw, 76px); font-weight: 800;
      letter-spacing: -0.04em; line-height: 1.05;
      margin-bottom: 20px; color: #1d1d1f;
    }
    .cta-full p {
      font-size: 19px; color: var(--text-muted);
      margin-bottom: 40px; max-width: 480px; margin-left: auto; margin-right: auto;
    }
    .cta-links {
      display: flex; gap: 16px; justify-content: center;
      flex-wrap: wrap; margin-top: 40px;
    }

    /* ── FOOTER ── */
    footer { background: #f5f5f7; padding: 56px 5% 32px; border-top: 1px solid rgba(0,0,0,0.08); }
    .footer-grid {
      display: grid; gap: 40px; margin-bottom: 48px;
      grid-template-columns: 2fr repeat(3, 1fr);
    }
    .footer-brand p { font-size: 13px; color: var(--text-dim); margin-top: 12px; line-height: 1.7; max-width: 260px; }
    .footer-col h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
    .footer-col ul { list-style: none; }
    .footer-col ul li { margin-bottom: 10px; }
    .footer-col ul li a { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--text); }
    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
      padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.06);
      font-size: 12px; color: var(--text-dim);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      /* Scroll-triggered fade is a desktop-only flourish — on mobile the
         hero image is already always visible, so the heading, subtitle,
         and buttons should be too, not hidden until the user scrolls. */
      .hero-eyebrow, .hero h1, .hero-sub, .hero-actions {
        opacity: 1 !important; transform: none !important;
      }
      .features-bento { grid-template-columns: 1fr; }
      .bento-card.wide,
      .bento-card.full { grid-column: span 1; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    /* The whole dock measures 620px, so it still fits well under 900px —
       drop the links only once the viewport can no longer hold it. */
    @media (max-width: 699px) {
      .nav-links { display: none; }
    }
    @media (max-width: 540px) {
      .footer-grid { grid-template-columns: 1fr; }
    }

    /* ── LANDSCAPE MOBILE: scroll-snap between sections ── */
    @media (orientation: landscape) and (max-height: 500px) {
      /* proximity, not mandatory — mandatory traps scroll at the last
         snap-aligned section (.cta-full) and never lets the user reach
         the footer below it, since the footer isn't a snap target. */
      html { scroll-snap-type: y proximity; }
      .hero,
      .statement,
      .feature-full,
      .rooms-text-item,
      .features-grid-section,
      .pricing-section,
      .reviews-section,
      .cta-full {
        scroll-snap-align: start;
        scroll-snap-stop: always;
      }
    }