:root {
      /* ==========================================================================
         COLOR SYSTEM — modifica qui i colori del brand
         ========================================================================== */
      --color-primary: #43e6a7;
      --color-accent: #5c8dff;
      --color-accent-2: #a46cff;
      --color-background: #070b12;
      --color-background-alt: #0b111c;
      --color-surface: #101a29;
      --color-surface-2: #132033;
      --color-surface-3: #0d1522;
      --color-text-primary: #f5f7fb;
      --color-text-secondary: #a8b4c5;
      --color-text-muted: #738198;
      --color-text-dark: #05110d;
      --color-border: #243349;
      --color-border-soft: #17253a;
      --color-border-strong: #344861;
      --color-success: #43e6a7;
      --color-warning: #f4c96b;
      --color-danger: #ff7186;

      /* RGBA / overlay vars */
      --color-primary-soft: rgba(67, 230, 167, 0.12);
      --color-accent-soft: rgba(92, 141, 255, 0.14);
      --color-accent-2-soft: rgba(164, 108, 255, 0.12);
      --color-grid-line: rgba(92, 141, 255, 0.08);
      --color-navbar: rgba(7, 11, 18, 0.7);
      --color-navbar-solid: rgba(7, 11, 18, 0.94);
      --color-glass: rgba(10, 16, 26, 0.84);
      --color-glass-strong: rgba(7, 11, 18, 0.95);
      --color-overlay: rgba(0, 0, 0, 0.76);
      --color-shadow-1: rgba(0, 0, 0, 0.24);
      --color-shadow-2: rgba(0, 0, 0, 0.38);
      --color-shadow-3: rgba(67, 230, 167, 0.2);

      /* Gradients */
      --gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent));
      --gradient-text: linear-gradient(110deg, var(--color-text-primary), var(--color-primary), var(--color-accent));
      --gradient-card: linear-gradient(145deg, var(--color-surface-2), var(--color-surface));
      --gradient-hero:
        radial-gradient(circle at 14% 18%, var(--color-primary-soft), transparent 34%),
        radial-gradient(circle at 84% 16%, var(--color-accent-soft), transparent 34%),
        radial-gradient(circle at 52% 85%, var(--color-accent-2-soft), transparent 40%),
        linear-gradient(180deg, var(--color-background), var(--color-background-alt));

      /* Typography scale */
      --text-xs: 0.74rem;
      --text-sm: 0.88rem;
      --text-base: 1rem;
      --text-lg: 1.08rem;
      --text-xl: 1.25rem;
      --text-2xl: 1.65rem;
      --text-3xl: 2.35rem;
      --text-4xl: 3rem;
      --text-hero: clamp(3rem, 7vw, 6rem);

      /* Layout */
      --font-family: "Inter", sans-serif;
      --container: 74rem;
      --navbar-height: 5rem;
      --radius-sm: 0.8rem;
      --radius-md: 1rem;
      --radius-lg: 1.35rem;
      --radius-xl: 2rem;
      --radius-pill: 999rem;
      --shadow-card: 0 24px 60px var(--color-shadow-1);
      --shadow-hover: 0 32px 80px var(--color-shadow-2);
      --shadow-accent: 0 18px 44px var(--color-shadow-3);
      --shadow-focus: 0 0 0 4px var(--color-primary-soft);
      --transition: 260ms ease;
      --transition-slow: 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    *,
    *::before,
    *::after { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--navbar-height) + 1rem);
    }

    body {
      margin: 0;
      min-width: 20rem;
      overflow-x: hidden;
      background: var(--color-background);
      color: var(--color-text-primary);
      font-family: var(--font-family);
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body.modal-open { overflow: hidden; }

    img,
    svg { display: block; }

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

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

    button,
    input,
    select {
      font: inherit;
      color: inherit;
    }

    button {
      border: 0;
      background: none;
      cursor: pointer;
    }

    ::selection {
      background: var(--color-primary);
      color: var(--color-text-dark);
    }

    :focus-visible {
      outline: none;
      box-shadow: var(--shadow-focus);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .container {
      width: min(calc(100% - 2.5rem), var(--container));
      margin-inline: auto;
    }

    .section {
      position: relative;
      padding-block: clamp(4.8rem, 8vw, 7.5rem);
      overflow: hidden;
    }

    .section--alt {
      border-top: 1px solid var(--color-border-soft);
      border-bottom: 1px solid var(--color-border-soft);
      background: linear-gradient(180deg, var(--color-background), var(--color-background-alt), var(--color-background));
    }

    .section-heading {
      max-width: 50rem;
      margin: 0 auto 2.8rem;
      text-align: center;
    }

    .section-title {
      margin-bottom: 1rem;
      font-size: clamp(2rem, 5vw, 3.8rem);
      line-height: 1.05;
      letter-spacing: -0.05em;
    }

    .section-subtitle {
      color: var(--color-text-secondary);
      font-size: clamp(1rem, 2vw, 1.12rem);
      line-height: 1.75;
    }

    .gradient-text {
      background: var(--gradient-text);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .grid {
      display: grid;
      gap: 1.25rem;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.7rem;
      min-height: 3.25rem;
      padding: 0.9rem 1.35rem;
      border: 1px solid transparent;
      border-radius: var(--radius-pill);
      font-weight: 800;
      text-align: center;
      transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
    }

    .button:hover:not(:disabled) { transform: translateY(-2px); }
    .button:disabled { opacity: 0.68; cursor: not-allowed; }

    .button--primary {
      background: var(--gradient-brand);
      color: var(--color-text-dark);
      box-shadow: var(--shadow-accent);
    }

    .button--secondary {
      background: var(--color-surface-2);
      border-color: var(--color-border);
      color: var(--color-text-secondary);
    }

    /* ==========================================================================
       NAVBAR
       ========================================================================== */
    .navbar {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      height: var(--navbar-height);
      border-bottom: 1px solid transparent;
      background: var(--color-navbar);
      transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
    }

    .navbar.is-scrolled {
      background: var(--color-navbar-solid);
      border-color: var(--color-border-soft);
      box-shadow: 0 16px 42px var(--color-shadow-1);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .navbar__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      height: 100%;
    }

    .navbar__actions {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
    }

    .brand__logo {
      display: block;
      width: clamp(8rem, 17vw, 10rem);
      height: auto;
    }

    .language-selector {
      min-height: 2.7rem;
      padding: 0.65rem 1.7rem 0.65rem 0.8rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      color: var(--color-text-primary);
      font-size: 0.76rem;
      font-weight: 800;
    }

    .language-selector option {
      background: var(--color-surface);
      color: var(--color-text-primary);
    }

    .social-list {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .social-link {
      display: grid;
      width: 2.5rem;
      height: 2.5rem;
      place-items: center;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: var(--color-surface);
      color: var(--color-text-secondary);
      transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
    }

    .social-link:hover {
      transform: translateY(-2px);
      border-color: var(--color-primary);
      background: var(--color-primary-soft);
      color: var(--color-primary);
    }

    .social-link svg {
      width: 1rem;
      height: 1rem;
      fill: currentColor;
    }

    /* ==========================================================================
       HERO
       ========================================================================== */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 100svh;
      padding: calc(var(--navbar-height) + 4rem) 0 5rem;
      background: var(--gradient-hero);
      overflow: hidden;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--color-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
      background-size: 4rem 4rem;
      opacity: 0.55;
      transform: perspective(700px) rotateX(66deg) scale(1.45);
      transform-origin: bottom center;
      pointer-events: none;
    }

    .hero__orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(0.2rem);
      pointer-events: none;
      animation: floatOrb 14s ease-in-out infinite;
      z-index: 0;
    }

    .hero__orb--1 {
      top: 12%;
      left: 4%;
      width: 18rem;
      height: 18rem;
      background: radial-gradient(circle, var(--color-primary-soft), transparent 68%);
    }

    .hero__orb--2 {
      right: 8%;
      top: 16%;
      width: 18rem;
      height: 18rem;
      background: radial-gradient(circle, var(--color-accent-soft), transparent 68%);
      animation-delay: 1.8s;
    }

    .hero__orb--3 {
      left: 38%;
      bottom: 2%;
      width: 20rem;
      height: 20rem;
      background: radial-gradient(circle, var(--color-accent-2-soft), transparent 68%);
      animation-delay: 3s;
    }

    .hero__content {
      position: relative;
      z-index: 2;
      max-width: 70rem;
      margin-inline: auto;
      text-align: center;
    }

    .hero__badge {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      margin-bottom: 1.4rem;
      padding: 0.65rem 0.9rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-glass);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
      font-weight: 700;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero__badge-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 0.35rem var(--color-primary-soft);
    }

    .hero__title {
      max-width: 62rem;
      margin: 0 auto 1.35rem;
      font-size: var(--text-hero);
      line-height: 0.95;
      letter-spacing: -0.07em;
      font-weight: 900;
    }

    .hero__lead {
      max-width: 52rem;
      margin: 0 auto 2rem;
      color: var(--color-text-secondary);
      font-size: clamp(1rem, 2vw, 1.22rem);
      line-height: 1.75;
    }

    .hero__slogan {
      max-width: 40rem;
      margin: 0 auto 2.25rem;
      padding: 1.1rem 1.3rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-glass);
      box-shadow: var(--shadow-card);
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 700;
    }

    .proof-bar {
      display: grid;
      margin-top: 1.9rem;
      overflow: hidden;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-lg);
      background: var(--color-glass);
    }

    .proof-bar__item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.65rem;
      min-height: 4rem;
      padding: 1rem;
      color: var(--color-text-secondary);
      font-size: 0.86rem;
      font-weight: 700;
      text-align: center;
    }

    .proof-bar__item:not(:last-child) {
      border-bottom: 1px solid var(--color-border-soft);
    }

    .proof-bar__icon { color: var(--color-primary); }

    /* ==========================================================================
       FORM
       ========================================================================== */
    .waitlist-form {
      display: grid;
      gap: 0.9rem;
      width: min(100%, 56rem);
      margin-inline: auto;
      padding: 1rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-glass);
      box-shadow: var(--shadow-card);
      text-align: left;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .form-fields {
      display: grid;
      gap: 0.75rem;
    }

    .form-field {
      position: relative;
    }

    .form-input {
      width: 100%;
      min-height: 3.65rem;
      padding: 1.45rem 1rem 0.45rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      background: var(--color-surface-3);
      color: var(--color-text-primary);
      transition: border-color var(--transition), box-shadow var(--transition);
    }

    .form-input:focus {
      border-color: var(--color-primary);
      box-shadow: var(--shadow-focus);
    }

    .form-input::placeholder { color: transparent; }

    .form-label {
      position: absolute;
      top: 50%;
      left: 1rem;
      color: var(--color-text-muted);
      font-size: 0.88rem;
      font-weight: 600;
      transform: translateY(-50%);
      transition: transform var(--transition), color var(--transition), font-size var(--transition);
      pointer-events: none;
    }

    .form-input:focus + .form-label,
    .form-input:not(:placeholder-shown) + .form-label {
      transform: translateY(-1.25rem);
      font-size: 0.72rem;
      color: var(--color-primary);
    }

    .captcha-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 4.5rem;
      padding: 0.75rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      background: var(--color-background);
    }

    .form-consent {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      color: var(--color-text-muted);
      font-size: 0.78rem;
      line-height: 1.55;
    }

    .form-consent input {
      width: 1rem;
      height: 1rem;
      margin-top: 0.18rem;
      accent-color: var(--color-primary);
      flex: 0 0 auto;
    }

    .inline-legal-button {
      padding: 0;
      color: var(--color-primary);
      text-decoration: underline;
      text-underline-offset: 0.15rem;
      font-size: inherit;
    }

    .form-submit-row {
      display: flex;
      justify-content: center;
    }

    .form-submit-row .button {
      width: min(100%, 22rem);
    }

    .form-message {
      display: none;
      margin: 0;
      padding: 0.8rem 1rem;
      border-radius: var(--radius-sm);
      font-size: 0.86rem;
      font-weight: 700;
      text-align: center;
    }

    .form-message.is-visible { display: block; }

    .form-message.is-success {
      border: 1px solid var(--color-success);
      background: var(--color-primary-soft);
      color: var(--color-success);
    }

    .form-message.is-error {
      border: 1px solid var(--color-danger);
      background: var(--color-surface-2);
      color: var(--color-danger);
    }

    .privacy-note {
      margin-top: 1rem;
      color: var(--color-text-muted);
      font-size: var(--text-xs);
    }

    /* ==========================================================================
       CARDS / MODULES
       ========================================================================== */
    .value-grid,
    .features-grid,
    .journey-grid,
    .benefits-grid {
      grid-template-columns: 1fr;
    }

    .card {
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-lg);
      background: var(--gradient-card);
      box-shadow: var(--shadow-card);
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .card:hover {
      transform: translateY(-5px);
      border-color: var(--color-primary);
      box-shadow: var(--shadow-hover);
    }

    .value-card {
      position: relative;
      min-height: 17rem;
      padding: 1.75rem;
      border-radius: var(--radius-xl);
    }

    .value-card__number {
      position: absolute;
      top: 1.2rem;
      right: 1.4rem;
      color: var(--color-border);
      font-size: 3.8rem;
      font-weight: 900;
      line-height: 1;
    }

    .value-card__icon,
    .feature-card__icon,
    .benefit-card__icon {
      display: grid;
      width: 3.4rem;
      height: 3.4rem;
      place-items: center;
      margin-bottom: 1.5rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: var(--color-surface-3);
      font-size: 1.35rem;
    }

    .value-card__title,
    .feature-card__title,
    .benefit-card__title,
    .journey-card__title {
      margin-bottom: 0.7rem;
      font-size: 1.18rem;
      letter-spacing: -0.03em;
    }

    .value-card__copy,
    .feature-card__copy,
    .benefit-card__copy,
    .journey-card__copy {
      color: var(--color-text-secondary);
      font-size: 0.95rem;
    }

    .feature-card,
    .benefit-card,
    .journey-card {
      padding: 1.5rem;
    }

    /* ==========================================================================
       MULTILINGUAL / GLOBAL
       ========================================================================== */
    .multilingual-layout,
    .pwa-layout {
      display: grid;
      gap: 2.5rem;
      align-items: center;
    }

    .visual-panel {
      position: relative;
      min-height: 29rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 50% 40%, var(--color-accent-soft), transparent 48%),
        radial-gradient(circle at 35% 78%, var(--color-primary-soft), transparent 36%),
        var(--color-surface);
      box-shadow: var(--shadow-card);
      overflow: hidden;
    }

    .audio-screen {
      position: absolute;
      top: 44%;
      left: 50%;
      width: min(76%, 24rem);
      aspect-ratio: 16 / 10;
      transform: translate(-50%, -50%);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-lg);
      background: linear-gradient(145deg, var(--color-surface-2), var(--color-background));
      box-shadow: var(--shadow-hover);
      overflow: hidden;
    }

    .audio-screen__face {
      position: absolute;
      top: 18%;
      left: 50%;
      width: 6rem;
      height: 6rem;
      transform: translateX(-50%);
      border: 1px solid var(--color-primary);
      border-radius: 50%;
      background: radial-gradient(circle at 50% 35%, var(--color-primary-soft), transparent 60%);
    }

    .audio-screen__waves {
      position: absolute;
      top: calc(18% + 1.45rem);
      left: 50%;
      display: flex;
      width: 4rem;
      height: 3.1rem;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      transform: translateX(-50%);
      z-index: 1;
    }

    .audio-screen__waves span {
      width: 0.24rem;
      border-radius: var(--radius-pill);
      background: var(--color-primary);
      animation: soundWave 1.15s ease-in-out infinite;
    }

    .audio-screen__waves span:nth-child(1) { height: 22%; }
    .audio-screen__waves span:nth-child(2) { height: 55%; animation-delay: 0.08s; }
    .audio-screen__waves span:nth-child(3) { height: 88%; animation-delay: 0.16s; }
    .audio-screen__waves span:nth-child(4) { height: 45%; animation-delay: 0.24s; }
    .audio-screen__waves span:nth-child(5) { height: 72%; animation-delay: 0.32s; }
    .audio-screen__waves span:nth-child(6) { height: 30%; animation-delay: 0.4s; }

    .language-pills {
      position: absolute;
      left: 1.25rem;
      right: 1.25rem;
      bottom: 1.25rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.55rem;
    }

    .language-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.8rem;
      min-height: 2.3rem;
      padding: 0.45rem 0.75rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-glass-strong);
      color: var(--color-text-secondary);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      box-shadow: var(--shadow-card);
    }

    .global-copy {
      display: grid;
      gap: 1.1rem;
    }

    /* ==========================================================================
       PWA
       ========================================================================== */
    .pwa-visual {
      position: relative;
      min-height: 32rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background:
        radial-gradient(circle at 72% 20%, var(--color-accent-soft), transparent 40%),
        radial-gradient(circle at 18% 75%, var(--color-primary-soft), transparent 38%),
        var(--color-surface);
      box-shadow: var(--shadow-card);
      overflow: hidden;
      padding: clamp(1rem, 4vw, 2rem);
    }

    .browser-mockup {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(88%, 34rem);
      transform: translate(-50%, -50%);
      border: 1px solid var(--color-border-strong);
      border-radius: 1.3rem;
      overflow: hidden;
      background: var(--color-background);
      box-shadow: var(--shadow-hover);
    }

    .browser-top {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 0.8rem;
      min-height: 3rem;
      padding: 0.65rem 0.85rem;
      border-bottom: 1px solid var(--color-border-soft);
      background: var(--color-surface-3);
    }

    .browser-dots {
      display: flex;
      gap: 0.35rem;
    }

    .browser-dots span {
      width: 0.45rem;
      height: 0.45rem;
      border-radius: 50%;
      background: var(--color-border-strong);
    }

    .browser-dots span:nth-child(1) { background: var(--color-danger); }
    .browser-dots span:nth-child(2) { background: var(--color-warning); }
    .browser-dots span:nth-child(3) { background: var(--color-primary); }

    .browser-address {
      padding: 0.35rem 0.75rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-pill);
      background: var(--color-background-alt);
      color: var(--color-text-muted);
      font-size: 0.66rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .browser-install {
      display: grid;
      place-items: center;
      width: 1.9rem;
      height: 1.9rem;
      border: 1px solid var(--color-border);
      border-radius: 0.55rem;
      color: var(--color-primary);
      font-weight: 900;
    }

    .browser-body {
      padding: 1rem;
    }

    .app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.8rem;
      margin-bottom: 1rem;
    }

    .app-brand {
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }

    .app-brand__logo {
      display: block;
      width: 7.5rem;
      max-width: 100%;
      height: auto;
    }

    .app-brand__copy strong {
      display: block;
      font-size: 0.82rem;
    }

    .app-brand__copy span {
      display: block;
      color: var(--color-text-muted);
      font-size: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .app-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-surface);
      color: var(--color-text-secondary);
      font-size: 0.62rem;
      font-weight: 700;
    }

    .app-dashboard {
      display: grid;
      gap: 0.85rem;
    }

    .app-dashboard--abstract {
      gap: 1rem;
      min-height: 18rem;
      padding: 0.15rem;
    }

    .preview-heading {
      display: grid;
      gap: 0.45rem;
      padding: 0.25rem 0.15rem 0.1rem;
    }

    .preview-heading__line,
    .preview-line {
      display: block;
      border-radius: var(--radius-pill);
      background: linear-gradient(90deg, var(--color-border), var(--color-border-strong), var(--color-border));
      background-size: 220% 100%;
      animation: previewShimmer 4s linear infinite;
    }

    .preview-heading__line { height: 0.6rem; width: 58%; }
    .preview-heading__line--short { width: 28%; height: 0.75rem; }

    .course-preview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.7rem;
    }

    .course-preview-card {
      overflow: hidden;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface-3));
      box-shadow: 0 14px 28px var(--color-shadow-1);
    }

    .course-preview-card--muted { opacity: 0.78; }

    .course-preview-card__media {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 6.2rem;
      border-bottom: 1px solid var(--color-border-soft);
      background:
        radial-gradient(circle at 35% 30%, var(--color-primary-soft), transparent 38%),
        radial-gradient(circle at 70% 65%, var(--color-accent-soft), transparent 42%),
        var(--color-background-alt);
    }

    .course-preview-card__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,0.03), transparent 65%);
    }

    .course-preview-card__media span {
      display: grid;
      width: 2.2rem;
      height: 2.2rem;
      place-items: center;
      border: 1px solid var(--color-border-strong);
      border-radius: 50%;
      background: var(--color-glass-strong);
      color: var(--color-primary);
      font-size: 0.72rem;
      padding-left: 0.12rem;
      z-index: 1;
    }

    .course-preview-card__body {
      display: grid;
      gap: 0.5rem;
      padding: 0.8rem;
    }

    .preview-line { height: 0.45rem; }
    .preview-line--wide { width: 88%; }
    .preview-line--mid { width: 68%; }
    .preview-line--small { width: 42%; }

    .course-preview-footer {
      display: grid;
      grid-template-columns: 1.1fr 0.75fr 0.55fr;
      gap: 0.65rem;
      margin-top: 0.15rem;
    }

    .course-preview-footer span {
      height: 2.2rem;
      border: 1px solid var(--color-border-soft);
      border-radius: 0.75rem;
      background: var(--color-background-alt);
    }

    @keyframes previewShimmer {
      from { background-position: 200% 0; }
      to { background-position: -20% 0; }
    }

    .course-highlight {
      padding: 1rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, var(--color-surface-2), var(--color-surface-3));
    }

    .course-highlight__eyebrow,
    .modules-list__title,
    .progress-box__title {
      color: var(--color-text-muted);
      font-size: 0.63rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .course-highlight__name {
      margin: 0.55rem 0 0.45rem;
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .course-highlight__meta {
      color: var(--color-text-secondary);
      font-size: 0.78rem;
    }

    .progress-line {
      height: 0.55rem;
      margin-top: 0.8rem;
      border-radius: var(--radius-pill);
      background: var(--color-background-alt);
      overflow: hidden;
      border: 1px solid var(--color-border-soft);
    }

    .progress-line span {
      display: block;
      width: 68%;
      height: 100%;
      background: var(--gradient-brand);
      border-radius: inherit;
    }

    .dashboard-bottom {
      display: grid;
      gap: 0.85rem;
      grid-template-columns: 1fr;
    }

    .modules-list,
    .progress-box {
      padding: 0.95rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-md);
      background: var(--color-background-alt);
    }

    .modules-list ul {
      display: grid;
      gap: 0.5rem;
      padding: 0;
      margin: 0.8rem 0 0;
      list-style: none;
    }

    .modules-list li {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      color: var(--color-text-secondary);
      font-size: 0.8rem;
    }

    .modules-list li::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--color-primary);
      box-shadow: 0 0 0 0.22rem var(--color-primary-soft);
      flex: 0 0 auto;
    }

    .progress-box__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.6rem;
      margin-top: 0.8rem;
    }

    .stat-card {
      padding: 0.75rem;
      border: 1px solid var(--color-border-soft);
      border-radius: 0.8rem;
      background: var(--color-surface);
    }

    .stat-card strong {
      display: block;
      margin-bottom: 0.2rem;
      font-size: 0.92rem;
    }

    .stat-card span {
      color: var(--color-text-muted);
      font-size: 0.7rem;
    }

    .device-badge {
      position: absolute;
      z-index: 2;
      padding: 0.45rem 0.75rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-glass-strong);
      box-shadow: var(--shadow-card);
      color: var(--color-text-secondary);
      font-size: 0.67rem;
      font-weight: 800;
    }

    .device-badge--tablet { left: 5%; bottom: 8%; }
    .device-badge--mobile { right: 5%; bottom: 11%; }
    .device-badge--browser { right: 7%; top: 8%; }

    .pwa-benefits {
      display: grid;
      gap: 0.85rem;
      margin: 1.8rem 0 2rem;
    }

    .pwa-benefit {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      color: var(--color-text-secondary);
      font-size: 0.94rem;
    }

    .pwa-benefit__icon {
      display: grid;
      width: 1.75rem;
      height: 1.75rem;
      place-items: center;
      border-radius: 50%;
      background: var(--color-primary-soft);
      color: var(--color-primary);
      font-size: 0.76rem;
      font-weight: 900;
      flex: 0 0 auto;
    }

    /* ==========================================================================
       JOURNEY / BENEFITS
       ========================================================================== */
    .journey-card__step {
      display: grid;
      width: 2.8rem;
      height: 2.8rem;
      place-items: center;
      margin-bottom: 1.2rem;
      border-radius: 50%;
      background: var(--color-primary-soft);
      color: var(--color-primary);
      font-weight: 900;
    }

    .benefit-card__icon {
      border-radius: 50%;
      width: 2.8rem;
      height: 2.8rem;
      background: var(--color-primary-soft);
      color: var(--color-primary);
      font-weight: 900;
    }

    .scarcity {
      display: grid;
      gap: 2rem;
      align-items: center;
      margin-top: 2.2rem;
      padding: clamp(1.5rem, 4vw, 2.4rem);
      border: 1px solid var(--color-warning);
      border-radius: var(--radius-xl);
      background: var(--gradient-card);
      box-shadow: var(--shadow-card);
    }

    .scarcity__title {
      margin-bottom: 0.7rem;
      font-size: 1.25rem;
      letter-spacing: -0.03em;
    }

    .scarcity__copy {
      color: var(--color-text-secondary);
    }

    .scarcity__counter {
      width: min(100%, 20rem);
      text-align: center;
    }

    .scarcity__numbers {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.45rem;
      font-variant-numeric: tabular-nums;
    }

    .scarcity__number {
      color: var(--color-warning);
      font-size: clamp(3rem, 8vw, 4.4rem);
      font-weight: 900;
      line-height: 0.9;
      letter-spacing: -0.08em;
    }

    .scarcity__separator {
      color: var(--color-text-muted);
      font-size: 1.25rem;
      font-weight: 700;
    }

    .scarcity__total {
      font-size: 2rem;
      font-weight: 900;
    }

    .scarcity__label {
      display: block;
      margin-top: 0.8rem;
      color: var(--color-text-muted);
      font-size: 0.7rem;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .scarcity__progress {
      height: 0.75rem;
      margin-top: 1.2rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-pill);
      background: var(--color-background-alt);
      overflow: hidden;
    }

    .scarcity__progress-bar {
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--gradient-brand);
      box-shadow: var(--shadow-accent);
      transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .scarcity__footer {
      display: flex;
      justify-content: space-between;
      margin-top: 0.75rem;
      color: var(--color-text-muted);
      font-size: 0.75rem;
    }

    .scarcity__footer strong {
      color: var(--color-text-primary);
      font-variant-numeric: tabular-nums;
    }

    /* ==========================================================================
       FINAL CTA / FOOTER
       ========================================================================== */
    .final-cta {
      background:
        radial-gradient(circle at 12% 30%, var(--color-primary-soft), transparent 35%),
        radial-gradient(circle at 88% 70%, var(--color-accent-soft), transparent 38%),
        var(--color-background-alt);
    }

    .final-panel {
      padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-glass);
      box-shadow: var(--shadow-hover);
      text-align: center;
    }

    .footer {
      padding-top: 3.4rem;
      border-top: 1px solid var(--color-border-soft);
    }

    .footer__content {
      display: grid;
      gap: 2rem;
      padding-bottom: 2.5rem;
    }

    .footer__copy {
      max-width: 27rem;
      margin-top: 1.2rem;
      color: var(--color-text-secondary);
      font-size: 0.92rem;
    }

    .footer__heading {
      margin-bottom: 1rem;
      color: var(--color-text-muted);
      font-size: 0.72rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .footer__links {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .footer__links--vertical {
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
    }

    .footer__socials {
      margin-top: 1.2rem;
      justify-content: flex-end;
    }

    .footer .social-list[hidden] {
      display: none;
    }

    .social-link--placeholder {
      cursor: default;
      opacity: 0.55;
      pointer-events: none;
    }

    .social-link--placeholder:hover {
      transform: none;
      border-color: var(--color-border);
      background: var(--color-surface);
      color: var(--color-text-secondary);
    }

    .footer__company {
      margin: 0;
      color: var(--color-text-muted);
      font-size: 0.85rem;
      font-style: normal;
      line-height: 1.55;
    }

    .footer__company p {
      margin: 0 0 0.45rem;
    }

    .footer__company p:last-child {
      margin-bottom: 0;
    }

    .footer__company a {
      color: var(--color-primary);
      text-decoration: underline;
      text-underline-offset: 0.15rem;
    }

    .footer__link {
      padding: 0.65rem 0.8rem;
      border: 1px solid var(--color-border-soft);
      border-radius: var(--radius-sm);
      background: transparent;
      color: var(--color-text-muted);
      font-size: 0.85rem;
      transition: border-color var(--transition), color var(--transition);
    }

    .footer__link:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .footer__bottom {
      padding-block: 1.2rem;
      border-top: 1px solid var(--color-border-soft);
      color: var(--color-text-muted);
      font-size: 0.74rem;
      line-height: 1.7;
      text-align: center;
    }

    .footer__bottom-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
    }

    .footer__bottom-links {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .footer__bottom-link {
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--color-primary);
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 0.15rem;
    }

    .footer__bottom-link:hover {
      color: var(--color-text-primary);
    }

    /* ==========================================================================
       LEGAL MODAL
       ========================================================================== */
    .legal-modal {
      position: fixed;
      inset: 0;
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: var(--color-overlay);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .legal-modal.is-open { display: flex; }

    .legal-modal__dialog {
      width: min(100%, 56rem);
      max-height: min(88vh, 58rem);
      overflow-y: auto;
      padding: clamp(1.5rem, 5vw, 3rem);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      background: var(--color-background-alt);
      box-shadow: var(--shadow-hover);
    }

    .legal-modal__close {
      display: grid;
      width: 2.8rem;
      height: 2.8rem;
      place-items: center;
      margin-left: auto;
      border: 1px solid var(--color-border);
      border-radius: 50%;
      background: var(--color-surface);
      color: var(--color-text-primary);
      font-size: 1.2rem;
    }

    .legal-modal__title {
      margin: 1rem 0 1.5rem;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      letter-spacing: -0.04em;
    }

    .legal-content {
      color: var(--color-text-secondary);
      font-size: 0.92rem;
      line-height: 1.75;
    }

    .legal-content h3 {
      margin-top: 1.8rem;
      margin-bottom: 0.7rem;
      color: var(--color-text-primary);
      font-size: 1.04rem;
    }

    .legal-content h4 {
      margin-top: 1.35rem;
      margin-bottom: 0.55rem;
      color: var(--color-text-primary);
      font-size: 0.98rem;
    }

    .legal-content h5 {
      margin-top: 1rem;
      margin-bottom: 0.4rem;
      color: var(--color-text-primary);
      font-size: 0.92rem;
    }

    .legal-content ul {
      margin: 0.7rem 0 0 1.1rem;
      padding: 0;
    }

    .legal-note {
      padding: 0.85rem 1rem;
      border: 1px dashed var(--color-warning);
      border-radius: var(--radius-sm);
      color: var(--color-warning);
      background: var(--color-background);
    }

    /* ==========================================================================
       ANIMATIONS / REVEAL
       ========================================================================== */
    .reveal {
      opacity: 0;
      transform: translateY(2rem);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .stagger > * {
      opacity: 0;
      transform: translateY(1.5rem);
      transition: opacity var(--transition-slow), transform var(--transition-slow);
    }

    .stagger.is-visible > * {
      opacity: 1;
      transform: translateY(0);
    }

    .stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
    .stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
    .stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
    .stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
    .stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }

    @keyframes soundWave {
      0%, 100% { transform: scaleY(0.55); }
      50% { transform: scaleY(1.15); }
    }

    @keyframes floatOrb {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -0.7rem, 0); }
    }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */
    @media (min-width: 40rem) {
      .form-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .proof-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .proof-bar__item:not(:last-child) {
        border-bottom: 0;
        border-right: 1px solid var(--color-border-soft);
      }

      .value-grid,
      .journey-grid,
      .benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

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

      .scarcity {
        grid-template-columns: 1fr auto;
      }

      .footer__content {
        grid-template-columns: 33fr 40fr 27fr;
        align-items: start;
      }

      .dashboard-bottom {
        grid-template-columns: 1.1fr 0.9fr;
      }
    }

    @media (min-width: 64rem) {
      .features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

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

    @media (max-width: 64rem) {
      .navbar__socials { display: none; }
    }

    @media (max-width: 31rem) {
      .language-selector { width: 3.5rem; padding-inline: 0.65rem; }
      .language-pills { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; }
      .language-pill { min-width: 2.4rem; min-height: 2rem; font-size: 0.62rem; padding: 0.35rem 0.5rem; }
      .browser-mockup { width: 95%; }
      .course-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .course-preview-card:nth-child(3) { display: none; }
    }

    @media (max-width: 499px) {
      .navbar__waitlist { display: none; }

      .waitlist-form,
      .waitlist-form > *,
      .form-fields,
      .form-fields > *,
      .form-consent,
      .form-consent > span,
      .form-submit-row,
      .form-message {
        min-width: 0;
      }

      .captcha-wrapper {
        overflow: hidden;
        padding-inline: 0.5rem;
      }

      .g-recaptcha {
        transform: scale(0.9);
        transform-origin: center;
      }
    }

    @media (max-width: 420px) {
      .g-recaptcha { transform: scale(0.74); }
    }

    @media (max-width: 359px) {
      .g-recaptcha { transform: scale(0.6); }
    }

    @media (max-width: 767px) {
      .footer__content {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
      }

      .footer__content > div {
        min-width: 0;
      }

      .footer__content > div:nth-child(3) {
        grid-column: 1 / -1;
      }

      .footer__company {
        text-align: right;
      }

      .footer__content > div:nth-child(3) .footer__socials {
        width: 100%;
        margin-top: 0;
        justify-content: center;
      }

      .footer .brand__logo {
        max-width: 100%;
      }
    }

    @media (max-width: 499px) {
      .footer__content {
        grid-template-columns: minmax(0, 1fr);
      }

      .footer__content > div {
        grid-column: 1;
        text-align: center;
      }

      .footer .brand {
        justify-content: center;
      }

      .footer__copy {
        margin-inline: auto;
      }

      .footer__company {
        text-align: center;
      }

      .footer__content > div:nth-child(3) .footer__socials {
        width: 100%;
        justify-content: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
      }

      .reveal,
      .stagger > * {
        opacity: 1;
        transform: none;
      }
    }