:root {
      --bg: #090b10;
      --panel: #121722;
      --panel-2: #171e2b;
      --text: #f4f6f8;
      --muted: #a8b1c2;
      --gold: #e8b44f;
      --blue: #5ba8ff;
      --line: rgba(255,255,255,.12);
      --shadow: 0 18px 45px rgba(0,0,0,.35);
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      width: 100%;
      overflow-x: hidden;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 5%, rgba(232,180,79,.12), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(91,168,255,.11), transparent 25%),
        var(--bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }

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

    .container {
      width: min(1180px, calc(100% - 32px));
      max-width: 100%;
      margin: 0 auto;
    }

    img, svg, video, canvas {
      display: block;
      max-width: 100%;
      height: auto;
    }

    section, header, footer, main, nav, article, div {
      min-width: 0;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
      background: rgba(9,11,16,.78);
      border-bottom: 1px solid var(--line);
    }

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

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 800;
      letter-spacing: .3px;
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #111;
      background: linear-gradient(135deg, var(--gold), #fff1b7);
      box-shadow: 0 0 0 5px rgba(232,180,79,.08);
    }

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

    .nav-links a {
      text-decoration: none;
      color: var(--muted);
      font-size: .95rem;
    }

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

    .button {
      border: 0;
      border-radius: 999px;
      min-height: 48px;
      padding: 13px 20px;
      cursor: pointer;
      touch-action: manipulation;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 750;
      transition: transform .2s ease, opacity .2s ease, background .2s ease;
    }

    .button:hover { transform: translateY(-2px); }
    .button-primary {
      background: linear-gradient(135deg, var(--gold), #f8d383);
      color: #111;
    }

    .button-secondary {
      background: rgba(255,255,255,.06);
      border: 1px solid var(--line);
      color: var(--text);
    }

    .hero {
      min-height: 760px;
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      gap: 50px;
      align-items: center;
      padding: 78px 0 62px;
    }

    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(232,180,79,.28);
      background: rgba(232,180,79,.08);
      color: #f1cf8f;
      font-size: .88rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    h1, h2, h3 { line-height: 1.12; margin-top: 0; }
    h1 {
      font-size: clamp(3rem, 8vw, 6.3rem);
      letter-spacing: -.055em;
      margin-bottom: 22px;
    }

    h1 span {
      background: linear-gradient(90deg, var(--gold), #fff0b7 42%, var(--blue));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      max-width: 660px;
      color: var(--muted);
      font-size: 1.15rem;
      margin-bottom: 30px;
    }

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

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

    .mini-stat {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.035);
    }

    .mini-stat strong {
      display: block;
      color: var(--gold);
      font-size: 1.3rem;
    }

    .mini-stat span {
      color: var(--muted);
      font-size: .9rem;
    }

    .hero-visual {
      position: relative;
      min-height: 560px;
      border-radius: 34px;
      overflow: hidden;
      border: 1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(0,0,0,.82) 0 43%, rgba(0,0,0,.14) 67%, rgba(255,197,92,.2)),
        radial-gradient(circle at 78% 38%, #ffd68a 0 6%, #aa6d1f 7% 9%, transparent 10%),
        linear-gradient(145deg, #10141d, #26344c 58%, #a57133);
      box-shadow: var(--shadow);
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      right: -70px;
      top: 40px;
      background: rgba(255,224,154,.32);
      filter: blur(15px);
    }

    .silhouette {
      position: absolute;
      left: 16%;
      bottom: 0;
      width: 54%;
      height: 86%;
      background: #050608;
      border-radius: 48% 48% 8% 8% / 36% 36% 5% 5%;
      box-shadow: 28px -8px 40px rgba(0,0,0,.52);
    }

    .silhouette::before {
      content: "";
      position: absolute;
      width: 34%;
      height: 21%;
      border-radius: 50%;
      left: 34%;
      top: -7%;
      background: #050608;
    }

    .light-arrow {
      position: absolute;
      right: 13%;
      top: 29%;
      width: 35%;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--gold));
      transform: rotate(151deg);
      transform-origin: right center;
      box-shadow: 0 0 20px rgba(232,180,79,.6);
    }

    .light-arrow::after {
      content: "";
      position: absolute;
      right: -3px;
      top: -7px;
      border-left: 15px solid var(--gold);
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
    }

    .visual-caption {
      position: absolute;
      z-index: 3;
      left: 22px;
      right: 22px;
      bottom: 22px;
      padding: 18px;
      border-radius: 18px;
      background: rgba(6,8,12,.75);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(14px);
    }

    .visual-caption small {
      color: var(--gold);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .visual-caption h3 {
      margin: 5px 0 0;
      font-size: 1.4rem;
    }

    section { padding: 80px 0; }

    .section-head {
      max-width: 760px;
      margin-bottom: 34px;
    }

    .section-head h2 {
      font-size: clamp(2.15rem, 5vw, 3.7rem);
      letter-spacing: -.04em;
      margin-bottom: 14px;
    }

    .section-head p { color: var(--muted); }

    .lesson-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      width: 100%;
    }

    .lesson-card {
      min-height: 270px;
      border-radius: 20px;
      padding: 20px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .lesson-card:hover,
    .lesson-card.active {
      transform: translateY(-5px);
      border-color: rgba(232,180,79,.62);
      background: rgba(232,180,79,.075);
    }

    .lesson-number {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(232,180,79,.13);
      color: var(--gold);
      font-weight: 800;
      margin-bottom: 32px;
    }

    .lesson-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
    .lesson-card p { color: var(--muted); font-size: .94rem; }

    .lab {
      display: grid;
      grid-template-columns: .84fr 1.16fr;
      gap: 26px;
      align-items: stretch;
    }

    .control-panel,
    .diagram-panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.035);
      padding: 26px;
    }

    .control-panel h3 { font-size: 1.55rem; }
    .control-panel p { color: var(--muted); }

    .control-group { margin-top: 22px; }
    .control-group label {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    input[type="range"] {
      width: 100%;
      min-height: 44px;
      accent-color: var(--gold);
      touch-action: pan-y;
    }

    .preset-buttons {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
      margin-top: 22px;
    }

    .preset {
      color: var(--text);
      background: rgba(255,255,255,.05);
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 11px;
      cursor: pointer;
    }

    .preset:hover,
    .preset.active {
      border-color: var(--gold);
      color: var(--gold);
    }

    .diagram-stage {
      min-height: 440px;
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      background:
        radial-gradient(circle at var(--light-x, 80%) var(--light-y, 20%),
          rgba(255,222,154,var(--light-alpha, .95)) 0 4%,
          rgba(242,178,70,.3) 5% 16%,
          rgba(0,0,0,0) 38%),
        linear-gradient(145deg, #0b0e14, #26344c);
    }

    .diagram-subject {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 46%;
      height: 79%;
      transform: translateX(-50%);
      border-radius: 48% 48% 10% 10% / 35% 35% 7% 7%;
      background:
        linear-gradient(var(--subject-angle, 90deg),
          rgba(0,0,0,var(--shadow-strength, .92)) 0 var(--shadow-stop, 48%),
          rgba(255,211,132,.82) var(--light-stop, 55%),
          rgba(255,238,198,.95) 100%);
      box-shadow: var(--subject-shadow, 24px 0 35px rgba(0,0,0,.65));
    }

    .diagram-subject::before {
      content: "";
      position: absolute;
      width: 36%;
      height: 24%;
      border-radius: 50%;
      left: 32%;
      top: -10%;
      background: inherit;
    }

    .diagram-label {
      position: absolute;
      left: 16px;
      top: 16px;
      padding: 9px 12px;
      border-radius: 999px;
      background: rgba(8,10,14,.72);
      border: 1px solid var(--line);
      font-size: .85rem;
      font-weight: 700;
    }

    .lesson-output {
      margin-top: 18px;
      padding: 18px;
      border-radius: 16px;
      background: rgba(91,168,255,.07);
      border: 1px solid rgba(91,168,255,.22);
    }

    .lesson-output strong { color: #a8d2ff; }


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

    .photo-study {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.035);
    }

    .photo-frame {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #050608;
    }

    .photo-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .photo-frame.photo-contain img {
      object-fit: contain;
      background: #050608;
    }

    .photo-tag {
      position: absolute;
      left: 14px;
      top: 14px;
      padding: 8px 11px;
      border-radius: 999px;
      color: #111;
      background: rgba(248,211,131,.94);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .photo-study-body {
      padding: 22px;
    }

    .photo-study-body p,
    .photo-study-body li {
      color: var(--muted);
    }

    .photo-study-body ul {
      margin: 14px 0 0;
      padding-left: 20px;
    }

    .quiz-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .quiz-progress {
      min-width: 96px;
      color: var(--gold);
      font-weight: 800;
      text-align: right;
    }

    .quiz-score {
      margin-top: 16px;
      padding: 14px 16px;
      border: 1px solid rgba(232,180,79,.3);
      border-radius: 14px;
      background: rgba(232,180,79,.07);
    }

    .quiz-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .quiz-option.selected-correct {
      border-color: #89e2aa;
      background: rgba(137,226,170,.1);
    }

    .quiz-option.selected-incorrect {
      border-color: #ff9d9d;
      background: rgba(255,157,157,.08);
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .compare {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: rgba(255,255,255,.03);
    }

    .compare-visual {
      height: 280px;
      position: relative;
    }

    .hard {
      background:
        radial-gradient(circle at 78% 20%, rgba(255,226,154,.95) 0 3%, transparent 4%),
        linear-gradient(110deg, #050609 0 48%, #ffd38a 49% 68%, #8f5b22 69%);
    }

    .soft {
      background:
        radial-gradient(circle at 78% 20%, rgba(255,226,154,.65) 0 12%, transparent 35%),
        linear-gradient(110deg, #171d28, #5e6b78 44%, #e9cfa1 73%, #7c6247);
    }

    .compare-body { padding: 22px; }
    .compare-body p { color: var(--muted); }

    .quiz {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 28px;
      background: linear-gradient(135deg, rgba(232,180,79,.07), rgba(91,168,255,.06));
    }

    .quiz-options {
      display: grid;
      gap: 10px;
      margin: 20px 0;
    }

    .quiz-option {
      text-align: left;
      color: var(--text);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 16px;
      cursor: pointer;
    }

    .quiz-option:hover { border-color: var(--gold); }
    .quiz-result { min-height: 28px; color: var(--muted); }
    .quiz-result.correct { color: #89e2aa; }
    .quiz-result.incorrect { color: #ff9d9d; }

    .cta {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 28px;
      padding: 34px;
      border: 1px solid rgba(232,180,79,.25);
      border-radius: 28px;
      background:
        radial-gradient(circle at 85% 20%, rgba(232,180,79,.16), transparent 30%),
        rgba(255,255,255,.035);
    }

    .cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 12px; }
    .cta p { color: var(--muted); }
    .signup {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    .signup input {
      width: 100%;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: rgba(0,0,0,.25);
      color: var(--text);
    }

    footer {
      padding: 35px 0 45px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      margin-top: 70px;
    }

    .footer-flex {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }

    @media (max-width: 980px) {
      .hero, .lab, .cta { grid-template-columns: 1fr; }
      .hero { min-height: auto; padding: 52px 0 42px; gap: 34px; }
      .hero-visual { min-height: 500px; }
      .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nav-links a:not(.button) { display: none; }
      .compare-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .container { width: calc(100% - 24px); }
      .topbar { position: relative; padding-top: env(safe-area-inset-top); }
      .nav { min-height: 64px; gap: 10px; }
      .brand { gap: 8px; font-size: .92rem; }
      .brand-mark { width: 36px; height: 36px; font-size: .75rem; }
      .nav-links { gap: 8px; }
      .nav-links .button { min-height: 42px; padding: 10px 13px; font-size: .82rem; white-space: nowrap; }
      section { padding: 52px 0; }
      .hero { padding-top: 34px; gap: 28px; }
      .eyebrow { font-size: .72rem; letter-spacing: .08em; padding: 7px 9px; }
      h1 { font-size: clamp(2.55rem, 13vw, 4rem); letter-spacing: -.045em; margin-bottom: 18px; }
      .hero p { font-size: 1rem; line-height: 1.65; margin-bottom: 24px; }
      .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; }
      .hero-actions .button { width: 100%; }
      .hero-points { grid-template-columns: 1fr; gap: 9px; }
      .mini-stat { padding: 13px 14px; }
      .hero-visual { min-height: 390px; border-radius: 22px; }
      .silhouette { left: 10%; width: 66%; }
      .visual-caption { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
      .visual-caption h3 { font-size: 1.05rem; }
      .section-head { margin-bottom: 24px; }
      .section-head h2 { font-size: clamp(2rem, 10vw, 2.8rem); }
      .section-head p { font-size: .96rem; }
      .lesson-grid { grid-template-columns: 1fr; gap: 12px; }
      .lesson-card { min-height: 0; padding: 18px; }
      .lesson-number { margin-bottom: 18px; }
      .lesson-card h3 { font-size: 1.12rem; }
      .control-panel, .diagram-panel { padding: 16px; border-radius: 18px; }
      .control-panel h3 { font-size: 1.35rem; }
      .control-group label { font-size: .93rem; }
      .preset-buttons { grid-template-columns: 1fr; gap: 8px; }
      .preset { min-height: 48px; }
      .diagram-stage { min-height: 330px; }
      .diagram-subject { width: 58%; height: 74%; }
      .compare-visual { height: 220px; }
      .compare-body { padding: 18px; }
      .quiz { padding: 20px 16px; }
      .quiz h2 { font-size: 1.55rem; }
      .quiz-option { min-height: 52px; }
      .cta { padding: 22px 16px; border-radius: 20px; }
      .cta h2 { font-size: 2rem; }
      .signup input { min-height: 50px; font-size: 16px; }
      footer { margin-top: 36px; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
      .footer-flex { flex-direction: column; }
    }

    @media (max-width: 390px) {
      .container { width: calc(100% - 18px); }
      .brand span:last-child { max-width: 145px; line-height: 1.1; }
      .nav-links .button { padding: 9px 10px; font-size: .76rem; }
      h1 { font-size: 2.45rem; }
      .hero-visual { min-height: 340px; }
      .diagram-stage { min-height: 290px; }
    }
  
    .real-photo-hero {
      background: #07090d;
      isolation: isolate;
    }

    .real-photo-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 55% center;
      z-index: 0;
      transform: scale(1.025);
      animation: heroDrift 12s ease-in-out infinite alternate;
    }

    .hero-photo-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 45%, rgba(0,0,0,.78)),
        linear-gradient(90deg, rgba(0,0,0,.18), transparent 55%);
    }

    .real-photo-hero .visual-caption {
      z-index: 2;
    }

    .real-photo-hero .visual-caption p {
      margin: 5px 0 0;
      color: rgba(255,255,255,.78);
      font-size: .95rem;
    }

    @keyframes heroDrift {
      from { transform: scale(1.025) translate3d(0,0,0); }
      to { transform: scale(1.075) translate3d(-1.5%, -1%, 0); }
    }

    .launch-screen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #050608;
      color: white;
      opacity: 1;
      visibility: visible;
      transition: opacity .9s ease, visibility .9s ease;
    }

    .launch-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .launch-background {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .38;
      filter: saturate(.8) contrast(1.08);
      transform: scale(1.06);
    }

    .launch-shade {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at center, rgba(0,0,0,.12), rgba(0,0,0,.82)),
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.82));
    }

    .launch-copy {
      position: relative;
      z-index: 2;
      width: min(760px, 100%);
      text-align: center;
    }

    .launch-brand,
    .launch-intro,
    .launch-title,
    .launch-subtitle,
    .launch-enter {
      opacity: 0;
      transform: translateY(16px);
      animation: launchReveal .85s ease forwards;
    }

    .launch-brand {
      color: var(--gold);
      font-size: .82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .22em;
      animation-delay: .2s;
    }

    .launch-intro {
      margin-top: 18px;
      font-size: clamp(1.15rem, 4vw, 1.8rem);
      color: rgba(255,255,255,.8);
      animation-delay: .8s;
    }

    .launch-title {
      margin: 10px 0 14px;
      font-size: clamp(3rem, 10vw, 7rem);
      line-height: .96;
      letter-spacing: -.055em;
      animation-delay: 1.35s;
    }

    .launch-title span {
      background: linear-gradient(90deg, #f2bb55, #fff1bb 45%, #79b9ff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .launch-subtitle {
      max-width: 560px;
      margin: 0 auto 26px;
      color: rgba(255,255,255,.74);
      animation-delay: 1.9s;
    }

    .launch-enter {
      min-width: 190px;
      animation-delay: 2.35s;
    }

    @keyframes launchReveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .75s ease, transform .75s ease;
    }

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

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

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

      .launch-title {
        font-size: clamp(2.75rem, 15vw, 4.4rem);
      }

      .launch-subtitle {
        font-size: .95rem;
      }

      .real-photo-hero img {
        object-position: 62% center;
      }
    }


/* Version 1.1 additions */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.launch-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.button-ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.35)}
.menu-button{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.05);padding:11px;cursor:pointer}
.menu-button>span:not(.sr-only){display:block;height:2px;background:var(--text);margin:5px 0;border-radius:2px}
.progress-section{padding:30px 0 66px}
.progress-dashboard{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(135deg,rgba(232,180,79,.08),rgba(103,173,255,.06))}
.progress-dashboard h2{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.04em;margin:14px 0 10px}
.progress-dashboard p{color:var(--muted);margin:0}
.progress-summary{display:flex;align-items:center;gap:18px;min-width:280px}
.progress-summary small{display:block;color:var(--muted)}
.progress-ring{--progress:0deg;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) var(--progress),rgba(255,255,255,.08) 0);position:relative;flex:0 0 auto}
.progress-ring:before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel)}
.progress-ring span{position:relative;font-size:1.25rem;font-weight:900}
.badge-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.badge-card{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);transition:.25s ease}
.badge-card.locked{opacity:.45;filter:grayscale(1)}
.badge-card.unlocked{border-color:rgba(232,180,79,.65);background:rgba(232,180,79,.08);opacity:1;filter:none}
.badge-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(232,180,79,.14);color:var(--gold);font-weight:900}
.badge-card strong,.badge-card small{display:block}.badge-card small{color:var(--muted)}
.lesson-card{position:relative}
.lesson-status{position:absolute!important;right:14px;top:14px!important;width:30px!important;height:30px!important;margin:0!important;background:rgba(108,215,147,.14)!important;color:#8fe5ae!important;opacity:0;transform:scale(.7);transition:.2s ease}
.lesson-card.completed .lesson-status{opacity:1;transform:scale(1)}
.instructor-callout{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-bottom:20px;padding:20px;border:1px solid rgba(232,180,79,.28);border-radius:18px;background:rgba(232,180,79,.06)}
.instructor-avatar{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--gold),#fff0b7);color:#111;font-weight:900;box-shadow:0 0 0 6px rgba(232,180,79,.08)}
.instructor-callout span{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.instructor-callout blockquote{margin:5px 0 0;font-size:1.08rem}
.comparison-tool{display:grid;gap:18px}
.comparison-frame{position:relative;min-height:520px;overflow:hidden;border-radius:26px;border:1px solid var(--line);background:#111;touch-action:none}
.comparison-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparison-base{filter:brightness(1.05) contrast(.82) saturate(.88)}
.comparison-overlay{position:absolute;inset:0 50% 0 0;overflow:hidden}
.comparison-overlay img{width:100vw;max-width:none;filter:brightness(.9) contrast(1.45) saturate(1.04)}
.comparison-divider{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#fff;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 16px rgba(0,0,0,.55)}
.comparison-divider span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:#111;font-weight:900}
.comparison-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}
.comparison-label{position:absolute;top:16px;padding:8px 11px;border-radius:999px;background:rgba(7,9,13,.74);border:1px solid var(--line);font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.comparison-label-left{left:16px}.comparison-label-right{right:16px}
.comparison-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.comparison-notes article{padding:17px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}
.comparison-notes p{color:var(--muted);margin:5px 0 0}
.quiz-celebration{display:flex;align-items:center;gap:12px;margin:18px 0;padding:16px;border:1px solid rgba(232,180,79,.4);border-radius:16px;background:rgba(232,180,79,.09)}
.quiz-celebration>span{font-size:2rem}.quiz-celebration strong,.quiz-celebration small{display:block}.quiz-celebration small{color:var(--muted)}
@media(max-width:900px){
  .menu-button{display:block}
  .nav nav{position:absolute;left:16px;right:16px;top:64px;display:none!important;flex-direction:column;gap:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(10,13,19,.98);box-shadow:0 18px 40px rgba(0,0,0,.38)}
  .nav nav.open{display:flex!important}
  .nav nav a{display:block!important;padding:12px;border-radius:10px}
  .nav nav a:hover{background:rgba(255,255,255,.06)}
  .progress-dashboard{grid-template-columns:1fr}
  .progress-summary{min-width:0}
}
@media(max-width:640px){
  .launch-actions{display:grid}
  .badge-row,.comparison-notes{grid-template-columns:1fr}
  .progress-dashboard{padding:20px 16px}
  .progress-summary{align-items:flex-start}
  .progress-ring{width:88px;height:88px}
  .instructor-callout{grid-template-columns:1fr;text-align:center}
  .instructor-avatar{margin:auto}
  .comparison-frame{min-height:360px}
}

.course-link{display:inline-flex;margin-top:12px;color:var(--gold);font-weight:800;text-decoration:none}.course-link:hover{text-decoration:underline}.featured-session{padding:78px 0;background:#080d15}.featured-session-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}.featured-session-grid img{width:100%;border-radius:24px;border:1px solid var(--line)}.featured-session-grid h2{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1;letter-spacing:-.05em;margin:14px 0}.featured-session-grid p{color:var(--muted)}@media(max-width:800px){.featured-session-grid{grid-template-columns:1fr}}

.featured-session-image{position:relative;display:block;text-decoration:none;color:var(--text)}
.featured-session-image img{transition:transform .25s ease,border-color .25s ease}
.featured-session-image:hover img{transform:translateY(-4px);border-color:rgba(232,180,79,.75)}
.featured-session-image span{position:absolute;left:16px;bottom:16px;padding:10px 13px;border-radius:999px;background:rgba(7,10,15,.82);border:1px solid rgba(232,180,79,.45);color:var(--gold);font-weight:900;backdrop-filter:blur(10px)}
/* =========================================
   LESSON 008 — ENVIRONMENTAL LIGHTING
   ========================================= */

.lesson-card-board-c{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(242,181,68,.38);
  background:
    linear-gradient(135deg, rgba(242,181,68,.08), rgba(255,255,255,.02)),
    #10161d;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.lesson-card-board-c::before{
  content: "";
  position: absolute;
  top: 0;
  left: -45%;
  width: 35%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,220,140,.18),
    transparent
  );
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}

.lesson-card-board-c:hover{
  transform: translateY(-6px);
  border-color: rgba(242,181,68,.85);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.lesson-card-board-c:hover::before{
  left: 120%;
}

.lesson-card-board-c .lesson-number{
  color: #f2b544;
}

.lesson-card-board-c h3{
  color: #ffffff;
}

.lesson-card-board-c .course-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #f2b544;
  font-weight: 800;
  text-decoration: none;
}

.lesson-card-board-c .course-link:hover{
  color: #ffffff;
}

.lesson-card-board-c .course-link::after{
  content: "✈";
  transition: transform .2s ease;
}

.lesson-card-board-c .course-link:hover::after{
  transform: translateX(5px);
}/* =========================================
   LESSON 008 — FEATURED FLIGHTLINE CARD
   ========================================= */

.lesson-card-board-c{
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: 0;
  border: 1px solid rgba(242,181,68,.45);
  border-radius: 22px;
  background: #0e141b;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
}

.lesson-card-board-c::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(5,8,12,.10) 0%,
      rgba(5,8,12,.30) 42%,
      rgba(5,8,12,.92) 78%
    );
  z-index: 2;
  pointer-events: none;
}

.lesson-card-board-c::after{
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 28%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,222,150,.20),
    transparent
  );
  transform: skewX(-18deg);
  transition: left .55s ease;
  z-index: 4;
  pointer-events: none;
}

.lesson-card-board-c:hover::after{
  left: 120%;
}

.lesson-card-board-c:hover{
  transform: translateY(-5px);
  border-color: rgba(242,181,68,.95);
}

.lesson-card-board-c .flightline-preview{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 1;
}

.lesson-card-board-c .flightline-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-card-board-c .flightline-preview img:first-child{
  object-position: center;
  border-right: 2px solid rgba(242,181,68,.50);
}

.lesson-card-board-c .lesson-card-content{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 28px;
}

.lesson-card-board-c .lesson-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: rgba(242,181,68,.96);
  color: #0b1016;
  font-weight: 900;
  letter-spacing: .05em;
}

.lesson-card-board-c .lesson-kicker{
  margin-bottom: 5px;
  color: #f2b544;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lesson-card-board-c h3{
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.05;
}

.lesson-card-board-c p{
  max-width: 680px;
  margin: 0;
  color: rgba(255,255,255,.82);
  line-height: 1.55;
}

.lesson-card-board-c .lesson-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.lesson-card-board-c .lesson-tags span{
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.88);
  font-size: .72rem;
  backdrop-filter: blur(6px);
}

.lesson-card-board-c .course-link{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 18px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #f2b544;
  color: #0b1016;
  font-weight: 900;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.lesson-card-board-c .course-link:hover{
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(242,181,68,.25);
}

@media (max-width: 700px){
  .lesson-card-board-c{
    min-height: 430px;
  }

  .lesson-card-board-c .flightline-preview{
    grid-template-columns: 1fr;
  }

  .lesson-card-board-c .flightline-preview img:nth-child(2){
    display: none;
  }

  .lesson-card-board-c .lesson-card-content{
    min-height: 430px;
    padding: 22px;
  }
}/* =========================================
   LESSON 008 — FEATURED FLIGHTLINE CARD
   ========================================= */

/* =========================================
   LESSON 008 — FLIGHTLINE FEATURE CARD
   ========================================= */

.lesson-card-board-c{
  position: relative;
  overflow: hidden;
  min-height: 520px;
  padding: 0;
  border: 1px solid rgba(242,181,68,.85);
  border-radius: 24px;
  background: #080d13;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.lesson-card-board-c:hover{
  transform: translateY(-5px);
  border-color: #f2b544;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}


/* THE TWO REAL PHOTOGRAPHS */

.lesson-card-board-c .flightline-preview{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 1;
}

.lesson-card-board-c .flightline-preview img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-card-board-c .flightline-preview img:first-child{
  border-right: 2px solid rgba(242,181,68,.55);
}


/* DARK GRADIENT THAT SOLVES THE READABILITY PROBLEM */

.lesson-card-board-c .lesson-card-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    linear-gradient(
      90deg,
      rgba(4,8,12,.78) 0%,
      rgba(4,8,12,.60) 40%,
      rgba(4,8,12,.30) 62%,
      rgba(4,8,12,.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,.18) 38%,
      rgba(0,0,0,.78) 100%
    );

  pointer-events: none;
}


/* CONTENT */

.lesson-card-board-c .lesson-card-content{
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 520px;
  padding: 34px;

  max-width: 760px;
}


/* 008 BADGE */

.lesson-card-board-c .lesson-number{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;

  margin-bottom: 16px;

  border-radius: 50%;

  background: #f2b544;
  color: #080d13;

  font-weight: 900;
  font-size: 1.05rem;

  box-shadow: 0 8px 25px rgba(0,0,0,.35);
}


/* FLIGHTLINE LABEL */

.lesson-card-board-c .lesson-kicker{
  color: #f2b544;

  font-size: .82rem;
  font-weight: 900;

  letter-spacing: .14em;
  text-transform: uppercase;

  margin-bottom: 8px;
}


/* HEADLINE */

.lesson-card-board-c h3{
  margin: 0 0 14px;

  color: #ffffff;

  font-size: clamp(2rem,4vw,3.6rem);
  line-height: .98;

  max-width: 680px;

  text-shadow:
    0 3px 12px rgba(0,0,0,.65);
}


/* DESCRIPTION — NOW READABLE */

.lesson-card-board-c .lesson-description{
  max-width: 620px;

  margin: 0;

  color: #ffffff;

  font-size: 1rem;
  line-height: 1.6;

  text-shadow:
    0 2px 6px rgba(0,0,0,.95),
    0 0 16px rgba(0,0,0,.75);
}


/* TAGS */

.lesson-card-board-c .lesson-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;

  margin-top: 18px;
}

.lesson-card-board-c .lesson-tags span{
  padding: 8px 12px;

  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;

  background: rgba(5,8,12,.68);

  color: #ffffff;

  font-size: .76rem;

  backdrop-filter: blur(7px);
}


/* BUTTON */

.lesson-card-board-c .course-link{
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-top: 20px;
  padding: 13px 20px;

  border-radius: 999px;

  background: #f2b544;

  color: #080d13;

  font-weight: 900;
  text-decoration: none;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.lesson-card-board-c .course-link:hover{
  transform: translateX(5px);

  box-shadow:
    0 10px 28px rgba(242,181,68,.30);
}


/* FAST LIGHT SWEEP */

.lesson-card-board-c::after{
  content: "";

  position: absolute;
  top: 0;
  left: -45%;

  width: 26%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,225,160,.15),
      transparent
    );

  transform: skewX(-18deg);

  z-index: 4;

  pointer-events: none;

  transition: left .55s ease;
}

.lesson-card-board-c:hover::after{
  left: 120%;
}


/* MOBILE */

@media (max-width:700px){

  .lesson-card-board-c{
    min-height: 540px;
  }

  .lesson-card-board-c .flightline-preview{
    grid-template-columns: 1fr 1fr;
  }

  .lesson-card-board-c .lesson-card-content{
    min-height: 540px;
    padding: 26px 22px;
  }

  .lesson-card-board-c h3{
    font-size: clamp(2rem,10vw,3rem);
  }

  .lesson-card-board-c .lesson-description{
    font-size: .95rem;
  }

  .lesson-card-board-c .lesson-card-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(5,8,12,.18) 0%,
        rgba(5,8,12,.50) 38%,
        rgba(5,8,12,.92) 78%
      );
  }
}
}