:root {
      --bg: #0A0E1A;
      --surface: #121829;
      --surface-2: #1B2236;
      --border: #26304A;
      --primary: #9D89FC;
      --primary-hover: #8B76F5;
      --on-primary: #0A0E1A;
      --spark: #E9FA49;
      --pulse: #FF4F3F;
      --glow: #FF8F27;
      --signal: #1CB785;
      --text: #FFFFFF;
      --muted: #C8DDF1;
      --subtle: #8A97B4;
      --r-md: 12px;
      --r-lg: 16px;
      --r-xl: 24px;
      --pill: 999px;
      --ease: cubic-bezier(.22, .61, .36, 1);
      --spring: cubic-bezier(.34, 1.56, .64, 1);
      --maxw: 1180px;
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    .wrap {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 24px;
      position: relative;
      z-index: 2
    }

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

    .mono {
      font-family: 'DM Mono', monospace
    }

    .display {
      font-family: 'Anton', sans-serif;
      font-weight: 400;
      line-height: 1.02;
      letter-spacing: -.5px;
      text-transform: uppercase
    }

    .eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--subtle)
    }

    .muted {
      color: var(--muted)
    }

    .subtle {
      color: var(--subtle)
    }

    .v {
      color: var(--primary)
    }

    .sp {
      color: var(--spark)
    }

    .pu {
      color: var(--pulse)
    }

    .gl {
      color: var(--glow)
    }

    .si {
      color: var(--signal)
    }

    /* ==== decorative layers ==== */
    .grain {
      position: fixed;
      inset: 0;
      z-index: 9999;
      pointer-events: none;
      opacity: .05;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
    }

    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .42;
      pointer-events: none;
      z-index: 0
    }

    .dots {
      background-image: radial-gradient(rgba(157, 137, 252, .14) 1.3px, transparent 1.3px);
      background-size: 26px 26px
    }

    .arc {
      position: absolute;
      border: 2px solid var(--border);
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
      opacity: .5
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans';
      font-weight: 600;
      font-size: 16px;
      border-radius: var(--pill);
      padding: 14px 26px;
      transition: .2s var(--ease);
      white-space: nowrap
    }

    .btn-primary {
      background: var(--primary);
      color: var(--on-primary)
    }

    .btn-primary:hover {
      background: var(--primary-hover);
      transform: translateY(-1px)
    }

    .btn-ghost {
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border)
    }

    .btn-ghost:hover {
      border-color: rgba(157, 137, 252, .5)
    }

    .btn .arrow {
      transition: transform .2s var(--ease)
    }

    .btn:hover .arrow {
      transform: translateX(3px)
    }

    /* nav */
    header.nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(10, 14, 26, .72);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border)
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: -.5px
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px
    }

    .nav-links .lk {
      color: var(--muted);
      font-size: 15px
    }

    .nav-links .lk:hover {
      color: var(--text)
    }

    @media(max-width:820px) {
      .nav-links .lk {
        display: none
      }
    }

    /* hero */
    .hero {
      position: relative;
      padding: 96px 0 80px;
      overflow: hidden
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 40px;
      align-items: center;
      z-index: 2
    }

    @media(max-width:960px) {
      .hero-grid {
        grid-template-columns: 1fr;
        text-align: center
      }
    }

    .badge-deadline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 8px 16px;
      font-size: 13px;
      color: var(--muted)
    }

    .badge-deadline .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pulse);
      box-shadow: 0 0 0 4px rgba(255, 79, 63, .18);
      animation: pulse 2s infinite
    }

    @keyframes pulse {

      0%,
      100% {
        box-shadow: 0 0 0 4px rgba(255, 79, 63, .18)
      }

      50% {
        box-shadow: 0 0 0 7px rgba(255, 79, 63, .06)
      }
    }

    .h1 {
      font-size: clamp(3rem, 7.5vw, 6.2rem);
      margin: 22px 0 20px
    }

    .h1 .l2 {
      color: var(--primary)
    }

    .hero p.sub {
      font-size: clamp(1.05rem, 2vw, 1.28rem);
      color: var(--muted);
      max-width: 560px;
      margin-bottom: 30px
    }

    @media(max-width:960px) {
      .hero p.sub {
        margin-inline: auto
      }
    }

    /* capture card */
    .capture {
      position: relative;
      z-index: 5;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 22px;
      max-width: 560px;
      box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6)
    }

    @media(max-width:960px) {
      .capture {
        margin-inline: auto
      }
    }

    .capture .lead {
      font-weight: 600;
      margin-bottom: 12px
    }

    .email-row {
      display: flex;
      gap: 10px
    }

    .email-row input {
      flex: 1;
      min-width: 0;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 13px 18px;
      color: var(--text);
      font-family: 'DM Sans';
      font-size: 15px;
      outline: none;
      transition: .2s
    }

    .email-row input::placeholder {
      color: var(--subtle)
    }

    .email-row input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(157, 137, 252, .35)
    }

    @media(max-width:460px) {
      .email-row {
        flex-direction: column
      }

      .email-row .btn {
        justify-content: center
      }
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--subtle);
      font-size: 13px;
      margin: 16px 0
    }

    .divider::before,
    .divider::after {
      content: "";
      height: 1px;
      background: var(--border);
      flex: 1
    }

    .dropzone {
      display: block;
      border: 1.5px dashed var(--border);
      border-radius: var(--r-lg);
      padding: 16px 18px;
      text-align: center;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.5;
      cursor: pointer;
      transition: .2s;
      background: rgba(27, 34, 54, .4)
    }

    .dropzone:hover {
      border-color: var(--primary);
      color: var(--text);
      background: rgba(157, 137, 252, .06)
    }

    .dropzone b {
      color: var(--text)
    }

    .microproof {
      font-family: 'DM Mono', monospace;
      font-size: 12.5px;
      color: var(--subtle);
      margin-top: 16px;
      letter-spacing: .3px
    }

    .consent {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: .82rem;
      color: var(--subtle);
      margin-top: 20px;
      cursor: pointer;
      line-height: 1.45
    }

    .capture .dropzone {
      margin-top: 2px
    }

    .capture .cf-turnstile {
      margin-top: 20px
    }

    .capture .microproof {
      margin-top: 20px
    }

    .consent input {
      margin-top: 2px;
      accent-color: var(--primary);
      flex: none
    }

    .status {
      font-size: .9rem;
      margin-top: 12px;
      min-height: 1.1em;
      font-weight: 500
    }

    .status.ok {
      color: var(--signal)
    }

    .status.err {
      color: var(--pulse)
    }

    .dropzone.drag {
      border-color: var(--primary);
      background: rgba(157, 137, 252, .1);
      color: var(--text)
    }

    /* capture: ação única + anexo opcional */
    .cap-lead {
      font-weight: 600;
      font-size: 1.05rem;
      margin-bottom: 14px
    }

    .attach {
      margin-top: 12px
    }

    .dropzone .opt {
      display: inline-block;
      margin-left: 4px;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--primary);
      background: rgba(157, 137, 252, .14);
      border-radius: var(--pill);
      padding: 2px 8px;
      vertical-align: middle
    }

    .dropzone[hidden],
    .filechip[hidden] {
      display: none
    }

    .filechip {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(28, 183, 133, .12);
      border: 1px solid rgba(28, 183, 133, .4);
      border-radius: var(--r-lg);
      padding: 12px 14px;
      color: var(--text);
      font-size: 14px
    }

    .filechip .fc-i {
      color: var(--signal);
      flex: none
    }

    .filechip .fc-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'DM Mono', monospace
    }

    .filechip .fc-x {
      background: none;
      border: none;
      color: var(--subtle);
      cursor: pointer;
      font-size: 15px;
      line-height: 1;
      padding: 3px 7px;
      border-radius: 6px
    }

    .filechip .fc-x:hover {
      color: var(--pulse);
      background: rgba(255, 79, 63, .1)
    }

    /* hero visual + seal */
    .hero-visual {
      position: relative
    }

    .hero-visual .diary {
      width: 100%;
      max-width: 460px;
      border-radius: var(--r-xl);
      display: block;
      margin: 0 auto;
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5))
    }

    @media(max-width:960px) {
      .hero-visual {
        display: none
      }
    }

    .hero-form {
      position: relative
    }

    .seal {
      position: absolute;
      top: -48px;
      right: 6px;
      width: 94px;
      height: 94px;
      z-index: 6
    }

    @media(max-width:960px) {
      .hero-form .seal {
        display: none
      }
    }

    .seal .ring {
      width: 100%;
      height: 100%;
      animation: spin 20s linear infinite
    }

    .seal text {
      font-family: 'DM Mono', monospace;
      font-size: 8.4px;
      letter-spacing: 2.4px;
      fill: var(--spark);
      text-transform: uppercase
    }

    .seal .core {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center
    }

    .seal .core svg {
      width: 38px;
      height: 38px
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    /* stickers */
    .sticker {
      position: absolute;
      z-index: 1;
      will-change: transform
    }

    .sticker svg {
      display: block;
      filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4))
    }

    .float {
      animation: float 5s ease-in-out infinite
    }

    .wig {
      animation: wig 4s ease-in-out infinite
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-12px)
      }
    }

    @keyframes wig {

      0%,
      100% {
        transform: rotate(-5deg)
      }

      50% {
        transform: rotate(5deg)
      }
    }

    /* stat teaser — notched cards w/ corner arrow */
    .teaser {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 56px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .teaser {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .stat {
      border-radius: var(--r-lg);
      padding: 22px 20px;
      position: relative;
      border: 1px solid var(--border)
    }

    .stat .num {
      font-family: 'Anton';
      font-size: clamp(2rem, 4vw, 2.8rem);
      line-height: 1
    }

    .stat .lbl {
      font-family: 'DM Mono';
      font-size: 11.5px;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 6px;
      opacity: .85
    }

    .stat .cnr {
      position: absolute;
      top: 13px;
      right: 13px;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 5px var(--bg)
    }

    .stat .cnr svg {
      width: 19px;
      height: 19px
    }

    .stat.a {
      background: rgba(233, 250, 73, .1)
    }

    .stat.a .num {
      color: var(--spark)
    }

    .stat.a .cnr {
      background: var(--spark)
    }

    .stat.b {
      background: rgba(28, 183, 133, .1)
    }

    .stat.b .num {
      color: var(--signal)
    }

    .stat.b .cnr {
      background: var(--signal)
    }

    .stat.c {
      background: rgba(255, 143, 39, .1)
    }

    .stat.c .num {
      color: var(--glow)
    }

    .stat.c .cnr {
      background: var(--glow)
    }

    .stat.d {
      background: rgba(157, 137, 252, .1)
    }

    .stat.d .num {
      color: var(--primary)
    }

    .stat.d .cnr {
      background: var(--primary)
    }

    .teaser-cap {
      text-align: center;
      color: var(--subtle);
      font-size: 13px;
      margin-top: 14px;
      font-family: 'DM Mono'
    }

    /* section shell */
    section.blk {
      padding: 88px 0;
      position: relative;
      overflow: hidden
    }

    .sec-head {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 48px
    }

    .sec-head h2 {
      font-size: clamp(2rem, 4.4vw, 3rem);
      margin: 12px 0
    }

    .sec-head p {
      color: var(--muted);
      font-size: 1.08rem
    }

    /* wave divider */
    .wave {
      display: block;
      width: 100%;
      height: 60px
    }

    .wave path {
      fill: var(--surface)
    }

    /* urgency band */
    .urgency {
      background: linear-gradient(90deg, rgba(255, 79, 63, .12), rgba(157, 137, 252, .12));
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      position: relative;
      overflow: hidden
    }

    .urgency-in {
      text-align: center;
      padding: 48px 0;
      position: relative;
      z-index: 2
    }

    .urgency-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255, 79, 63, .12);
      border: 1px solid rgba(255, 79, 63, .4);
      color: #FF6A5A;
      border-radius: var(--pill);
      padding: 8px 18px;
      font-family: 'DM Mono';
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase
    }

    .urgency-pill .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #FF4F3F;
      animation: pulse 2s infinite
    }

    .countdown {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;
      margin: 26px 0 18px
    }

    .cd-u {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 96px
    }

    .cd-u b {
      font-family: 'Anton';
      font-size: clamp(3.2rem, 10vw, 6rem);
      line-height: .85;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      letter-spacing: -1px
    }

    .cd-u span {
      font-family: 'DM Mono';
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--subtle);
      margin-top: 10px
    }

    .cd-colon {
      font-family: 'Anton';
      font-size: clamp(2.4rem, 7vw, 4.4rem);
      color: var(--primary);
      line-height: 1;
      opacity: .5
    }

    .cd-u b.tick {
      animation: cdpop .22s var(--ease)
    }

    @keyframes cdpop {
      0% {
        transform: translateY(-8px) scale(1.06);
        opacity: .55
      }

      100% {
        transform: none;
        opacity: 1
      }
    }

    .urgency-sub {
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto;
      font-size: 1.05rem
    }

    .urgency-sub b {
      color: var(--text)
    }

    @media(max-width:600px) {
      .cd-u {
        min-width: 66px
      }

      .countdown {
        gap: 4px
      }

      .cd-u span {
        font-size: 10px
      }
    }

    /* steps + connector */
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .steps {
        grid-template-columns: 1fr
      }
    }

    .steps::before {
      content: "";
      position: absolute;
      top: 56px;
      left: 16%;
      right: 16%;
      height: 2px;
      z-index: -1;
      background-image: linear-gradient(90deg, var(--border) 60%, transparent 0);
      background-size: 14px 2px
    }

    @media(max-width:820px) {
      .steps::before {
        display: none
      }
    }

    .step {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px
    }

    .step .n {
      font-family: 'Anton';
      font-size: 2.4rem;
      color: var(--primary);
      line-height: 1
    }

    .step h3 {
      font-size: 1.25rem;
      margin: 12px 0 8px
    }

    .step p {
      color: var(--muted);
      font-size: .98rem
    }

    /* features */
    .feats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .feats {
        grid-template-columns: 1fr
      }
    }

    .feat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 26px;
      transition: .2s var(--ease)
    }

    .feat:hover {
      transform: translateY(-3px);
      border-color: rgba(157, 137, 252, .4)
    }

    .feat .ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: rgba(157, 137, 252, .14)
    }

    .feat h3 {
      font-size: 1.15rem;
      margin-bottom: 8px
    }

    .feat p {
      color: var(--muted);
      font-size: .96rem
    }

    /* bento grid */
    .bento {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, minmax(150px, 1fr));
      gap: 18px;
      position: relative;
      z-index: 2
    }

    .bento .b {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 26px;
      transition: transform .25s var(--ease), border-color .25s;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column
    }

    .bento .b:hover {
      transform: translateY(-3px);
      border-color: rgba(157, 137, 252, .45)
    }

    .bento .b .ic {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      background: rgba(157, 137, 252, .14);
      flex: none
    }

    .bento .b h3 {
      font-size: 1.15rem;
      margin-bottom: 8px
    }

    .bento .b p {
      color: var(--muted);
      font-size: .95rem
    }

    .bento .b-tall {
      grid-row: 1 / span 3
    }

    .bento .b-wide {
      grid-column: 2 / span 2;
      flex-direction: row;
      align-items: center;
      gap: 22px
    }

    .bento .b-wide .ic {
      margin-bottom: 0
    }

    .b-poster-stack {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: auto;
      padding-top: 24px
    }

    .b-poster-stack img {
      width: 66px;
      height: 98px;
      object-fit: cover;
      border-radius: 9px;
      box-shadow: 0 12px 22px -8px rgba(0, 0, 0, .75)
    }

    .b-poster-stack img:nth-child(1) {
      transform: rotate(-5deg)
    }

    .b-poster-stack img:nth-child(3) {
      transform: rotate(5deg)
    }

    .bento .rv:nth-child(2) {
      transition-delay: .05s
    }

    .bento .rv:nth-child(3) {
      transition-delay: .1s
    }

    .bento .rv:nth-child(4) {
      transition-delay: .15s
    }

    .bento .rv:nth-child(5) {
      transition-delay: .2s
    }

    .bento .rv:nth-child(6) {
      transition-delay: .25s
    }

    @media(max-width:820px) {
      .bento {
        grid-template-columns: 1fr;
        grid-template-rows: none
      }

      .bento .b-tall {
        grid-row: auto
      }

      .bento .b-wide {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start
      }
    }

    /* comparativo */
    .cmp {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      position: relative;
      z-index: 2
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 560px
    }

    th,
    td {
      padding: 16px 20px;
      text-align: left;
      border-bottom: 1px solid var(--border);
      font-size: .98rem
    }

    thead th {
      font-family: 'DM Mono';
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--subtle)
    }

    thead th.us {
      color: var(--primary)
    }

    tbody td:first-child {
      color: var(--muted)
    }

    td.yes {
      color: var(--signal);
      font-weight: 600
    }

    td.us {
      background: rgba(157, 137, 252, .06)
    }

    tr:last-child td {
      border-bottom: none
    }

    /* pricing */
    .plans {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: start;
      position: relative;
      z-index: 2
    }

    @media(max-width:820px) {
      .plans {
        grid-template-columns: 1fr
      }
    }

    .plan {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-xl);
      padding: 28px;
      position: relative
    }

    .plan.hot {
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary), 0 24px 60px -24px rgba(157, 137, 252, .5);
      transform: translateY(-12px)
    }

    @media(max-width:820px) {
      .plan.hot {
        transform: none
      }
    }

    .plan .tag {
      position: absolute;
      top: -12px;
      left: 28px;
      background: var(--primary);
      color: var(--on-primary);
      font-size: 12px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: var(--pill)
    }

    .plan h3 {
      font-size: 1.3rem
    }

    .plan .price {
      display: flex;
      align-items: baseline;
      gap: 2px;
      margin: 10px 0 2px
    }

    .plan .price .cur {
      font-family: 'Anton';
      font-size: 1.4rem;
      color: var(--muted)
    }

    .plan .price .amt {
      font-family: 'Anton';
      font-size: 3rem;
      line-height: 1
    }

    .plan .price .per {
      font-family: 'DM Sans';
      font-size: 1rem;
      color: var(--subtle);
      font-weight: 600;
      margin-left: 2px
    }

    .price-note {
      font-family: 'DM Mono';
      font-size: 12px;
      color: var(--subtle);
      margin-bottom: 8px;
      min-height: 1em
    }

    .billing {
      display: flex;
      width: max-content;
      margin: 0 auto 40px;
      gap: 4px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--pill);
      padding: 5px;
      position: relative;
      z-index: 2
    }

    .bill-opt {
      border: none;
      background: transparent;
      color: var(--muted);
      font-family: 'DM Sans';
      font-weight: 600;
      font-size: 15px;
      padding: 9px 20px;
      border-radius: var(--pill);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: .2s var(--ease)
    }

    .bill-opt.on {
      background: var(--primary);
      color: var(--on-primary)
    }

    .bill-opt .save {
      font-family: 'DM Mono';
      font-size: 11px;
      background: rgba(28, 183, 133, .18);
      color: var(--signal);
      padding: 2px 7px;
      border-radius: var(--pill)
    }

    .bill-opt.on .save {
      background: rgba(10, 14, 26, .15);
      color: var(--on-primary)
    }

    .feats-list {
      list-style: none;
      margin: 16px 0 22px;
      padding: 0
    }

    .feats-list li {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: .93rem;
      color: var(--muted);
      margin: 9px 0
    }

    .feats-list li svg {
      flex: none;
      margin-top: 2px
    }

    .trial {
      font-family: 'DM Mono';
      font-size: 12px;
      color: var(--signal);
      margin-top: 12px;
      text-align: center
    }

    .plan .per {
      color: var(--subtle);
      font-size: .9rem;
      font-family: 'DM Mono'
    }

    .plan p.desc {
      color: var(--muted);
      font-size: .95rem;
      margin: 14px 0 20px
    }

    .plan .btn {
      width: 100%;
      justify-content: center
    }

    .lock {
      text-align: center;
      color: var(--subtle);
      font-size: .9rem;
      margin-top: 22px;
      position: relative;
      z-index: 2
    }

    /* poster-wall marquee */
    .marquee {
      overflow: hidden;
      -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      padding: 10px 0
    }

    .marquee .track {
      display: flex;
      gap: 20px;
      width: max-content;
      animation: scroll 30s linear infinite
    }

    .marquee:hover .track {
      animation-play-state: paused
    }

    .poster {
      width: 120px;
      height: 176px;
      border-radius: 12px;
      flex: none;
      position: relative;
      overflow: hidden;
      box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .75)
    }

    .poster::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 12px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
    }

    .poster:nth-child(odd) {
      transform: rotate(-3deg)
    }

    .poster:nth-child(even) {
      transform: rotate(3deg)
    }

    .poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    @keyframes scroll {
      to {
        transform: translateX(calc(-50% - 10px))
      }
    }

    .attrib {
      text-align: center;
      color: var(--subtle);
      font-size: .8rem;
      margin-top: 24px;
      position: relative;
      z-index: 2
    }

    .attrib a {
      color: var(--muted);
      text-decoration: underline;
      text-underline-offset: 2px
    }

    .attrib a:hover {
      color: var(--text)
    }

    /* trending 3D orbit carousel */
    .trending-stage {
      perspective: 1300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      position: relative;
      z-index: 2
    }

    .orbit {
      position: relative;
      width: 150px;
      height: 222px;
      transform-style: preserve-3d;
      animation: orbitspin 46s linear infinite
    }

    .trending-stage:hover .orbit {
      animation-play-state: paused
    }

    .orbit .ocard {
      position: absolute;
      inset: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .85);
      backface-visibility: hidden
    }

    .orbit .ocard::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 14px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12)
    }

    .orbit .ocard img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    @keyframes orbitspin {
      from {
        transform: rotateY(0)
      }

      to {
        transform: rotateY(-360deg)
      }
    }

    @media(max-width:600px) {
      .trending-stage {
        perspective: 900px;
        height: 250px
      }

      .orbit {
        width: 120px;
        height: 178px
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .orbit {
        animation: none
      }
    }

    /* final cta */
    .final {
      text-align: center;
      position: relative;
      overflow: hidden
    }

    .final h2 {
      font-size: clamp(2.2rem, 5.5vw, 4rem);
      position: relative;
      margin-bottom: 18px;
      z-index: 2
    }

    .final p {
      color: var(--muted);
      max-width: 560px;
      margin: 0 auto 28px;
      position: relative;
      z-index: 2
    }

    .final .cd {
      margin-top: 16px;
      font-family: 'DM Mono';
      color: var(--subtle);
      font-size: 13px;
      position: relative;
      z-index: 2
    }

    /* footer */
    footer {
      border-top: 1px solid var(--border);
      padding: 56px 0 40px;
      color: var(--subtle);
      font-size: .9rem;
      position: relative;
      z-index: 2
    }

    .foot-grid {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      flex-wrap: wrap;
      margin-bottom: 28px
    }

    footer a {
      color: var(--muted)
    }

    footer a:hover {
      color: var(--text)
    }

    .legal {
      border-top: 1px solid var(--border);
      padding-top: 22px;
      font-size: .82rem;
      line-height: 1.6
    }

    /* faq accordion */
    .faq {
      max-width: 760px;
      margin: 0 auto;
      position: relative;
      z-index: 2
    }

    .faq details {
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      background: var(--bg);
      margin-bottom: 12px;
      overflow: hidden;
      transition: border-color .2s
    }

    .faq details[open] {
      border-color: rgba(157, 137, 252, .4)
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      padding: 20px 22px;
      font-weight: 600;
      font-size: 1.05rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px
    }

    .faq summary::-webkit-details-marker {
      display: none
    }

    .faq summary::after {
      content: "+";
      font-family: 'DM Mono';
      color: var(--primary);
      font-size: 1.5rem;
      line-height: 1;
      flex: none
    }

    .faq details[open] summary::after {
      content: "\2013"
    }

    .faq .ans {
      padding: 0 22px 22px;
      color: var(--muted);
      font-size: 1rem
    }

    /* reveal */
    .rv {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s var(--ease), transform .6s var(--ease)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    @media(prefers-reduced-motion:reduce) {
      .rv {
        opacity: 1;
        transform: none;
        transition: none
      }

      .float,
      .wig,
      .seal .ring,
      .badge-deadline .dot,
      .marquee .track {
        animation: none
      }
    }

/* ---- language switcher (CSS-only dropdown, no JS) ---- */
.langsw{position:relative;display:inline-block}
.lang-cur{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--pill);padding:8px 14px;font-family:"DM Mono",monospace;font-size:13px;cursor:pointer;letter-spacing:.5px;line-height:1}
.lang-cur::after{content:"▾";opacity:.55;font-size:11px}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:174px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:6px;display:none;flex-direction:column;gap:2px;z-index:70;box-shadow:0 20px 44px rgba(0,0,0,.45)}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:14px;text-decoration:none}
.lang-menu a:hover{background:var(--bg);color:var(--text)}
.lang-menu a.active{color:var(--primary);font-weight:600}
.langsw:hover .lang-menu,.langsw:focus-within .lang-menu{display:flex}
@media(max-width:720px){.lang-menu{right:auto;left:0}}