:root {
      --ink: #3d2a4a;
      --ink-deep: #2f2138;
      --ink-soft: #6a5578;
      --paper: #fff7f0;
      --paper-2: #f4e6ef;
      --paper-3: #ecd5e4;
      --plum: #7a4e86;
      --plum-2: #9a6a96;
      --peach: #e8a090;
      --gold: #e8c48a;
      --lavender: #e8d9f0;
      --coral: #f5d0c8;
      --mint: #e8f2ec;
      --line: rgba(90, 60, 110, 0.14);
      --line-strong: rgba(90, 60, 110, 0.22);
      --glass: rgba(255, 252, 250, 0.74);
      --glass-strong: rgba(255, 252, 250, 0.92);
      --shadow: 0 24px 64px rgba(100, 70, 120, 0.10);
      --radius-lg: 34px;
      --radius-md: 22px;
      --radius-sm: 14px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 82% 6%, rgba(245, 208, 200, .55), transparent 26rem),
        radial-gradient(circle at 12% 4%, rgba(232, 217, 240, .70), transparent 28rem),
        linear-gradient(180deg, #d9c6e6 0, #eac4c0 12%, var(--paper-2) 32%, var(--paper) 62%, #f7faf7 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    img { max-width: 100%; }
    :focus-visible { outline: 3px solid rgba(92, 42, 94, .34); outline-offset: 4px; }

    .site-shell {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .topbar {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      min-height: 76px;
      color: var(--ink);
    }
    .brand {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .26em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .topnav {
      display: flex;
      align-items: center;
      gap: 22px;
      font-size: 12px;
      letter-spacing: .04em;
      color: rgba(61, 42, 74, .72);
    }
    .topnav a:hover { color: var(--ink); }
    .language-switch {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(61, 42, 74, .48);
      font-size: 11px;
      letter-spacing: .08em;
    }
    .language-switch button {
      appearance: none;
      border: 0;
      padding: 4px 0;
      color: inherit;
      background: none;
      cursor: pointer;
    }
    .language-switch button[aria-pressed="true"] { color: var(--ink); }

    .hero-wrap {
      position: relative;
      overflow: hidden;
      padding-bottom: 74px;
    }
    .hero-wrap::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 620px;
      pointer-events: none;
      background:
        radial-gradient(circle at 78% 18%, rgba(245, 208, 200, .55), transparent 24rem),
        radial-gradient(circle at 18% 12%, rgba(232, 217, 240, .62), transparent 26rem),
        radial-gradient(circle at 50% 40%, rgba(232, 242, 236, .35), transparent 22rem);
    }
    .hero {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
      align-items: center;
      gap: clamp(36px, 6vw, 84px);
      min-height: 660px;
      padding: 70px 0 76px;
    }
    .eyebrow {
      margin: 0 0 18px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(61, 42, 74, .55);
    }
    .hero h1 {
      max-width: 760px;
      margin: 0;
      color: var(--ink);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(84px, 11vw, 152px);
      font-weight: 300;
      letter-spacing: -.06em;
      line-height: .88;
    }
    .hero-tagline {
      max-width: 680px;
      margin: 18px 0 0;
      color: rgba(61, 42, 74, .92);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(34px, 5.1vw, 62px);
      font-weight: 300;
      letter-spacing: -.05em;
      line-height: .98;
    }
    .hero-lead {
      max-width: 560px;
      margin: 24px 0 0;
      color: rgba(61, 42, 74, .72);
      font-size: clamp(16px, 1.55vw, 18px);
      line-height: 1.65;
    }
    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 30px 0 0;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(90, 60, 110, 0.14);
      border-radius: 999px;
      background: rgba(255, 252, 250, .55);
      color: rgba(61, 42, 74, .82);
      backdrop-filter: blur(8px);
      font-size: 12px;
      letter-spacing: .03em;
    }
    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 18px;
      margin-top: 34px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-size: 14px;
      font-weight: 650;
      letter-spacing: .01em;
      transition: transform .18s ease, background .18s ease, opacity .18s ease;
    }
    .button-primary {
      background: linear-gradient(180deg, #fffaf6, #f7e8f0);
      color: var(--ink-deep);
      box-shadow: 0 10px 28px rgba(120, 80, 140, .12);
    }
    .button-primary { cursor: pointer; }
    .button-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(120, 80, 140, .22); }
    .button-primary:not(:disabled):active { transform: translateY(1px) scale(.98); box-shadow: 0 4px 12px rgba(120, 80, 140, .16); }
    .button-primary:focus-visible { outline: 3px solid #765184; outline-offset: 4px; }
    .button-primary:disabled { opacity: .82; cursor: not-allowed; }
    .button-primary[aria-busy="true"] { cursor: wait; }
    .button-primary[aria-busy="true"]::before { content: ''; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: checkout-spin .8s linear infinite; }
    @keyframes checkout-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) { .button { transition: none; } .button-primary[aria-busy="true"]::before { animation: none; } }
    .button-secondary {
      border-color: rgba(90, 60, 110, 0.18);
      color: var(--ink);
      background: rgba(255, 252, 250, .42);
    }
    .button-secondary:hover { background: rgba(255, 252, 250, .72); transform: translateY(-1px); }
    .availability-note {
      color: rgba(61, 42, 74, .55);
      font-size: 12px;
    }
    .purchase-price {
      margin: 28px 0 -14px;
      color: var(--ink);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(38px, 4.5vw, 56px);
      font-weight: 300;
      letter-spacing: -.035em;
      line-height: 1;
    }
    .purchase-price small {
      display: inline-block;
      margin-left: 10px;
      color: rgba(61, 42, 74, .55);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: .06em;
      text-transform: uppercase;
      vertical-align: .45em;
    }
    .final-card .purchase-price {
      margin: 28px 0 18px;
    }

    .purchase-modal {
      width: min(520px, calc(100% - 32px));
      max-height: calc(100dvh - 32px);
      margin: auto;
      padding: 0;
      border: 0;
      border-radius: 26px;
      color: var(--ink);
      background: transparent;
      overflow: auto;
    }
    .purchase-modal::backdrop {
      background: rgba(47, 34, 56, .34);
      backdrop-filter: blur(5px);
    }
    .purchase-modal-card {
      position: relative;
      padding: 30px;
      border: 1px solid rgba(90, 60, 110, .12);
      border-radius: 26px;
      background: linear-gradient(145deg, #fffdf9, #fbf2f6 58%, #f1f6f1);
      box-shadow: 0 24px 70px rgba(75, 48, 90, .24);
      overflow: auto;
    }
    .purchase-modal-close {
      position: absolute;
      top: 14px;
      right: 16px;
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border: 1px solid rgba(90, 60, 110, .14);
      border-radius: 50%;
      color: var(--ink-soft);
      background: rgba(255, 255, 255, .64);
      font: inherit;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .purchase-modal-close:hover { background: rgba(255, 255, 255, .92); }
    .purchase-modal-close:focus-visible,
    .purchase-option-action:focus-visible { outline: 3px solid #765184; outline-offset: 3px; }
    .purchase-modal h2 {
      margin: 0 46px 22px 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -.02em;
    }
    .purchase-options { display: grid; gap: 12px; }
    .purchase-option {
      padding: 20px;
      border: 1px solid rgba(90, 60, 110, .12);
      border-radius: 20px;
      background: rgba(255, 255, 255, .58);
    }
    .purchase-option h3 {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 700;
    }
    .purchase-option p {
      margin: 0 0 16px;
      color: var(--ink-soft);
      font-size: 13px;
      line-height: 1.5;
    }
    .purchase-option-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 17px;
      border: 1px solid rgba(90, 60, 110, .16);
      border-radius: 999px;
      color: var(--ink-deep);
      background: linear-gradient(180deg, #fffaf6, #f7e8f0);
      box-shadow: 0 7px 20px rgba(120, 80, 140, .10);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
    }
    .purchase-option-action:hover { transform: translateY(-1px); }
    .purchase-option-action:disabled { opacity: .58; cursor: not-allowed; transform: none; }
    .purchase-modal-status {
      margin: 14px 2px 0;
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.5;
    }
    body.purchase-modal-open { overflow: hidden; }

    .hero-art {
      position: relative;
      display: grid;
      place-items: center;
      align-self: center;
      min-width: 0;
    }
    .hero-art::before {
      content: "";
      position: absolute;
      width: 76%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(232, 217, 240, .45);
      filter: blur(58px);
      transform: translate(10%, 8%);
    }
    .hero-product-icon {
      position: relative;
      display: block;
      width: min(460px, 88%);
      height: auto;
      border-radius: 0;
      box-shadow: none;
      transform: none;
    }

    .main-surface {
      position: relative;
      z-index: 2;
      overflow: hidden;
      border-radius: 46px 46px 0 0;
      background: linear-gradient(180deg, rgba(255, 250, 248, .98), var(--paper) 55%, #f7faf7 100%);
      box-shadow: 0 -22px 70px rgba(120, 80, 140, .08);
    }
    .section {
      padding: 104px 0;
      border-bottom: 1px solid var(--line);
    }
    .section:last-child { border-bottom: 0; }
    .section-kicker {
      margin: 0 0 12px;
      font-size: 11px;
      font-weight: 750;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--plum-2);
    }
    .section-title {
      margin: 0;
      max-width: 850px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(38px, 5vw, 64px);
      font-weight: 300;
      letter-spacing: -.035em;
      line-height: 1.04;
    }
    .section-lead {
      max-width: 650px;
      margin: 20px 0 0;
      color: var(--ink-soft);
      font-size: 17px;
      line-height: 1.75;
    }

    .demo-frame {
      position: relative;
      margin-top: 46px;
      overflow: hidden;
      border: 1px solid rgba(74, 37, 75, .18);
      border-radius: 28px;
      background:
        radial-gradient(circle at 80% 10%, rgba(239, 148, 109, .18), transparent 36%),
        linear-gradient(145deg, rgba(72, 40, 78, .96), rgba(38, 25, 50, .98));
      box-shadow: var(--shadow);
      aspect-ratio: 16 / 9;
    }
    .demo-video {
      display: block;
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      object-fit: contain;
      border-radius: inherit;
    }
    .value-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 26px;
      margin-top: 26px;
      padding: 0 4px;
    }
    .value-line strong {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 300;
      letter-spacing: -.02em;
    }
    .value-line span {
      max-width: 430px;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.65;
      text-align: right;
    }

    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 28px;
      margin-top: 48px;
    }
    .showcase-row {
      display: grid;
      gap: 16px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.34);
    }
    .showcase-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
    }
    .showcase-index {
      color: var(--ink-soft);
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .showcase-label {
      color: var(--ink);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .showcase-body {
      margin: 0;
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.65;
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 48px;
    }
    .benefit-card {
      min-height: 260px;
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: rgba(255,255,255,.40);
    }
    .benefit-number {
      display: block;
      margin-bottom: 74px;
      color: var(--ink-soft);
      font-size: 11px;
      letter-spacing: .16em;
    }
    .benefit-card h3 {
      margin: 0 0 12px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -.02em;
    }
    .benefit-card p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.7;
    }

    .requirements-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: clamp(42px, 8vw, 100px);
      align-items: start;
    }
    .requirement-list {
      margin: 0;
      border-top: 1px solid var(--line-strong);
    }
    .requirement-row {
      display: grid;
      grid-template-columns: 150px 1fr;
      gap: 26px;
      padding: 24px 0;
      border-bottom: 1px solid var(--line);
    }
    .requirement-row dt {
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .10em;
      text-transform: uppercase;
    }
    .requirement-row dd {
      margin: 0;
      color: var(--ink-soft);
      line-height: 1.6;
    }
    .status {
      display: inline-block;
      margin-left: 8px;
      padding: 3px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--plum-2);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .08em;
      text-transform: uppercase;
      vertical-align: 1px;
    }


    .faq-list {
      max-width: 900px;
      margin-top: 42px;
      border-top: 1px solid var(--line-strong);
    }
    details {
      border-bottom: 1px solid var(--line);
    }
    summary {
      position: relative;
      list-style: none;
      cursor: pointer;
      padding: 24px 46px 24px 0;
      font-size: 17px;
      font-weight: 650;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      position: absolute;
      right: 4px;
      top: 22px;
      color: var(--ink-soft);
      font-size: 22px;
      font-weight: 300;
    }
    details[open] summary::after { content: "−"; }
    .faq-answer {
      max-width: 760px;
      padding: 0 0 24px;
      color: var(--ink-soft);
      font-size: 15px;
      line-height: 1.75;
    }
    .faq-answer a { text-decoration: underline; text-underline-offset: 3px; }

    .final-cta {
      padding: 96px 0 104px;
    }
    .final-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
      align-items: center;
      gap: clamp(32px, 6vw, 82px);
      overflow: hidden;
      padding: clamp(42px, 7vw, 82px);
      border-radius: 34px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 88% 12%, rgba(245, 208, 200, .55), transparent 20rem),
        radial-gradient(circle at 12% 20%, rgba(232, 217, 240, .70), transparent 18rem),
        linear-gradient(135deg, #f7eef8, #f8e4e0 55%, #eef6f1);
      color: var(--ink);
      box-shadow: var(--shadow);
    }
    .final-card::after {
      content: "SEQUIN";
      position: absolute;
      right: -20px;
      bottom: -32px;
      color: rgba(122, 78, 134, .07);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(96px, 17vw, 210px);
      font-weight: 300;
      letter-spacing: .08em;
      pointer-events: none;
    }
    .final-card > * { position: relative; z-index: 1; }
    .final-copy { min-width: 0; }
    .final-product-icon {
      display: block;
      width: 100%;
      max-width: 340px;
      height: auto;
      justify-self: end;
      border-radius: 0;
      box-shadow: none;
      transform: none;
    }
    .final-card h2 {
      max-width: 900px;
      margin: 0;
      color: var(--ink);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(48px, 10vw, 132px);
      font-weight: 300;
      letter-spacing: -.06em;
      line-height: .9;
    }
    .final-tagline {
      max-width: 700px;
      margin: 18px 0 0;
      color: rgba(61, 42, 74, .90);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: clamp(26px, 4.6vw, 56px);
      font-weight: 300;
      letter-spacing: -.045em;
      line-height: 1;
    }
    .final-card .final-lead {
      max-width: 560px;
      margin: 22px 0 30px;
      color: rgba(61, 42, 74, .70);
      font-size: 15px;
      line-height: 1.7;
    }
    .final-card .button-primary { color: var(--ink-deep); }

    footer {
      padding: 0 0 34px;
      background: #f7faf7;
      color: var(--ink-soft);
      font-size: 11px;
      letter-spacing: .06em;
    }
    .footer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px 28px;
      flex-wrap: wrap;
      padding-top: 22px;
      border-top: 1px solid var(--line);
    }
    .footer-links,
    .footer-language {
      display: flex;
      align-items: center;
      gap: 10px 16px;
      flex-wrap: wrap;
    }
    .footer-links a:hover,
    .footer-language button:hover { opacity: .62; }
    .footer-language button {
      appearance: none;
      border: 0;
      padding: 0;
      color: inherit;
      background: none;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
    }
    .footer-language button[aria-pressed="true"] { color: var(--ink); }

    @media (max-width: 980px) {
      .topnav { display: none; }
      .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 58px 0 84px;
      }
      .hero-copy { max-width: 760px; }
      .hero-art { width: min(620px, 100%); }
      .hero-product-icon { width: min(420px, 78%); transform: none; }
      .final-card { grid-template-columns: minmax(0,1fr) 240px; }
      .requirements-layout { grid-template-columns: 1fr; }
      .showcase-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 760px) {
      .site-shell { width: min(100% - 30px, var(--max)); }
      .topbar { min-height: 66px; }
      .topbar-right { gap: 14px; }
      .hero-wrap { padding-bottom: 46px; }
      .hero { padding-top: 46px; gap: 46px; }
      .hero h1 { font-size: clamp(64px, 18vw, 96px); }
      .hero-tagline { margin-top: 14px; font-size: clamp(28px, 9.5vw, 44px); }
      .hero-lead { margin-top: 18px; font-size: 15px; }
      .hero-meta { margin-top: 24px; }
      .purchase-price { margin-top: 24px; }
      .hero-actions { align-items: flex-start; flex-direction: column; }
      .main-surface { border-radius: 30px 30px 0 0; }
      .section { padding: 76px 0; }
      .section-title { font-size: clamp(36px, 11vw, 52px); }
      .section-lead { font-size: 16px; }
      .demo-frame { margin-top: 34px; border-radius: 20px; }
      .demo-video {
      display: block;
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      object-fit: contain;
      border-radius: inherit;
    }
    .value-line { align-items: flex-start; flex-direction: column; }
      .value-line span { text-align: left; }
      .showcase-grid { grid-template-columns: 1fr; gap: 18px; }
      .showcase-row { gap: 12px; padding: 16px; }
      .showcase-body {
      margin: 0;
      color: var(--ink-soft);
      font-size: 16px;
      line-height: 1.65;
    }

    .benefit-grid { grid-template-columns: 1fr; }
      .benefit-card { min-height: 210px; }
      .benefit-number { margin-bottom: 48px; }
      .requirement-row { grid-template-columns: 1fr; gap: 8px; }
      .final-card { grid-template-columns: 1fr; border-radius: 24px; }
      .final-product-icon { width: min(240px, 68vw); justify-self: start; margin-top: 18px; }
    }

    @media (max-width: 480px) {
      .brand { font-size: 12px; letter-spacing: .20em; }
      .language-switch { gap: 8px; }
      .hero-product-icon { width: min(330px, 82%); }
      .pill { font-size: 11px; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .purchase-modal { width: min(100% - 20px, 520px); max-height: calc(100dvh - 20px); }
      .purchase-modal-card { padding: 24px 18px 20px; border-radius: 22px; }
      .purchase-modal h2 { margin-bottom: 18px; font-size: 22px; }
      .purchase-option { padding: 17px; }
      .purchase-option-action { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }