/* ========================================
       Design Tokens
       ======================================== */
    :root {
      --navy:        #243142;
      --orange:      #F26522;
      --teal:        #18B394;
      --yellow:      #F2B705;
      --offwhite:    #F7F7F7;
      --white:       #FFFFFF;
      --slate:       #6B7280;
      --border:      #E5EAF0;
      --soft-teal:   #E8F8F5;
      --soft-orange: #FFF1EA;
      --soft-yellow: #FFF8DA;
      --soft-purple: #EEF2FF;
      --shadow-soft:   0 16px 50px rgba(36,49,66,0.08);
      --shadow-strong: 0 30px 90px rgba(36,49,66,0.14);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --max-width: 1180px;
    }

    /* Animatable custom property for score ring */
    @property --ring-pct {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: false;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Manrope", "Noto Sans Devanagari", system-ui, sans-serif;
      background: var(--offwhite);
      color: var(--navy);
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }

    .container {
      width: min(var(--max-width), calc(100% - 40px));
      margin-inline: auto;
    }

    /* ========================================
       Announcement Bar
       ======================================== */
    .announce-bar {
      background: var(--navy);
      color: rgba(255,255,255,0.9);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 0;
      text-align: center;
    }

    .announce-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .announce-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--yellow);
      flex-shrink: 0;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }

    .announce-link {
      color: var(--yellow);
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
    }

    /* ========================================
       Logo
       ======================================== */
    .logo {
      display: inline-flex;
      align-items: center;
    }

    .logo img {
      display: block;
      height: 44px;
      width: auto;
    }

    /* ========================================
       Header
       ======================================== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(247,247,247,0.88);
      border-bottom: 1px solid rgba(229,234,240,0.86);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    /* Desktop nav */
    .site-nav {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nav-link,
    .drop-button {
      border: 0;
      background: transparent;
      padding: 10px 12px;
      border-radius: 14px;
      font-size: 14px;
      font-weight: 700;
      color: rgba(36,49,66,0.68);
      transition: 0.18s ease;
      white-space: nowrap;
    }

    .nav-link:hover,
    .drop:hover .drop-button,
    .drop.open .drop-button {
      color: var(--navy);
      background: var(--white);
      box-shadow: 0 6px 18px rgba(36,49,66,0.06);
    }

    .nav-link.hindi-link {
      font-family: "Noto Sans Devanagari", sans-serif;
      font-size: 15px;
      color: var(--teal);
    }

    .nav-link.hindi-link:hover {
      color: var(--teal);
    }

    /* Dropdown */
    .drop { position: relative; }

    .drop-menu {
      position: absolute;
      left: 0;
      top: calc(100% + 12px);
      width: 288px;
      padding: 8px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 26px;
      box-shadow: 0 24px 70px rgba(36,49,66,0.14);
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      transition: 0.18s ease;
    }

    .drop:hover .drop-menu,
    .drop.open .drop-menu {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .drop-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      padding: 12px;
      border-radius: 18px;
      transition: 0.18s ease;
    }

    .drop-item:hover { background: var(--offwhite); }

    .drop-icon {
      width: 36px; height: 36px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: 17px;
      flex: none;
    }

    .drop-item strong {
      display: block;
      font-size: 14px;
      letter-spacing: -0.02em;
    }

    .drop-item .drop-desc {
      display: block;
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.45;
      color: rgba(36,49,66,0.56);
    }

    /* Header actions */
    .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn {
      border: 0;
      border-radius: 14px;
      padding: 13px 18px;
      font-size: 14px;
      font-weight: 800;
      transition: 0.18s ease;
      white-space: nowrap;
    }

    .btn-ghost {
      background: transparent;
      color: rgba(36,49,66,0.68);
    }

    .btn-secondary {
      background: var(--white);
      color: var(--navy);
      border: 1px solid var(--border);
      box-shadow: 0 4px 14px rgba(36,49,66,0.04);
    }

    .btn-primary {
      background: var(--orange);
      color: var(--white);
      box-shadow: 0 8px 24px rgba(242,101,34,0.28);
    }

    .btn-primary:hover,
    .btn-secondary:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(242,101,34,0.36);
    }

    .btn-secondary:hover {
      box-shadow: 0 8px 24px rgba(36,49,66,0.10);
    }

    /* Hamburger */
    .hamburger-btn {
      display: none;
      border: 0;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      width: 44px; height: 44px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0;
      transition: 0.18s ease;
    }

    .hamburger-btn span {
      display: block;
      width: 20px; height: 2px;
      background: var(--navy);
      border-radius: 2px;
      transition: 0.22s ease;
    }

    .hamburger-btn.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }
    .hamburger-btn.open span:nth-child(2) {
      opacity: 0; transform: scaleX(0);
    }
    .hamburger-btn.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      flex-direction: column;
      background: var(--white);
      border-top: 1px solid var(--border);
      padding: 16px 0 20px;
      gap: 2px;
    }

    .mobile-menu.open { display: flex; }

    .mob-link {
      display: block;
      padding: 13px 20px;
      font-size: 15px;
      font-weight: 700;
      color: var(--navy);
      border-radius: 0;
      transition: 0.14s ease;
    }

    .mob-link:hover { background: var(--offwhite); }

    .mob-link.hindi { font-family: "Noto Sans Devanagari", sans-serif; color: var(--teal); }

    .mob-divider {
      height: 1px;
      background: var(--border);
      margin: 10px 20px;
    }

    .mob-actions {
      display: flex;
      gap: 10px;
      padding: 6px 20px 0;
    }

    .mob-actions .btn { flex: 1; text-align: center; border-radius: 14px; }

    /* ========================================
       Hero
       ======================================== */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 88px 0 74px;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 22%, rgba(24,179,148,0.16), transparent 30%),
        radial-gradient(circle at 82% 16%, rgba(242,101,34,0.12), transparent 30%),
        radial-gradient(circle at 72% 84%, rgba(242,183,5,0.14), transparent 32%);
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.32;
      background-image:
        linear-gradient(#E2E8F0 1px, transparent 1px),
        linear-gradient(90deg, #E2E8F0 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, black, transparent 84%);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 54px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,255,255,0.76);
      border: 1px solid var(--border);
      box-shadow: 0 6px 20px rgba(36,49,66,0.05);
      padding: 9px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      color: rgba(36,49,66,0.74);
    }

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

    h1 {
      margin: 26px 0 0;
      font-size: clamp(40px, 5.6vw, 68px);
      line-height: 1.03;
      letter-spacing: -0.065em;
    }

    .hindi-line {
      margin: 20px 0 0;
      font-family: "Noto Sans Devanagari", "Manrope", sans-serif;
      font-size: clamp(22px, 2.8vw, 32px);
      line-height: 1.35;
      font-weight: 800;
      color: var(--teal);
      letter-spacing: -0.02em;
    }

    .hero-copy {
      margin: 20px 0 0;
      max-width: 560px;
      font-size: 17px;
      line-height: 1.8;
      color: rgba(36,49,66,0.64);
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .hero-actions .btn {
      padding: 16px 24px;
      border-radius: 18px;
      font-size: 15px;
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 34px;
    }

    .metric {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: rgba(255,255,255,0.74);
      box-shadow: 0 6px 20px rgba(36,49,66,0.04);
    }

    .metric span {
      display: block;
      font-size: 11px;
      color: rgba(36,49,66,0.52);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .metric strong {
      display: block;
      margin-top: 6px;
      font-size: 26px;
      letter-spacing: -0.05em;
    }

    /* ========================================
       Dashboard Card
       ======================================== */
    .dashboard-card {
      position: relative;
      overflow: hidden;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 24px;
      box-shadow: var(--shadow-strong);
    }

    .dashboard-card::before {
      content: "";
      position: absolute;
      right: -80px; top: -90px;
      width: 240px; height: 240px;
      background: rgba(24,179,148,0.18);
      border-radius: 999px;
      filter: blur(44px);
    }

    .dash-top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: start;
      gap: 18px;
      margin-bottom: 18px;
    }

    .dash-top h3 { margin: 0; font-size: 21px; letter-spacing: -0.04em; }
    .dash-top p  { margin: 5px 0 0; font-size: 13px; color: rgba(36,49,66,0.55); }

    /* Animated score ring */
    .score-ring {
      --ring-pct: 0%;
      width: 88px; height: 88px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--teal) 0 var(--ring-pct), #EDF2F7 var(--ring-pct) 100%);
      flex: none;
      animation: ring-grow 1.6s cubic-bezier(.4,0,.2,1) 0.5s forwards;
    }

    @keyframes ring-grow {
      to { --ring-pct: 72%; }
    }

    .score-ring span {
      width: 66px; height: 66px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--white);
      font-size: 19px;
      font-weight: 800;
      color: var(--navy);
    }

    .paper-card {
      position: relative;
      border-radius: 24px;
      background: var(--navy);
      color: var(--white);
      padding: 20px;
      margin-top: 16px;
      overflow: hidden;
    }

    .paper-card::after {
      content: "";
      position: absolute;
      right: -30px; top: -60px;
      width: 150px; height: 150px;
      background: rgba(242,183,5,0.18);
      border-radius: 999px;
      filter: blur(20px);
    }

    .paper-card small { color: rgba(255,255,255,0.58); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
    .paper-card h4 { position: relative; margin: 8px 0 0; font-size: 18px; letter-spacing: -0.035em; line-height: 1.3; }

    .progress-row {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      margin-top: 18px;
    }

    .progress-box {
      border-radius: 16px;
      background: rgba(255,255,255,0.09);
      padding: 12px;
      border: 1px solid rgba(255,255,255,0.10);
    }

    .progress-box span { display: block; font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
    .progress-box strong { font-size: 17px; }

    .subject-list { display: grid; gap: 10px; margin-top: 16px; }

    .subject-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 13px 14px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--offwhite);
    }

    .subject-left { display: flex; align-items: center; gap: 11px; }

    .subject-icon {
      width: 36px; height: 36px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      font-size: 16px;
      flex: none;
    }

    .subject-item strong { display: block; font-size: 13px; }
    .subject-item small  { display: block; margin-top: 2px; font-size: 12px; color: rgba(36,49,66,0.52); }

    .pill {
      border-radius: 999px;
      padding: 5px 10px;
      background: #fff;
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 800;
      color: rgba(36,49,66,0.7);
      flex-shrink: 0;
    }

    /* ========================================
       Sections — shared
       ======================================== */
    section { padding: 72px 0; }

    .section-head {
      display: flex;
      justify-content: space-between;
      gap: 28px;
      align-items: end;
      margin-bottom: 40px;
    }

    .kicker {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 12px;
      font-weight: 800;
      color: var(--orange);
    }

    .kicker.teal  { color: var(--teal); }
    .kicker.yellow{ color: var(--yellow); }

    .section-head h2 {
      margin: 10px 0 0;
      max-width: 660px;
      font-size: clamp(32px, 4vw, 44px);
      line-height: 1.08;
      letter-spacing: -0.055em;
    }

    .section-head p {
      max-width: 420px;
      margin: 0;
      font-size: 14px;
      line-height: 1.78;
      color: rgba(36,49,66,0.60);
    }

    /* ========================================
       How it works
       ======================================== */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      position: relative;
    }

    .steps-grid::before {
      content: "";
      position: absolute;
      top: 36px;
      left: calc(33.33% - 10px);
      right: calc(33.33% - 10px);
      height: 2px;
      background: linear-gradient(90deg, var(--teal), var(--orange));
      border-radius: 2px;
    }

    .step-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 28px 24px;
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .step-number {
      width: 48px; height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 20px;
      color: var(--white);
    }

    .step-card:nth-child(1) .step-number { background: var(--teal); }
    .step-card:nth-child(2) .step-number { background: var(--orange); }
    .step-card:nth-child(3) .step-number { background: var(--navy); }

    .step-card h3 {
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.035em;
    }

    .step-card p {
      margin: 10px 0 0;
      font-size: 14px;
      line-height: 1.75;
      color: rgba(36,49,66,0.62);
    }

    /* ========================================
       Features
       ======================================== */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .feature-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 26px;
      padding: 24px;
      box-shadow: var(--shadow-soft);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-strong);
    }

    .feature-icon {
      width: 48px; height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      margin-bottom: 18px;
      font-size: 22px;
    }

    .feature-card h3 { margin: 0; font-size: 17px; letter-spacing: -0.03em; }
    .feature-card p  { margin: 10px 0 0; font-size: 13px; line-height: 1.75; color: rgba(36,49,66,0.62); }

    /* ========================================
       Courses
       ======================================== */
    .course-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .course-card {
      position: relative;
      overflow: hidden;
      padding: 26px;
      border-radius: 28px;
      background: var(--white);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease;
    }

    .course-card:hover { transform: translateY(-3px); }

    .course-card::before {
      content: "";
      position: absolute;
      width: 160px; height: 160px;
      right: -60px; top: -70px;
      border-radius: 999px;
      background: var(--soft-teal);
    }

    .course-card.orange::before { background: var(--soft-orange); }
    .course-card.yellow::before { background: var(--soft-yellow); }

    .course-badge {
      position: relative;
      align-self: flex-start;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      background: var(--white);
      color: rgba(36,49,66,0.68);
    }

    .course-card h3 {
      position: relative;
      margin: 0;
      font-size: 26px;
      letter-spacing: -0.05em;
    }

    .course-card > p {
      position: relative;
      color: rgba(36,49,66,0.62);
      line-height: 1.72;
      font-size: 14px;
      margin: 10px 0 0;
    }

    .course-details {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 18px;
    }

    .course-detail-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 10px 12px;
      background: var(--offwhite);
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    .course-detail-item .detail-label {
      font-size: 11px;
      font-weight: 700;
      color: rgba(36,49,66,0.50);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .course-detail-item .detail-val {
      font-size: 13px;
      font-weight: 800;
      color: var(--navy);
    }

    .course-meta {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-top: 14px;
    }

    .course-meta span {
      padding: 6px 11px;
      border-radius: 999px;
      background: var(--offwhite);
      border: 1px solid var(--border);
      font-size: 12px;
      font-weight: 800;
      color: rgba(36,49,66,0.68);
    }

    .course-cta {
      position: relative;
      margin-top: 22px;
      display: inline-block;
      padding: 13px 18px;
      background: var(--navy);
      color: var(--white);
      border-radius: 14px;
      font-size: 14px;
      font-weight: 800;
      transition: 0.18s ease;
      text-align: center;
    }

    .course-cta:hover { background: var(--teal); }

    /* ========================================
       Testimonials
       ======================================== */
    .testimonials-section { background: var(--white); }

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

    .testi-card {
      background: var(--offwhite);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .testi-quote {
      font-size: 15px;
      line-height: 1.78;
      color: rgba(36,49,66,0.84);
      font-weight: 500;
      flex: 1;
    }

    .testi-quote::before {
      content: """;
      display: block;
      font-size: 52px;
      line-height: 1;
      font-weight: 800;
      color: var(--teal);
      margin-bottom: 10px;
      letter-spacing: -0.05em;
    }

    .testi-footer {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .testi-avatar {
      width: 46px; height: 46px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 18px;
      flex-shrink: 0;
    }

    .testi-name { font-size: 14px; font-weight: 800; }
    .testi-detail {
      font-size: 12px;
      color: rgba(36,49,66,0.55);
      margin-top: 3px;
    }

    .testi-result {
      margin-left: auto;
      padding: 5px 11px;
      background: var(--soft-teal);
      border: 1px solid rgba(24,179,148,0.22);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      color: var(--teal);
      white-space: nowrap;
    }

    /* ========================================
       Bilingual Section
       ======================================== */
    .bilingual {
      background: var(--navy);
      color: white;
      border-radius: var(--radius-xl);
      padding: 42px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      align-items: center;
      box-shadow: var(--shadow-strong);
    }

    .bilingual h2 {
      margin: 10px 0 0;
      font-size: clamp(30px, 3.8vw, 44px);
      line-height: 1.08;
      letter-spacing: -0.055em;
    }

    .bilingual p {
      color: rgba(255,255,255,0.68);
      line-height: 1.78;
      margin-top: 14px;
      font-size: 15px;
    }

    .bilingual-bullets {
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .bilingual-bullets li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: rgba(255,255,255,0.80);
      font-weight: 600;
    }

    .bilingual-bullets li::before {
      content: "✓";
      width: 22px; height: 22px;
      border-radius: 8px;
      background: rgba(24,179,148,0.22);
      color: var(--teal);
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 900;
      flex-shrink: 0;
    }

    .hindi-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 26px;
      padding: 30px;
    }

    .hindi-card h3 {
      margin: 0;
      font-family: "Noto Sans Devanagari", sans-serif;
      font-size: clamp(22px, 3vw, 30px);
      line-height: 1.4;
      color: var(--yellow);
    }

    .hindi-card p {
      color: rgba(255,255,255,0.72);
      font-size: 14px;
      line-height: 1.75;
      margin: 14px 0 0;
    }

    .hindi-card .btn-primary {
      display: inline-block;
      margin-top: 22px;
    }

    /* ========================================
       Pricing
       ======================================== */
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      max-width: 780px;
      margin: 0 auto;
    }

    .pricing-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 28px;
      padding: 32px 28px;
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .pricing-card.pro {
      background: var(--navy);
      color: var(--white);
      border-color: transparent;
      box-shadow: var(--shadow-strong);
    }

    .pricing-badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 18px;
      background: var(--soft-teal);
      color: var(--teal);
    }

    .pricing-card.pro .pricing-badge {
      background: rgba(242,183,5,0.18);
      color: var(--yellow);
    }

    .pricing-price {
      font-size: 46px;
      font-weight: 800;
      letter-spacing: -0.06em;
      line-height: 1;
    }

    .pricing-price sup {
      font-size: 22px;
      vertical-align: super;
      letter-spacing: 0;
    }

    .pricing-price sub {
      font-size: 16px;
      letter-spacing: 0;
      font-weight: 600;
      opacity: 0.7;
    }

    .pricing-card.pro .pricing-period {
      color: rgba(255,255,255,0.60);
    }

    .pricing-period {
      font-size: 13px;
      color: rgba(36,49,66,0.55);
      margin-top: 6px;
    }

    .pricing-divider {
      height: 1px;
      background: var(--border);
      margin: 22px 0;
    }

    .pricing-card.pro .pricing-divider {
      background: rgba(255,255,255,0.12);
    }

    .pricing-features {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 11px;
    }

    .pricing-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
    }

    .pricing-features li .check {
      width: 20px; height: 20px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      font-size: 11px;
      font-weight: 900;
      flex-shrink: 0;
      background: var(--soft-teal);
      color: var(--teal);
    }

    .pricing-card.pro .pricing-features li .check {
      background: rgba(24,179,148,0.22);
    }

    .pricing-card.pro .pricing-features li {
      color: rgba(255,255,255,0.85);
    }

    .pricing-cta {
      display: block;
      margin-top: 26px;
      text-align: center;
      padding: 15px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 800;
      transition: 0.18s ease;
    }

    .pricing-cta.free-cta {
      background: var(--offwhite);
      border: 1px solid var(--border);
      color: var(--navy);
    }

    .pricing-cta.free-cta:hover {
      background: var(--border);
    }

    .pricing-cta.pro-cta {
      background: var(--orange);
      color: var(--white);
      box-shadow: 0 8px 24px rgba(242,101,34,0.30);
    }

    .pricing-cta.pro-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(242,101,34,0.40);
    }

    .pro-tag {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--orange);
      color: white;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    /* ========================================
       Footer
       ======================================== */
    .site-footer {
      margin-top: 56px;
      background: var(--navy);
      color: var(--white);
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.35fr 0.8fr 0.8fr 0.85fr;
      gap: 42px;
      padding: 56px 0;
    }

    .footer-logo-wrap {
      display: inline-flex;
      background: var(--white);
      border-radius: 18px;
      padding: 12px;
    }

    .footer-about {
      margin-top: 20px;
      max-width: 360px;
      font-size: 14px;
      line-height: 1.78;
      color: rgba(255,255,255,0.58);
    }

    .footer-chip {
      margin-top: 22px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.05);
      border-radius: 999px;
      padding: 9px 14px;
      font-size: 12px;
      font-weight: 800;
      color: rgba(255,255,255,0.68);
    }

    .footer-col h4 { margin: 0 0 16px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); }

    .footer-col a {
      display: block;
      margin-bottom: 12px;
      font-size: 14px;
      color: rgba(255,255,255,0.62);
      transition: 0.18s ease;
    }

    .footer-col a:hover { color: white; }

    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.10); }

    .footer-bottom-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      padding: 20px 0;
      color: rgba(255,255,255,0.40);
      font-size: 12px;
    }

    .legal-links {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
    }

    .legal-links a { color: rgba(255,255,255,0.48); transition: 0.14s ease; }
    .legal-links a:hover { color: var(--white); }

    .disclaimer {
      padding-bottom: 24px;
      color: rgba(255,255,255,0.32);
      font-size: 12px;
      line-height: 1.7;
    }

    /* ========================================
       Responsive
       ======================================== */
    @media (max-width: 1000px) {
      .feature-grid  { grid-template-columns: 1fr 1fr; }
      .section-head  { display: block; }
      .section-head p { margin-top: 12px; max-width: 100%; }
    }

    @media (max-width: 960px) {
      .site-nav { display: none; }
      .hamburger-btn { display: flex; }

      .header-actions .btn-ghost,
      .header-actions .btn-secondary { display: none; }

      .hero-inner,
      .bilingual,
      .footer-main { grid-template-columns: 1fr; }

      .steps-grid,
      .course-grid,
      .testimonials-grid { grid-template-columns: 1fr 1fr; }

      .steps-grid::before { display: none; }

      .pricing-grid { max-width: 100%; }
    }

    @media (max-width: 640px) {
      .container { width: min(100% - 28px, var(--max-width)); }
      .header-inner { height: 68px; }
      .logo-text { font-size: 22px; }
      .logo-mark { width: 38px; height: 38px; }

      .hero { padding: 52px 0 42px; }

      .hero-metrics,
      .feature-grid,
      .course-grid,
      .steps-grid,
      .testimonials-grid,
      .pricing-grid { grid-template-columns: 1fr; }

      .progress-row { grid-template-columns: 1fr; }
      .footer-main  { padding: 40px 0; }

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

      .bilingual { padding: 28px 22px; }
    }