:root {
      --bg: #08070d;
      --bg-2: #10101d;
      --card: rgba(255,255,255,.065);
      --card-2: rgba(255,255,255,.095);
      --line: rgba(255,255,255,.13);
      --line-2: rgba(232,196,106,.28);
      --text: #fbf7ec;
      --muted: rgba(251,247,236,.68);
      --soft: rgba(251,247,236,.48);
      --gold: #f4c95d;
      --gold-2: #ffe7a1;
      --amber: #f59e0b;
      --violet: #a78bfa;
      --rose: #fb7185;
      --cyan: #67e8f9;
      --shadow: 0 24px 80px rgba(0,0,0,.42);
      --radius: 28px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 0%, rgba(167,139,250,.28), transparent 34rem),
        radial-gradient(circle at 88% 8%, rgba(244,201,93,.22), transparent 32rem),
        radial-gradient(circle at 70% 50%, rgba(103,232,249,.10), transparent 34rem),
        linear-gradient(180deg, #090711 0%, #0b0a12 45%, #06050a 100%);
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .42;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      z-index: -2;
    }
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.58) 100%);
      z-index: -1;
    }
    a { color: inherit; text-decoration: none; }
    img, svg { display: block; max-width: 100%; }
    .wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
    .noise {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .08;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    }

    .announce {
      position: relative;
      z-index: 20;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(90deg, rgba(244,201,93,.18), rgba(167,139,250,.10), rgba(103,232,249,.08));
      backdrop-filter: blur(18px);
    }
    .announce .wrap {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 13px;
      color: rgba(251,247,236,.82);
      text-align: center;
    }
    .timer {
      display: inline-flex;
      gap: 4px;
      align-items: center;
      color: var(--gold-2);
      font-weight: 800;
      padding: 5px 10px;
      border: 1px solid rgba(244,201,93,.24);
      border-radius: 999px;
      background: rgba(0,0,0,.18);
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(22px);
      background: rgba(8,7,13,.70);
      border-bottom: 1px solid rgba(255,255,255,.09);
    }
    .nav .wrap {
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 900;
      letter-spacing: -.04em;
      font-size: 21px;
    }
    .brand mark { background: none; color: var(--gold); padding: 0; }
    .logo {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(244,201,93,.24), rgba(167,139,250,.16));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.22);
    }
    .nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--muted); font-weight: 700; }
    .nav-links a:not(.btn):hover { color: var(--text); }
    .mobile-toggle { display: none; }

    .btn {
      --shine: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 900;
      letter-spacing: -.02em;
      border: 1px solid rgba(255,255,255,.14);
      overflow: hidden;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .btn::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 -70%;
      width: 54%;
      transform: skewX(-18deg);
      background: var(--shine);
      opacity: 0;
      z-index: -1;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:hover::after { animation: shine .9s ease; opacity: .8; }
    @keyframes shine { to { left: 125%; } }
    .btn-gold {
      color: #1c1302;
      background: linear-gradient(135deg, var(--gold-2), var(--gold) 45%, #d89b1b);
      box-shadow: 0 18px 45px rgba(244,201,93,.25), inset 0 1px 0 rgba(255,255,255,.55);
    }
    .btn-gold:hover { box-shadow: 0 24px 60px rgba(244,201,93,.34), inset 0 1px 0 rgba(255,255,255,.55); }
    .btn-ghost {
      color: var(--text);
      background: rgba(255,255,255,.075);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }
    .btn-ghost:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.11); }
    .btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; }

    .hero { position: relative; padding: 82px 0 42px; overflow: hidden; }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
      gap: 52px;
      align-items: center;
    }
    .orb {
      position: absolute;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      filter: blur(4px);
      opacity: .45;
      background: conic-gradient(from 180deg, rgba(244,201,93,.0), rgba(244,201,93,.25), rgba(167,139,250,.26), rgba(103,232,249,.16), rgba(244,201,93,.0));
      right: -260px;
      top: 20px;
      animation: slowspin 22s linear infinite;
    }
    @keyframes slowspin { to { transform: rotate(1turn); } }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 34px;
      padding: 7px 13px;
      border: 1px solid rgba(244,201,93,.22);
      border-radius: 999px;
      color: var(--gold-2);
      background: rgba(244,201,93,.08);
      font-weight: 900;
      font-size: 12px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 22px var(--gold);
    }
    h1, h2, h3, h4, p { margin-top: 0; }
    h1 {
      margin: 22px 0 22px;
      font-family: "Playfair Display", serif;
      font-size: clamp(54px, 7vw, 100px);
      line-height: .89;
      letter-spacing: -.065em;
      max-width: 820px;
    }
    .grad {
      background: linear-gradient(90deg, #fff9df, var(--gold), #c4b5fd, #a5f3fc);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .sub {
      max-width: 650px;
      color: var(--muted);
      font-size: 19px;
      line-height: 1.72;
      margin-bottom: 28px;
    }
    .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .hero-note {
      margin: 18px 0 0;
      color: var(--soft);
      font-weight: 700;
      font-size: 14px;
    }
    .mini-proof {
      margin-top: 28px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .mini-proof span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border-radius: 999px;
      color: rgba(251,247,236,.76);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      font-size: 13px;
      font-weight: 800;
    }
    .mini-proof b { color: var(--gold-2); }

    .product-card {
      position: relative;
      min-height: 580px;
      border: 1px solid rgba(255,255,255,.15);
      background:
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055)),
        radial-gradient(circle at 20% 0%, rgba(244,201,93,.20), transparent 26rem),
        radial-gradient(circle at 90% 20%, rgba(167,139,250,.18), transparent 25rem);
      border-radius: 36px;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18);
      overflow: hidden;
      transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
    }
    .product-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      padding: 1px;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(244,201,93,.55), rgba(167,139,250,.28), rgba(103,232,249,.24), rgba(255,255,255,.08));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }
    .app-top {
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
    }
    .dots { display: flex; gap: 7px; }
    .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.24); }
    .url {
      font-size: 12px;
      color: var(--soft);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.055);
      padding: 7px 13px;
      border-radius: 999px;
    }
    .app-body { padding: 22px; }
    .status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .status {
      padding: 16px;
      border-radius: 22px;
      background: rgba(0,0,0,.20);
      border: 1px solid rgba(255,255,255,.10);
    }
    .status .label { color: var(--soft); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
    .status .value { margin-top: 8px; font-weight: 900; font-size: 24px; letter-spacing: -.04em; }
    .editor {
      border-radius: 26px;
      padding: 18px;
      background: rgba(4,4,9,.54);
      border: 1px solid rgba(255,255,255,.11);
      min-height: 274px;
      position: relative;
      overflow: hidden;
    }
    .editor h3 { font-family: "Playfair Display", serif; font-size: 27px; letter-spacing: -.03em; margin-bottom: 12px; }
    .editor p { color: rgba(251,247,236,.68); line-height: 1.75; font-size: 14px; }
    .highlight-line {
      margin-top: 16px;
      padding: 14px;
      border-radius: 18px;
      background: linear-gradient(90deg, rgba(244,201,93,.15), rgba(167,139,250,.09));
      border: 1px solid rgba(244,201,93,.18);
      color: var(--gold-2);
      font-weight: 800;
      line-height: 1.5;
    }
    .progress {
      margin-top: 16px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
    }
    .progress-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 800; margin-bottom: 11px; }
    .track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
    .fill { width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--violet), var(--cyan)); box-shadow: 0 0 24px rgba(244,201,93,.38); }
    .floating {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 13px;
      border-radius: 999px;
      background: rgba(9,8,16,.84);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 45px rgba(0,0,0,.35);
      color: rgba(251,247,236,.80);
      font-size: 12px;
      font-weight: 900;
      backdrop-filter: blur(18px);
    }
    .floating.one { left: -24px; top: 116px; }
    .floating.two { right: -26px; bottom: 126px; }
    .pulse {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 0 0 rgba(52,211,153,.7);
      animation: pulse 1.7s infinite;
    }
    @keyframes pulse { 70% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

    .stats {
      padding: 34px 0 18px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .stat {
      padding: 22px;
      border-radius: 26px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .stat .n { font-size: 29px; font-weight: 900; letter-spacing: -.045em; color: var(--gold-2); }
    .stat .l { margin-top: 6px; color: var(--muted); line-height: 1.45; font-size: 14px; }

    section { position: relative; padding: 96px 0; }
    .section-head { max-width: 760px; margin: 0 auto 42px; text-align: center; }
    .section-head h2 {
      margin: 18px 0 14px;
      font-family: "Playfair Display", serif;
      font-size: clamp(38px, 5vw, 64px);
      line-height: .98;
      letter-spacing: -.055em;
    }
    .section-head p { color: var(--muted); font-size: 18px; line-height: 1.65; margin-bottom: 0; }

    .logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 24px;
    }
    .logos span {
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.045);
      color: rgba(251,247,236,.56);
      border-radius: 999px;
      padding: 10px 15px;
      font-weight: 900;
      font-size: 13px;
    }

    .showcase {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 20px;
      align-items: stretch;
    }
    .glass {
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.10);
      overflow: hidden;
    }
    .video-box { min-height: 426px; display: grid; place-items: center; position: relative; }
    .video-art {
      position: absolute;
      inset: 18px;
      border-radius: 25px;
      background:
        radial-gradient(circle at 35% 25%, rgba(244,201,93,.20), transparent 16rem),
        radial-gradient(circle at 68% 58%, rgba(167,139,250,.24), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.07), rgba(0,0,0,.20));
      border: 1px solid rgba(255,255,255,.10);
    }
    .play {
      position: relative;
      width: 96px;
      height: 96px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
      box-shadow: 0 26px 65px rgba(244,201,93,.30);
    }
    .play::before {
      content: "";
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 23px solid #160e03;
      margin-left: 6px;
    }
    .badge-soon {
      position: absolute;
      top: 32px;
      left: 32px;
      z-index: 2;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.36);
      border: 1px solid rgba(255,255,255,.14);
      color: var(--gold-2);
      font-size: 12px;
      font-weight: 900;
    }
    .video-facade {
      position: absolute; inset: 0; width: 100%; height: 100%;
      margin: 0; padding: 0; border: 0; border-radius: inherit;
      overflow: hidden; cursor: pointer; background: #0c0905;
      display: grid; place-items: center;
    }
    .video-poster {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: 50% 42%;
      filter: brightness(.6) saturate(1.05);
      transition: filter .35s ease, transform .6s ease;
    }
    .video-facade::after {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 42%, rgba(8,6,2,.08), rgba(8,6,2,.55) 72%);
    }
    .video-facade:hover .video-poster,
    .video-facade:focus-visible .video-poster { filter: brightness(.72) saturate(1.05); transform: scale(1.04); }
    .video-facade .play { z-index: 2; transition: transform .25s ease; }
    .video-facade:hover .play,
    .video-facade:focus-visible .play { transform: scale(1.08); }
    .video-facade .video-cta {
      position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px;
      text-align: center; color: #fff; font-weight: 700;
      font-size: .95rem; letter-spacing: .2px; text-shadow: 0 2px 14px rgba(0,0,0,.65);
    }
    .video-facade:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .video-box.playing { padding: 0; }
    .video-box .yt-frame {
      position: absolute; inset: 0; width: 100%; height: 100%;
      border: 0; border-radius: inherit; background: #000;
    }
    .timeline { padding: 26px; }
    .timeline-item {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 16px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .timeline-item:last-child { border-bottom: 0; }
    .timeline-item .num {
      width: 50px;
      height: 50px;
      border-radius: 17px;
      display: grid;
      place-items: center;
      color: #1c1302;
      background: linear-gradient(135deg, var(--gold-2), var(--gold));
      font-weight: 950;
    }
    .timeline-item h3 { margin-bottom: 7px; font-size: 18px; letter-spacing: -.02em; }
    .timeline-item p { color: var(--muted); line-height: 1.62; margin-bottom: 0; }

    .grid { display: grid; gap: 18px; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .feature-card {
      position: relative;
      padding: 28px;
      min-height: 250px;
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.11);
      background: linear-gradient(180deg, rgba(255,255,255,.078), rgba(255,255,255,.042));
      box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
      overflow: hidden;
      transition: transform .24s ease, border-color .24s ease, background .24s ease;
    }
    .feature-card:hover { transform: translateY(-6px); border-color: rgba(244,201,93,.34); background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.048)); }
    .feature-card::after {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      right: -60px;
      top: -70px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244,201,93,.20), transparent 66%);
    }
    .icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 24px;
      background: rgba(244,201,93,.12);
      border: 1px solid rgba(244,201,93,.20);
      margin-bottom: 22px;
    }
    .feature-card h3 { font-size: 21px; letter-spacing: -.035em; margin-bottom: 10px; }
    .feature-card p { color: var(--muted); line-height: 1.65; margin-bottom: 0; }

    .sample-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 20px;
      align-items: start;
    }
    .sample { padding: 0; }
    .sample-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 22px;
      border-bottom: 1px solid rgba(255,255,255,.09);
      background: rgba(0,0,0,.18);
    }
    .sample-head b { color: var(--gold-2); }
    .sample-body { padding: 30px; }
    .sample-body h3 {
      font-family: "Playfair Display", serif;
      font-size: 34px;
      letter-spacing: -.04em;
      margin-bottom: 18px;
    }
    .sample-body p { color: rgba(251,247,236,.76); line-height: 1.88; font-size: 16px; }
    .sample-body .cliff {
      color: var(--gold-2);
      font-weight: 800;
      padding: 18px;
      border-radius: 20px;
      background: rgba(244,201,93,.10);
      border: 1px solid rgba(244,201,93,.18);
      margin-bottom: 0;
    }
    .quality-panel { padding: 28px; }
    .checklist { display: grid; gap: 12px; }
    .check {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 15px;
      border-radius: 19px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.09);
      color: rgba(251,247,236,.75);
      line-height: 1.5;
    }
    .check b { color: var(--text); }
    .check i {
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(52,211,153,.15);
      color: #86efac;
      font-style: normal;
      font-weight: 950;
    }

    .earn-card {
      position: relative;
      padding: 38px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 15% 0%, rgba(244,201,93,.24), transparent 24rem),
        radial-gradient(circle at 90% 85%, rgba(167,139,250,.18), transparent 25rem),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
      border: 1px solid rgba(255,255,255,.13);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
      overflow: hidden;
    }
    .earn-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; }
    .big-number {
      font-size: clamp(52px, 8vw, 104px);
      line-height: .88;
      letter-spacing: -.08em;
      font-weight: 950;
      color: var(--gold-2);
      margin-bottom: 16px;
    }
    .earn-card h2 { font-family: "Playfair Display", serif; font-size: clamp(34px, 4vw, 58px); line-height: 1; letter-spacing: -.055em; margin-bottom: 16px; }
    .earn-card p { color: var(--muted); line-height: 1.72; font-size: 17px; }
    .honest {
      padding: 18px;
      border-radius: 22px;
      border: 1px solid rgba(244,201,93,.20);
      background: rgba(244,201,93,.08);
      color: rgba(251,247,236,.75);
      line-height: 1.6;
      font-size: 14px;
    }

    .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
    .price {
      position: relative;
      padding: 28px;
      border-radius: 30px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.11);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
      display: flex;
      flex-direction: column;
    }
    .price.featured {
      background:
        radial-gradient(circle at 50% 0%, rgba(244,201,93,.24), transparent 19rem),
        linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
      border-color: rgba(244,201,93,.42);
      box-shadow: 0 24px 70px rgba(244,201,93,.12), inset 0 1px 0 rgba(255,255,255,.16);
      transform: translateY(-12px);
    }
    .ribbon {
      position: absolute;
      top: 18px;
      right: 18px;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(244,201,93,.15);
      color: var(--gold-2);
      border: 1px solid rgba(244,201,93,.24);
      font-size: 12px;
      font-weight: 950;
    }
    .tier { color: var(--gold-2); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 950; }
    .amount { margin: 16px 0 2px; font-size: 49px; letter-spacing: -.07em; font-weight: 950; }
    .per { color: var(--soft); font-size: 14px; font-weight: 750; }
    .price ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; color: rgba(251,247,236,.74); }
    .price li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
    .price li::before { content: "✓"; color: #86efac; font-weight: 950; }
    .price .btn { margin-top: auto; width: 100%; }
    .freebar {
      margin-bottom: 18px;
      padding: 22px;
      border-radius: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      background: linear-gradient(90deg, rgba(244,201,93,.16), rgba(167,139,250,.10));
      border: 1px solid rgba(244,201,93,.23);
    }
    .freebar .t { font-size: 21px; font-weight: 950; letter-spacing: -.04em; }
    .freebar .s { color: var(--muted); margin-top: 5px; line-height: 1.45; }

    .faq { max-width: 920px; margin: 0 auto; display: grid; gap: 12px; }
    details {
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 22px;
      background: rgba(255,255,255,.055);
      overflow: hidden;
    }
    summary {
      list-style: none;
      cursor: pointer;
      padding: 22px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-weight: 900;
      letter-spacing: -.02em;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--gold-2); font-size: 25px; line-height: 1; }
    details[open] summary::after { content: "–"; }
    details p { padding: 0 24px 22px; margin: 0; color: var(--muted); line-height: 1.65; }

    .final-cta {
      padding: 86px 0 100px;
    }
    .cta-box {
      position: relative;
      text-align: center;
      padding: 58px 28px;
      border-radius: 38px;
      background:
        radial-gradient(circle at 30% 0%, rgba(244,201,93,.25), transparent 28rem),
        radial-gradient(circle at 75% 75%, rgba(103,232,249,.14), transparent 24rem),
        linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.16);
      overflow: hidden;
    }
    .cta-box h2 { font-family: "Playfair Display", serif; font-size: clamp(42px, 6vw, 74px); line-height: .96; letter-spacing: -.06em; margin: 0 auto 18px; max-width: 850px; }
    .cta-box p { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 660px; margin: 0 auto 28px; }

    .disclaimer {
      padding: 24px;
      border-radius: 26px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.09);
      color: rgba(251,247,236,.56);
      font-size: 12px;
      line-height: 1.65;
    }
    .disclaimer h4 { color: rgba(251,247,236,.80); margin-bottom: 10px; }
    .disclaimer p { margin-bottom: 10px; }
    footer {
      border-top: 1px solid rgba(255,255,255,.09);
      padding: 30px 0;
      color: rgba(251,247,236,.52);
      font-size: 13px;
    }
    .foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
    .foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .foot a:hover { color: var(--text); }

    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.in { opacity: 1; transform: none; }

    @media (max-width: 1040px) {
      .hero-grid, .showcase, .sample-grid, .earn-grid { grid-template-columns: 1fr; }
      .product-card { transform: none; min-height: auto; }
      .stats { grid-template-columns: repeat(2, 1fr); }
      .grid-3, .pricing { grid-template-columns: 1fr 1fr; }
      .price.featured { transform: none; }
      .floating { display: none; }
    }
    @media (max-width: 760px) {
      .wrap { width: min(100% - 28px, var(--max)); }
      .announce .wrap { justify-content: flex-start; text-align: left; padding: 8px 0; }
      .nav .wrap { height: 68px; }
      .nav-links {
        position: fixed;
        top: 68px;
        left: 14px;
        right: 14px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 14px;
        border-radius: 24px;
        background: rgba(12,11,20,.96);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 13px 12px; }
      .nav-links .btn { margin-top: 8px; }
      .mobile-toggle {
        display: inline-flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.06);
        color: var(--text);
        font-size: 22px;
      }
      .hero { padding-top: 54px; }
      h1 { font-size: clamp(48px, 14vw, 76px); }
      .sub { font-size: 17px; }
      .hero-cta .btn, .freebar .btn { width: 100%; }
      .product-card { border-radius: 28px; }
      .app-body { padding: 16px; }
      .status-row, .stats, .grid-3, .pricing { grid-template-columns: 1fr; }
      section { padding: 72px 0; }
      .section-head { text-align: left; }
      .section-head h2 { font-size: clamp(38px, 10vw, 52px); }
      .video-box { min-height: 320px; }
      .freebar { align-items: stretch; flex-direction: column; }
      .sample-body, .earn-card, .quality-panel { padding: 22px; }
      .cta-box { padding: 44px 20px; border-radius: 30px; }
      .foot { flex-direction: column; align-items: flex-start; }
    }
  

/* line-icons in feature .icon boxes */
.icon { color: var(--gold); }
.icon svg { width: 26px; height: 26px; }