:root {
      --page: #ffffff;
      --surface: #ffffff;
      --surface-2: #ede8df;
      --ink: #101010;
      --muted: #6f6a62;
      --line: rgba(16, 16, 16, 0.12);
      --line-strong: rgba(16, 16, 16, 0.22);
      --accent: #e85d75;
      --accent-2: #227c72;
      --accent-3: #b0832f;
      --shadow: 0 28px 80px rgba(34, 28, 20, 0.14);
      --radius: 8px;
      color-scheme: light dark;
      font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--page);
    }

    body {
      margin: 0;
      min-height: 100vh;
      background: var(--page);
      color: var(--ink);
      letter-spacing: 0;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 60;
      height: env(safe-area-inset-top);
      background: var(--page);
      pointer-events: none;
    }

    img,
    video {
      display: block;
      max-width: 100%;
    }

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

    button,
    input,
    textarea {
      font: inherit;
    }

    .page-shell {
      width: min(100%, 1480px);
      margin: 0 auto;
      padding: 0 24px;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--page) 88%, transparent);
      backdrop-filter: blur(18px);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 76px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: 0.02em;
    }

    .brand img {
      width: 34px;
      height: 34px;
      border-radius: 8px;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: var(--muted);
      font-size: 0.96rem;
      font-weight: 600;
    }

    .nav-links a:hover {
      color: var(--ink);
    }

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

    .nav-burger {
      display: none;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 4px;
      width: 42px;
      height: 42px;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
    }

    .nav-burger span {
      display: block;
      width: 17px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 160ms ease, opacity 160ms ease;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 18px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      font-weight: 700;
      cursor: pointer;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
      white-space: nowrap;
    }

    .button:hover {
      transform: translateY(-1px);
      border-color: var(--ink);
    }

    .button-primary {
      border-color: var(--ink);
      background: var(--ink);
      color: var(--page);
    }

    .button-soft {
      background: color-mix(in srgb, var(--surface) 76%, transparent);
    }

    .hero {
      padding: 92px 0 56px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr);
      align-items: end;
      gap: 48px;
      margin-bottom: 42px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 18px;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      max-width: 850px;
      margin-bottom: 24px;
      font-size: 4.7rem;
      line-height: 0.98;
      letter-spacing: 0;
      font-weight: 700;
    }

    .hero-copy {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.25rem;
      line-height: 1.48;
    }

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

    .feature-stage {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .tabs {
      display: flex;
      gap: 8px;
      align-items: center;
      overflow-x: auto;
      padding: 14px;
      border-bottom: 1px solid var(--line);
    }

    .tab {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .tab-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--tab-color, var(--accent));
    }

    .tab[aria-selected="true"] {
      border-color: var(--line-strong);
      background: var(--surface);
      color: var(--ink);
      box-shadow: 0 8px 24px rgba(16, 16, 16, 0.08);
    }

    .stage-panel {
      display: grid;
      grid-template-columns: minmax(0, 0.7fr) minmax(420px, 1fr);
      gap: 56px;
      min-height: 560px;
    }

    .stage-copy {
      padding: 0;
    }

    .stage-kicker {
      margin-bottom: 16px;
      color: var(--accent-2);
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .stage-copy h2 {
      margin-bottom: 18px;
      font-size: 2.35rem;
      line-height: 1.04;
      letter-spacing: 0;
    }

    .stage-copy p {
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.55;
    }

    .stage-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 26px;
    }

    .chip {
      border: 0;
      border-radius: 0;
      padding: 0;
      color: var(--muted);
      background: transparent;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .chip + .chip {
      padding-left: 14px;
      margin-left: 14px;
      border-left: 1px solid var(--line);
    }

    .stage-media {
      position: relative;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(8, 1fr);
      gap: 14px;
      min-height: 560px;
      padding: 0;
      background: transparent;
    }

    .media-tile {
      overflow: hidden;
      border: 0;
      border-radius: 18px;
      background: var(--surface-2);
    }

    .media-tile img,
    .media-tile video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .media-main {
      grid-column: 4 / span 6;
      grid-row: 1 / span 7;
    }

    .media-side-a {
      grid-column: 1 / span 3;
      grid-row: 2 / span 4;
    }

    .media-side-b {
      grid-column: 10 / span 3;
      grid-row: 2 / span 4;
    }

    .media-caption {
      grid-column: 2 / span 10;
      grid-row: 8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .media-caption strong {
      color: var(--ink);
      font-weight: 800;
    }

    .section {
      padding: 84px 0;
      border-top: 1px solid var(--line);
    }

    .section-header {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(260px, 0.4fr);
      gap: 48px;
      align-items: end;
      margin-bottom: 34px;
    }

    .section h2 {
      margin-bottom: 0;
      font-size: 3rem;
      line-height: 1.05;
      letter-spacing: 0;
    }

    .section-header p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 1.04rem;
      line-height: 1.5;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .feature-card {
      min-height: 250px;
      border-radius: var(--radius);
      background: transparent;
      overflow: hidden;
      transition: background 200ms ease;
    }

    .feature-card:hover {
      background: var(--surface-2);
    }

    .feature-card-media {
      height: 130px;
      border-radius: 14px;
      overflow: hidden;
      background: var(--surface-2);
    }

    .feature-card-media img,
    .feature-card-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-card-body {
      padding: 18px;
    }

    .feature-card h3 {
      margin-bottom: 8px;
      font-size: 1.08rem;
      line-height: 1.2;
    }

    .feature-card p {
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.42;
    }

    .feature-card span {
      color: var(--accent-2);
      font-size: 0.84rem;
      font-weight: 800;
    }

    .comparison {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 48px;
      align-items: start;
    }

    .comparison-copy {
      padding: 0;
    }

    .comparison-copy h2 {
      font-size: 2.45rem;
    }

    .comparison-copy p,
    .comparison-list li {
      color: var(--muted);
      line-height: 1.55;
    }

    .comparison-list {
      display: grid;
      gap: 14px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .comparison-list li {
      padding-left: 18px;
      border-left: 3px solid var(--accent);
    }

    .process-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px 36px;
    }

    .contact-panel {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      backdrop-filter: blur(16px);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.2);
    }

    .process-card {
      position: relative;
      display: grid;
      gap: 14px;
      padding: 0 0 0 0;
      align-content: start;
    }

    .process-card + .process-card::before {
      content: "";
      position: absolute;
      left: -18px;
      top: 6px;
      bottom: 6px;
      width: 1px;
      background: var(--line);
    }

    .process-number {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      color: var(--muted);
      font-family: var(--font-display, "Playfair Display", serif);
      font-size: 2.4rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.02em;
    }

    .process-number::after {
      content: "";
      display: inline-block;
      width: 36px;
      height: 1px;
      background: var(--line-strong);
      transform: translateY(-10px);
    }

    .process-card h3,
    .compare-card h3 {
      color: var(--ink);
      font-size: 1.25rem;
    }

    .process-card p,
    .compare-card li,
    .contact-panel p {
      color: var(--muted);
      line-height: 1.55;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .compare-card {
      position: relative;
      padding: 28px 32px 32px 0;
      overflow: visible;
    }

    .compare-card + .compare-card {
      padding-left: 32px;
      border-left: 1px solid var(--line);
    }

    .compare-card.is-recommended::before {
      content: "";
      position: absolute;
      left: -1px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: color-mix(in srgb, var(--accent) 70%, transparent);
    }

    .compare-badge {
      display: inline-block;
      margin-bottom: 14px;
      color: var(--accent);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .check-list {
      display: grid;
      gap: 13px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .compare-card .button {
      margin-top: 24px;
    }

    .check-list li {
      position: relative;
      padding-left: 24px;
    }

    .check-list li::before {
      position: absolute;
      left: 0;
      top: 0;
      font-weight: 900;
    }

    .compare-card:not(.is-recommended) .check-list li::before {
      content: "x";
      color: rgba(255, 247, 251, 0.42);
    }

    .compare-card.is-recommended .check-list li::before {
      content: "+";
      color: var(--accent);
    }

    .seo-guide {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 24px 0;
      text-align: center;
      color: var(--muted);
    }

    .seo-guide a,
    .footer-links a,
    .footer-social a,
    .footer-credit a {
      color: var(--ink);
      font-weight: 800;
    }

    .contact-panel {
      max-width: 920px;
      margin: 0 auto;
      padding: 42px;
      text-align: center;
    }

    .contact-panel h2 {
      margin-bottom: 14px;
    }

    .contact-panel .button {
      margin-top: 24px;
    }

    .mobile-sticky-cta {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 45;
      display: none;
      padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.84) 34%, rgba(0, 0, 0, 0.96));
      transform: translateY(120%);
      transition: transform 240ms ease;
      pointer-events: none;
    }

    .mobile-sticky-cta.is-visible {
      transform: translateY(0);
    }

    .mobile-sticky-cta button {
      width: 100%;
      pointer-events: auto;
    }

    .gallery-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
      min-height: 520px;
    }

    .gallery-strip img {
      width: 100%;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      object-fit: cover;
    }

    .gallery-tall {
      grid-row: span 2;
    }

    .gallery-wide {
      grid-column: span 2;
    }

    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .price-card {
      position: relative;
      padding: 28px 28px 32px;
      border-right: 1px solid var(--line);
    }

    .price-card:last-child {
      border-right: 0;
    }

    .price-card.featured {
      background: color-mix(in srgb, var(--surface) 65%, transparent);
    }

    .price-card.featured::before {
      content: "";
      position: absolute;
      left: -1px;
      right: -1px;
      top: -1px;
      height: 1px;
      background: var(--ink);
    }

    .price-card h3 {
      margin-bottom: 14px;
      font-size: 1.3rem;
    }

    .price {
      margin-bottom: 16px;
      font-size: 2.4rem;
      font-weight: 800;
    }

    .price span {
      color: var(--muted);
      font-size: 1rem;
      font-weight: 600;
    }

    .price-card ul {
      display: grid;
      gap: 10px;
      margin: 0 0 22px;
      padding: 0;
      color: var(--muted);
      list-style: none;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 36px;
      row-gap: 0;
      align-items: start;
      border-top: 1px solid var(--line);
    }

    details {
      padding: 18px 4px;
      border-bottom: 1px solid var(--line);
    }

    summary {
      cursor: pointer;
      font-weight: 800;
      list-style: none;
      position: relative;
      padding-right: 28px;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      content: "+";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-weight: 400;
      font-size: 1.3rem;
      transition: transform 200ms ease, color 200ms ease;
    }

    details[open] summary::after {
      transform: translateY(-50%) rotate(45deg);
      color: var(--ink);
    }

    details p {
      margin: 12px 0 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .seo-copy {
      max-width: 970px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.65;
    }

    .seo-copy strong {
      color: var(--ink);
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 44px 0;
      color: var(--muted);
    }

    .footer-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      font-weight: 700;
    }

    .footer-primary {
      display: grid;
      gap: 12px;
    }

    .footer-social,
    .footer-credit {
      color: var(--muted);
      font-size: 0.94rem;
    }

    .footer-social {
      margin-top: 14px;
    }

    @media (max-width: 1120px) {
      h1 {
        font-size: 3.7rem;
      }

      .hero-grid,
      .stage-panel,
      .comparison,
      .section-header {
        grid-template-columns: 1fr;
      }

      .stage-copy {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .pricing-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .page-shell {
        padding: 0 16px;
      }

      .nav-links,
      .nav-actions .button-soft {
        display: none;
      }

      .hero {
        padding-top: 54px;
      }

      h1 {
        font-size: 2.75rem;
        line-height: 1.03;
      }

      .hero-copy {
        font-size: 1.05rem;
      }

      .stage-copy {
        padding: 26px;
      }

      .stage-copy h2,
      .section h2,
      .comparison-copy h2 {
        font-size: 2rem;
      }

      .stage-panel,
      .stage-media {
        min-height: auto;
      }

      .stage-media {
        grid-template-rows: repeat(6, 72px);
        padding: 14px;
      }

      .media-main {
        grid-column: 1 / span 8;
        grid-row: 1 / span 5;
      }

      .media-side-a {
        grid-column: 9 / span 4;
        grid-row: 1 / span 2;
      }

      .media-side-b {
        grid-column: 9 / span 4;
        grid-row: 3 / span 2;
      }

      .media-caption {
        grid-column: 1 / span 12;
        grid-row: 6;
      }

      .feature-grid,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .gallery-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: auto;
      }

      .gallery-strip img {
        min-height: 210px;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    /* QuincesAI visual direction: closer to the current cinematic/glass site, not a clone. */
    :root {
      --page: #09070a;
      --surface: rgba(16, 14, 18, 0.76);
      --surface-2: rgba(255, 255, 255, 0.06);
      --ink: #fff7fb;
      --muted: rgba(255, 247, 251, 0.68);
      --line: rgba(255, 255, 255, 0.13);
      --line-strong: rgba(255, 255, 255, 0.26);
      --accent: #ff4f83;
      --accent-2: #78dec8;
      --accent-3: #f0bf62;
      --shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
      color-scheme: dark;
    }

    body {
      background: linear-gradient(180deg, rgba(9, 7, 10, 0) 0, var(--page) 720px), var(--page);
    }

    .nav {
      position: fixed;
      top: calc(env(safe-area-inset-top) + 12px);
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      border-bottom: 0;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
      pointer-events: none;
    }

    .nav-inner {
      position: relative;
      width: auto;
      max-width: calc(100vw - 32px);
      min-height: 58px;
      padding: 8px 14px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 999px;
      background: rgba(8, 7, 9, 0.66);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34);
      color: #fff7fb;
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      pointer-events: auto;
    }

    .brand span {
      display: block;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      color: #fff7fb;
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .nav-links {
      gap: clamp(14px, 1.8vw, 22px);
      color: rgba(255, 247, 251, 0.72);
    }

    .nav-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 2px;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 0.92rem;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    .nav-links button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.06);
      color: inherit;
      font: inherit;
      font-size: 0.92rem;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }

    .nav-links a:hover {
      color: #fff7fb;
    }

    .nav-links button:hover {
      color: #fff7fb;
    }

    .nav-link-feature,
    .nav-link-interior {
      border-color: transparent !important;
      background: transparent !important;
      color: rgba(255, 247, 251, 0.72) !important;
    }

    .nav-language {
      min-width: 48px;
      border-color: rgba(255, 255, 255, 0.14) !important;
      border-radius: 6px !important;
      color: rgba(255, 247, 251, 0.86) !important;
    }

    .nav-language-mobile {
      display: none;
    }

    .nav .button {
      border-color: rgba(255, 255, 255, 0.16);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff7fb;
    }

    .nav .button-primary {
      border-color: #fff7fb;
      background: #fff7fb;
      color: #100b0f;
    }

    .nav .nav-burger {
      border-color: rgba(255, 255, 255, 0.16);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff7fb;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .hero {
      position: relative;
      min-height: 100vh;
      padding: 142px 0 64px;
      overflow: hidden;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        linear-gradient(90deg, rgba(5, 4, 6, 0.9) 0%, rgba(5, 4, 6, 0.62) 42%, rgba(5, 4, 6, 0.18) 100%),
        linear-gradient(180deg, rgba(5, 4, 6, 0.02) 0%, rgba(5, 4, 6, 0.8) 88%);
    }

    .hero-video-backdrop {
      position: absolute;
      inset: 0;
      z-index: -4;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: url("/assets/main/quinces/hero2.webp") center / cover no-repeat;
    }

    .hero-main-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 44%;
      filter: saturate(1.08) contrast(1.03) brightness(0.82);
    }

    .hero-media-wall {
      position: absolute;
      inset: 5% -20% -16%;
      z-index: -4;
      display: grid;
      gap: 18px;
      align-content: start;
      padding-top: 0;
      opacity: 0.84;
      transform: rotate(-7deg) scale(1.12);
      transform-origin: center top;
      pointer-events: none;
      overflow: hidden;
      contain: layout paint;
      filter: saturate(1.05) contrast(1.02);
    }

    .hero-motion-section {
      position: relative;
      overflow: hidden;
      padding: 42px 0 30px;
      background:
        linear-gradient(180deg, var(--page) 0%, rgba(255, 255, 255, 0.02) 36%, var(--page) 100%);
      border-y: 1px solid var(--line);
      isolation: isolate;
    }

    .hero-motion-section::before,
    .hero-motion-section::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .hero-motion-section::before {
      background:
        linear-gradient(90deg, var(--page) 0%, transparent 14%, transparent 86%, var(--page) 100%),
        linear-gradient(180deg, var(--page) 0%, transparent 26%, transparent 74%, var(--page) 100%);
    }

    .hero-motion-section::after {
      background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 48%, var(--page) 96%);
      opacity: 0.72;
    }

    .motion-section-copy {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 22px;
    }

    .motion-section-kicker {
      margin: 0 0 6px;
      color: var(--accent);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .motion-section-title {
      max-width: 760px;
      margin: 0;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(2rem, 4.5vw, 4.5rem);
      line-height: 0.96;
      color: var(--ink);
    }

    .motion-section-copy p:not(.motion-section-kicker) {
      max-width: 360px;
      margin: 0;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.45;
    }

    .feature-stage-section {
      padding: 58px 0 82px;
      background: var(--page);
    }

    .hero-wall-row {
      display: flex;
      gap: 18px;
      width: max-content;
      animation: heroWallSlide 58s linear infinite;
      will-change: transform;
    }

    .hero-wall-row:nth-child(2) {
      margin-left: -160px;
      animation-duration: 66s;
      animation-direction: reverse;
    }

    .hero-wall-row:nth-child(3) {
      margin-left: -70px;
      animation-duration: 74s;
    }

    .hero-wall-card {
      position: relative;
      overflow: hidden;
      flex: 0 0 198px;
      height: 280px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.07);
      box-shadow: 0 26px 72px rgba(0, 0, 0, 0.38);
    }

    .hero-wall-card.is-wide {
      flex-basis: 310px;
    }

    .hero-wall-card img,
    .hero-wall-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @keyframes heroWallSlide {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(-50%, 0, 0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-wall-row {
        animation: none;
      }
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      z-index: -2;
      height: 180px;
      background: linear-gradient(180deg, transparent, var(--page));
    }

    .hero .page-shell {
      position: relative;
      z-index: 2;
    }

    .hero-grid {
      min-height: 42vh;
      align-items: center;
      margin-bottom: 28px;
    }

    .eyebrow {
      color: var(--accent-3);
      letter-spacing: 0.22em;
    }

    .hero .eyebrow,
    .hero h1,
    .hero .hero-copy {
      color: #fff7fb;
    }

    h1 {
      max-width: 980px;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(3.1rem, 7vw, 7.25rem);
      line-height: 0.93;
      font-weight: 700;
      text-wrap: balance;
    }

    .hero-copy {
      max-width: 700px;
      color: rgba(255, 247, 251, 0.78) !important;
      font-size: clamp(1.05rem, 1.7vw, 1.32rem);
    }

    .hero-actions .button {
      min-height: 52px;
      padding: 0 22px;
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(255, 255, 255, 0.08);
      color: #fff7fb;
      backdrop-filter: blur(12px);
    }

    .hero-actions .button-primary {
      border-color: #fff7fb;
      background: #fff7fb;
      color: #110b10;
    }

    .hero-trust-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      margin-top: 18px;
    }

    .hero-trust-pill {
      display: inline-flex;
      align-items: center;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(255, 247, 251, 0.62);
      font-size: 0.85rem;
      font-weight: 600;
      backdrop-filter: none;
    }

    .hero-trust-pill + .hero-trust-pill {
      padding-left: 14px;
      margin-left: 14px;
      border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .hero-start-panel {
      display: grid;
      grid-template-columns: minmax(220px, 0.74fr) minmax(300px, 1fr);
      gap: 10px;
      width: min(100%, 760px);
      margin-top: 18px;
    }

    .hero-drop-card,
    .hero-flow-step {
      border: 0;
      background: transparent;
    }

    .hero-drop-card {
      display: flex;
      align-items: center;
      gap: 14px;
      min-height: 80px;
      padding: 8px 0;
      color: #fff7fb;
      transition: opacity 160ms ease;
    }

    .hero-drop-card:hover {
      opacity: 0.86;
    }

    .hero-drop-icon {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background: #fff7fb;
      color: #100b0f;
      font-size: 1.25rem;
      font-weight: 900;
    }

    .hero-drop-copy {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .hero-drop-copy strong,
    .hero-flow-step strong {
      color: #fff7fb;
      font-size: 0.94rem;
      line-height: 1.15;
    }

    .hero-drop-copy span,
    .hero-flow-step span {
      color: rgba(255, 247, 251, 0.62);
      font-size: 0.78rem;
      line-height: 1.3;
    }

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

    .hero-flow-step {
      position: relative;
      min-height: 0;
      padding: 8px 14px 8px 0;
    }

    .hero-flow-step + .hero-flow-step {
      padding-left: 14px;
      border-left: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-flow-step em {
      display: inline-flex;
      align-items: baseline;
      width: auto;
      height: auto;
      margin-right: 8px;
      margin-bottom: 6px;
      color: var(--accent);
      background: transparent;
      font-style: normal;
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .hero-showcase {
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-rows: repeat(8, 56px);
      gap: 10px;
      width: min(100%, 560px);
      justify-self: end;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #fff7fb;
    }

    .hero-showcase-tile {
      position: relative;
      overflow: hidden;
      border: 0;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.07);
    }

    .hero-showcase-tile img,
    .hero-showcase-tile video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-showcase-main {
      grid-column: 1 / span 6;
      grid-row: 1 / span 8;
    }

    .hero-showcase-quincetok {
      grid-column: 7 / span 4;
      grid-row: 1 / span 4;
    }

    .hero-showcase-interior {
      grid-column: 7 / span 4;
      grid-row: 5 / span 4;
    }

    .hero-showcase-chip {
      position: absolute;
      left: 14px;
      top: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.44);
      color: #fff7fb;
      font-size: 0.78rem;
      font-weight: 800;
      backdrop-filter: blur(10px);
    }

    .hero-showcase-note {
      grid-column: 4 / span 5;
      grid-row: 6 / span 3;
      align-self: end;
      z-index: 2;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background: rgba(7, 6, 8, 0.76);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
      backdrop-filter: blur(14px);
    }

    .hero-result-stack {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.48);
      color: #fff7fb;
      backdrop-filter: blur(12px);
    }

    .hero-result-stack strong {
      font-size: 0.84rem;
    }

    .hero-result-stack span {
      color: rgba(255, 247, 251, 0.68);
      font-size: 0.72rem;
      font-weight: 800;
    }

    .hero-auth-panel {
      position: relative;
      width: min(100%, 440px);
      justify-self: end;
      padding: 22px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 24px;
      background: rgba(8, 7, 9, 0.66);
      color: #fff7fb;
      box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(22px);
    }

    .hero-auth-eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(112, 229, 130, 0.26);
      border-radius: 999px;
      background: rgba(112, 229, 130, 0.12);
      color: #9ff3aa;
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .hero-auth-title {
      margin: 16px 0 10px;
      color: #fff7fb;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.02;
      text-wrap: balance;
    }

    .hero-auth-copy {
      margin-bottom: 20px;
      color: rgba(255, 247, 251, 0.68);
      font-size: 1rem;
      line-height: 1.48;
    }

    .hero-auth-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 58px;
      border: 1px solid #fff7fb;
      border-radius: 14px;
      background: #fff7fb;
      color: #100b0f;
      font-weight: 900;
      cursor: pointer;
      text-align: center;
      transition: transform 160ms ease, background 160ms ease;
    }

    .hero-auth-button:hover {
      transform: translateY(-1px);
      background: #ffffff;
    }

    .hero-auth-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 52px;
      margin-top: 10px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 14px;
      color: #fff7fb;
      font-weight: 800;
    }

    .hero-auth-methods {
      display: grid;
      gap: 8px;
      margin: 18px 0 0;
      padding: 0;
      color: rgba(255, 247, 251, 0.66);
      list-style: none;
    }

    .hero-auth-methods li {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.92rem;
    }

    .hero-auth-methods li::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(255, 79, 131, 0.14);
    }

    .suite-strip {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 18px;
      align-items: center;
      margin: 28px 0 24px;
      padding: 16px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff7fb;
    }

    .suite-strip-label {
      color: rgba(255, 247, 251, 0.48);
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .suite-strip-items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      align-items: center;
    }

    .suite-strip-items a,
    .suite-strip-items span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 247, 251, 0.9);
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(1rem, 2vw, 1.45rem);
      font-weight: 700;
      white-space: nowrap;
    }

    .suite-strip-items a::before,
    .suite-strip-items span::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 5px rgba(255, 79, 131, 0.14);
    }

    .hero-showcase-note span {
      display: block;
      margin-bottom: 6px;
      color: var(--accent-3);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .hero-showcase-note strong {
      display: block;
      color: #fff7fb;
      font-size: 1.08rem;
      line-height: 1.14;
    }

    .hero-showcase-note p {
      margin-top: 6px;
      margin-bottom: 0;
      color: rgba(255, 247, 251, 0.65);
      font-size: 0.84rem;
      line-height: 1.35;
    }

    .hero-product-dock {
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #fff7fb;
      box-shadow: none;
    }

    .dock-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 24px;
      align-items: end;
      padding: 0 0 24px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: transparent;
    }

    .dock-kicker {
      margin: 0 0 8px;
      color: var(--accent-3);
      font-size: 0.76rem;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .dock-title {
      max-width: 760px;
      margin: 0;
      color: #fff7fb;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(1.6rem, 2.5vw, 2.45rem);
      line-height: 1.02;
      text-wrap: balance;
    }

    .dock-copy {
      max-width: 310px;
      margin: 0;
      color: rgba(255, 247, 251, 0.66);
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .dock-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }

    .dock-badge {
      display: inline-flex;
      align-items: center;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(255, 247, 251, 0.6);
      font-size: 0.78rem;
      font-weight: 600;
    }

    .dock-badge + .dock-badge {
      padding-left: 12px;
      margin-left: 12px;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .dock-tab-cue {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      margin: 22px 0 8px;
      padding-right: min(10vw, 150px);
      color: #fff7fb;
      pointer-events: none;
    }

    .dock-tab-cue span {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
      color: rgba(255, 247, 251, 0.86);
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .dock-tab-cue svg {
      width: 146px;
      height: 66px;
      transform: rotate(-7deg);
      filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.3));
    }

    .dock-tab-cue path {
      fill: none;
      stroke: currentColor;
      stroke-width: 9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tabs {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      padding: 8px 0 24px;
      border-bottom: 0;
      background: transparent;
      overflow: visible;
    }

    .tab {
      position: relative;
      flex: initial;
      justify-content: flex-start;
      align-items: center;
      min-width: 0;
      min-height: 68px;
      padding: 12px 16px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.075);
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
      color: rgba(255, 247, 251, 0.76);
      text-align: left;
      overflow: hidden;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .tab::after {
      content: "";
      position: absolute;
      inset: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent 46%);
      opacity: 0.72;
      pointer-events: none;
    }

    .tab + .tab {
      margin-left: 0;
    }

    .tab-copy {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .tab .tab-dot {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      width: 10px;
      height: 10px;
      margin-top: 0;
      background: var(--tab-color, var(--accent));
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--tab-color, var(--accent)) 15%, transparent);
    }

    .tab-copy strong {
      color: inherit;
      font-size: 1rem;
      line-height: 1.1;
      white-space: normal;
    }

    .tab-copy small {
      color: rgba(255, 247, 251, 0.52);
      font-size: 0.76rem;
      font-weight: 700;
      line-height: 1.3;
      white-space: normal;
    }

    .tab:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.32);
      background: rgba(255, 255, 255, 0.12);
      color: #fff7fb;
    }

    .tab[aria-selected="true"] {
      color: #100b0f;
      border-color: #fff7fb;
      background: #fff7fb;
      box-shadow: 0 24px 70px rgba(255, 247, 251, 0.22);
    }

    .tab[aria-selected="true"]::after {
      opacity: 0;
    }

    .tab[aria-selected="true"] .tab-copy small {
      color: rgba(16, 11, 15, 0.62);
    }

    .stage-panel {
      grid-template-columns: minmax(320px, 0.55fr) minmax(560px, 1fr);
      width: 100%;
      max-width: 100%;
      min-height: 590px;
      background: #111113;
      overflow: hidden;
    }

    .stage-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      padding: clamp(44px, 4.2vw, 72px) 0 clamp(44px, 4.2vw, 72px) clamp(34px, 3.2vw, 64px);
      border-right-color: rgba(255, 255, 255, 0.12);
    }

    .stage-kicker {
      color: rgba(255, 247, 251, 0.74);
    }

    .stage-copy h2 {
      color: #fff7fb;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(2.05rem, 3.4vw, 3.55rem);
    }

    .stage-copy p {
      color: rgba(255, 247, 251, 0.78);
    }

    .chip {
      color: rgba(255, 247, 251, 0.72);
    }

    .chip + .chip {
      border-left-color: rgba(255, 255, 255, 0.12);
    }

    .stage-media {
      min-width: 0;
      width: 100%;
      max-width: 100%;
      min-height: 590px;
      padding: 0;
      background: transparent;
    }

    .media-tile {
      border: 0;
      background: rgba(255, 255, 255, 0.04);
      box-shadow: none;
    }

    .media-main {
      border-radius: 18px;
    }

    .media-side-a,
    .media-side-b {
      transform: rotate(-4deg);
    }

    .media-side-b {
      transform: rotate(4deg);
    }

    .media-caption {
      border-top-color: rgba(255, 255, 255, 0.12);
      color: rgba(255, 247, 251, 0.68);
    }

    .media-caption strong {
      color: #fff7fb;
    }

    .quincetok-demo {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(240px, 1fr);
      gap: 14px;
      width: 100%;
      min-height: 100%;
    }

    .quincetok-phone,
    .quincetok-result {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 22px;
      background: rgba(0, 0, 0, 0.34);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
    }

    .quincetok-phone {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .quincetok-phone-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      color: rgba(255, 247, 251, 0.72);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .quincetok-logo-dot {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: linear-gradient(135deg, #ff5f7c, #7c5cff);
      box-shadow: 0 10px 28px rgba(255, 95, 124, 0.22);
    }

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

    .quincetok-upload {
      min-height: 104px;
      padding: 14px;
      border: 1px dashed rgba(255, 255, 255, 0.18);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.055);
    }

    .quincetok-upload strong {
      display: block;
      color: #fff7fb;
      font-size: 0.9rem;
    }

    .quincetok-upload span {
      display: block;
      margin-top: 5px;
      color: rgba(255, 247, 251, 0.58);
      font-size: 0.76rem;
      line-height: 1.25;
    }

    .quincetok-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 10px;
      padding: 12px 13px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 247, 251, 0.6);
      font-size: 0.82rem;
    }

    .quincetok-generate {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      border-radius: 14px;
      background: #fff7fb;
      color: #100b0f;
      font-size: 0.9rem;
      font-weight: 900;
    }

    .quincetok-route-section {
      display: grid;
      gap: 9px;
    }

    .quincetok-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      color: rgba(255, 247, 251, 0.68);
      font-size: 0.72rem;
      font-weight: 800;
    }

    .quincetok-section-head strong {
      color: #fff7fb;
      font-size: 0.8rem;
    }

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

    .quincetok-trend {
      position: relative;
      overflow: hidden;
      aspect-ratio: 9 / 12;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.06);
    }

    .quincetok-trend video,
    .quincetok-result video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .quincetok-trend span,
    .quincetok-example-card span {
      position: absolute;
      left: 9px;
      right: 9px;
      bottom: 9px;
      z-index: 1;
      padding: 6px 8px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.52);
      color: #fff7fb;
      font-size: 0.68rem;
      font-weight: 800;
      text-align: center;
      backdrop-filter: blur(8px);
    }

    .quincetok-example-pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }

    .quincetok-example-card {
      position: relative;
      overflow: hidden;
      aspect-ratio: 9 / 11;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.06);
    }

    .quincetok-example-card video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .quincetok-plus {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      color: #fff7fb;
      font-weight: 900;
    }

    .quincetok-result {
      position: relative;
      min-height: 420px;
    }

    .quincetok-result video {
      position: absolute;
      inset: 0;
    }

    .quincetok-result-copy {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 16px;
      padding: 13px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.5);
      color: #fff7fb;
      backdrop-filter: blur(12px);
    }

    .quincetok-result-copy strong {
      display: block;
      font-size: 1rem;
    }

    .quincetok-result-copy span {
      display: block;
      margin-top: 5px;
      color: rgba(255, 247, 251, 0.7);
      font-size: 0.8rem;
    }

    .section {
      border-top-color: var(--line);
      background: var(--page);
    }

    .section h2,
    .comparison-copy h2 {
      font-family: "Playfair Display", Georgia, serif;
      text-wrap: balance;
    }

    .feature-grid {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .feature-card {
      grid-column: span 3;
      min-height: 310px;
      background: transparent;
      transition: background 200ms ease, transform 180ms ease;
    }

    .feature-card:nth-child(1),
    .feature-card:nth-child(3) {
      grid-column: span 6;
    }

    .feature-card:hover {
      transform: translateY(-2px);
      background: var(--surface-2);
    }

    .feature-card-media {
      height: 180px;
    }

    .feature-card-media img,
    .feature-card-media video,
    .media-tile img,
    .media-tile video,
    .story-media-tile img,
    .story-media-tile video,
    .gallery-strip img {
      object-position: center top;
    }

    .feature-card h3 {
      color: var(--ink);
      font-size: 1.25rem;
    }

    .feature-card span {
      color: var(--accent);
    }

    .feature-story-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 28px;
      margin-top: 56px;
    }

    .feature-story-card {
      grid-column: span 6;
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(220px, 1fr);
      min-height: 360px;
      overflow: hidden;
      background: transparent;
    }

    .feature-story-card.is-wide {
      grid-column: span 12;
      grid-template-columns: minmax(0, 0.48fr) minmax(420px, 1fr);
    }

    .feature-story-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 30px;
      border-right: 1px solid var(--line);
    }

    .feature-story-copy h3 {
      margin-bottom: 12px;
      color: #fff7fb;
      font-family: "Playfair Display", Georgia, serif;
      font-size: clamp(1.6rem, 2.6vw, 2.6rem);
      line-height: 1.03;
    }

    .feature-story-copy p {
      color: rgba(255, 247, 251, 0.68);
      line-height: 1.52;
    }

    .feature-story-copy ul {
      display: grid;
      gap: 9px;
      margin: 18px 0 0;
      padding: 0;
      color: rgba(255, 247, 251, 0.72);
      font-size: 0.92rem;
      list-style: none;
    }

    .feature-story-copy li {
      position: relative;
      padding-left: 17px;
    }

    .feature-story-copy li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.62em;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--accent);
    }

    .feature-story-media {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(0, 1fr));
      gap: 10px;
      min-height: 360px;
      padding: 16px;
      background:
        linear-gradient(135deg, rgba(255, 79, 131, 0.12), transparent 45%),
        rgba(255, 255, 255, 0.035);
    }

    .story-media-tile {
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.06);
    }

    .story-media-tile img,
    .story-media-tile video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .story-media-main {
      grid-column: span 4;
      grid-row: span 4;
    }

    .story-media-side {
      grid-column: span 2;
      grid-row: span 2;
    }

    .story-media-wide {
      grid-column: span 3;
      grid-row: span 2;
    }

    .comparison-copy,
    .price-card,
    details {
      background: var(--surface);
      backdrop-filter: blur(16px);
    }

    .gallery-strip img {
      border-color: var(--line);
      box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
    }

    .price-card.featured {
      border-color: var(--accent);
      box-shadow: 0 26px 80px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    footer {
      background: color-mix(in srgb, var(--page) 92%, #000 8%);
    }

    @media (max-width: 1120px) {
      .nav-inner {
        max-width: calc(100vw - 24px);
      }

      .stage-panel {
        grid-template-columns: minmax(0, 1fr);
      }

      .stage-copy {
        padding: clamp(30px, 5vw, 48px);
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      }

      .stage-media {
        min-height: 520px;
      }

      .feature-card,
      .feature-card:nth-child(1),
      .feature-card:nth-child(3) {
        grid-column: span 6;
      }

      .process-grid,
      .compare-grid,
      .footer-inner {
        grid-template-columns: 1fr;
      }

      .process-grid::before {
        display: none;
      }
    }

    @media (max-width: 760px) {
      .nav {
        top: calc(env(safe-area-inset-top) + 16px);
        padding: 0 10px;
      }

      .nav-inner {
        max-width: calc(100vw - 20px);
        min-height: 54px;
        padding: 6px 10px;
      }

      .nav-burger {
        display: inline-flex;
      }

      .nav.is-open .nav-burger span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }

      .nav.is-open .nav-burger span:nth-child(2) {
        opacity: 0;
      }

      .nav.is-open .nav-burger span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      .nav .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        z-index: 4;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 20px;
        background: rgba(8, 7, 9, 0.94);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
      }

      .nav.is-open .nav-links {
        display: flex;
      }

      .nav .nav-links a,
      .nav .nav-links button {
        justify-content: flex-start;
        width: 100%;
        min-height: 42px;
        padding: 0 14px;
      }

      .nav .nav-language {
        min-width: 0;
      }

      .hero {
        padding-top: 104px;
      }

      h1 {
        max-width: 100%;
        font-size: 2.38rem;
        line-height: 1.02;
        text-wrap: normal;
      }

      .hero-copy {
        max-width: 100%;
        font-size: 1rem;
        line-height: 1.38;
        overflow-wrap: break-word;
      }

      .hero-grid {
        min-height: auto;
      }

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

      .hero-actions .button {
        width: 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
      }

      .hero-trust-row {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero-trust-pill {
        justify-content: center;
        min-width: 0;
        text-align: center;
        white-space: normal;
      }

      .hero-start-panel {
        grid-template-columns: 1fr;
        width: 100%;
      }

      .hero-flow {
        grid-template-columns: 1fr;
      }

      .hero-drop-card,
      .hero-flow-step {
        min-width: 0;
      }

      .hero-auth-panel {
        width: 100%;
        justify-self: stretch;
      }

      .hero-wall-card {
        flex-basis: 128px;
        height: 190px;
        border-radius: 14px;
      }

      .hero-wall-card.is-wide {
        flex-basis: 190px;
      }

      .hero-wall-row {
        width: 100%;
        max-width: 100%;
        gap: 12px;
        overflow: hidden;
      }

      .hero-wall-row .hero-wall-card:nth-child(n+3) {
        display: none;
      }

      .suite-strip {
        grid-template-columns: 1fr;
      }

      .suite-strip {
        align-items: start;
      }

      .hero-showcase {
        width: 100%;
        justify-self: stretch;
      }

      .hero-showcase {
        grid-template-rows: repeat(7, 54px);
      }

      .hero-showcase-main {
        grid-column: 1 / span 7;
        grid-row: 1 / span 7;
      }

      .hero-showcase-quincetok {
        grid-column: 8 / span 3;
        grid-row: 1 / span 3;
      }

      .hero-showcase-interior {
        grid-column: 8 / span 3;
        grid-row: 4 / span 4;
      }

      .hero-showcase-note {
        grid-column: 2 / span 7;
        grid-row: 5 / span 3;
      }

      .hero-product-dock {
        margin-inline: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
      }

      .dock-header {
        grid-template-columns: 1fr;
        padding: 22px 20px 16px;
      }

      .dock-copy {
        max-width: 100%;
      }

      .dock-tab-cue {
        justify-content: flex-start;
        gap: 10px;
        margin: 16px 0 8px;
        padding: 0 20px;
      }

      .dock-tab-cue span {
        min-height: 32px;
        font-size: 0.68rem;
      }

      .dock-tab-cue svg {
        width: 94px;
        height: 44px;
        transform: rotate(5deg);
      }

      .stage-copy {
        padding: 24px;
      }

      .stage-panel {
        width: 100%;
        max-width: 100%;
      }

      .stage-media {
        min-height: 456px;
        grid-template-rows: repeat(6, 76px);
      }

      .tabs {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 20px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tab {
        flex: 0 0 178px;
        min-height: 64px;
        scroll-snap-align: start;
      }

      .quincetok-demo {
        grid-template-columns: 1fr;
      }

      .stage-media:has(.quincetok-demo) {
        display: block;
        min-height: auto;
      }

      .quincetok-result {
        min-height: 360px;
      }

      .quincetok-upload-grid {
        grid-template-columns: 1fr;
      }

      .media-side-a,
      .media-side-b {
        transform: none;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .feature-card,
      .feature-card:nth-child(1),
      .feature-card:nth-child(3) {
        grid-column: auto;
      }

      .feature-story-grid {
        grid-template-columns: 1fr;
      }

      .feature-story-card,
      .feature-story-card.is-wide {
        grid-column: auto;
        grid-template-columns: 1fr;
      }

      .feature-story-copy {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .feature-story-media {
        min-height: 300px;
      }

      .process-card,
      .compare-card,
      .contact-panel {
        padding: 24px;
      }

      .process-card {
        min-height: auto;
      }

      .mobile-sticky-cta {
        display: block;
      }

      footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
      }
    }

    .scroll-anchor { position: relative; top: -110px; height: 0; width: 100%; }
    .coming-feature-card { position: relative; overflow: hidden; border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28); }
    .coming-feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 18%, transparent 46%); pointer-events: none; }
    .coming-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; padding: 2rem; }
    .coming-feature-copy { max-width: 46rem; }
    .coming-feature-kicker { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.45rem 0.8rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
    .coming-feature-point { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
    .coming-feature-point:first-child { border-top: 0; }
    .coming-feature-point__number { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.68); font-size: 0.78rem; font-weight: 700; }
    .coming-feature-video-wrap { position: relative; padding: 1rem; border-radius: 1.5rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .coming-feature-video-label { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; padding: 0.45rem 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.64); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; }
    .coming-soon-dot { width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 6px rgba(255,255,255,0.08); }
    .coming-feature-video { width: 100%; display: block; border-radius: 1.2rem; border: 1px solid rgba(255,255,255,0.1); background: #050505; box-shadow: 0 12px 30px rgba(0,0,0,0.22); }
    .coming-feature-video-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
    .coming-feature-video-card { display: flex; flex-direction: column; gap: 0.65rem; }
    .coming-feature-video-note { font-size: 0.76rem; color: rgba(255,255,255,0.56); text-transform: uppercase; letter-spacing: 0.12em; }
    .coming-feature-tips { margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); }
    .coming-feature-tips__title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
    .coming-feature-tips__list { margin-top: 0.85rem; display: grid; gap: 0.65rem; color: rgba(255,255,255,0.76); font-size: 0.93rem; line-height: 1.6; }
    .coming-feature-warning { margin-top: 1rem; padding: 0.95rem 1rem; border-radius: 1rem; background: rgba(120,75,0,0.12); border: 1px solid rgba(251,191,36,0.18); color: rgba(255,244,214,0.9); }
    .coming-feature-warning strong { display: block; margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(252,211,77,0.95); }
    @keyframes smooth-reveal {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .reveal-on-scroll { opacity: 0; animation: smooth-reveal 0.8s ease-out forwards; }
    .ambient-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 70%); border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(60px); }
    .premium-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; font-size: 0.875rem; color: #d4d4d8; backdrop-filter: blur(10px); transition: all 0.3s ease; }
    .premium-pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); color: white; }
    .bento-card { background: rgba(10,10,10,0.6); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(20px); border-radius: 0; transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); overflow: hidden; position: relative; }
    .bento-card:hover { transform: translateY(-5px); background: rgba(20,20,20,0.8); border-color: rgba(255,255,255,0.3); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.8); }
    .holo-text { background: linear-gradient(to right, #fff, #a1a1aa, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; }
    @keyframes shine { to { background-position: 200% center; } }
    .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; grid-auto-rows: 250px; grid-auto-flow: dense; }
    .gallery-item { position: relative; border-radius: 1.5rem; overflow: hidden; cursor: zoom-in; transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94); }
    .gallery-item:hover { transform: scale(1.02); z-index: 10; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); }
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
    .gallery-item:hover img { transform: scale(1.1); }
    .gallery-grid .col-span-2 { grid-column: span 2; }
    .gallery-grid .row-span-2 { grid-row: span 2; }
    .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: 1.5rem; }
    .gallery-item:hover .gallery-overlay { opacity: 1; }
    #lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; backdrop-filter: blur(10px); }
    #lightbox.active { opacity: 1; pointer-events: all; }
    #lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 0 50px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
    #lightbox.active img { transform: scale(1); }
    .lightbox-close { position: absolute; top: 2rem; right: 2rem; color: white; font-size: 2rem; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
    .lightbox-close:hover { opacity: 1; }
    .lightbox-cta { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10001; }
    @media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; } }
    @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 350px; } }
    @media (min-width: 901px) { .coming-feature-grid { grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.9fr); } .coming-feature-video-grid.quincetok-feature-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .coming-feature-grid { padding: 1.25rem; } .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; } .gallery-grid .col-span-2, .gallery-grid .row-span-2 { grid-column: auto; grid-row: auto; } .lightbox-cta { width: calc(100% - 2rem); } .lightbox-cta button { width: 100%; } }

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }

    main,
    section,
    footer,
    .nav,
    .page-shell,
    .hero,
    .hero-grid,
    .hero-media-wall,
    .feature-stage,
    .stage-panel,
    .coming-feature-card,
    .coming-feature-grid,
    .bento-card,
    .gallery-grid {
      max-width: 100%;
    }

    .contrast-cta,
    .bg-white.text-black,
    a.bg-white.text-black,
    button.bg-white.text-black {
      color: #050505 !important;
      -webkit-text-fill-color: #050505 !important;
    }

    .contrast-cta *,
    .bg-white.text-black * {
      color: inherit !important;
      -webkit-text-fill-color: inherit !important;
    }

    .app-promo-section {
      position: relative;
      overflow: hidden;
      padding: clamp(64px, 8vw, 104px) 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background:
        linear-gradient(135deg, rgba(232, 93, 117, 0.36), rgba(114, 87, 204, 0.26) 42%, rgba(34, 124, 114, 0.32)),
        linear-gradient(180deg, #080508 0%, #100b16 52%, #050505 100%);
      color: #fff;
    }

    .app-promo-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.18) 48%, transparent 74%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 18px);
      opacity: 0.28;
      pointer-events: none;
    }

    .app-promo-card {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: clamp(22px, 4vw, 42px);
      width: min(100%, 1040px);
      margin: 0 auto;
      padding: clamp(28px, 5vw, 56px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 30px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045));
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .app-promo-kicker {
      display: inline-flex;
      width: fit-content;
      margin: 0 0 14px;
      padding: 0.52rem 0.82rem;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.86);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .app-promo-title {
      margin: 0;
      color: #fff;
      font-family: "Cormorant Garamond", Georgia, serif;
      font-size: clamp(2.45rem, 6vw, 5.6rem);
      font-weight: 800;
      line-height: 0.92;
    }

    .app-promo-copy {
      margin: 18px 0 0;
      max-width: 620px;
      color: rgba(255, 255, 255, 0.78);
      font-size: clamp(1.05rem, 2vw, 1.35rem);
      font-weight: 500;
      line-height: 1.55;
    }

    .app-promo-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 64px;
      padding: 0 34px;
      border-radius: 999px;
      background: #fff;
      color: #050505 !important;
      -webkit-text-fill-color: #050505 !important;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 18px 44px rgba(232, 93, 117, 0.35);
      transition: transform 180ms ease, box-shadow 180ms ease;
      white-space: nowrap;
    }

    .app-promo-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 24px 56px rgba(232, 93, 117, 0.45);
    }

    @media (max-width: 760px) {
      .page-shell,
      .nav-inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-right: 14px;
        padding-left: 14px;
      }

      .nav,
      .nav-inner,
      .nav-links,
      .brand,
      .hero,
      .hero-grid,
      .hero-copy,
      .hero-auth-panel,
      .hero-product-dock,
      .stage-panel {
        min-width: 0;
      }

      .nav-inner {
        position: relative;
        gap: 8px;
      }

      .brand {
        flex: 1 1 auto;
        max-width: min(48vw, 220px);
        min-width: 0;
        overflow: hidden;
      }

      .brand span {
        max-width: 100%;
        font-size: clamp(0.82rem, 3.6vw, 1.18rem);
        letter-spacing: 0.05em;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .nav-actions {
        flex: 0 0 auto;
        gap: 6px;
      }

      .nav .button-primary {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 98px;
        min-height: 42px;
        padding-right: 12px;
        padding-left: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.84rem;
      }

      .nav-language-mobile {
        display: inline-flex;
        flex: 0 0 auto;
        width: 40px;
        min-width: 40px;
        height: 42px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.08);
        color: #fff7fb;
        font-size: 0.78rem;
        font-weight: 900;
        letter-spacing: 0.02em;
      }

      .nav .nav-burger {
        width: 42px;
        height: 42px;
      }

      .nav .nav-links {
        left: 14px;
        right: 14px;
        width: auto;
        max-width: calc(100vw - 28px);
        overflow: hidden;
      }

      .hero {
        min-height: 100svh;
        padding-top: calc(env(safe-area-inset-top) + 118px);
        padding-bottom: 46px;
        overflow: hidden;
      }

      .hero::before {
        background:
          linear-gradient(180deg, rgba(5, 4, 6, 0.08) 0%, rgba(5, 4, 6, 0.36) 28%, rgba(5, 4, 6, 0.86) 62%, #050406 92%),
          linear-gradient(90deg, rgba(5, 4, 6, 0.9) 0%, rgba(5, 4, 6, 0.42) 52%, rgba(5, 4, 6, 0.08) 100%);
      }

      .hero::after {
        height: 260px;
        background: linear-gradient(180deg, transparent, #050406 82%);
      }

      .hero-video-backdrop {
        inset: 0 0 auto;
        width: 100%;
        height: min(50vh, 470px);
        border-bottom-right-radius: 34px;
        border-bottom-left-radius: 34px;
        background: #050406;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
      }

      .hero-main-video {
        object-position: 50% 14%;
        filter: saturate(1.12) contrast(1.08) brightness(0.88);
      }

      .hero-grid {
        position: relative;
        width: 100%;
        max-width: calc(100vw - 28px);
        padding-top: min(18vh, 148px);
      }

      .hero h1 {
        max-width: 100%;
        font-size: clamp(2.6rem, 11vw, 3.85rem);
        line-height: 0.92;
        overflow-wrap: break-word;
      }

      .hero-copy {
        max-width: min(27ch, calc(100vw - 48px));
        font-size: clamp(1.12rem, 4.7vw, 1.34rem);
        line-height: 1.38;
      }

      .hero-product-dock {
        margin-right: 0;
        margin-left: 0;
      }

      .ambient-glow,
      .blur-\[128px\] {
        display: none !important;
      }

      .tabs {
        max-width: 100%;
      }

      .tab {
        flex-basis: min(178px, 72vw);
      }

      .app-promo-section {
        padding-right: 14px;
        padding-left: 14px;
      }

      .app-promo-card {
        grid-template-columns: 1fr;
        justify-items: stretch;
        border-radius: 24px;
      }

      .app-promo-button {
        width: 100%;
        min-height: 58px;
        padding-right: 20px;
        padding-left: 20px;
        white-space: normal;
        text-align: center;
      }
    }

    @media (prefers-color-scheme: light) {
      :root {
        --page: #ffffff;
        --surface: rgba(255, 255, 255, 0.82);
        --surface-2: rgba(20, 30, 24, 0.055);
        --ink: #11130f;
        --muted: rgba(31, 38, 32, 0.66);
        --line: rgba(31, 38, 32, 0.13);
        --line-strong: rgba(31, 38, 32, 0.24);
        --accent: #d94867;
        --accent-2: #14766e;
        --accent-3: #8a641f;
        --shadow: 0 28px 90px rgba(68, 76, 58, 0.15);
        color-scheme: light;
      }

      html {
        background: #050406;
      }

      body {
        background: #ffffff;
        color: var(--ink);
      }

      .nav-inner {
        border-color: rgba(31, 38, 32, 0.13);
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0 18px 60px rgba(68, 76, 58, 0.16);
        color: var(--ink);
      }

      .brand span,
      .nav-links a:hover,
      .nav-links button:hover,
      .hero .eyebrow,
      .hero h1,
      .hero .hero-copy,
      .hero-drop-card,
      .hero-drop-copy strong,
      .hero-flow-step strong,
      .hero-showcase,
      .hero-auth-title,
      .hero-showcase-note strong,
      .suite-strip,
      .suite-strip-items a,
      .suite-strip-items span,
      .hero-product-dock,
      .dock-title,
      .stage-copy h2,
      .media-caption strong,
      .quincetok-upload strong,
      .quincetok-section-head strong,
      .feature-story-copy h3,
      .coming-feature-copy h2,
      .coming-feature-point h3,
      .coming-feature-tips__title,
      #services h2,
      #services strong,
      #panorama-feature-title,
      #switcher-title,
      footer h2,
      footer h3 {
        color: var(--ink) !important;
        -webkit-text-fill-color: currentColor;
      }

      .nav-links,
      .nav-link-feature,
      .nav-link-interior,
      .nav-language,
      .nav .button,
      .nav .nav-burger,
      .hero-copy,
      .hero-trust-pill,
      .hero-drop-copy span,
      .hero-flow-step span,
      .hero-auth-copy,
      .hero-auth-methods,
      .suite-strip-label,
      .dock-copy,
      .dock-badge,
      .tab-copy small,
      .stage-kicker,
      .stage-copy p,
      .chip,
      .media-caption,
      .quincetok-phone-header,
      .quincetok-upload span,
      .quincetok-input,
      .quincetok-section-head,
      .quincetok-result-copy span,
      .feature-story-copy p,
      .feature-story-copy ul,
      .coming-feature-copy p,
      .coming-feature-point p,
      .coming-feature-video-note,
      .coming-feature-tips__list,
      #services p,
      #panorama-feature p,
      footer,
      footer a {
        color: var(--muted) !important;
      }

      .hero::before {
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.66) 42%, rgba(255, 255, 255, 0.12) 100%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.78) 88%);
      }

      .hero-media-wall {
        opacity: 0.58;
        filter: saturate(1.08) contrast(1.08) brightness(1.02);
      }

      .hero-main-video {
        filter: saturate(1.08) contrast(1.04) brightness(1.03);
      }

      .hero-wall-card,
      .hero-showcase-tile,
      .media-tile,
      .story-media-tile,
      .gallery-strip img,
      .coming-feature-video {
        border-color: rgba(31, 38, 32, 0.12);
        background: rgba(255, 255, 255, 0.58);
        box-shadow: 0 24px 64px rgba(68, 76, 58, 0.14);
      }

      .hero-actions .button,
      .nav .button,
      .nav .nav-burger,
      .nav-language,
      .hero-auth-secondary,
      .dock-tab-cue span,
      .tab,
      .premium-pill,
      main [class*="border-white/"] {
        border-color: rgba(31, 38, 32, 0.15) !important;
      }

      .nav .button,
      .nav .nav-burger,
      .nav-language,
      .hero-actions .button,
      .hero-auth-secondary,
      .dock-tab-cue span,
      .tab,
      .premium-pill {
        background: rgba(255, 255, 255, 0.6);
        color: var(--ink) !important;
      }

      .nav .button-primary,
      .hero-actions .button-primary,
      .hero-auth-button,
      .hero-drop-icon,
      .quincetok-generate,
      .stage-actions .button-primary,
      #services button,
      a.bg-white.text-black,
      button.bg-white.text-black,
      .contrast-cta {
        border-color: var(--ink) !important;
        background: var(--ink) !important;
        color: #fffaf6 !important;
        -webkit-text-fill-color: #fffaf6 !important;
      }

      .hero-trust-pill + .hero-trust-pill,
      .hero-flow-step + .hero-flow-step,
      .suite-strip,
      .dock-header,
      .dock-badge + .dock-badge,
      .stage-copy,
      .media-caption,
      .chip + .chip,
      .feature-story-copy,
      .coming-feature-point,
      .section {
        border-color: var(--line) !important;
      }

      .hero-auth-eyebrow {
        border-color: rgba(20, 118, 110, 0.22);
        background: rgba(20, 118, 110, 0.1);
        color: #0f6b62;
      }

      .hero-auth-panel,
      .hero-showcase-note,
      .hero-result-stack,
      .stage-panel,
      .quincetok-phone,
      .quincetok-result,
      .comparison-copy,
      .price-card,
      details,
      .coming-feature-card,
      .coming-feature-video-wrap,
      .coming-feature-tips,
      .bento-card,
      #panorama-feature > div > div,
      #panorama-feature [class*="bg-black"],
      #homepagePanoramaStatus {
        border-color: rgba(31, 38, 32, 0.12) !important;
        background: rgba(255, 255, 255, 0.78) !important;
        color: var(--ink);
        box-shadow: 0 28px 80px rgba(68, 76, 58, 0.14);
      }

      .hero-result-stack,
      .hero-showcase-chip,
      .quincetok-trend span,
      .quincetok-example-card span,
      .quincetok-result-copy {
        border-color: rgba(31, 38, 32, 0.14);
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink);
      }

      .tab {
        box-shadow: 0 16px 46px rgba(68, 76, 58, 0.12);
        color: rgba(31, 38, 32, 0.75);
      }

      .tab::after {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 56%);
      }

      .tab:hover {
        border-color: rgba(31, 38, 32, 0.28);
        background: rgba(255, 255, 255, 0.92);
        color: var(--ink);
      }

      .tab[aria-selected="true"] {
        border-color: rgba(217, 72, 103, 0.7);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 248, 0.94));
        color: var(--ink);
        box-shadow: 0 0 0 2px rgba(217, 72, 103, 0.18), 0 24px 70px rgba(68, 76, 58, 0.18);
      }

      .tab[aria-selected="true"] .tab-copy strong {
        color: var(--ink) !important;
      }

      .tab[aria-selected="true"] .tab-copy small {
        color: rgba(31, 38, 32, 0.68) !important;
      }

      .tab[aria-selected="true"]::after {
        opacity: 0.35;
      }

      .dock-tab-cue {
        color: rgba(31, 38, 32, 0.78) !important;
      }

      .dock-tab-cue span {
        background: rgba(255, 255, 255, 0.78);
        color: var(--ink) !important;
        box-shadow: 0 18px 54px rgba(68, 76, 58, 0.16);
      }

      .dock-tab-cue svg {
        opacity: 0.96;
        filter: drop-shadow(0 10px 20px rgba(68, 76, 58, 0.2));
      }

      .stage-panel {
        background: rgba(255, 255, 255, 0.62);
      }

      .feature-story-media,
      .quincetok-upload,
      .quincetok-input,
      .quincetok-trend,
      .quincetok-example-card,
      .quincetok-plus,
      .coming-feature-kicker,
      .coming-feature-video-label,
      .coming-feature-point__number,
      .coming-feature-warning,
      main [class*="bg-white/["],
      main [class*="bg-black/"] {
        border-color: rgba(31, 38, 32, 0.12) !important;
        background: rgba(255, 255, 255, 0.58) !important;
        color: var(--ink) !important;
      }

      .coming-feature-warning strong,
      .dock-kicker,
      .stage-kicker,
      .hero-showcase-note span,
      .eyebrow {
        color: var(--accent-3) !important;
      }

      .coming-soon-dot {
        background: var(--accent);
        box-shadow: 0 0 0 5px rgba(217, 72, 103, 0.12);
      }

      .coming-feature-card::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.2) 22%, transparent 58%);
      }

      #video-feature,
      #quincetok-feature,
      #panorama-feature {
        background: #ffffff !important;
      }

      #video-feature .coming-feature-card,
      #quincetok-feature .coming-feature-card,
      #panorama-feature .coming-feature-card,
      #panorama-feature > div > div {
        border-color: transparent !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      #video-feature .coming-feature-card::before,
      #quincetok-feature .coming-feature-card::before,
      #panorama-feature .coming-feature-card::before {
        display: none;
      }

      #video-feature .coming-feature-grid,
      #quincetok-feature .coming-feature-grid,
      #panorama-feature .coming-feature-grid {
        padding: clamp(26px, 4vw, 58px) 0;
      }

      #video-feature .coming-feature-video-wrap,
      #quincetok-feature .coming-feature-video-wrap,
      #panorama-feature .coming-feature-video-wrap,
      #panorama-feature [class*="rounded-2xl"],
      #homepagePanoramaStatus {
        background: rgba(255, 255, 255, 0.58) !important;
        box-shadow: 0 24px 70px rgba(68, 76, 58, 0.11);
      }

      #services,
      #product-switcher,
      #gallery,
      #pricing,
      #faq {
        border-color: var(--line) !important;
        background: transparent !important;
      }

      #video-feature .text-white,
      #quincetok-feature .text-white,
      #panorama-feature .text-white,
      #services .text-white,
      #product-switcher .text-white,
      #gallery .text-white,
      #pricing .text-white,
      #faq .text-white,
      main .text-gray-300,
      main .text-gray-400,
      main .text-gray-500,
      main .text-white\/78 {
        color: var(--muted) !important;
      }

      #video-feature h2.text-white,
      #quincetok-feature h2.text-white,
      #panorama-feature h2.text-white,
      #services h2.text-white,
      #product-switcher h2.text-white,
      #gallery h2.text-white,
      #pricing h2.text-white,
      #faq h2.text-white,
      main h3.text-white {
        color: var(--ink) !important;
      }

      footer {
        background: #ffffff;
      }

      main > section[class~="bg-black"],
      main > section[class*="bg-black"],
      main > section[class*="from-black"],
      main > section[class*="to-black"],
      main > section[class*="to-zinc"],
      main > div[class*="from-zinc"],
      main > div[class*="to-black"],
      #ugc-creator-videos,
      #beyond-quinces {
        border-color: var(--line) !important;
        background: transparent !important;
        background-image: none !important;
      }

      main [class*="bg-zinc-"],
      #beyond-quinces article,
      #pricing .bento-card,
      main [class*="shadow-[0_24px_80px"] {
        border-color: rgba(31, 38, 32, 0.12) !important;
        background: rgba(255, 255, 255, 0.74) !important;
        color: var(--ink);
        box-shadow: 0 24px 64px rgba(68, 76, 58, 0.13);
      }

      main h2.text-white,
      main h3.text-white,
      main p.text-white,
      #pricing .text-white,
      #beyond-quinces .text-white,
      #ugc-creator-videos .text-white,
      main [class*="py-32"] .text-white {
        color: var(--ink) !important;
        -webkit-text-fill-color: currentColor;
      }

      main .text-gray-200,
      main .text-gray-300,
      main .text-gray-400,
      main .text-gray-500,
      #pricing .text-gray-300,
      #pricing .text-gray-400,
      #pricing .text-gray-500,
      #beyond-quinces .text-gray-300,
      #beyond-quinces .text-gray-400,
      #beyond-quinces .text-gray-500,
      #ugc-creator-videos .text-gray-300,
      #ugc-creator-videos .text-gray-400,
      #ugc-creator-videos .text-gray-500 {
        color: var(--muted) !important;
      }

      main [class~="bg-black"][class~="text-white"] {
        color: #fffaf6 !important;
        -webkit-text-fill-color: #fffaf6 !important;
      }

      main [class*="bg-white/"],
      main [class*="bg-white\\["],
      main [class*="bg-white/["],
      main [class*="bg-white\\/"] {
        border-color: rgba(31, 38, 32, 0.12) !important;
        background: rgba(255, 255, 255, 0.62) !important;
      }

      main [class*="from-gray-800"][class*="to-black"],
      main [class*="from-black"][class*="via-black"],
      main [class*="from-black/"],
      main [class*="to-black/"] {
        background-image: linear-gradient(180deg, rgba(17, 19, 15, 0.1), rgba(17, 19, 15, 0.02)) !important;
      }

      .holo-text {
        background: linear-gradient(to right, var(--ink), var(--accent), var(--accent-2), var(--ink));
        background-size: 220% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      main .italic.text-gray-400 {
        color: var(--accent) !important;
      }

      #comparison-container {
        border-color: rgba(31, 38, 32, 0.14) !important;
        box-shadow: 0 28px 80px rgba(68, 76, 58, 0.16);
      }

      .gallery-overlay {
        background: linear-gradient(to top, rgba(17, 19, 15, 0.72) 0%, rgba(17, 19, 15, 0) 55%);
      }

      .gallery-overlay .text-white {
        color: #fffaf6 !important;
        -webkit-text-fill-color: #fffaf6 !important;
      }

      .app-promo-section {
        border-color: var(--line);
        background: #ffffff;
        color: var(--ink);
      }

      .app-promo-card {
        border-color: rgba(31, 38, 32, 0.13);
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 28px 80px rgba(68, 76, 58, 0.14);
      }

      .app-promo-kicker,
      .app-promo-title {
        color: var(--ink);
      }

      .app-promo-copy {
        color: var(--muted);
      }

      .mobile-sticky-cta {
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.88) 34%, rgba(255, 255, 255, 0.98));
      }

      #pricingModal {
        background: rgba(17, 19, 15, 0.34) !important;
      }

      #pricingModal > div > div {
        border-color: rgba(31, 38, 32, 0.14) !important;
        background: #ffffff !important;
        color: var(--ink);
        box-shadow: 0 32px 90px rgba(31, 38, 32, 0.22);
      }

      #pricingModal article {
        border-color: rgba(31, 38, 32, 0.13) !important;
        background: rgba(255, 255, 255, 0.78) !important;
      }

      #pricingModal .text-white,
      #pricingModal h2,
      #pricingModal h3 {
        color: var(--ink) !important;
        -webkit-text-fill-color: currentColor;
      }

      #pricingModal .text-gray-300,
      #pricingModal .text-gray-400,
      #pricingModal .text-gray-500,
      #pricingModal .text-white\/70 {
        color: var(--muted) !important;
      }

      #pricingModal .bg-white {
        background: var(--ink) !important;
        color: #fffaf6 !important;
        -webkit-text-fill-color: #fffaf6 !important;
      }

      #pricingModal .bg-white\/5,
      #pricingModal .bg-white\/10,
      #pricingModal .bg-white\/\[0\.02\],
      #pricingModal .bg-slate-700 {
        border-color: rgba(31, 38, 32, 0.13) !important;
        background: rgba(255, 255, 255, 0.58) !important;
      }

      #heroPricingBtn,
      button[data-translate="cta_view_pricing"] {
        border-color: rgba(17, 19, 15, 0.26) !important;
        background: #ffffff !important;
        color: var(--ink) !important;
        -webkit-text-fill-color: var(--ink) !important;
        box-shadow: 0 14px 34px rgba(17, 19, 15, 0.08);
      }

      #heroPricingBtn:hover,
      button[data-translate="cta_view_pricing"]:hover {
        border-color: rgba(17, 19, 15, 0.46) !important;
        background: rgba(17, 19, 15, 0.04) !important;
      }

      #faq {
        background: #ffffff !important;
      }

      #faq .faq-grid {
        column-gap: clamp(28px, 6vw, 84px);
        border-top-color: rgba(31, 38, 32, 0.14);
        background: transparent;
      }

      #faq details {
        padding: 22px 0;
        border-color: rgba(31, 38, 32, 0.12) !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      #faq summary {
        color: var(--ink);
        font-size: clamp(1rem, 1.3vw, 1.15rem);
        line-height: 1.25;
      }

      #faq summary::after {
        right: 0;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1px solid rgba(31, 38, 32, 0.12);
        border-radius: 999px;
        background: #ffffff;
        color: rgba(31, 38, 32, 0.62);
        line-height: 1;
        box-shadow: 0 8px 22px rgba(31, 38, 32, 0.06);
      }

      #faq details[open] {
        border-bottom-color: rgba(217, 72, 103, 0.22) !important;
      }

      #faq details[open] summary::after {
        border-color: rgba(217, 72, 103, 0.28);
        background: rgba(217, 72, 103, 0.08);
        color: var(--accent);
      }

      #faq details p {
        max-width: 62ch;
        color: var(--muted);
      }

      @media (max-width: 760px) {
        .nav .nav-links {
          border-color: rgba(31, 38, 32, 0.13);
          background: rgba(255, 255, 255, 0.94);
          box-shadow: 0 24px 64px rgba(68, 76, 58, 0.18);
        }

        .hero {
          min-height: 100svh;
          padding-top: calc(env(safe-area-inset-top) + 118px);
          padding-bottom: 46px;
          background: #ffffff;
        }

        .hero::before {
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.32) 26%, rgba(255, 255, 255, 0.86) 58%, #ffffff 88%),
            linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.42) 54%, rgba(255, 255, 255, 0.08) 100%);
        }

        .hero::after {
          height: 260px;
          background: linear-gradient(180deg, transparent, #ffffff 82%);
        }

        .hero-video-backdrop {
          inset: 0 0 auto;
          width: 100%;
          height: min(50vh, 470px);
          border-bottom-right-radius: 34px;
          border-bottom-left-radius: 34px;
          background: #ffffff;
          -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
        }

        .hero-main-video {
          object-position: 50% 14%;
          filter: saturate(1.12) contrast(1.08) brightness(1.02);
        }

        .hero-grid {
          position: relative;
          width: 100%;
          max-width: calc(100vw - 28px);
          padding-top: min(18vh, 148px);
        }

        .hero-grid > * {
          min-width: 0;
        }

        .hero .eyebrow {
          display: inline-flex;
          align-items: center;
          width: fit-content;
          min-height: 34px;
          padding: 0 12px;
          border: 1px solid rgba(217, 72, 103, 0.2);
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.72);
          box-shadow: 0 12px 28px rgba(31, 38, 32, 0.08);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }

        .hero h1 {
          max-width: 100%;
          font-size: clamp(2.6rem, 11vw, 3.85rem);
          line-height: 0.92;
          overflow-wrap: break-word;
        }

        .hero-copy {
          max-width: min(27ch, calc(100vw - 48px));
          color: rgba(17, 19, 15, 0.88) !important;
          font-size: clamp(1.12rem, 4.7vw, 1.34rem);
          line-height: 1.38;
        }

        .hero-actions {
          width: 100%;
          max-width: min(100%, 390px);
          margin-top: 24px;
        }

        .hero-actions .button {
          max-width: 100%;
          min-height: 64px;
          border-radius: 999px;
        }

        .hero-trust-row {
          margin-top: 22px;
          padding: 0 10px;
        }

        .hero-start-panel {
          margin-top: 26px;
          padding-top: 18px;
          border-top: 1px solid rgba(31, 38, 32, 0.1);
        }

        .hero-flow {
          gap: 16px;
          margin-top: 10px;
        }

        .hero-flow-step,
        .hero-flow-step + .hero-flow-step {
          min-height: 46px;
          padding: 0 0 0 42px;
          border-left: 0;
        }

        .hero-flow-step em {
          position: absolute;
          left: 0;
          top: -4px;
          width: 30px;
          font-size: 1.55rem;
        }
      }

      .nav-inner {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(8, 7, 9, 0.76) !important;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34) !important;
        color: #fff7fb !important;
      }

      .nav .brand span,
      .nav-links a:hover,
      .nav-links button:hover {
        color: #fff7fb !important;
        -webkit-text-fill-color: #fff7fb !important;
      }

      .nav-links,
      .nav-link-feature,
      .nav-link-interior {
        color: rgba(255, 247, 251, 0.72) !important;
      }

      .nav-links a,
      .nav-link-feature,
      .nav-link-interior {
        border-color: transparent !important;
        background: transparent !important;
      }

      .nav-links button,
      .nav-language {
        border-color: rgba(255, 255, 255, 0.16) !important;
        background: rgba(255, 255, 255, 0.08) !important;
      }

      .nav .button,
      .nav .nav-burger,
      .nav-language {
        border-color: rgba(255, 255, 255, 0.16) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff7fb !important;
        -webkit-text-fill-color: #fff7fb !important;
      }

      .nav .button-primary {
        border-color: #fff7fb !important;
        background: #fff7fb !important;
        color: #100b0f !important;
        -webkit-text-fill-color: #100b0f !important;
      }

      @media (max-width: 760px) {
        .nav .nav-links {
          border-color: rgba(255, 255, 255, 0.14) !important;
          background: rgba(8, 7, 9, 0.94) !important;
          box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
        }
      }
    }

    .hero-motion-section .hero-media-wall {
      position: relative !important;
      inset: auto !important;
      z-index: 0 !important;
      display: grid !important;
      width: min(1620px, calc(100% + 320px)) !important;
      height: auto !important;
      margin: 0 -160px !important;
      padding: 8px 0 42px !important;
      gap: 18px !important;
      opacity: 1 !important;
      overflow: hidden !important;
      transform: rotate(-4deg) scale(1.04) !important;
      transform-origin: center center !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      background: transparent !important;
      filter: saturate(1.07) contrast(1.04) !important;
    }

    .hero-motion-section .hero-wall-row {
      display: flex !important;
      width: max-content !important;
      max-width: none !important;
      gap: 18px !important;
      overflow: visible !important;
    }

    .hero-motion-section .hero-wall-row .hero-wall-card:nth-child(n+3) {
      display: block !important;
    }

    .hero-motion-section .hero-wall-card {
      flex: 0 0 198px;
      height: 280px;
      border-radius: 18px;
    }

    .hero-motion-section .hero-wall-card.is-wide {
      flex-basis: 310px;
    }

    @media (max-width: 760px) {
      .hero-motion-section {
        padding: 34px 0 20px;
      }

      .motion-section-copy {
        display: grid;
        gap: 12px;
        align-items: start;
      }

      .motion-section-title {
        font-size: clamp(2rem, 9vw, 3rem);
      }

      .motion-section-copy p:not(.motion-section-kicker) {
        max-width: none;
      }

      .hero-motion-section .hero-media-wall {
        width: calc(100% + 180px) !important;
        margin: 0 -90px !important;
        gap: 12px !important;
        transform: rotate(-5deg) scale(1.02) !important;
      }

      .hero-motion-section .hero-wall-row {
        gap: 12px !important;
      }

      .hero-motion-section .hero-wall-card {
        flex-basis: 128px;
        height: 190px;
        border-radius: 14px;
      }

      .hero-motion-section .hero-wall-card.is-wide {
        flex-basis: 190px;
      }

      .feature-stage-section {
        padding: 40px 0 64px;
      }
    }

    .march-hero {
      --march-hero-min: max(720px, 84svh);
      min-height: var(--march-hero-min);
      padding: 118px 0 0;
      background: #050406;
    }

    .march-hero::before {
      background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.03), rgba(5, 4, 6, 0.14) 26%, rgba(5, 4, 6, 0.68) 68%, #050406 100%),
        linear-gradient(180deg, rgba(5, 4, 6, 0.18) 0%, rgba(5, 4, 6, 0.46) 46%, #050406 100%);
      z-index: -3;
    }

    .march-hero.is-video-ended::before {
      background:
        linear-gradient(180deg, rgba(5, 4, 6, 0.6) 0%, rgba(5, 4, 6, 0.32) 40%, rgba(5, 4, 6, 0.82) 88%, #050406 100%),
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.08), rgba(5, 4, 6, 0.06) 30%, rgba(5, 4, 6, 0.4) 100%);
    }

    .march-hero::after {
      height: 28vh;
      background: linear-gradient(180deg, transparent, #050406 86%);
    }

    .march-hero .hero-video-backdrop {
      z-index: -4;
      opacity: 0.96;
      background: #050406;
    }

    .march-hero .hero-video-backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: url("/assets/main/quinces/hero2.webp") center / cover no-repeat;
      opacity: 0;
      transform: scale(1.01);
      transition: opacity 900ms ease;
    }

    .march-hero.is-video-ended .hero-video-backdrop::after {
      opacity: 1;
    }

    .march-hero .hero-main-video {
      position: absolute;
      inset: 0;
      z-index: 2;
      object-position: 50% 44%;
      filter: saturate(1.05) contrast(1.06) brightness(0.62);
      opacity: 1;
      transition: opacity 900ms ease;
    }

    .march-hero .hero-main-video.is-ended {
      opacity: 0;
    }

    .march-hero .page-shell {
      min-height: calc(var(--march-hero-min) - 118px);
      display: flex;
      flex-direction: column;
    }

    .march-hero .hero-grid {
      position: relative;
      display: flex !important;
      flex: 1 1 auto;
      align-items: center;
      justify-content: center;
      min-height: 0;
      margin: 0;
      padding: 34px 0 26px;
      text-align: center;
    }

    .march-hero .hero-grid > div:first-child {
      width: min(100%, 980px);
    }

    .march-hero .hero-start-panel,
    .march-hero .hero-auth-panel {
      display: none !important;
    }

    .march-hero .eyebrow {
      display: block;
      width: auto;
      min-height: 0;
      margin: 0 auto 14px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: rgba(255, 247, 251, 0.72) !important;
      box-shadow: none;
      font-size: 0.76rem;
      font-weight: 800;
      letter-spacing: 0;
      text-transform: uppercase;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .march-hero .eyebrow::before {
      content: none;
    }

    .march-hero h1 {
      max-width: 960px;
      margin: 0 auto 18px;
      color: #fff7fb !important;
      font-size: clamp(2.65rem, 4.35vw, 4.25rem);
      line-height: 1.04;
      letter-spacing: 0;
      text-wrap: balance;
      -webkit-text-fill-color: currentColor !important;
    }

    .march-hero .hero-copy {
      max-width: 760px;
      margin: 0 auto;
      color: rgba(255, 247, 251, 0.84) !important;
      font-size: clamp(0.98rem, 1.28vw, 1.12rem);
      line-height: 1.5;
      text-wrap: balance;
    }

    .march-hero .hero-actions {
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: 18px;
      margin-top: 24px;
    }

    .march-hero .hero-actions .button {
      min-height: 56px;
      padding: 0 34px;
      border: 0 !important;
      border-radius: 5px;
      background: #fff7fb !important;
      color: #09090a !important;
      font-size: clamp(0.9rem, 1.05vw, 1rem);
      font-weight: 900;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
      -webkit-text-fill-color: #09090a !important;
    }

    .march-hero .hero-secondary-link {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 247, 251, 0.48);
      color: #fff7fb;
      font-size: 0.92rem;
      font-weight: 800;
      text-decoration: none;
    }

    .march-hero .hero-secondary-link:hover {
      border-bottom-color: #fff7fb;
    }

    .march-hero .hero-facts {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-top: 18px;
      color: rgba(255, 247, 251, 0.76);
      font-size: 0.82rem;
      font-weight: 700;
      text-align: center;
    }

    .march-hero .hero-social-proof {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 16px;
      text-align: center;
    }

    .march-hero .hero-social-proof + .hero-facts {
      margin-top: 10px;
    }

    .march-hero .hero-fact + .hero-fact::before {
      content: "·";
      padding: 0 4px;
      color: rgba(255, 247, 251, 0.42);
    }

    .march-hero .hero-proof {
      display: grid;
      justify-content: center;
      gap: 8px;
      margin-top: 20px;
      text-align: center;
    }

    .march-hero .hero-proof-faces {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .march-hero .hero-proof-faces img,
    .march-hero .hero-proof-faces span {
      width: 30px;
      height: 30px;
      margin-left: -9px;
      border: 2px solid rgba(5, 4, 6, 0.8);
      border-radius: 999px;
      object-fit: cover;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
    }

    .march-hero .hero-proof-faces img:first-child {
      margin-left: 0;
    }

    .march-hero .hero-proof-faces span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #111217;
      color: #fff7fb;
      font-size: 0.66rem;
      font-weight: 900;
    }

    .march-hero .hero-proof-copy {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: rgba(255, 247, 251, 0.82);
      font-size: 0.84rem;
    }

    .march-hero .hero-proof-copy span {
      color: #ffd84d;
      letter-spacing: 0.03em;
    }

    .march-hero .hero-transform-proof {
      display: none;
    }

    @media (min-width: 1360px) {
      .march-hero .hero-transform-proof {
        position: absolute;
        top: 50%;
        right: 0;
        display: block;
        width: 164px;
        margin: 0;
        padding: 7px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 8px;
        background: rgba(8, 7, 9, 0.72);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
        color: #fff7fb;
        transform: translateY(-48%) rotate(3deg);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }

      .march-hero .hero-transform-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: 174px;
        overflow: hidden;
        border-radius: 5px;
      }

      .march-hero .hero-transform-image {
        position: relative;
        min-width: 0;
        overflow: hidden;
      }

      .march-hero .hero-transform-image + .hero-transform-image {
        border-left: 1px solid rgba(255, 255, 255, 0.72);
      }

      .march-hero .hero-transform-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 34%;
      }

      .march-hero .hero-transform-image span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        left: 5px;
        color: #ffffff;
        font-size: 0.58rem;
        font-weight: 900;
        line-height: 1.1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
        text-transform: uppercase;
      }

      .march-hero .hero-transform-proof figcaption {
        padding: 8px 3px 2px;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 0.83rem;
        font-weight: 700;
        line-height: 1.15;
        text-align: center;
      }
    }

    .march-hero .suite-strip {
      margin: auto 0 0;
      padding: 10px 0 12px;
      border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
      border-bottom: 0 !important;
      background: linear-gradient(180deg, rgba(12, 10, 12, 0.18), rgba(12, 10, 12, 0.52));
      color: #fff7fb !important;
    }

    .march-hero .suite-strip-label {
      color: rgba(255, 247, 251, 0.52) !important;
      font-size: 0.62rem;
      letter-spacing: 0.2em;
    }

    .march-hero .suite-strip-items {
      gap: 8px 15px;
    }

    .march-hero .suite-strip-items a,
    .march-hero .suite-strip-items span {
      gap: 7px;
      color: #fff7fb !important;
      font-size: clamp(0.9rem, 1.18vw, 1.1rem);
      line-height: 1.1;
      -webkit-text-fill-color: currentColor !important;
    }

    .march-hero .suite-strip-items a::before,
    .march-hero .suite-strip-items span::before {
      width: 6px;
      height: 6px;
      box-shadow: 0 0 0 6px rgba(255, 79, 131, 0.16);
    }

    @media (max-width: 760px) {
      .march-hero {
        --march-hero-min: max(660px, 84svh);
        padding-top: calc(env(safe-area-inset-top) + 104px);
      }

      .march-hero .page-shell {
        min-height: calc(var(--march-hero-min) - 104px - env(safe-area-inset-top));
      }

      .march-hero .hero-grid {
        padding: 28px 0 22px;
      }

      .march-hero h1 {
        font-size: clamp(2.05rem, 8.2vw, 2.65rem);
        line-height: 1.04;
      }

      .march-hero .hero-copy {
        font-size: 1rem;
        line-height: 1.48;
      }

      .march-hero .hero-actions .button {
        width: min(100%, 360px);
        min-height: 56px;
        padding: 0 24px;
      }

      .march-hero .hero-actions {
        flex-direction: column;
        gap: 6px;
      }

      .march-hero .hero-secondary-link {
        min-height: 42px;
      }

      .march-hero .hero-facts {
        flex-wrap: wrap;
        row-gap: 6px;
        font-size: 0.74rem;
      }

      .march-hero .hero-social-proof {
        flex-wrap: nowrap;
      }

      .march-hero .hero-social-proof .hero-proof-faces img {
        width: 28px;
        height: 28px;
      }

      .march-hero .hero-social-proof .hero-proof-copy {
        display: grid;
        justify-items: start;
        gap: 1px;
        min-width: 0;
        text-align: left;
      }

      .march-hero .hero-social-proof .hero-proof-copy span {
        font-size: 0.72rem;
        line-height: 1;
      }

      .march-hero .hero-social-proof .hero-proof-copy strong {
        font-size: 0.7rem;
        line-height: 1.2;
      }

      .march-hero .suite-strip {
        grid-template-columns: 1fr;
        gap: 8px;
        padding-bottom: 12px;
      }

      .march-hero .suite-strip-items {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: none;
      }

      .march-hero .suite-strip-items::-webkit-scrollbar {
        display: none;
      }

      .march-hero .suite-strip-items a,
      .march-hero .suite-strip-items span {
        font-size: 0.98rem;
      }
    }

    @media (max-width: 350px) {
      .march-hero .suite-strip {
        display: none;
      }

      .home-refresh #feature-examples {
        padding-top: 20px;
      }
    }

    main a[data-translate$="_cta"],
    main button[data-translate$="_cta"],
    main button[data-translate="try_now"],
    main button[data-translate="pricing_basic_cta"],
    main button[data-translate^="pricing_tier_cta"],
    main button[data-translate="cta_view_pricing"],
    main .button:not(.hero-actions .button),
    main .contrast-cta,
    #heroCtaMain,
    #heroPricingBtn,
    #pricingModal .contrast-cta,
    .mobile-sticky-cta button,
    .lightbox-cta button,
    footer .button {
      min-height: 52px !important;
      border-radius: 6px !important;
      padding-right: clamp(1.25rem, 3vw, 2rem) !important;
      padding-left: clamp(1.25rem, 3vw, 2rem) !important;
      font-size: clamp(0.82rem, 1vw, 0.98rem) !important;
      font-weight: 900 !important;
      letter-spacing: 0.045em !important;
      text-transform: uppercase !important;
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26);
      transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    main a[data-translate$="_cta"]:hover,
    main button[data-translate$="_cta"]:hover,
    main button[data-translate="try_now"]:hover,
    main button[data-translate="pricing_basic_cta"]:hover,
    main button[data-translate^="pricing_tier_cta"]:hover,
    main button[data-translate="cta_view_pricing"]:hover,
    main .button:not(.hero-actions .button):hover,
    main .contrast-cta:hover,
    #heroCtaMain:hover,
    #heroPricingBtn:hover,
    #pricingModal .contrast-cta:hover,
    .mobile-sticky-cta button:hover,
    .lightbox-cta button:hover,
    footer .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
    }

    main .button-primary:not(.hero-actions .button),
    main .contrast-cta,
    main a.bg-white.text-black,
    main button.bg-white.text-black,
    #heroCtaMain,
    #pricingModal .contrast-cta,
    .mobile-sticky-cta button,
    .lightbox-cta button,
    footer .button {
      border-color: #fff7fb !important;
      background: #fff7fb !important;
      color: #09090a !important;
      -webkit-text-fill-color: #09090a !important;
    }

    main a[data-translate$="secondary_cta"],
    main button[data-translate$="secondary_cta"],
    main button[data-translate="cta_view_pricing"],
    #heroPricingBtn {
      border-color: rgba(255, 247, 251, 0.28) !important;
      background: rgba(255, 247, 251, 0.06) !important;
      color: rgba(255, 247, 251, 0.9) !important;
      -webkit-text-fill-color: rgba(255, 247, 251, 0.9) !important;
      box-shadow: none;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    main .premium-pill {
      border-radius: 5px;
      border-color: rgba(255, 247, 251, 0.16);
      background: rgba(255, 247, 251, 0.05);
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    @media (prefers-color-scheme: light) {
      main a[data-translate$="secondary_cta"],
      main button[data-translate$="secondary_cta"],
      main button[data-translate="cta_view_pricing"],
      #heroPricingBtn {
        border-color: rgba(16, 16, 16, 0.16) !important;
        background: rgba(255, 255, 255, 0.7) !important;
        color: var(--ink) !important;
        -webkit-text-fill-color: var(--ink) !important;
      }

      main .premium-pill {
        border-color: rgba(16, 16, 16, 0.12);
        background: rgba(255, 255, 255, 0.72);
      }
    }
    .sticky-cta-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 55;
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--page) 92%, transparent);
      backdrop-filter: blur(14px);
      border-top: 1px solid var(--line);
      transform: translateY(110%);
      transition: transform 0.3s ease;
    }

    .sticky-cta-bar.is-visible {
      transform: translateY(0);
    }

    .sticky-cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: min(100%, 560px);
      margin: 0 auto;
    }

    .sticky-cta-copy {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .sticky-cta-copy strong {
      font-size: 14px;
    }

    .sticky-cta-copy span {
      font-size: 12px;
      color: var(--muted);
    }

    @media (min-width: 761px) {
      .sticky-cta-bar {
        display: none;
      }
    }