:root {
      --brand: #3B46F0;
      /* --blue is the primary accent token. Unified to brand indigo (#3B46F0,
         the Math subject color) so accents/glows match the brand, not sky-blue. */
      --blue: #3B46F0;
      /* Accent TEXT color. Brand indigo is readable on light surfaces (~6:1);
         the dark theme overrides this to a lighter indigo so links/eyebrows
         clear WCAG AA on the dark background. Fills/glows keep --blue. */
      --blue-ink: #3B46F0;
      --green: #10B981;
      --violet: #8B5CF6;
      --amber: #F59E0B;
      --red: #EF4444;
      --navy: #0F172A;
      --slate: #1E293B;
      --slate-hi: #334155;
      --gray: #E5E7EB;
      --white: #FFFFFF;
      --page: #E5E7EB;
      --page-soft: #F3F4F6;
      --surface: #FFFFFF;
      --surface-raised: rgba(255, 255, 255, .86);
      --surface-tint: #F3F4F6;
      --fg: #111827;
      --muted: #6B7280;
      --muted-strong: #374151;
      --line: rgba(17, 24, 39, .12);
      --line-strong: rgba(17, 24, 39, .22);
      --hero-bg: #E5E7EB;
      --hero-panel: rgba(255, 255, 255, .76);
      --hero-fg: #111827;
      --hero-muted: #4B5563;
      --ticket-hole: #E5E7EB;
      --nav-bg: rgba(255, 255, 255, .82);
      --nav-border: rgba(17, 24, 39, .12);
      --shadow: 0 24px 70px rgba(15, 23, 42, .16);
      --shadow-soft: 0 14px 34px rgba(15, 23, 42, .10);
      --font-display: Newsreader, "Iowan Old Style", Georgia, ui-serif, serif;
      --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      --font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
      --ease-standard: cubic-bezier(.2, .8, .2, 1);
      --ease-spring: cubic-bezier(.16, 1, .3, 1);
      --motion-fast: 180ms;
      --motion-med: 420ms;
      --motion-slow: 780ms;
      --grid-dot: rgba(17, 24, 39, 0.04);
      color-scheme: light;
    }

    html[data-theme="dark"] {
      --page: #0F172A;
      --blue-ink: #8B93FF;
      --page-soft: #111C31;
      --surface: #1E293B;
      --surface-raised: rgba(30, 41, 59, .78);
      --surface-tint: #334155;
      --fg: #FFFFFF;
      --muted: #CBD5E1;
      --muted-strong: #E2E8F0;
      --line: rgba(255, 255, 255, .12);
      --line-strong: rgba(255, 255, 255, .22);
      --hero-bg: #0F172A;
      --hero-panel: rgba(30, 41, 59, .68);
      --hero-fg: #FFFFFF;
      --hero-muted: #CBD5E1;
      --ticket-hole: #0F172A;
      --nav-bg: rgba(15, 23, 42, .86);
      --nav-border: rgba(255, 255, 255, .12);
      --shadow: 0 28px 80px rgba(2, 6, 23, .42);
      --shadow-soft: 0 14px 38px rgba(2, 6, 23, .34);
      --grid-dot: rgba(255, 255, 255, 0.05);
      color-scheme: dark;
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 0;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 0;
      overflow-x: hidden;
      background: var(--page);
      color: var(--fg);
      font-family: var(--font-body);
      line-height: 1.5;
      text-rendering: geometricPrecision;
      transition: background-color var(--motion-med) var(--ease-standard), color var(--motion-med) var(--ease-standard);
    }

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

    svg {
      stroke: currentColor;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

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

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 0;
      background: var(--nav-bg);
      backdrop-filter: blur(18px);
      transition: background-color var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard);
    }

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

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
      color: var(--fg);
      font-weight: 800;
      font-size: 18px;
      transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    }

    .brand:hover,
    .brand:focus-visible {
      transform: translateY(-1px);
      outline: none;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      object-fit: contain;
      transition: transform var(--motion-med) var(--ease-spring);
    }

    .brand:hover .brand-mark,
    .brand:focus-visible .brand-mark {
      transform: rotate(-4deg) scale(1.04);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 3px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .nav-links a {
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      padding: 0 11px;
      border-radius: 8px;
      transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      background: var(--surface-tint);
      color: var(--fg);
      transform: translateY(-1px);
      outline: none;
    }

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

    .theme-switch {
      position: relative;
      min-height: 42px;
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-raised);
      color: var(--muted);
      padding: 3px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, .26) inset;
      transition: background-color var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard);
      overflow: hidden;
    }

    .theme-switch::before {
      content: "";
      position: absolute;
      top: 3px;
      bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      border-radius: 999px;
      background: var(--fg);
      box-shadow: 0 10px 22px rgba(2, 6, 23, .16);
      transition: transform 360ms var(--ease-spring), background-color var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard);
    }

    html[data-theme="dark"] .theme-switch::before {
      transform: translateX(100%);
      background: var(--blue);
      box-shadow: 0 10px 24px rgba(59, 70, 240, .28);
    }

    .theme-switch:hover,
    .theme-switch:focus-visible {
      transform: translateY(-1px);
      outline: none;
    }

    .theme-choice {
      position: relative;
      z-index: 1;
      min-width: 76px;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      transition: color var(--motion-med) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
    }

    .theme-choice svg {
      width: 15px;
      height: 15px;
    }

    .theme-choice.light {
      color: var(--surface);
    }

    html[data-theme="dark"] .theme-choice.light {
      color: var(--muted);
    }

    html[data-theme="dark"] .theme-choice.dark {
      color: #FFFFFF;
    }

    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface);
      color: var(--fg);
    }

    .menu-button span {
      display: block;
      width: 18px;
      height: 2px;
      margin: 4px auto;
      background: currentColor;
      border-radius: 999px;
    }

    .btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: 9px;
      padding: 10px 16px;
      font-weight: 800;
      white-space: nowrap;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
      will-change: transform;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .btn:active {
      transform: translateY(0) scale(.985);
    }

    .btn-primary {
      background: var(--blue);
      color: #FFFFFF;
      box-shadow: 0 12px 24px rgba(59, 70, 240, .24);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      box-shadow: 0 18px 34px rgba(59, 70, 240, .30);
    }

    .btn-secondary {
      background: var(--surface);
      color: var(--fg);
      border-color: var(--line);
    }

    .btn-dark {
      background: var(--navy);
      color: #FFFFFF;
      border-color: rgba(255, 255, 255, .12);
    }

    html[data-theme="dark"] .btn-dark {
      background: var(--blue);
      border-color: var(--blue);
    }

    .hero {
      position: relative;
      min-height: calc(100svh - 128px);
      padding: 48px 0 30px;
      background: var(--hero-bg);
      color: var(--hero-fg);
      overflow: clip;
      transition: background-color var(--motion-med) var(--ease-standard), color var(--motion-med) var(--ease-standard);
    }

    .betmar-premium-hero {
      padding: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 24px;
      background: radial-gradient(circle at 18px -4px, transparent 0 13px, var(--page) 14px) 0 0 / 36px 24px repeat-x;
    }

    .hero-layout {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr);
      gap: 42px;
      align-items: center;
    }

    .hero [data-motion-item] {
      animation: heroTextIn var(--motion-slow) var(--ease-spring) both;
      animation-delay: var(--motion-delay, 0ms);
    }

    .kicker {
      margin: 0 0 16px;
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

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

    .hero h1 {
      margin: 0 0 6px;
      font-size: clamp(58px, 8vw, 96px);
      line-height: .9;
      letter-spacing: -.01em;
      font-weight: 820;
    }

    .hero-headline {
      margin: 0 0 18px;
      max-width: 620px;
      color: var(--hero-fg);
      font-family: var(--font-display);
      font-size: clamp(28px, 3.2vw, 44px);
      line-height: 1.1;
      font-weight: 600;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .hero-copy {
      margin: 0 0 24px;
      max-width: 650px;
      color: var(--hero-muted);
      font-size: 18px;
      text-wrap: pretty;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 24px;
    }

    .receipt {
      width: min(520px, 100%);
      border-radius: 14px;
      background: var(--hero-panel);
      padding: 12px 14px;
      color: var(--hero-muted);
      font-family: var(--font-mono);
      font-size: 12px;
      backdrop-filter: blur(12px);
    }

    .receipt-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      padding: 8px 0;
      border-bottom: 1px dashed var(--line);
    }

    .receipt-row:last-child {
      border-bottom: 0;
    }

    .receipt-row strong {
      color: var(--hero-fg);
      text-align: right;
    }

    .hero-stage {
      position: relative;
      min-width: 0;
      padding: 34px 0 18px;
      animation: heroStageIn 900ms var(--ease-spring) 240ms both;
    }

    .hero-accent-asset {
      position: absolute;
      z-index: 3;
      top: 8px;
      left: -118px;
      width: clamp(126px, 12vw, 166px);
      height: auto;
      transform: rotate(-8deg);
      filter: drop-shadow(0 18px 24px rgba(2, 6, 23, .18));
      pointer-events: none;
      --float-rotate: -8deg;
      animation: productFloat 8.5s ease-in-out 600ms infinite;
      will-change: transform;
    }

    .ticket {
      position: relative;
      border-radius: 22px;
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: background-color var(--motion-med) var(--ease-standard), color var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard), transform var(--motion-med) var(--ease-spring);
    }

    .ticket::before,
    .ticket::after {
      content: "";
      position: absolute;
      z-index: 2;
      top: 50%;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--ticket-hole);
      transform: translateY(-50%);
      box-shadow: inset 0 0 0 1px var(--line);
    }

    .ticket::before {
      left: -17px;
    }

    .ticket::after {
      right: -17px;
    }

    .family-pass {
      min-height: 560px;
      background: var(--surface-raised);
      backdrop-filter: blur(18px);
    }

    .pass-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: start;
      padding: 30px;
      border-bottom: 1px dashed var(--line-strong);
      background: var(--surface);
    }

    .pass-label {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .beta-coupon-label {
      color: #CBD5E1;
      margin-bottom: 4px;
    }

    .pass-title {
      margin: 5px 0 10px;
      font-size: clamp(30px, 3.4vw, 42px);
      line-height: 1.02;
      font-weight: 780;
      letter-spacing: -.01em;
    }

    .pass-note {
      margin: 0;
      max-width: 420px;
      color: var(--muted);
      font-size: 14px;
    }

    .pass-stamp {
      width: 118px;
      min-height: 94px;
      display: grid;
      place-items: center;
      padding: 10px;
      border: 2px solid var(--blue);
      border-radius: 50%;
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.1;
      text-align: center;
      text-transform: uppercase;
      --stamp-rotate: -7deg;
      transform: rotate(var(--stamp-rotate));
    }

    .pass-body {
      padding: 21px 30px 28px;
    }

    .pass-row {
      position: relative;
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      min-height: 62px;
      border-bottom: 1px solid var(--line);
      transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), border-color var(--motion-med) var(--ease-standard);
      overflow: hidden;
    }

    .pass-row::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(59, 70, 240, .10), transparent);
      transform: translateX(-120%);
    }

    .hero .pass-row {
      animation: rowSweep 680ms var(--ease-spring) both;
      animation-delay: calc(500ms + (var(--row-index, 0) * 90ms));
    }

    .family-pass.is-visible .pass-row::after,
    .hero .pass-row::after {
      animation: rowGlint 1150ms var(--ease-standard) calc(950ms + (var(--row-index, 0) * 120ms)) both;
    }

    .pass-row:hover {
      background: color-mix(in srgb, var(--blue) 7%, transparent);
      transform: translateX(2px);
    }

    .pass-row:last-child {
      border-bottom: 0;
    }

    .row-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--blue);
    }

    .dot.green { background: var(--green); }
    .dot.violet { background: var(--violet); }
    .dot.amber { background: var(--amber); }

    .row-copy {
      min-width: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .row-status {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 6px 9px;
      background: var(--surface-tint);
      color: var(--muted-strong);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .pass-footer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 22px;
    }

    .mini-pill {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 10px;
      background: var(--surface-tint);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .hero-assets {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 212px;
      gap: 14px;
      align-items: end;
      margin: 18px 20px 0 68px;
      z-index: 1;
    }

    .dashboard-preview {
      border-radius: 22px;
      box-shadow: 0 24px 46px rgba(2, 6, 23, .24);
      animation: productFloat 9.5s ease-in-out 900ms infinite;
      will-change: transform;
    }

    .student-preview {
      width: 190px;
      border-radius: 24px;
      box-shadow: 0 24px 46px rgba(2, 6, 23, .32);
      --float-rotate: 3deg;
      transform: rotate(var(--float-rotate));
      animation: productFloatAlt 10.5s ease-in-out 1200ms infinite;
      will-change: transform;
    }

    .product-stage {
      padding: 18px 0;
    }

    .product-devices {
      position: relative;
      min-height: 592px;
      display: grid;
      align-items: center;
    }

    .device-frame {
      position: relative;
      border: 1px solid rgba(148, 163, 184, .24);
      background: linear-gradient(145deg, #111827, #020617);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .device-frame::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: inherit;
      pointer-events: none;
    }

    .tablet-mock {
      width: min(680px, 100%);
      min-height: 510px;
      border-radius: 30px;
      padding: 18px;
      animation: productFloat 10s ease-in-out 700ms infinite;
      will-change: transform;
    }

    .phone-mock {
      position: absolute;
      right: -10px;
      bottom: 8px;
      width: min(242px, 34vw);
      min-height: 500px;
      border-radius: 38px;
      padding: 12px;
      --float-rotate: 3deg;
      transform: rotate(var(--float-rotate));
      animation: productFloatAlt 11s ease-in-out 1000ms infinite;
      will-change: transform;
      z-index: 4;
    }

    .device-camera {
      position: absolute;
      left: 50%;
      top: 10px;
      width: 54px;
      height: 5px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .18);
      transform: translateX(-50%);
      z-index: 2;
    }

    .device-screen {
      position: relative;
      height: 100%;
      min-height: inherit;
      border-radius: 22px;
      background: radial-gradient(circle at 50% 0%, var(--page-soft), var(--page));
      color: var(--fg);
      overflow: hidden;
      border: 1px solid var(--line);
      transition: background-color var(--motion-med) var(--ease-standard), color var(--motion-med) var(--ease-standard);
    }

    .phone-mock .device-screen {
      border-radius: 29px;
      background: radial-gradient(circle at 50% 0%, var(--page-soft), var(--page));
    }

    .app-topbar {
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--line);
      background: var(--hero-panel);
      backdrop-filter: blur(12px);
    }

    .app-brandline {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .app-brand-dot {
      width: 28px;
      height: 28px;
      flex: 0 0 auto;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--blue), var(--violet));
      box-shadow: 0 4px 10px rgba(59, 70, 240, 0.2);
    }

    .app-brandline strong,
    .phone-title strong,
    .mock-card strong {
      display: block;
      color: var(--fg);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.2;
    }

    .app-brandline span,
    .phone-title span,
    .mock-card span {
      display: block;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      line-height: 1.3;
    }

    .app-pill {
      border-radius: 999px;
      padding: 4px 8px;
      background: rgba(16, 185, 129, 0.12);
      color: var(--green);
      font-size: 10px;
      font-weight: 900;
      white-space: nowrap;
    }

    .tablet-ui {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      min-height: 452px;
    }

    .tablet-sidebar {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 12px 8px;
      background: var(--page-soft);
      border-right: 1px solid var(--line);
    }

    .side-item {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      padding: 0 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      outline: none;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .side-item:hover {
      background: rgba(0, 0, 0, 0.03);
    }

    html[data-theme="dark"] .side-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .side-item.is-active {
      background: rgba(59, 70, 240, 0.08);
      color: var(--blue-ink);
    }

    html[data-theme="dark"] .side-item.is-active {
      background: rgba(59, 70, 240, 0.2) !important;
      color: #60A5FA !important;
    }

    .side-dot {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: currentColor;
    }

    .tablet-main {
      display: block !important;
      padding: 0 !important;
      height: 100% !important;
      position: relative !important;
    }

    .mock-card {
      border: 1px solid var(--line-strong);
      background: var(--hero-panel);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow-soft);
      border-radius: 14px;
      overflow: hidden;
      transition: all 0.3s ease;
      color: var(--fg);
    }

    .mock-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    .mock-tag {
      border-radius: 999px;
      padding: 3px 6px;
      background: rgba(59, 70, 240, 0.08);
      color: var(--blue-ink);
      font-size: 9px;
      font-weight: 900;
      white-space: nowrap;
    }

    .lesson-stack {
      display: grid;
      gap: 8px;
      padding: 10px 12px;
    }

    .lesson-row {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 6px 10px;
      border-radius: 10px;
      background: var(--page-soft);
      border: 1px solid var(--line);
    }

    .lesson-icon {
      width: 32px;
      height: 32px;
      border-radius: 9px;
      background: rgba(139, 92, 246, 0.12);
    }

    .lesson-row:nth-child(2) .lesson-icon { background: rgba(59, 70, 240, 0.12); }
    .lesson-row:nth-child(3) .lesson-icon { background: rgba(245, 158, 11, 0.12); }

    .lesson-title {
      min-width: 0;
    }

    .lesson-title strong {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .progress-mini {
      width: 48px;
      height: 6px;
      border-radius: 999px;
      background: var(--line-strong);
      overflow: hidden;
    }

    .progress-mini span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), var(--green));
    }

    .phone-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 34px 14px 14px;
    }

    .phone-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .student-avatar {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--violet), var(--blue));
      box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2);
    }

    .phone-progress {
      height: 6px;
      margin: 10px 0 8px;
      border-radius: 999px;
      background: var(--line-strong);
      overflow: hidden;
    }

    .phone-progress span {
      display: block;
      width: 68%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--violet), var(--green));
    }

    .phone-action {
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      background: var(--blue);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 900;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .phone-action:hover {
      background: #2D37C0;
      transform: translateY(-1px);
    }

    .phone-list {
      display: grid;
      gap: 8px;
    }

    .phone-list-row {
      min-height: 42px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 12px;
      background: var(--hero-panel);
      border: 1px solid var(--line);
    }

    .phone-list-icon {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      background: rgba(16, 185, 129, 0.12);
    }

    .phone-list-row:nth-child(2) .phone-list-icon { background: rgba(245, 158, 11, 0.12); }

    .phone-tabs {
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: 12px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
      padding: 6px 4px;
      border-radius: 16px;
      background: var(--hero-panel);
      backdrop-filter: blur(12px);
      border: 1px solid var(--line-strong);
      z-index: 10;
    }

    .phone-tab {
      background: none;
      border: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 4px 0;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
      cursor: pointer;
      outline: none;
      transition: all 0.2s ease;
    }

    .phone-tab-icon {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.2;
      transition: transform 0.2s ease;
    }

    .phone-tab:hover .phone-tab-icon {
      transform: scale(1.08);
    }

    .phone-tab.is-active {
      color: var(--blue-ink) !important;
    }

    html[data-theme="dark"] .phone-tab.is-active {
      color: #60A5FA !important;
    }

    .device-caption {
      margin-top: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      width: 100%;
      flex-wrap: wrap;
    }

    .device-caption span {
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 6px 14px;
      background: var(--hero-panel);
      color: var(--fg);
      font-size: 12px;
      font-weight: 800;
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow-soft);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .device-caption span::before {
      content: "✓";
      color: var(--green);
      font-weight: 900;
    }

    section {
      position: relative;
      padding: 78px 0;
    }

    .motion-ready [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 720ms var(--ease-standard), transform 720ms var(--ease-spring), filter 720ms var(--ease-standard);
      transition-delay: var(--reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    .motion-ready [data-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .motion-ready [data-reveal="stamp"] {
      transform: rotate(var(--stamp-rotate, -4deg)) scale(.9);
      filter: saturate(.86);
    }

    .motion-ready [data-reveal="stamp"].is-visible {
      transform: rotate(var(--stamp-rotate, -4deg)) scale(1);
      filter: saturate(1);
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(260px, .55fr);
      gap: 30px;
      align-items: end;
      margin-bottom: 32px;
    }

    .section-kicker {
      margin: 0 0 10px;
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .modal-kicker {
      margin-bottom: 6px;
    }

    h2 {
      margin-bottom: 0;
      font-family: var(--font-display);
      font-size: clamp(34px, 4vw, 52px);
      line-height: 1.08;
      letter-spacing: 0;
      font-weight: 600;
      text-wrap: balance;
    }

    .section-heading p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      text-wrap: pretty;
    }

    .theme-showcase {
      padding-top: 58px;
      background: var(--page);
      scroll-margin-top: 92px;
    }

    .theme-board {
      display: grid;
      grid-template-columns: minmax(0, .8fr) minmax(420px, 1fr);
      gap: 28px;
      align-items: center;
      border-radius: 26px;
      background: var(--surface-raised);
      padding: 28px;
      box-shadow: var(--shadow-soft);
    }

    .theme-board p {
      color: var(--muted);
      font-size: 16px;
    }

    .theme-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .theme-pass {
      min-height: 210px;
      border-radius: 18px;
      padding: 18px;
      overflow: hidden;
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard);
    }

    .theme-pass:hover,
    .theme-pass:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft);
    }

    .theme-pass.light {
      background: #FFFFFF;
      color: #111827;
    }

    .theme-pass.dark {
      background: #0F172A;
      color: #FFFFFF;
    }

    .theme-pass .pass-label {
      color: inherit;
      opacity: .68;
    }

    .theme-pass h3 {
      margin: 10px 0 16px;
      font-size: 22px;
      line-height: 1.08;
    }

    .theme-tasks {
      display: grid;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .theme-tasks li {
      display: flex;
      align-items: center;
      gap: 10px;
      color: currentColor;
      font-size: 14px;
      font-weight: 800;
      opacity: .72;
    }

    .theme-tasks li::before {
      content: "";
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--blue);
    }

    .theme-tasks li:nth-child(2)::before { background: var(--green); }
    .theme-tasks li:nth-child(3)::before { background: var(--amber); }

    .swatches {
      display: flex;
      gap: 7px;
      margin-bottom: 18px;
    }

    .swatches span {
      width: 32px;
      height: 10px;
      border-radius: 999px;
      background: var(--blue);
    }

    .swatches span:nth-child(2) { background: var(--green); }
    .swatches span:nth-child(3) { background: var(--violet); }
    .swatches span:nth-child(4) { background: var(--amber); }

    .theme-line {
      position: relative;
      height: 9px;
      margin: 10px 0;
      border-radius: 999px;
      background: currentColor;
      opacity: .15;
      overflow: hidden;
    }

    .theme-line::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: currentColor;
      opacity: .38;
      transform: scaleX(.18);
      transform-origin: left center;
    }

    .theme-pass.is-visible .theme-line::after {
      animation: progressFill 1200ms var(--ease-spring) both;
      animation-delay: calc(180ms + var(--reveal-delay, 0ms));
    }

    .orbital {
      width: min(360px, 100%);
      margin-top: 20px;
      border-radius: 20px;
      animation: productFloatAlt 11s ease-in-out 700ms infinite;
      will-change: transform;
    }

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

    .feature-ticket {
      min-height: 270px;
      padding: 22px;
      border-radius: 18px;
      background: var(--surface);
      overflow: hidden;
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .feature-ticket::before,
    .feature-ticket::after {
      background: var(--page);
    }

    .stamp-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 22px;
      padding-bottom: 16px;
      border-bottom: 1px dashed var(--line-strong);
    }

    .stamp-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--blue-ink);
      background: rgba(59, 70, 240, .13);
    }

    .stamp-icon svg {
      width: 24px;
      height: 24px;
    }

    .stamp-icon.green {
      color: var(--green);
      background: rgba(16, 185, 129, .13);
    }

    .stamp-icon.violet {
      color: var(--violet);
      background: rgba(139, 92, 246, .14);
    }

    .stamp-icon.amber {
      color: var(--amber);
      background: rgba(245, 158, 11, .14);
    }

    .stamp-mark {
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 6px 9px;
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
      --stamp-rotate: -6deg;
      transform: rotate(var(--stamp-rotate));
      white-space: nowrap;
      transition: transform var(--motion-med) var(--ease-spring), background-color var(--motion-fast) var(--ease-standard);
    }

    .feature-ticket:hover,
    .feature-ticket:focus-within {
      transform: translateY(-5px);
      box-shadow: var(--shadow-soft);
    }

    .feature-ticket:hover .stamp-mark,
    .feature-ticket:focus-within .stamp-mark {
      transform: rotate(var(--stamp-rotate)) scale(1.04);
    }

    .feature-ticket h3 {
      margin: 0 0 10px;
      font-size: 22px;
      line-height: 1.12;
    }

    .feature-ticket p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .stamp-strip {
      width: min(720px, 100%);
      margin: 26px auto 0;
      opacity: .94;
      transform-origin: center;
    }

    .product-story-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(260px, .82fr) minmax(260px, .86fr);
      gap: 16px;
      margin-top: 28px;
    }

    .workflow-asset {
      margin: 0;
      border-radius: 22px;
      background: var(--surface);
      padding: 14px;
      box-shadow: var(--shadow-soft);
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .workflow-asset:hover,
    .workflow-asset:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .workflow-asset img {
      width: 100%;
      height: 100%;
      min-height: 230px;
      object-fit: contain;
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface-tint) 84%, transparent);
    }

    .workflow-asset.compact img {
      object-fit: contain;
    }

    .workflow-section {
      background: var(--surface);
      --ticket-hole: var(--surface);
    }

    .workflow {
      display: grid;
      gap: 14px;
    }

    .workflow-ticket {
      display: grid;
      grid-template-columns: 118px minmax(0, 1fr) minmax(280px, .8fr);
      gap: 24px;
      align-items: center;
      border-radius: 18px;
      background: var(--surface-tint);
      padding: 18px 22px;
      overflow: hidden;
      transition: transform var(--motion-med) var(--ease-spring), background-color var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard);
    }

    .workflow-ticket:hover,
    .workflow-ticket:focus-within {
      transform: translateY(-3px);
      box-shadow: var(--shadow-soft);
    }

    .workflow-index {
      min-height: 84px;
      display: grid;
      place-items: center;
      border-right: 1px dashed var(--line-strong);
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 34px;
      font-weight: 900;
    }

    .workflow-ticket h3 {
      margin: 0 0 6px;
      font-size: 25px;
    }

    .workflow-ticket p {
      margin: 0;
      color: var(--muted);
    }

    .workflow-ui {
      display: grid;
      gap: 8px;
      color: var(--fg);
      font-size: 13px;
    }

    .ui-row {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-radius: 11px;
      background: var(--surface);
      padding: 10px 12px;
      overflow: hidden;
      box-shadow: 0 10px 28px rgba(2, 6, 23, .06);
      transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
    }

    .ui-row::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 100%;
      background: linear-gradient(90deg, rgba(59, 70, 240, .12), rgba(16, 185, 129, .10), transparent);
      transform: scaleX(0);
      transform-origin: left center;
      pointer-events: none;
    }

    .workflow-ticket.is-visible .ui-row::before {
      animation: progressFill 950ms var(--ease-spring) both;
      animation-delay: calc(260ms + var(--reveal-delay, 0ms));
    }

    .ui-row:hover {
      transform: translateX(2px);
      box-shadow: 0 14px 34px rgba(2, 6, 23, .10);
    }

    .ui-row > * {
      position: relative;
      z-index: 1;
    }

    .ui-row span:last-child {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .student-section {
      background: var(--navy);
      color: #FFFFFF;
      overflow: visible;
      --ticket-hole: var(--navy);
    }

    .student-section .section-kicker {
      color: var(--green);
    }

    .student-layout {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(340px, .78fr);
      gap: 42px;
      align-items: center;
    }

    .student-copy p {
      color: #CBD5E1;
      font-size: 17px;
    }

    .student-bullets {
      display: grid;
      gap: 12px;
      margin-top: 26px;
    }

    .student-bullet {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      color: #CBD5E1;
    }

    .check {
      width: 22px;
      height: 22px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(16, 185, 129, .15);
      color: var(--green);
      font-weight: 900;
      font-size: 13px;
    }

    .student-asset-card {
      position: relative;
      margin-top: 96px;
      border-radius: 30px;
      background: rgba(255, 255, 255, .06);
      padding: 18px;
      box-shadow: 0 28px 80px rgba(2, 6, 23, .34);
      transition: transform var(--motion-med) var(--ease-spring), background-color var(--motion-med) var(--ease-standard);
      isolation: isolate;
    }

    .student-asset-card.is-visible,
    .student-asset-card:hover {
      transform: translateY(-4px);
    }

    .student-pass-preview {
      position: relative;
      z-index: 2;
      width: 100%;
      height: auto;
      border-radius: 28px;
    }

    .student-kids-asset {
      position: absolute;
      z-index: 4;
      left: -14px;
      top: -82px;
      width: clamp(220px, 18vw, 268px);
      height: auto;
      border-radius: 0;
      filter: drop-shadow(0 26px 34px rgba(2, 6, 23, .36));
      pointer-events: none;
      animation: productFloatAlt 9s ease-in-out infinite;
      will-change: transform;
    }

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

    .trust-card {
      border-radius: 18px;
      background: var(--surface);
      padding: 22px;
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .trust-card:hover,
    .trust-card:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft);
    }

    .trust-card h3 {
      margin: 18px 0 8px;
      font-size: 20px;
    }

    .trust-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .beta-section {
      padding-top: 34px;
      --ticket-hole: var(--page);
    }

    .download-section {
      background: var(--page);
      scroll-margin-top: 92px;
    }

    .download-panel {
      max-width: 980px;
      margin: 0 auto;
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .62)),
        var(--surface-raised);
      padding: clamp(28px, 4.2vw, 48px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    html[data-theme="dark"] .download-panel {
      background:
        linear-gradient(135deg, rgba(30, 41, 59, .9), rgba(15, 23, 42, .72)),
        var(--surface-raised);
    }

    .download-copy {
      min-width: 0;
    }

    .download-pill {
      width: max-content;
      max-width: 100%;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(59, 70, 240, .2);
      border-radius: 999px;
      padding: 0 14px;
      background: rgba(255, 255, 255, .44);
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    html[data-theme="dark"] .download-pill {
      background: rgba(15, 23, 42, .28);
    }

    .download-pill::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--green), var(--blue), var(--violet));
      box-shadow: 0 0 0 5px rgba(59, 70, 240, .12);
      flex: 0 0 auto;
    }

    .download-title {
      max-width: 760px;
      margin: 28px 0 16px;
      font-family: var(--font-body);
      font-size: clamp(42px, 5vw, 68px);
      line-height: .98;
      font-weight: 900;
      letter-spacing: 0;
      overflow-wrap: break-word;
    }

    .download-title,
    .download-title span {
      background: linear-gradient(90deg, var(--green), var(--blue), var(--violet));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .download-title span {
      display: block;
    }

    .download-lead {
      max-width: 640px;
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 18px;
      font-weight: 650;
    }

    .download-options {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      max-width: 760px;
    }

    .download-option {
      min-width: 0;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255, 255, 255, .54);
      padding: 22px;
      text-align: center;
      box-shadow: var(--shadow-soft);
    }

    html[data-theme="dark"] .download-option {
      background: rgba(15, 23, 42, .28);
    }

    .download-option-title {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .download-platform-icon {
      width: 26px;
      height: 18px;
      min-width: 26px;
      display: inline-grid;
      place-items: center;
      overflow: hidden;
      color: var(--muted);
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: .02em;
    }

    .download-platform-icon.apple::before {
      content: "iOS";
    }

    .download-platform-icon.android::before {
      content: "APK";
    }

    .download-qr {
      width: min(100%, 188px);
      margin: 0 auto;
      border-radius: 14px;
      padding: 14px;
      background: #FFFFFF;
      box-shadow: 0 12px 24px rgba(15, 23, 42, .08);
    }

    .download-qr img {
      width: 100%;
      aspect-ratio: 1;
    }

    .download-scan {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .download-mobile-action {
      display: none;
      margin-top: 12px;
    }

    .download-mobile-only {
      display: none;
    }

    .download-mobile-action .btn {
      min-height: 42px;
      width: 100%;
      justify-content: center;
      padding: 0 12px;
      font-size: 13px;
    }

    .download-note {
      max-width: 520px;
      margin: 20px 0 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      text-align: left;
    }

    .faq-section {
      background: var(--page-soft);
      transition: background-color var(--motion-med) var(--ease-standard);
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .faq-layout {
      display: grid;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      gap: 22px;
      align-items: start;
    }

    .faq-asset-card {
      position: sticky;
      top: 104px;
      border-radius: 24px;
      background: var(--surface);
      padding: 14px;
      box-shadow: var(--shadow-soft);
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .faq-asset-card:hover,
    .faq-asset-card:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .faq-asset-card img {
      width: 100%;
      height: auto;
      border-radius: 18px;
    }

    .faq-card {
      border-radius: 18px;
      background: var(--surface);
      padding: 22px;
      transition: transform var(--motion-med) var(--ease-spring), box-shadow var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .faq-card:hover,
    .faq-card:focus-within {
      transform: translateY(-4px);
      box-shadow: var(--shadow-soft);
    }

    .faq-card h3 {
      margin: 0 0 8px;
      font-size: 19px;
    }

    .faq-card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .beta-coupon {
      width: min(900px, 100%);
      margin: 0 auto;
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }

    .coupon-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 20px;
      align-items: center;
      padding: 24px 30px;
      background: var(--navy);
      color: #FFFFFF;
      border-bottom: 1px dashed rgba(255, 255, 255, .2);
    }

    .coupon-band .stamp-mark {
      color: var(--green);
      --stamp-rotate: 5deg;
      transform: rotate(var(--stamp-rotate));
    }

    .coupon-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
      padding: 30px;
    }

    .coupon-body h2 {
      font-size: clamp(32px, 4vw, 46px);
      margin-bottom: 10px;
    }

    .coupon-body p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
    }

    /* Latest Blog Section Styling */
    .latest-blog-section {
      padding: 100px 0;
      background-color: var(--page);
      background-image: radial-gradient(var(--grid-dot) 1.2px, transparent 1.2px);
      background-size: 24px 24px;
      border-top: 1px solid var(--line);
      position: relative;
      transition: background-color var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard);
    }

    .latest-blog-section .section-heading {
      text-align: center;
      margin-bottom: 60px;
    }

    .latest-blog-section .section-heading h2 {
      font-family: var(--font-display);
      font-size: clamp(38px, 5vw, 56px);
      line-height: 1.05;
      font-weight: 700;
      margin: 12px 0 16px;
    }

    .latest-blog-section .section-heading h2 .text-accent {
      color: var(--blue-ink);
    }

    .latest-blog-section .section-heading p {
      font-size: 17px;
      color: var(--muted);
      max-width: 680px;
      margin: 0 auto;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      gap: 30px;
      margin-bottom: 50px;
    }

    .blog-card {
      background: var(--surface);
      border-radius: 18px;
      border: 1px solid var(--line);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      box-shadow: var(--shadow-soft);
      transition: transform var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
    }

    .blog-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow);
      border-color: var(--blue);
    }

    .card-image-wrap {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
      background: var(--page-soft);
    }

    .card-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--motion-slow) var(--ease-spring);
    }

    .blog-card:hover .card-image-wrap img {
      transform: scale(1.05);
    }

    .card-tags {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .card-tag {
      background: rgba(15, 23, 42, 0.78);
      backdrop-filter: blur(8px);
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 10px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    .card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .card-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
      font-size: 12px;
      color: var(--muted);
    }

    .meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .meta-icon {
      width: 14px;
      height: 14px;
      opacity: 0.7;
    }

    .blog-card h3 {
      font-size: 20px;
      line-height: 1.35;
      font-weight: 700;
      margin: 0 0 10px;
      color: var(--fg);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .blog-card h3 a {
      color: inherit;
      transition: color var(--motion-fast) var(--ease-standard);
    }

    .blog-card:hover h3 a,
    .blog-card h3 a:hover {
      color: var(--blue-ink);
    }

    .blog-card p {
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 20px;
      flex-grow: 1;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .read-more-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--blue-ink);
      align-self: flex-start;
      transition: gap var(--motion-fast) var(--ease-standard);
    }

    .read-more-link:hover {
      gap: 10px;
    }

    .arrow-icon {
      width: 16px;
      height: 16px;
    }

    .blog-footer {
      text-align: center;
    }

    .latest-blog-section .blog-footer .btn {
      min-width: 200px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 52px;
      border-radius: 999px;
      padding: 0 32px;
    }

    .final-cta {
      padding: 72px 0;
      background: var(--navy);
      color: #FFFFFF;
      text-align: center;
    }

    .final-cta h2 {
      width: min(820px, 100%);
      margin: 0 auto 16px;
    }

    .final-cta p {
      width: min(650px, 100%);
      margin: 0 auto 24px;
      color: #CBD5E1;
      font-size: 17px;
    }

    .site-footer {
      position: relative;
      padding: 68px 0 30px;
      background:
        radial-gradient(circle at 14% 0%, rgba(59, 70, 240, .16), transparent 32%),
        var(--navy);
      color: #CBD5E1;
      overflow: hidden;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
      background-size: 100% 72px;
      background-position: 0 36px;
      mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
      pointer-events: none;
    }

    .footer-shell {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 28px;
    }

    .footer-main {
      display: grid;
      grid-template-columns: minmax(300px, 1.15fr) repeat(3, minmax(150px, .55fr));
      gap: 28px;
      align-items: start;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(30, 41, 59, .82), rgba(15, 23, 42, .62));
      padding: 28px;
      box-shadow: 0 28px 80px rgba(2, 6, 23, .22);
    }

    .footer-brand {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 18px;
      max-width: 410px;
      isolation: isolate;
    }

    .footer-brand-row {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: #FFFFFF;
      font-size: 18px;
      font-weight: 900;
    }

    .footer-brand-row img {
      width: 42px;
      height: 42px;
      object-fit: contain;
    }

    .footer-brand p {
      margin: 0;
      color: #CBD5E1;
      font-size: 15px;
    }

    .footer-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }

    .footer-pass-mini {
      width: min(100%, 360px);
      border-radius: 20px;
      background:
        radial-gradient(circle at 88% 0%, rgba(59, 70, 240, .16), transparent 32%),
        rgba(15, 23, 42, .72);
      color: #FFFFFF;
      box-shadow: 0 20px 46px rgba(2, 6, 23, .26);
      overflow: hidden;
    }

    .footer-pass-top {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 15px 16px;
      border-bottom: 1px dashed rgba(203, 213, 225, .24);
    }

    .footer-pass-title {
      display: grid;
      gap: 3px;
    }

    .footer-pass-title span:first-child {
      color: #94A3B8;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .footer-pass-title strong {
      font-family: var(--font-serif);
      font-size: 21px;
      line-height: 1;
    }

    .footer-pass-stamp {
      border: 2px solid var(--blue);
      border-radius: 999px;
      color: #93C5FD;
      padding: 8px 10px;
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 900;
      line-height: 1.05;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-8deg);
    }

    .footer-pass-body {
      display: grid;
      gap: 9px;
      padding: 13px 16px 15px;
    }

    .footer-pass-row {
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      color: #CBD5E1;
      font-size: 13px;
      font-weight: 800;
    }

    .footer-pass-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--blue);
    }

    .footer-pass-row:nth-child(2) .footer-pass-dot {
      background: var(--green);
    }

    .footer-pass-row:nth-child(3) .footer-pass-dot {
      background: var(--orange);
    }

    .footer-pass-pill {
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      padding: 5px 8px;
      color: #CBD5E1;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 900;
    }

    .footer-column h3 {
      margin: 4px 0 14px;
      color: #FFFFFF;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .footer-links {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .footer-links a {
      display: inline-flex;
      width: fit-content;
      border-radius: 999px;
      padding: 2px 0;
      color: #CBD5E1;
      font-size: 14px;
      font-weight: 700;
      transition: color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: #FFFFFF;
      outline: none;
      transform: translateX(3px);
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0 4px;
      color: #94A3B8;
      font-size: 13px;
    }

    .footer-bottom > span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      padding: 8px 12px;
    }

    .footer-bottom > span::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--green);
      box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
    }

    .footer-bottom-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .footer-bottom-links a {
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      padding: 8px 12px;
      color: #CBD5E1;
      font-weight: 800;
    }

    dialog {
      width: min(640px, calc(100% - 32px));
      max-height: calc(100vh - 32px);
      border: 0;
      border-radius: 18px;
      padding: 0;
      background: var(--surface);
      color: var(--fg);
      box-shadow: 0 24px 80px rgba(2, 6, 23, .35);
      overflow: auto;
    }

    dialog[open] {
      animation: modalRiseIn 360ms var(--ease-spring) both;
    }

    dialog::backdrop {
      background: rgba(15, 23, 42, .62);
      backdrop-filter: blur(8px);
    }

    dialog[open]::backdrop {
      animation: modalBackdropIn 260ms var(--ease-standard) both;
    }

    .modal-visual {
      position: relative;
      padding: 18px 18px 0;
      background: radial-gradient(circle at 76% 10%, rgba(59, 70, 240, .16), transparent 34%), var(--surface);
      overflow: hidden;
    }

    .modal-visual::before {
      content: "";
      position: absolute;
      inset: -40% auto -40% -24%;
      width: 36%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
      transform: rotate(12deg) translateX(-140%);
      pointer-events: none;
    }

    dialog[open] .modal-visual::before {
      animation: modalVisualSweep 1600ms 220ms var(--ease-standard) both;
    }

    .modal-visual img {
      display: block;
      position: relative;
      z-index: 1;
      width: 100%;
      height: auto;
      border-radius: 16px;
      box-shadow: var(--shadow-soft);
    }

    dialog[open] .modal-visual img {
      animation: modalAssetIn 540ms 80ms var(--ease-spring) both, modalAssetFloat 6200ms 760ms ease-in-out infinite;
    }

    .modal-head {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px 18px;
      border-bottom: 1px dashed var(--line-strong);
    }

    .modal-head h2 {
      font-size: 28px;
      margin-bottom: 6px;
    }

    .modal-head p {
      margin: 0;
      color: var(--muted);
    }

    .close-button {
      width: 38px;
      height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface-tint);
      color: var(--fg);
      font-size: 20px;
    }

    .beta-form {
      display: grid;
      gap: 14px;
      padding: 22px 24px 24px;
    }

    dialog[open] .modal-head > div,
    dialog[open] .close-button,
    dialog[open] .beta-form .field,
    dialog[open] .beta-form .btn,
    dialog[open] .form-privacy,
    dialog[open] .form-note {
      animation: modalContentIn 460ms var(--ease-spring) both;
    }

    dialog[open] .modal-head > div {
      animation-delay: 120ms;
    }

    dialog[open] .close-button {
      animation-delay: 160ms;
    }

    dialog[open] .beta-form .field:nth-child(1) {
      animation-delay: 190ms;
    }

    dialog[open] .beta-form .field:nth-child(2) {
      animation-delay: 245ms;
    }

    dialog[open] .beta-form .field:nth-child(3) {
      animation-delay: 300ms;
    }

    dialog[open] .beta-form .btn {
      animation-delay: 355ms;
    }

    dialog[open] .form-privacy {
      animation-delay: 385ms;
    }

    dialog[open] .form-note {
      animation-delay: 430ms;
    }

    .field {
      display: grid;
      gap: 6px;
    }

    .field label {
      font-size: 13px;
      font-weight: 800;
    }

    .field input {
      width: 100%;
      min-height: 46px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 12px;
      background: var(--surface);
      color: var(--fg);
    }

    .field input:focus {
      border-color: var(--blue);
      outline: 3px solid rgba(59, 70, 240, .16);
    }

    .form-privacy {
      margin: -2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .form-privacy a {
      color: var(--blue-ink);
      font-weight: 800;
    }

    .form-privacy a:hover,
    .form-privacy a:focus-visible {
      text-decoration: underline;
      outline: none;
    }

    .form-note {
      min-height: 22px;
      color: var(--green);
      font-weight: 800;
      font-size: 13px;
    }

    .form-note[data-state="error"] {
      color: var(--orange);
    }

    .beta-confirmation {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      z-index: 90;
      width: min(430px, calc(100vw - 36px));
      border: 1px solid rgba(59, 70, 240, .24);
      border-radius: 18px;
      background:
        radial-gradient(circle at 14% 10%, rgba(16, 185, 129, .18), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(59, 70, 240, .20), transparent 36%),
        var(--surface);
      color: var(--fg);
      box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
      overflow: hidden;
    }

    .beta-confirmation[hidden] {
      display: none;
    }

    .beta-confirmation.is-visible {
      animation: confirmationRiseIn 420ms var(--ease-spring) both;
    }

    .beta-confirmation-inner {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr) auto;
      gap: 14px;
      align-items: start;
      padding: 18px;
    }

    .beta-confirmation-icon {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      color: #FFFFFF;
      font-size: 24px;
      font-weight: 950;
      box-shadow: 0 14px 28px rgba(16, 185, 129, .22);
    }

    .beta-confirmation-kicker {
      margin: 0 0 5px;
      color: var(--blue-ink);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .beta-confirmation-title {
      margin: 0;
      font-family: var(--font-display);
      font-size: 24px;
      line-height: 1.05;
      font-weight: 650;
      color: var(--fg);
    }

    .beta-confirmation-copy {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    .beta-confirmation-copy strong {
      color: var(--fg);
      font-weight: 900;
    }

    .beta-confirmation-close {
      width: 36px;
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--surface-tint);
      color: var(--muted);
      font-size: 18px;
      font-weight: 900;
      cursor: pointer;
      transition: transform var(--motion-fast) var(--ease-spring), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
    }

    .beta-confirmation-close:hover,
    .beta-confirmation-close:focus-visible {
      color: var(--fg);
      border-color: rgba(59, 70, 240, .38);
      outline: none;
      transform: translateY(-1px);
    }

    .honeypot {
      position: absolute;
      left: -100vw;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .cookie-consent {
      position: fixed;
      left: max(12px, env(safe-area-inset-left));
      right: max(12px, env(safe-area-inset-right));
      bottom: max(12px, env(safe-area-inset-bottom));
      z-index: 80;
      width: min(760px, calc(100% - 24px));
      max-height: calc(100svh - 24px);
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
      color: var(--fg);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    .cookie-consent[hidden] {
      display: none;
    }

    .cookie-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 160px;
      gap: 18px;
      align-items: center;
    }

    .cookie-copy {
      min-width: 0;
    }

    .cookie-asset {
      display: block;
      width: 160px;
      height: auto;
      border-radius: 16px;
    }

    .cookie-consent h2 {
      margin: 0 0 12px;
      font-size: 20px;
      line-height: 1.2;
    }

    .cookie-consent p {
      margin: 0;
      color: var(--muted-strong);
      font-size: 15px;
      line-height: 1.5;
    }

    .cookie-consent a {
      color: var(--blue-ink);
      font-weight: 850;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .cookie-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
    }

    .cookie-button {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--surface);
      color: var(--fg);
      padding: 10px 14px;
      font-weight: 850;
      transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
    }

    .cookie-button:hover,
    .cookie-button:focus-visible {
      transform: translateY(-1px);
      outline: 3px solid rgba(59, 70, 240, .16);
    }

    .cookie-button-primary {
      border-color: var(--blue);
      background: var(--blue);
      color: #FFFFFF;
      box-shadow: 0 12px 22px rgba(59, 70, 240, .22);
    }

    .cookie-button-link {
      border-color: transparent;
      background: transparent;
      color: var(--blue-ink);
    }

    .cookie-settings {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
      border-top: 1px dashed var(--line-strong);
      padding-top: 16px;
    }

    .cookie-settings[hidden] {
      display: none;
    }

    .cookie-option {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface-tint);
      padding: 12px;
    }

    .cookie-settings > .cookie-actions {
      grid-column: 1 / -1;
      margin-top: 0;
    }

    .cookie-option input {
      width: 18px;
      height: 18px;
      margin-top: 3px;
      accent-color: var(--blue);
    }

    .cookie-option strong {
      display: block;
      margin-bottom: 2px;
      font-size: 14px;
    }

    .cookie-option span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .cookie-reset {
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      font: inherit;
      cursor: pointer;
    }

    .cookie-reset:hover,
    .cookie-reset:focus-visible {
      color: var(--blue-ink);
      text-decoration: underline;
      text-underline-offset: 3px;
      outline: none;
    }

    @media (max-width: 640px) {
      .cookie-consent {
        padding: 18px;
      }

      .cookie-main {
        grid-template-columns: 1fr;
      }

      .cookie-settings {
        grid-template-columns: 1fr;
      }

      .cookie-asset {
        width: min(220px, 100%);
        justify-self: center;
        order: -1;
      }

      .cookie-actions {
        align-items: stretch;
      }

      .cookie-button {
        flex: 1 1 100%;
      }

      .beta-confirmation {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        width: auto;
      }

      .beta-confirmation-inner {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 16px;
      }

      .beta-confirmation-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        font-size: 21px;
      }

      .beta-confirmation-title {
        font-size: 21px;
      }
    }

    @keyframes heroTextIn {
      from {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(.985);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes heroStageIn {
      from {
        opacity: 0;
        transform: translate3d(20px, 24px, 0) scale(.98);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes productFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(var(--float-rotate, 0deg));
      }
      50% {
        transform: translate3d(0, -9px, 0) rotate(calc(var(--float-rotate, 0deg) + 1deg));
      }
    }

    @keyframes productFloatAlt {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(var(--float-rotate, 0deg));
      }
      50% {
        transform: translate3d(0, 8px, 0) rotate(calc(var(--float-rotate, 0deg) - 1deg));
      }
    }

    @keyframes rowSweep {
      from {
        opacity: 0;
        transform: translate3d(12px, 0, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

    @keyframes rowGlint {
      from {
        transform: translateX(-120%);
      }
      to {
        transform: translateX(120%);
      }
    }

    @keyframes progressFill {
      from {
        transform: scaleX(.08);
      }
      to {
        transform: scaleX(1);
      }
    }

    @keyframes modalBackdropIn {
      from {
        opacity: 0;
        backdrop-filter: blur(0);
      }
      to {
        opacity: 1;
        backdrop-filter: blur(8px);
      }
    }

    @keyframes modalRiseIn {
      from {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(.975);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @keyframes modalAssetIn {
      from {
        opacity: 0;
        transform: translate3d(0, -12px, 0) scale(.965) rotate(-.8deg);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0);
      }
    }

    @keyframes modalAssetFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
      }
      50% {
        transform: translate3d(0, -5px, 0) rotate(.25deg);
      }
    }

    @keyframes modalVisualSweep {
      from {
        transform: rotate(12deg) translateX(-140%);
      }
      to {
        transform: rotate(12deg) translateX(420%);
      }
    }

    @keyframes confirmationRiseIn {
      from {
        opacity: 0;
        transform: translateY(18px) scale(.96);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    @keyframes modalContentIn {
      from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
      }
      to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
      }
    }

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

      .motion-ready [data-reveal],
      .motion-ready [data-reveal="stamp"],
      .motion-ready [data-reveal].is-visible,
      .motion-ready [data-reveal="stamp"].is-visible,
      .hero [data-motion-item],
      .hero-stage,
      .hero-accent-asset,
      .dashboard-preview,
      .student-preview,
      .tablet-mock,
      .phone-mock,
      .student-kids-asset,
      .orbital {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
    }

    @media (max-width: 1120px) {
      .hero-layout,
      .theme-board,
      .student-layout,
      .download-panel {
        grid-template-columns: 1fr;
      }

      .hero-stage {
        max-width: 760px;
        margin: 0 auto;
      }

      .product-devices {
        min-height: 650px;
      }

      .phone-mock {
        right: 28px;
        width: min(240px, 38vw);
      }

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

      .workflow-ticket {
        grid-template-columns: 92px minmax(0, 1fr);
      }

      .workflow-ui {
        grid-column: 2;
      }
    }

    @media (max-width: 900px) {
      .nav-links {
        position: fixed;
        top: 76px;
        left: 20px;
        right: 20px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--nav-bg);
        padding: 10px;
        box-shadow: var(--shadow);
      }

      .nav-links[data-open="true"] {
        display: flex;
      }

      .nav-links a {
        justify-content: center;
      }

      .menu-button {
        display: inline-block;
      }

      .nav-actions .btn {
        display: none;
      }

      .hero {
        min-height: auto;
        padding-top: 38px;
      }

      .section-heading,
      .coupon-body {
        grid-template-columns: 1fr;
      }

      .hero-assets {
        grid-template-columns: 1fr;
        margin: 18px 18px 0;
      }

      .product-devices {
        min-height: auto;
        gap: 18px;
      }

      .tablet-mock {
        min-height: 470px;
      }

      .phone-mock {
        position: relative;
        right: auto;
        bottom: auto;
        justify-self: end;
        width: min(260px, 58vw);
        min-height: 500px;
        margin-top: -76px;
      }

      .device-caption {
        position: relative;
        left: auto;
        bottom: auto;
        max-width: none;
        margin-top: -8px;
      }

      .student-preview {
        width: min(240px, 62vw);
        justify-self: end;
        margin-top: -34px;
      }

      .pass-top {
        grid-template-columns: 1fr;
      }

      .pass-stamp {
        justify-self: start;
      }
    }

    @media (max-width: 680px) {
      .shell {
        width: min(100% - 24px, 1180px);
      }

      .nav-shell {
        min-height: 68px;
      }

      .brand span:last-child {
        display: none;
      }

      .theme-choice {
        min-width: 58px;
        font-size: 12px;
      }

      .nav-links {
        top: 68px;
        left: 12px;
        right: 12px;
      }

      .hero {
        padding: 24px 0 34px;
      }

      .hero h1 {
        font-size: 52px;
      }

      .hero-headline {
        font-size: 27px;
      }

      .hero-actions {
        margin-bottom: 14px;
      }

      .hero-copy,
      .section-heading p,
      .student-copy p,
      .coupon-body p,
      .final-cta p {
        font-size: 16px;
      }

      .hero-actions,
      .pass-footer {
        flex-direction: column;
      }

      .btn {
        width: 100%;
      }

      .receipt {
        font-size: 11px;
        padding: 8px 12px;
      }

      .receipt-row {
        padding: 5px 0;
      }

      .hero-accent-asset {
        top: -8px;
        left: auto;
        right: 8px;
        width: 118px;
        transform: rotate(7deg);
      }

      .student-kids-asset {
        top: -82px;
        left: auto;
        right: 8px;
        width: min(214px, 56vw);
      }

      .hero-stage {
        padding-top: 18px;
      }

      .product-stage {
        padding-top: 12px;
      }

      .tablet-mock {
        min-height: 560px;
        padding: 12px;
        border-radius: 24px;
      }

      .tablet-ui {
        grid-template-columns: 1fr;
      }

      .tablet-sidebar {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-auto-flow: column;
        overflow: hidden;
        border-right: 0;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
        padding: 10px;
      }

      .side-item {
        justify-content: center;
        min-height: 32px;
        padding: 0 6px;
        font-size: 10px;
      }

      .side-dot {
        display: none;
      }

      .tablet-main {
        grid-template-columns: 1fr;
        padding: 12px;
      }

      .lesson-row {
        grid-template-columns: 32px minmax(0, 1fr);
      }

      .progress-mini {
        display: none;
      }

      .phone-mock {
        width: min(242px, 72vw);
        margin-top: -34px;
      }

      .pass-top,
      .pass-body {
        padding-left: 22px;
        padding-right: 22px;
      }

      .pass-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 0;
      }

      .row-status {
        justify-self: start;
      }

      .hero-assets {
        margin-top: -52px;
      }

      .theme-card-grid,
      .feature-grid,
      .product-story-grid,
      .trust-grid,
      .download-options,
      .faq-grid,
      .faq-layout {
        grid-template-columns: 1fr;
      }

      .download-panel {
        border-radius: 24px;
        gap: 22px;
        padding: 22px;
      }

      .download-title {
        margin-top: 20px;
        font-size: clamp(34px, 10vw, 44px);
      }

      .download-lead {
        margin-bottom: 18px;
        font-size: 15px;
      }

      .download-option {
        padding: 14px;
      }

      .download-qr,
      .download-scan {
        display: none;
      }

      .download-desktop-only {
        display: none;
      }

      .download-mobile-action {
        display: block;
      }

      .download-mobile-only {
        display: inline;
      }

      .download-note {
        text-align: left;
      }

      .faq-asset-card {
        position: relative;
        top: auto;
      }

      section {
        padding: 56px 0;
      }

      .feature-ticket {
        min-height: auto;
      }

      .workflow-ticket {
        grid-template-columns: 1fr;
      }

      .workflow-index {
        min-height: 56px;
        border-right: 0;
        border-bottom: 1px dashed var(--line-strong);
      }

      .workflow-ui {
        grid-column: auto;
      }

      .coupon-band,
      .coupon-body {
        grid-template-columns: 1fr;
        padding: 22px;
      }

      .modal-visual {
        padding: 12px 12px 0;
      }

      .modal-head,
      .beta-form {
        padding-left: 20px;
        padding-right: 20px;
      }

      .footer-shell {
        gap: 26px;
      }

      .footer-main {
        grid-template-columns: 1fr;
        gap: 26px;
      }

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

    /* =============================================================================
       PREMIUM STYLING & INTERACTIVE MOCKUPS OVERRIDES
       ============================================================================= */

    /* 1. Global Variable Enhancements for Clean SaaS Look */
    :root {
      --blue: #3B46F0;
      --page: #F8FAFC;
      --page-soft: #F1F5F9;
      --hero-bg: #F8FAFC;
      --fg: #0F172A;
      --muted: #64748B;
      --muted-strong: #334155;
      --line: rgba(15, 23, 42, 0.05);
      --line-strong: rgba(15, 23, 42, 0.12);
      --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.04);
    }

    html[data-theme="dark"] {
      --page: #0F172A;
      --page-soft: #111C31;
      --hero-bg: #0F172A;
      --fg: #FFFFFF;
      --muted: #CBD5E1;
      --muted-strong: #E2E8F0;
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.15);
      --shadow-soft: 0 14px 38px rgba(2, 6, 23, 0.34);
    }

    /* Override Tablet Main Grid container to let tab screens use full width */
    .tablet-main {
      display: block !important;
      padding: 0 !important;
      height: 100% !important;
      position: relative !important;
    }

    /* Local Device Screen adaptation for dark theme alignment */
    html[data-theme="dark"] .device-screen {
      background:
        radial-gradient(circle at 16% 12%, rgba(59, 70, 240, 0.15), transparent 26%),
        linear-gradient(160deg, #0F172A 0%, #1E293B 100%) !important;
      color: #F8FAFC !important;
    }

    html[data-theme="dark"] .phone-mock .device-screen {
      background:
        radial-gradient(circle at 22% 8%, rgba(139, 92, 246, 0.18), transparent 24%),
        linear-gradient(180deg, #0F172A 0%, #151F32 100%) !important;
    }

    html[data-theme="dark"] .app-topbar {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
      background: rgba(15, 23, 42, 0.72) !important;
    }

    html[data-theme="dark"] .app-brandline strong,
    html[data-theme="dark"] .phone-title strong {
      color: #F8FAFC !important;
    }

    html[data-theme="dark"] .app-brandline span,
    html[data-theme="dark"] .phone-title span {
      color: #94A3B8 !important;
    }

    html[data-theme="dark"] .tablet-sidebar {
      background: rgba(255, 255, 255, 0.02) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    html[data-theme="dark"] .side-item {
      color: #94A3B8 !important;
    }

    html[data-theme="dark"] .side-item.is-active {
      background: rgba(59, 70, 240, 0.2) !important;
      color: #60A5FA !important;
    }

    html[data-theme="dark"] .phone-tabs {
      background: rgba(255, 255, 255, 0.08) !important;
    }

    html[data-theme="dark"] .phone-tab {
      background: rgba(255, 255, 255, 0.15) !important;
    }

    html[data-theme="dark"] .phone-tab.is-active {
      background: var(--blue) !important;
    }

    html[data-theme="dark"] .lesson-row {
      background: rgba(255, 255, 255, 0.02) !important;
      border: 1px solid rgba(255, 255, 255, 0.04) !important;
      border-radius: 12px;
    }

    html[data-theme="dark"] .lesson-icon {
      background: rgba(139, 92, 246, 0.15) !important;
    }

    html[data-theme="dark"] .lesson-row:nth-child(2) .lesson-icon {
      background: rgba(59, 70, 240, 0.15) !important;
    }

    html[data-theme="dark"] .lesson-row:nth-child(3) .lesson-icon {
      background: rgba(245, 158, 11, 0.15) !important;
    }

    html[data-theme="dark"] .progress-mini {
      background: #334155 !important;
    }

    html[data-theme="dark"] .phone-progress {
      background: #334155 !important;
    }

    html[data-theme="dark"] .student-avatar {
      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3) !important;
    }

    html[data-theme="dark"] .phone-list-row {
      background: rgba(255, 255, 255, 0.04) !important;
      border: 1px solid rgba(255, 255, 255, 0.02) !important;
    }

    html[data-theme="dark"] .phone-list-icon {
      background: rgba(34, 197, 94, 0.15) !important;
    }

    html[data-theme="dark"] .phone-list-row:nth-child(2) .phone-list-icon {
      background: rgba(245, 158, 11, 0.15) !important;
    }

    /* 3. Sleek Bezels & Radial Ambient Backglow for Mockups */
    .tablet-mock, .phone-mock {
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: linear-gradient(135deg, #1E293B, #0F172A);
      box-shadow:
        0 30px 60px -15px rgba(15, 23, 42, 0.3),
        0 0 50px 0 rgba(59, 70, 240, 0.15); /* Ambient Brand backglow */
      transition: all 0.4s var(--ease-standard);
    }

    .tablet-mock::before, .phone-mock::before {
      border-color: rgba(255, 255, 255, 0.06);
    }

    /* Ambient hover highlights */
    .tablet-mock:hover, .phone-mock:hover {
      box-shadow:
        0 40px 80px -15px rgba(15, 23, 42, 0.35),
        0 0 65px 5px rgba(59, 70, 240, 0.22);
    }

    /* 4. Glassmorphism Card Refinement inside Device screens */
    .mock-card {
      border: 1px solid rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(12px);
      box-shadow:
        0 12px 28px -6px rgba(15, 23, 42, 0.05),
        0 1px 1px 0 rgba(255, 255, 255, 0.8) inset;
    }

    html[data-theme="dark"] .mock-card {
      border: 1px solid rgba(255, 255, 255, 0.05);
      background: rgba(30, 41, 59, 0.5);
      backdrop-filter: blur(12px);
      box-shadow:
        0 12px 28px -6px rgba(2, 6, 23, 0.28),
        0 1px 1px 0 rgba(255, 255, 255, 0.06) inset;
      color: #FFFFFF;
    }

    /* Ensure text inside mock-card dark mode is readable */
    html[data-theme="dark"] .mock-card strong,
    html[data-theme="dark"] .mock-card .lesson-title strong,
    html[data-theme="dark"] .phone-list-row strong,
    html[data-theme="dark"] .check-row {
      color: #F8FAFC !important;
    }

    html[data-theme="dark"] .mock-card span,
    html[data-theme="dark"] .phone-list-row span {
      color: #94A3B8 !important;
    }

    /* 5. Clean Ticket Component */
    .ticket {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: var(--shadow-soft);
      transition: all 0.3s var(--ease-standard);
    }
    .ticket::before, .ticket::after {
      display: none; /* Remove retro ticket punch holes */
    }

    .ticket:hover {
      transform: translateY(-4px);
      border-color: rgba(59, 70, 240, 0.25);
      box-shadow:
        0 20px 40px -10px rgba(15, 23, 42, 0.05),
        0 0 24px 0 rgba(59, 70, 240, 0.06);
    }

    /* 6. Parent Workspace Simulation Layouts & Transitions */
    .tablet-sidebar button.side-item {
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      font-family: inherit;
      outline: none;
      transition: all var(--motion-fast) var(--ease-standard);
    }

    .tablet-sidebar button.side-item:hover {
      background: rgba(15, 23, 42, 0.03);
    }

    html[data-theme="dark"] .tablet-sidebar button.side-item:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    .tablet-sidebar button.side-item.is-active {
      background: #DBEAFE;
      color: #1D4ED8;
    }

    html[data-theme="dark"] .tablet-sidebar button.side-item.is-active {
      background: rgba(59, 70, 240, 0.22);
      color: #60A5FA;
    }

    .tablet-tab-content {
      display: none;
      grid-template-columns: minmax(0, 1.15fr) minmax(180px, .85fr);
      gap: 14px;
      padding: 16px;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 280ms ease, transform 280ms ease;
    }

    .tablet-tab-content.is-active {
      display: grid;
      opacity: 1;
      transform: translateY(0);
    }

    /* Courses Tab Style */
    .course-stack {
      display: grid;
      gap: 10px;
      padding: 12px 14px 14px;
    }

    .course-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: rgba(15, 23, 42, 0.03);
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.04);
    }

    html[data-theme="dark"] .course-row {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.04);
    }

    .course-info {
      display: grid;
      gap: 2px;
      text-align: left;
    }

    .pending-tag {
      border-radius: 999px;
      padding: 4px 8px;
      background: #FEF3C7;
      color: #D97706;
      font-size: 10px;
      font-weight: 900;
    }

    .approved-tag {
      border-radius: 999px;
      padding: 4px 8px;
      background: #D1FAE5;
      color: #047857;
      font-size: 10px;
      font-weight: 900;
    }

    /* Journal Tab Style */
    .journal-feed {
      display: grid;
      gap: 10px;
      padding: 12px 14px 14px;
    }

    .journal-card-item {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.05);
      display: grid;
      gap: 4px;
      text-align: left;
    }

    html[data-theme="dark"] .journal-card-item {
      background: rgba(30, 41, 59, 0.7);
      border-color: rgba(255, 255, 255, 0.06);
    }

    .journal-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
    }

    .journal-text {
      font-size: 11px;
      color: #475569;
      line-height: 1.4;
    }

    html[data-theme="dark"] .journal-text {
      color: #CBD5E1;
    }

    .btn-approve {
      width: 100%;
      min-height: 32px;
      font-size: 11px;
      padding: 6px 12px;
      border-radius: 8px;
      background: var(--blue);
      color: #FFFFFF !important;
      border: none;
      font-weight: 800;
      margin-top: 10px;
      cursor: pointer;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
    }

    .btn-approve:hover {
      background: #2A33B8;
    }

    /* Reports Tab - Chart */
    .chart-container {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      height: 90px;
      padding: 10px 14px 4px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      gap: 6px;
    }

    html[data-theme="dark"] .chart-container {
      border-color: rgba(255, 255, 255, 0.08);
    }

    .chart-bar-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
    }

    .chart-bar {
      width: 14px;
      background: linear-gradient(180deg, var(--blue), var(--green));
      border-radius: 4px 4px 0 0;
      transition: height 0.8s cubic-bezier(.16, 1, .3, 1);
      height: 0;
    }

    .chart-label {
      font-size: 9px;
      color: #64748B;
      font-family: var(--font-mono);
      font-weight: 800;
    }

    /* Records Tab Style */
    .checklist-container {
      display: grid;
      gap: 10px;
      padding: 12px 14px 14px;
    }

    .check-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 700;
      color: #334155;
    }

    .check-box {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 2px solid var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      background: var(--blue);
      font-size: 10px;
      font-weight: 950;
    }

    /* 7. Student Mode Simulation Phases & Animations */
    .phone-state-container {
      display: none;
      height: 100%;
      width: 100%;
      opacity: 0;
      transform: scale(0.97);
      transition: opacity 300ms ease, transform 300ms ease;
    }

    .phone-state-container.is-active {
      display: block;
      opacity: 1;
      transform: scale(1);
    }

    /* Typing cursor blink */
    .typing-cursor {
      display: inline-block;
      width: 6px;
      height: 12px;
      background-color: currentColor;
      margin-left: 2px;
      animation: cursorBlink 0.8s infinite;
    }

    @keyframes cursorBlink {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; }
    }

    /* Tutor Chat Baloon Style */
    .chat-bubble {
      max-width: 85%;
      border-radius: 14px;
      padding: 8px 10px;
      font-size: 11px;
      line-height: 1.3;
      margin-bottom: 8px;
      text-align: left;
    }

    .chat-bubble.student {
      background: rgba(139, 92, 246, 0.12);
      color: #6D28D9;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
      margin-left: auto;
    }

    html[data-theme="dark"] .chat-bubble.student {
      background: rgba(139, 92, 246, 0.22);
      color: #A78BFA;
    }

    .chat-bubble.tutor {
      background: #FFFFFF;
      color: #1E293B;
      align-self: flex-start;
      border-bottom-left-radius: 4px;
      border: 1px solid rgba(15, 23, 42, 0.05);
      box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    }

    html[data-theme="dark"] .chat-bubble.tutor {
      background: #334155;
      color: #F8FAFC;
      border-color: rgba(255, 255, 255, 0.05);
    }

    .chat-history {
      display: flex;
      flex-direction: column;
      height: 180px;
      overflow-y: auto;
      padding: 6px 2px;
    }

    /* Reflection Screen Voice-to-Text */
    .reflection-box {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.6);
      padding: 10px;
      font-size: 11px;
      color: #334155;
      min-height: 70px;
      font-style: italic;
      position: relative;
      text-align: left;
    }

    html[data-theme="dark"] .reflection-box {
      border-color: rgba(255, 255, 255, 0.08);
      background: rgba(30, 41, 59, 0.6);
      color: #E2E8F0;
    }

    /* Success Screen Level Up */
    .success-screen {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 16px 10px;
      height: 100%;
    }

    .success-badge {
      width: 46px;
      height: 46px;
      border-radius: 999px;
      background: #D1FAE5;
      color: #059669;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 12px;
      animation: successPop 0.5s var(--ease-spring);
    }

    html[data-theme="dark"] .success-badge {
      background: rgba(5, 150, 105, 0.22);
      color: #34D399;
    }

    @keyframes successPop {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* Gloss Sweep Animation on progress bars */
    @keyframes glossSweep {
      0% { transform: translateX(-100%); }
      50%, 100% { transform: translateX(100%); }
    }

    .progress-mini span, .phone-progress span {
      position: relative;
      overflow: hidden;
    }

    .progress-mini span::after, .phone-progress span::after {
      content: "";
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
      animation: glossSweep 3.5s infinite linear;
    }

    /* Simulated User Click Indicator dot */
    .simulation-click-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: rgba(59, 70, 240, 0.7);
      border: 2px solid #FFFFFF;
      box-shadow: 0 0 10px rgba(59, 70, 240, 0.5);
      z-index: 100;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      transition: transform 0.3s var(--ease-spring), opacity 0.3s ease;
    }

    .simulation-click-dot.clicking {
      animation: clickEffect 0.4s var(--ease-standard) forwards;
    }

    @keyframes clickEffect {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
      50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.8; }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
    }

    /* Premium High-Fidelity App Mockup Showcases (inspired by actual app screens) */
    .hero-stage {
      background: radial-gradient(circle at 50% 50%, rgba(59, 70, 240, 0.15) 0%, transparent 80%) !important;
    }

    .product-devices {
      position: relative;
      min-height: 592px;
      display: grid;
      align-items: center;
      justify-items: center;
    }

    .product-devices::before {
      content: "";
      position: absolute;
      left: 15%;
      top: 15%;
      width: 70%;
      height: 70%;
      background: radial-gradient(circle, rgba(59, 70, 240, 0.28) 0%, transparent 75%);
      filter: blur(50px);
      z-index: 0;
      pointer-events: none;
    }

    /* Tablet device screen styling overrides */
    .tablet-mock .device-screen {
      background: #0B0F19 !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
      color: #FFFFFF !important;
      display: flex;
      flex-direction: column;
    }

    .tablet-ui {
      display: grid !important;
      grid-template-columns: 190px minmax(0, 1fr) !important;
      height: 100% !important;
      min-height: 474px;
    }

    .tablet-sidebar {
      background: rgba(19, 25, 48, 0.85) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
      padding: 16px 12px !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .tablet-sidebar .app-brandline {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      margin-bottom: 24px !important;
      padding: 4px 6px !important;
    }

    .tablet-sidebar .app-brand-dot {
      width: 32px !important;
      height: 32px !important;
      border-radius: 9px !important;
      background: linear-gradient(135deg, var(--blue), var(--violet)) !important;
      box-shadow: 0 4px 10px rgba(59, 70, 240, 0.3) !important;
    }

    .tablet-sidebar .app-brandline strong {
      color: #FFFFFF !important;
      font-size: 13.5px !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
    }

    .tablet-sidebar .app-brandline span {
      color: rgba(255, 255, 255, 0.5) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
    }

    .tablet-sidebar .side-item {
      min-height: 34px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      border-radius: 8px !important;
      padding: 0 12px !important;
      color: rgba(255, 255, 255, 0.6) !important;
      font-size: 11.5px !important;
      font-weight: 700 !important;
      margin-bottom: 4px !important;
    }

    .tablet-sidebar .side-item:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: #FFFFFF !important;
    }

    .tablet-sidebar .side-item.is-active {
      background: #3B46F0 !important;
      color: #FFFFFF !important;
      box-shadow: 0 4px 12px rgba(59, 70, 240, 0.3) !important;
    }

    .tablet-sidebar .side-item.is-active .side-dot {
      background: #FFFFFF !important;
    }

    .tablet-sidebar .side-dot {
      width: 6px !important;
      height: 6px !important;
      background: currentColor !important;
    }

    /* Sidebar bottom controls */
    .tablet-bottom-controls {
      margin-top: auto !important;
      display: flex !important;
      flex-flow: row wrap !important;
      gap: 6px !important;
      padding: 12px 2px 2px !important;
      width: 100% !important;
    }

    .tablet-bottom-controls span {
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      border-radius: 999px !important;
      padding: 5px 10px !important;
      background: rgba(15, 23, 42, 0.8) !important;
      color: #FFFFFF !important;
      font-size: 9px !important;
      font-weight: 700 !important;
      backdrop-filter: blur(8px) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      white-space: nowrap !important;
    }

    .tablet-bottom-controls span:hover {
      background: rgba(255, 255, 255, 0.12) !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .tablet-main {
      background: #0B0F19 !important;
      padding: 0 !important;
      height: 100% !important;
    }

    .tablet-tab-content {
      padding: 16px 20px !important;
      height: 100% !important;
      overflow-y: auto !important;
    }

    .tablet-mock .mock-card {
      background: rgba(22, 30, 61, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3) !important;
      color: #FFFFFF !important;
      backdrop-filter: blur(12px) !important;
    }

    .tablet-mock .mock-card-header {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .tablet-mock .mock-card-footer {
      border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .tablet-mock .lesson-row {
      background: rgba(255, 255, 255, 0.03) !important;
      border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .tablet-mock .lesson-title strong {
      color: #FFFFFF !important;
    }

    .tablet-mock .lesson-title span {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .tablet-mock .course-row {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .tablet-mock .course-info strong {
      color: #FFFFFF !important;
    }

    .tablet-mock .course-info span {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .tablet-mock .check-row {
      color: #FFFFFF !important;
    }

    /* Phone screen styling overrides */
    .phone-mock .device-screen {
      background: #0B0F19 !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
      color: #FFFFFF !important;
    }

    .phone-mock .phone-content {
      height: calc(100% - 44px) !important;
      padding: 34px 14px 14px !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .phone-mock .phone-state-container {
      flex: 1 !important;
      display: none;
    }

    .phone-mock .phone-state-container.is-active {
      display: flex !important;
      flex-direction: column !important;
    }

    .phone-mock .mock-card {
      background: rgba(22, 30, 61, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      color: #FFFFFF !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
      backdrop-filter: blur(12px) !important;
    }

    .phone-mock .phone-list-row {
      background: rgba(22, 30, 61, 0.5) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .phone-mock .phone-list-row strong {
      color: #FFFFFF !important;
    }

    .phone-mock .phone-list-row span {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .phone-mock .phone-title strong {
      color: #FFFFFF !important;
    }

    .phone-mock .phone-title span {
      color: rgba(255, 255, 255, 0.5) !important;
    }

    .phone-mock .phone-action {
      background: #3B46F0 !important;
      color: #FFFFFF !important;
      font-weight: 800 !important;
      border-radius: 8px !important;
      min-height: 32px !important;
      box-shadow: 0 4px 12px rgba(59, 70, 240, 0.3) !important;
    }

    .phone-mock .phone-action:hover {
      background: #2D37C0 !important;
    }

    .phone-mock .chat-bubble.student {
      background: rgba(139, 92, 246, 0.22) !important;
      color: #C084FC !important;
    }

    .phone-mock .chat-bubble.tutor {
      background: rgba(30, 41, 59, 0.8) !important;
      color: #F8FAFC !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .phone-mock .reflection-box {
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      background: rgba(15, 23, 42, 0.6) !important;
      color: #FFFFFF !important;
    }

    /* Phone success level up overrides */
    .phone-mock .success-screen {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      padding: 24px 12px !important;
      height: 100% !important;
      min-height: 290px !important;
    }

    .phone-mock .success-badge {
      width: 58px !important;
      height: 58px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.05) !important;
      color: #FFFFFF !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 26px !important;
      margin-bottom: 18px !important;
      border: 2px solid rgba(59, 70, 240, 0.4) !important;
      box-shadow: 0 0 15px rgba(59, 70, 240, 0.25) !important;
      animation: successPop 0.6s var(--ease-spring) !important;
    }

    .phone-mock .success-screen strong {
      font-size: 18px !important;
      font-weight: 800 !important;
      color: #FFFFFF !important;
      margin-bottom: 4px !important;
      display: block !important;
    }

    .phone-mock .success-screen span {
      font-size: 11.5px !important;
      color: rgba(255, 255, 255, 0.5) !important;
      font-weight: 700 !important;
      display: block !important;
    }

    .phone-mock .success-pill {
      margin-top: 18px !important;
      padding: 7px 16px !important;
      background: rgba(59, 70, 240, 0.22) !important;
      border-radius: 999px !important;
      font-size: 10.5px !important;
      font-weight: 900 !important;
      color: #60A5FA !important;
      border: 1px solid rgba(59, 70, 240, 0.35) !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
      display: inline-block !important;
    }

    .phone-mock .success-review-status {
      font-size: 10px !important;
      color: rgba(255, 255, 255, 0.5) !important;
      margin-top: 12px !important;
      font-weight: 800 !important;
      letter-spacing: 0.02em !important;
    }

    .phone-mock .phone-tabs {
      position: absolute !important;
      left: 20px !important;
      right: 20px !important;
      bottom: 16px !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 8px 12px !important;
      border-radius: 20px !important;
      background: rgba(30, 41, 59, 0.7) !important;
      backdrop-filter: blur(10px) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      z-index: 10 !important;
      height: 32px !important;
      grid-template-columns: none !important;
    }

    .phone-mock .phone-tab {
      height: 16px !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.15) !important;
      border: none !important;
      flex: 1 !important;
      margin: 0 4px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
      padding: 0 !important;
      display: block !important;
    }

    .phone-mock .phone-tab span,
    .phone-mock .phone-tab svg {
      display: none !important;
    }

    .phone-mock .phone-tab.is-active {
      background: #3B46F0 !important;
      box-shadow: 0 0 10px rgba(59, 70, 240, 0.4) !important;
    }

    /* =============================================================================
       3D CSS DEVICES UPGRADE (INSPIRED BY FORTIVA CO-BRANDED STYLING)
       ============================================================================= */
    @media (min-width: 1121px) {
      .tablet-scene {
        position: relative;
        width: min(680px, 100%);
        height: 510px;
        perspective: 1800px;
        z-index: 2;
      }

      .tablet-device {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transform: rotateX(6deg) rotateY(12deg) rotateZ(-3deg);
        animation: productFloat3D 10s ease-in-out 700ms infinite;
        will-change: transform;
      }

      .tablet-side {
        position: absolute;
        left: -16px;
        top: 25px;
        bottom: 25px;
        width: 36px;
        height: auto;
        border-radius: 26px;
        background: linear-gradient(270deg, #030406 0%, #171b22 36%, #313945 58%, #05070a 100%);
        box-shadow:
          -20px 15px 35px rgba(0, 0, 0, 0.5),
          inset -10px 0 12px rgba(255, 255, 255, 0.09),
          inset 10px 0 16px rgba(0, 0, 0, 0.86);
        transform: translateZ(-24px) rotateY(15deg);
        z-index: 1;
      }

      .tablet-bottom {
        position: absolute;
        left: 40px;
        right: 40px;
        bottom: -16px;
        height: 34px;
        width: auto;
        border-radius: 26px;
        background: linear-gradient(180deg, #151b25 0%, #020304 100%);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.55),
          inset 0 6px 10px rgba(255, 255, 255, 0.05);
        transform: translateZ(-26px) rotateX(75deg);
        z-index: 1;
      }

      .tablet-mock {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
        transform: translateZ(0) !important;
        animation: none !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.11),
          inset 0 0 0 4px rgba(255, 255, 255, 0.04),
          inset 0 0 0 8px rgba(0, 0, 0, 0.86),
          24px 34px 80px rgba(0, 0, 0, 0.45) !important;
      }

      .phone-scene {
        position: absolute;
        right: -10px;
        bottom: 8px;
        width: min(242px, 34vw);
        height: 500px;
        perspective: 1800px;
        z-index: 4;
      }

      .phone-device {
        position: absolute;
        inset: 0;
        transform-style: preserve-3d;
        transform: rotateX(8deg) rotateY(-18deg) rotateZ(5deg);
        animation: productFloatAlt3D 11s ease-in-out 1000ms infinite;
        will-change: transform;
      }

      .phone-side {
        position: absolute;
        right: -16px;
        top: 25px;
        bottom: 25px;
        width: 36px;
        height: auto;
        border-radius: 32px;
        background: linear-gradient(90deg, #030406 0%, #171b22 36%, #313945 58%, #05070a 100%);
        box-shadow:
          20px 15px 35px rgba(0, 0, 0, 0.5),
          inset 10px 0 12px rgba(255, 255, 255, 0.09),
          inset -10px 0 16px rgba(0, 0, 0, 0.86);
        transform: translateZ(-24px) rotateY(-15deg);
        z-index: 1;
      }

      .phone-bottom {
        position: absolute;
        left: 35px;
        right: 35px;
        bottom: -16px;
        height: 34px;
        width: auto;
        border-radius: 28px;
        background: linear-gradient(180deg, #151b25 0%, #020304 100%);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.55),
          inset 0 6px 10px rgba(255, 255, 255, 0.06);
        transform: translateZ(-26px) rotateX(66deg);
        z-index: 1;
      }

      .phone-mock {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        z-index: 10 !important;
        transform: translateZ(0) !important;
        animation: none !important;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.11),
          inset 0 0 0 4px rgba(255, 255, 255, 0.04),
          inset 0 0 0 8px rgba(0, 0, 0, 0.86),
          34px 22px 62px rgba(0, 0, 0, 0.56) !important;
      }

      .shine {
        position: absolute;
        left: 30%;
        top: -130%;
        width: 15%;
        height: 300%;
        transform: rotate(17deg);
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        mix-blend-mode: screen;
        filter: blur(1px);
        opacity: 0.8;
        pointer-events: none;
        z-index: 8;
      }

      @keyframes productFloat3D {
        0%, 100% {
          transform: translate3d(0, 0, 0) rotateX(6deg) rotateY(12deg) rotateZ(-3deg);
        }
        50% {
          transform: translate3d(0, -8px, 12px) rotateX(6.5deg) rotateY(13.5deg) rotateZ(-2.8deg);
        }
      }

      @keyframes productFloatAlt3D {
        0%, 100% {
          transform: translate3d(0, 0, 0) rotateX(8deg) rotateY(-18deg) rotateZ(5deg);
        }
        50% {
          transform: translate3d(0, 8px, 15px) rotateX(8.5deg) rotateY(-19.5deg) rotateZ(4.8deg);
        }
      }
    }

    @media (max-width: 1120px) {
      .tablet-scene, .phone-scene {
        perspective: none !important;
        width: 100% !important;
        height: auto !important;
      }
      .phone-scene {
        position: absolute !important;
        right: 28px !important;
        bottom: 8px !important;
        width: min(240px, 38vw) !important;
        height: auto !important;
        z-index: 4 !important;
      }
      .tablet-device, .phone-device {
        position: static !important;
        transform: none !important;
        animation: none !important;
        transform-style: flat !important;
      }
      .tablet-side, .tablet-bottom, .phone-side, .phone-bottom, .shine {
        display: none !important;
      }
      .tablet-mock {
        position: relative !important;
        width: 100% !important;
        min-height: 510px !important;
        animation: productFloat 10s ease-in-out 700ms infinite !important;
      }
      .phone-mock {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-height: 500px !important;
        animation: productFloatAlt 11s ease-in-out 1000ms infinite !important;
      }
    }

    @media (max-width: 768px) {
      .tablet-scene {
        width: 100% !important;
        height: auto !important;
      }
      .phone-scene {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: min(260px, 58vw) !important;
        margin-top: -76px !important;
        align-self: end;
        justify-self: end;
      }
      .tablet-mock {
        min-height: 470px !important;
      }
      .phone-mock {
        min-height: 500px !important;
      }
    }

    @media (max-width: 480px) {
      .phone-scene {
        width: min(242px, 72vw) !important;
        margin-top: -34px !important;
      }
      .tablet-mock {
        min-height: 560px !important;
        padding: 12px !important;
        border-radius: 24px !important;
      }
    }