/* ── Reset & variables ── */
   
   *,
   *::before,
   *::after {
       box-sizing: border-box;
   }
   
    :root {
       --bg: #0f1115;
       --bg-card: #181b22;
       --bg-elevated: #1e222a;
       --text: #e6e8ec;
       --text-muted: #8b909a;
       --accent: #5b8def;
       --accent-hover: #7aa3f5;
       --border: #2a2e38;
       --success: #34c77b;
       --radius: 8px;
       --font-sans: 'DM Sans', system-ui, sans-serif;
       --font-serif: 'DM Serif Display', Georgia, serif;
   }

   @keyframes wv-fade-up {
       from {
           opacity: 0;
           transform: translateY(14px);
       }
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes wv-spin {
       to {
           transform: rotate(360deg);
       }
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       margin: 0;
       font-family: var(--font-sans);
       font-size: 16px;
       line-height: 1.5;
       color: var(--text);
       background: var(--bg);
   }
   
   .wrap {
       max-width: 1120px;
       margin: 0 auto;
       padding: 0 24px;
   }
   /* ── Header ── */
   
   .site-header {
       position: sticky;
       top: 0;
       z-index: 100;
       background: rgba(15, 17, 21, 0.9);
       backdrop-filter: blur(8px);
       border-bottom: 1px solid var(--border);
   }
   
   .site-header .wrap {
       display: flex;
       align-items: center;
       justify-content: space-between;
       height: 64px;
   }
   
   .logo {
       font-family: var(--font-serif);
       font-size: 1.5rem;
       font-weight: 400;
       color: var(--text);
       text-decoration: none;
       letter-spacing: 0.02em;
   }
   
   .nav {
       display: flex;
       align-items: center;
       gap: 28px;
   }
   
   .nav a {
       color: var(--text-muted);
       text-decoration: none;
       font-size: 0.9375rem;
       font-weight: 500;
       transition: color 0.2s;
   }
   
   .nav a:hover {
       color: var(--text);
   }
   
   .btn-account {
       color: var(--accent) !important;
   }

   .menu-toggle {
       display: none;
       width: 40px;
       height: 40px;
       border: 1px solid var(--border);
       background: var(--bg-card);
       color: var(--text);
       border-radius: var(--radius);
       cursor: pointer;
       padding: 0;
   }
   .menu-toggle::before {
       content: '';
       display: block;
       width: 18px;
       height: 2px;
       margin: 0 auto;
       background: currentColor;
       box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
   }
   @media (max-width: 768px) {
       .site-header .wrap {
           flex-wrap: wrap;
           height: auto;
           min-height: 64px;
           align-items: center;
           padding-bottom: 0;
       }
       .site-header .nav {
           display: none;
           width: 100%;
           order: 3;
           flex-direction: column;
           gap: 0;
           padding: 16px 0 24px;
           border-top: 1px solid var(--border);
           margin-top: 16px;
       }
       .site-header .nav a {
           padding: 12px 0;
           font-size: 1rem;
       }
       body.nav-open .site-header .nav {
           display: flex;
       }
       .menu-toggle {
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
           z-index: 10;
       }
       .menu-toggle::before {
           box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
       }
   }
   /* ── Buttons ── */
   
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 12px 24px;
       font-family: var(--font-sans);
       font-size: 0.9375rem;
       font-weight: 600;
       text-decoration: none;
       border-radius: var(--radius);
       cursor: pointer;
       transition: background 0.2s, color 0.2s, border-color 0.2s;
       border: 1px solid transparent;
   }
   
   .btn-primary {
       background: var(--accent);
       color: #fff;
   }
   
   .btn-primary:hover {
       background: var(--accent-hover);
   }
   
   .btn-ghost {
       background: transparent;
       color: var(--text-muted);
   }
   
   .btn-ghost:hover {
       color: var(--text);
   }
   
   .btn-outline {
       background: transparent;
       color: var(--accent);
       border-color: var(--accent);
   }
   
   .btn-outline:hover {
       background: var(--accent);
       color: #fff;
   }
   /* ── Hero ── */
   
   .hero {
       padding: 80px 0 100px;
       text-align: center;
   }
   
   .hero-title {
       font-family: var(--font-serif);
       font-size: clamp(2.25rem, 5vw, 3.5rem);
       font-weight: 400;
       margin: 0 0 16px;
       letter-spacing: 0.02em;
   }
   
   .hero-tagline {
       font-size: 1.125rem;
       color: var(--text-muted);
       max-width: 520px;
       margin: 0 auto 32px;
       line-height: 1.6;
   }
   
   .hero-cta {
       display: flex;
       gap: 16px;
       justify-content: center;
       flex-wrap: wrap;
   }
   /* ── Sections ── */
   
   .section {
       padding: 72px 0;
   }
   
   .section-title {
       font-family: var(--font-serif);
       font-size: clamp(1.75rem, 3vw, 2.25rem);
       font-weight: 400;
       margin: 0 0 8px;
       text-align: center;
   }
   
   .section-sub {
       text-align: center;
       color: var(--text-muted);
       font-size: 1rem;
       margin: 0 0 40px;
   }
   /* ══════════════════════════════════════
      WHAT IS L.E.O.
      ══════════════════════════════════════ */
   
   .what-is-section {
       position: relative;
       padding: 80px 0 100px;
   }
   
   .what-is-wrap {
       position: relative;
   }
   /* Centered header: Procedural VTT + title + tagline */
   
   .what-is-header {
       text-align: center;
       max-width: 520px;
       margin: 0 auto 48px;
   }
   
   .what-is-section .eyebrow {
       display: block;
       text-align: center;
       font-family: var(--font-sans);
       font-size: 0.6875rem;
       font-weight: 600;
       letter-spacing: 0.22em;
       text-transform: uppercase;
       color: var(--accent);
       margin-bottom: 14px;
       opacity: 0;
       animation: wv-fade-up 0.5s 0.1s ease both;
   }
   @media (prefers-reduced-motion: reduce) {
       .what-is-section .eyebrow {
           animation: none;
           opacity: 1;
       }
   }

   .what-is-section .what-is-header .section-title {
       text-align: center;
       margin: 0 0 8px;
       opacity: 0;
       animation: wv-fade-up 0.5s 0.2s ease both;
   }
   
   .what-is-hero {
       font-family: var(--font-serif);
       font-size: clamp(1.1rem, 2vw, 1.4rem);
       font-weight: 400;
       text-align: center;
       color: var(--text-muted);
       letter-spacing: 0.03em;
       margin: 0;
       opacity: 0;
       animation: wv-fade-up 0.5s 0.3s ease both;
   }
   /* Cards */
   
   .leo-cards {
       list-style: none;
       margin: 0;
       padding: 0;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 16px;
   }
   
   .leo-card {
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       overflow: hidden;
       position: relative;
       transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
       opacity: 0;
   }
   
   .leo-card:nth-child(1) {
       animation: wv-fade-up 0.45s 0.45s ease both;
   }
   
   .leo-card:nth-child(2) {
       animation: wv-fade-up 0.45s 0.58s ease both;
   }
   
   .leo-card:nth-child(3) {
       animation: wv-fade-up 0.45s 0.71s ease both;
   }
   
   .leo-card:nth-child(4) {
       animation: wv-fade-up 0.45s 0.84s ease both;
   }
   
   .leo-card::before {
       content: '';
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 3px;
       background: var(--accent);
       transform: scaleY(0);
       transform-origin: top;
       transition: transform 0.25s ease;
   }
   
   .leo-card:hover {
       border-color: rgba(91, 141, 239, 0.4);
       transform: translateY(-3px);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
   }
   
   .leo-card:hover::before {
       transform: scaleY(1);
   }
   
   .leo-card-head {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 20px 18px 12px 20px;
   }
   
   .leo-card-step {
       flex-shrink: 0;
       width: 30px;
       height: 30px;
       border-radius: 50%;
       border: 1px solid var(--border);
       background: var(--bg-elevated);
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-sans);
       font-size: 0.75rem;
       font-weight: 700;
       color: var(--accent);
       letter-spacing: 0.03em;
       transition: border-color 0.2s, background 0.2s;
   }
   
   .leo-card:hover .leo-card-step {
       border-color: var(--accent);
       background: rgba(91, 141, 239, 0.1);
   }
   
   .leo-card-title {
       font-family: var(--font-serif);
       font-size: 1.1rem;
       font-weight: 400;
       color: var(--text);
       margin: 0;
       letter-spacing: 0.01em;
   }
   
   .leo-card-body {
       padding: 0 18px 20px 20px;
   }
   
   .leo-card-desc {
       font-family: var(--font-sans);
       font-size: 0.9rem;
       line-height: 1.6;
       color: var(--text-muted);
       margin: 0;
   }
   
   .what-is-section .compass {
       position: absolute;
       bottom: 24px;
       right: 80px;
       width: 32px !important;
       height: 32px !important;
       min-width: 32px !important;
       min-height: 32px !important;
       max-width: 32px !important;
       max-height: 32px !important;
       opacity: 0.45;
       animation: wv-spin 80s linear infinite;
       pointer-events: none;
       z-index: 0;
       flex: none;
   }
   
   @media (max-width: 900px) {
       .leo-cards {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
   @media (max-width: 520px) {
       .what-is-section {
           padding: 60px 0 72px;
       }
       .what-is-header {
           margin-bottom: 32px;
       }
       .leo-cards {
           grid-template-columns: 1fr;
           gap: 12px;
       }
       .what-is-section .compass {
           width: 28px !important;
           height: 28px !important;
           min-width: 28px !important;
           min-height: 28px !important;
           max-width: 28px !important;
           max-height: 28px !important;
           bottom: 16px;
           right: 24px;
       }
   }
   @media (max-width: 640px) {
       .what-is-section .compass {
           right: 24px;
       }
   }
   /* ── Carousel (See it in action) ── */
   
   .carousel-section .wrap {
       position: relative;
   }
   
   .carousel {
       position: relative;
       margin-bottom: 16px;
   }
   
   .carousel-track {
       width: 100%;
       overflow: hidden;
       border-radius: var(--radius);
       background: var(--bg-card);
       border: 1px solid var(--border);
   }
   
   .carousel-slide {
       display: none;
       width: 100%;
   }
   
   .carousel-slide.active {
       display: block;
   }
   
   .slide-placeholder {
       aspect-ratio: 16/10;
       background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--border) 100%);
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--text-muted);
       font-size: 0.875rem;
   }
   
   .slide-1 { background: linear-gradient(135deg, #1a2744 0%, #2a3a5c 100%); }
   .slide-2 { background: linear-gradient(135deg, #1e2d1a 0%, #2d4220 100%); }
   .slide-3 { background: linear-gradient(135deg, #2d1a2d 0%, #422040 100%); }
   .slide-4 { background: linear-gradient(135deg, #2d2520 0%, #3d3228 100%); }
   
   .carousel-prev,
   .carousel-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 2;
       width: 44px;
       height: 44px;
       border: 1px solid var(--border);
       background: rgba(24, 27, 34, 0.9);
       color: var(--text);
       border-radius: var(--radius);
       cursor: pointer;
       font-size: 1.25rem;
       line-height: 1;
       transition: background 0.2s;
   }
   
   .carousel-prev {
       left: 12px;
   }
   
   .carousel-next {
       right: 12px;
   }
   
   .carousel-prev:hover,
   .carousel-next:hover {
       background: var(--bg-elevated);
   }
   
   .carousel-prev::before { content: '‹'; }
   .carousel-next::before { content: '›'; }
   
   .carousel-dots {
       display: flex;
       justify-content: center;
       gap: 8px;
   }
   
   .carousel-dots button {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       border: none;
       background: var(--border);
       cursor: pointer;
       padding: 0;
       transition: background 0.2s;
   }
   
   .carousel-dots button.active {
       background: var(--accent);
   }
   /* ── Video (How it works) ── */
   
   .video-wrapper {
       max-width: 800px;
       margin: 0 auto;
       border-radius: var(--radius);
       overflow: hidden;
       border: 1px solid var(--border);
       background: var(--bg-card);
   }
   
   .video-placeholder {
       aspect-ratio: 16/9;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       color: var(--text-muted);
       gap: 8px;
   }
   
   .video-hint {
       font-size: 0.8125rem;
       opacity: 0.8;
   }
   /* ── Pricing ── */
   
   .pricing-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 24px;
       align-items: start;
   }
   
   .pricing-card {
       position: relative;
       padding: 28px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
       transition: border-color 0.2s;
   }
   
   .pricing-card:hover {
       border-color: var(--text-muted);
   }
   
   .pricing-featured {
       border-color: var(--accent);
       box-shadow: 0 0 0 1px var(--accent);
   }
   
   .pricing-featured .badge {
       position: absolute;
       top: -10px;
       left: 50%;
       transform: translateX(-50%);
       background: var(--accent);
       color: #fff;
       font-size: 0.75rem;
       font-weight: 600;
       padding: 4px 12px;
       border-radius: 999px;
   }
   
   .pricing-name {
       font-family: var(--font-serif);
       font-size: 1.5rem;
       margin: 0 0 4px;
   }
   
   .pricing-tagline {
       color: var(--text-muted);
       font-size: 0.875rem;
       margin: 0 0 12px;
   }
   
   .pricing-desc {
       font-size: 0.9375rem;
       color: var(--text-muted);
       margin: 0 0 20px;
       line-height: 1.5;
   }
   
   .pricing-price {
       margin: 0 0 24px;
       font-size: 1.5rem;
   }
   
   .price-num {
       font-weight: 700;
   }
   
   .price-cur {
       color: var(--text-muted);
       font-weight: 500;
       font-size: 1rem;
   }
   
   .pricing-note {
       font-size: 0.8125rem;
       color: var(--text-muted);
       margin: -8px 0 16px;
       font-style: italic;
   }
   
   .pricing-features {
       list-style: none;
       padding: 0;
       margin: 0 0 24px;
       font-size: 0.9375rem;
       color: var(--text-muted);
   }
   
   .pricing-features li {
       padding: 6px 0 6px 24px;
       position: relative;
   }
   
   .pricing-features li::before {
       content: '';
       position: absolute;
       left: 0;
       top: 12px;
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: var(--success);
   }
   
   .pricing-card .btn {
       width: 100%;
   }
   /* ── Reviews ── */
   
   .reviews-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       gap: 24px;
   }
   
   .review-card {
       margin: 0;
       padding: 24px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
   }
   
   .review-card p {
       margin: 0 0 16px;
       font-size: 0.9375rem;
       line-height: 1.6;
       color: var(--text);
   }
   
   .review-card footer {
       font-size: 0.8125rem;
       color: var(--text-muted);
   }
   
   .reviews-note {
       text-align: center;
       font-size: 0.8125rem;
       color: var(--text-muted);
       margin-top: 24px;
   }
   /* ── Stats ── */
   
   .stats-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 24px;
       max-width: 720px;
       margin: 0 auto;
   }
   
   .stat-card {
       text-align: center;
       padding: 32px 24px;
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: var(--radius);
   }
   
   .stat-value {
       display: block;
       font-family: var(--font-serif);
       font-size: 2.5rem;
       color: var(--accent);
       margin-bottom: 8px;
   }
   
   .stat-label {
       font-size: 0.9375rem;
       color: var(--text-muted);
   }
   /* ── Footer ── */
   
   .site-footer {
       padding: 48px 0;
       border-top: 1px solid var(--border);
       text-align: center;
   }
   
   .footer-brand {
       font-family: var(--font-serif);
       font-size: 1.125rem;
       margin: 0 0 8px;
   }
   
   .footer-legal {
       font-size: 0.875rem;
       color: var(--text-muted);
       margin: 0 0 8px;
   }
   
   .footer-copy {
       font-size: 0.8125rem;
       color: var(--text-muted);
       margin: 0;
   }