/* ============================================================
   CODING KIDS — TIMS Institute | Global Stylesheet
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ── CSS Variables ─────────────────────────────────── */
:root {
   --primary: #2563eb;
   --primary-dark: #1d4ed8;
   --primary-light: #dbeafe;
   --accent: #facc15;
   --accent-dark: #eab308;
   --green: #22c55e;
   --green-light: #dcfce7;
   --purple: #8b5cf6;
   --purple-light: #ede9fe;
   --orange: #f97316;
   --orange-light: #ffedd5;
   --text: #0f172a;
   --text-secondary: #334155;
   --muted: #64748b;
   --background: #ffffff;
   --surface: #f8fafc;
   --surface-2: #f1f5f9;
   --border: #e2e8f0;
   --border-focus: #93c5fd;
   --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .04);
   --shadow-md: 0 4px 12px 0 rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);
   --shadow-lg: 0 10px 30px 0 rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .04);
   --shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, .12);
   --shadow-card: 0 2px 8px rgba(37, 99, 235, .08), 0 1px 3px rgba(0, 0, 0, .06);
   --shadow-blue: 0 4px 20px rgba(37, 99, 235, .25);
   --radius-sm: 6px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-full: 9999px;
   --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
   --section-gap: 96px;
   --content-max: 1280px;
   --nav-height: 72px;
   --transition: 0.2s ease;
   --transition-slow: 0.4s ease;
}

/* ── Reset ──────────────────────────────────────────── */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font);
   font-size: 1rem;
   color: var(--text);
   background: var(--background);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

img {
   max-width: 100%;
   height: auto;
   display: block
}

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

button {
   cursor: pointer;
   font-family: inherit
}

ul {
   list-style: none
}

/* ── Utils ──────────────────────────────────────────── */
.container {
   width: 100%;
   max-width: var(--content-max);
   margin: 0 auto;
   padding: 0 24px
}

.section {
   padding: var(--section-gap) 0
}

.section-sm {
   padding: 64px 0
}

.text-center {
   text-align: center
}

.text-primary {
   color: var(--primary)
}

.text-muted {
   color: var(--muted)
}

.section-label {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--primary);
   background: var(--primary-light);
   padding: 6px 14px;
   border-radius: var(--radius-full);
   margin-bottom: 16px
}

.section-title {
   font-size: 2.25rem;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: -.02em;
   color: var(--text);
   margin-bottom: 16px
}

.section-subtitle {
   font-size: 1.125rem;
   color: var(--muted);
   max-width: 600px;
   line-height: 1.7
}

.section-subtitle.centered {
   margin: 0 auto
}

.section-header {
   margin-bottom: 8px
}

.section-header.centered {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center
}

/* ── Buttons ────────────────────────────────────────── */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   border-radius: var(--radius-md);
   font-size: .875rem;
   font-weight: 600;
   border: 2px solid transparent;
   transition: all var(--transition);
   white-space: nowrap;
   position: relative;
   overflow: hidden
}

.btn-primary {
   background: var(--primary);
   color: #fff;
   box-shadow: 0 2px 8px rgba(37, 99, 235, .30)
}

.btn-primary:hover {
   background: var(--primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--shadow-blue)
}

.btn-outline {
   background: transparent;
   color: var(--primary);
   border-color: var(--primary)
}

.btn-outline:hover {
   background: var(--primary-light);
   transform: translateY(-1px)
}

.btn-accent {
   background: var(--accent);
   color: var(--text);
   box-shadow: 0 2px 8px rgba(250, 204, 21, .40)
}

.btn-accent:hover {
   background: var(--accent-dark);
   transform: translateY(-1px)
}

.btn-ghost {
   background: var(--surface);
   color: var(--text);
   border-color: var(--border)
}

.btn-ghost:hover {
   background: var(--surface-2);
   transform: translateY(-1px)
}

.btn-white {
   background: #fff;
   color: var(--primary);
   font-weight: 700
}

.btn-white:hover {
   background: var(--primary-light);
   transform: translateY(-1px)
}

.btn-lg {
   padding: 14px 32px;
   font-size: 1rem;
   border-radius: var(--radius-lg)
}

.btn-sm {
   padding: 8px 16px;
   font-size: .75rem;
   border-radius: var(--radius-sm)
}

.btn-full {
   width: 100%
}

.btn:disabled,
.btn.loading {
   opacity: .65;
   cursor: not-allowed;
   pointer-events: none
}

.btn.loading .btn-text {
   opacity: 0
}

.btn.loading::before {
   content: '';
   position: absolute;
   width: 18px;
   height: 18px;
   border: 2px solid currentColor;
   border-top-color: transparent;
   border-radius: 50%;
   animation: spin .7s linear infinite
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

/* ── Card ───────────────────────────────────────────── */
.card {
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-slow);
   overflow: hidden
}

.card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
   border-color: var(--border-focus)
}

/* ── Badge ──────────────────────────────────────────── */
.badge {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 4px 10px;
   border-radius: var(--radius-full);
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .04em
}

.badge-green {
   background: var(--green-light);
   color: #15803d
}

.badge-blue {
   background: var(--primary-light);
   color: var(--primary-dark)
}

.badge-purple {
   background: var(--purple-light);
   color: #6d28d9
}

.badge-accent {
   background: #fef9c3;
   color: #854d0e
}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   height: var(--nav-height);
   background: rgba(255, 255, 255, .92);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
   transition: all var(--transition)
}

.navbar.scrolled {
   box-shadow: var(--shadow-md);
   background: rgba(255, 255, 255, .97)
}

.navbar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
   padding-top: 10px
}

.navbar-logo {
   display: flex;
   align-items: center;
   flex-shrink: 0
}

.navbar-logo img {
   height: 44px;
   width: auto;
   object-fit: contain
}

.navbar-nav {
   display: flex;
   align-items: center;
   gap: 4px
}

.navbar-nav a {
   padding: 8px 14px;
   border-radius: var(--radius-md);
   font-size: .875rem;
   font-weight: 500;
   color: var(--text-secondary);
   transition: all var(--transition)
}

.navbar-nav a:hover,
.navbar-nav a.active {
   color: var(--primary);
   background: var(--primary-light)
}

.navbar-actions {
   display: flex;
   align-items: center;
   gap: 12px
}

.navbar-actions .btn {
   padding: 8px 18px
}

.hamburger {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 40px;
   height: 40px;
   border: none;
   background: transparent;
   padding: 6px;
   border-radius: var(--radius-sm);
   transition: background var(--transition)
}

.hamburger:hover {
   background: var(--surface-2)
}

.hamburger span {
   display: block;
   height: 2px;
   background: var(--text);
   border-radius: 2px;
   transition: all var(--transition);
   transform-origin: center
}

.hamburger.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
   display: none;
   position: fixed;
   top: var(--nav-height);
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, .4);
   z-index: 999;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition)
}

.mobile-menu.open {
   opacity: 1;
   pointer-events: all
}

.mobile-menu-panel {
   background: var(--background);
   padding: 24px;
   max-height: calc(100vh - var(--nav-height));
   overflow-y: auto;
   border-bottom: 1px solid var(--border);
   transform: translateY(-20px);
   transition: transform var(--transition-slow)
}

.mobile-menu.open .mobile-menu-panel {
   transform: translateY(0)
}

.mobile-menu-nav {
   display: flex;
   flex-direction: column;
   gap: 4px;
   margin-bottom: 24px
}

.mobile-menu-nav a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 500;
   color: var(--text);
   transition: all var(--transition)
}

.mobile-menu-nav a:hover,
.mobile-menu-nav a.active {
   background: var(--primary-light);
   color: var(--primary)
}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
   padding-top: calc(var(--nav-height) + 80px);
   padding-bottom: 80px;
   background: linear-gradient(160deg, #f0f7ff 0%, #ffffff 50%, #faf8ff 100%);
   overflow: hidden;
   position: relative
}

.hero::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -200px;
   width: 600px;
   height: 600px;
   background: radial-gradient(circle, rgba(37, 99, 235, .06) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none
}

.hero::after {
   content: '';
   position: absolute;
   bottom: -100px;
   left: -100px;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(139, 92, 246, .05) 0%, transparent 70%);
   border-radius: 50%;
   pointer-events: none
}

.hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 64px;
   align-items: center
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--primary-light);
   color: var(--primary-dark);
   border: 1px solid rgba(37, 99, 235, .2);
   padding: 6px 14px;
   border-radius: var(--radius-full);
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   margin-bottom: 24px
}

.hero-title {
   font-size: clamp(2rem, 4vw, 3.25rem);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -.03em;
   color: var(--text);
   margin-bottom: 16px
}

.hero-title .hindi-line {
   display: block;
   font-size: .72em;
   font-weight: 600;
   color: var(--muted);
   letter-spacing: 0;
   margin-bottom: 4px
}

.hero-title .highlight {
   color: var(--primary);
   position: relative
}

.hero-title .highlight::after {
   content: '';
   position: absolute;
   bottom: 2px;
   left: 0;
   right: 0;
   height: 4px;
   background: linear-gradient(90deg, var(--primary), var(--purple));
   border-radius: 4px;
   opacity: .35
}

.hero-description {
   font-size: 1.125rem;
   color: var(--muted);
   line-height: 1.75;
   margin-bottom: 36px;
   max-width: 520px
}

.hero-actions {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   margin-bottom: 48px
}

.hero-stats {
   display: flex;
   gap: 32px;
   flex-wrap: wrap
}

.hero-stat-value {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--text);
   line-height: 1
}

.hero-stat-label {
   font-size: .75rem;
   color: var(--muted);
   font-weight: 500;
   margin-top: 4px
}

/* Hero Visual */
.hero-visual {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
}

.hero-illustration {
   width: 100%;
   max-width: 480px;
   position: relative
}

.hero-card-stack {
   position: relative;
   padding: 20px
}

.hero-main-card {
   background: var(--background);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   border: 1px solid var(--border);
   padding: 28px;
   position: relative;
   z-index: 2
}

.hero-main-card-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px
}

.hero-card-icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.hero-card-icon.blue {
   background: var(--primary-light);
   color: var(--primary)
}

.hero-card-icon.green {
   background: var(--green-light);
   color: #16a34a
}

.hero-card-icon.purple {
   background: var(--purple-light);
   color: var(--purple)
}

.hero-code-lines {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.hero-code-line {
   height: 10px;
   background: var(--surface-2);
   border-radius: 4px
}

.hero-code-line.w-80 {
   width: 80%
}

.hero-code-line.w-60 {
   width: 60%
}

.hero-code-line.w-90 {
   width: 90%
}

.hero-code-line.w-50 {
   width: 50%
}

.hero-code-line.accent {
   background: linear-gradient(90deg, var(--primary-light), var(--purple-light))
}

.hero-floating-badge {
   position: absolute;
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: .875rem;
   font-weight: 600;
   white-space: nowrap;
   z-index: 3
}

.hero-floating-badge.top-left {
   top: 0;
   left: 0;
   animation: floatCard1 4s ease-in-out infinite
}

.hero-floating-badge.bottom-right {
   bottom: 20px;
   right: 0;
   animation: floatCard2 4s ease-in-out infinite .5s
}

.hero-floating-badge.mid-left {
   top: 50%;
   left: -10px;
   transform: translateY(-50%);
   animation: floatCard3 4s ease-in-out infinite 1s
}

.floating-dot {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.floating-dot.blue {
   background: var(--primary-light);
   color: var(--primary)
}

.floating-dot.green {
   background: var(--green-light);
   color: #16a34a
}

.floating-dot.accent {
   background: #fef9c3;
   color: #854d0e
}

@keyframes floatCard1 {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-8px)
   }
}

@keyframes floatCard2 {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-6px)
   }
}

@keyframes floatCard3 {

   0%,
   100% {
      transform: translateY(-50%)
   }

   50% {
      transform: translateY(calc(-50% - 6px))
   }
}

/* ══════════════════════════════════════════════════════
   HIGHLIGHTS STRIP
══════════════════════════════════════════════════════ */
.highlights {
   background: var(--surface);
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
   padding: 40px 0
}

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

.highlight-item {
   display: flex;
   align-items: flex-start;
   gap: 16px
}

.highlight-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.highlight-icon.blue {
   background: var(--primary-light);
   color: var(--primary)
}

.highlight-icon.green {
   background: var(--green-light);
   color: #16a34a
}

.highlight-icon.purple {
   background: var(--purple-light);
   color: var(--purple)
}

.highlight-title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px
}

.highlight-desc {
   font-size: .875rem;
   color: var(--muted);
   line-height: 1.6
}

/* ══════════════════════════════════════════════════════
   COURSES
══════════════════════════════════════════════════════ */
.courses-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   margin-top: 48px
}

.course-card {
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   transition: all .35s ease;
   display: flex;
   flex-direction: column
}

.course-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg)
}

.course-card.green-accent {
   border-top: 4px solid var(--green)
}

.course-card.blue-accent {
   border-top: 4px solid var(--primary)
}

.course-card.purple-accent {
   border-top: 4px solid var(--purple)
}

.course-card-header {
   padding: 28px 28px 0
}

.course-card-level {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 20px
}

.course-card-icon {
   width: 52px;
   height: 52px;
   border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center
}

.course-card-icon.green {
   background: var(--green-light);
   color: #16a34a
}

.course-card-icon.blue {
   background: var(--primary-light);
   color: var(--primary)
}

.course-card-icon.purple {
   background: var(--purple-light);
   color: var(--purple)
}

.course-card-title {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 8px;
   line-height: 1.3
}

.course-card-meta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 20px
}

.course-meta-item {
   display: flex;
   align-items: center;
   gap: 5px;
   font-size: .75rem;
   color: var(--muted);
   font-weight: 500
}

.course-card-body {
   padding: 20px 28px;
   flex: 1;
   display: flex;
   flex-direction: column
}

.course-topics-title {
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   margin-bottom: 12px
}

.course-topics-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1;
   margin-bottom: 20px
}

.course-topic-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .875rem;
   color: var(--text-secondary)
}

.course-topic-item svg {
   flex-shrink: 0;
   color: var(--green)
}

.course-card-footer {
   padding: 20px 28px 28px;
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px
}

.course-price-value {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--text);
   line-height: 1
}

.course-price-label {
   font-size: .75rem;
   color: var(--muted);
   font-weight: 500
}

/* ══════════════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════════════ */
.cta-banner {
   background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, #1e3a8a 100%);
   border-radius: var(--radius-xl);
   padding: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   position: relative;
   overflow: hidden
}

.cta-banner::before {
   content: '';
   position: absolute;
   top: -60px;
   right: -60px;
   width: 240px;
   height: 240px;
   background: rgba(255, 255, 255, .05);
   border-radius: 50%
}

.cta-banner-content {
   position: relative;
   z-index: 1
}

.cta-banner-label {
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: rgba(255, 255, 255, .7);
   margin-bottom: 12px
}

.cta-banner-title {
   font-size: 1.875rem;
   font-weight: 800;
   color: #fff;
   line-height: 1.2;
   margin-bottom: 8px
}

.cta-banner-sub {
   font-size: 1rem;
   color: rgba(255, 255, 255, .75)
}

.cta-banner-actions {
   position: relative;
   z-index: 1;
   display: flex;
   gap: 12px;
   flex-shrink: 0;
   flex-wrap: wrap
}

/* ══════════════════════════════════════════════════════
   SCHOLARSHIP
══════════════════════════════════════════════════════ */
.scholarship-hero {
   padding-top: calc(var(--nav-height) + 80px);
   padding-bottom: 80px;
   background: linear-gradient(160deg, #f5f3ff 0%, #fff 60%)
}

.scholarship-levels {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 48px
}

.scholarship-level-card {
   text-align: center;
   padding: 36px 24px;
   background: var(--background);
   border: 2px solid var(--border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-slow)
}

.scholarship-level-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg)
}

.scholarship-level-card.featured {
   border-color: var(--primary);
   background: linear-gradient(160deg, var(--primary-light) 0%, #fff 100%);
   box-shadow: 0 4px 20px rgba(37, 99, 235, .15)
}

.scholarship-score {
   font-size: 2.25rem;
   font-weight: 800;
   color: var(--primary);
   line-height: 1;
   margin-bottom: 8px
}

.scholarship-percent {
   font-size: 1.875rem;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 8px
}

.scholarship-level-label {
   font-size: .875rem;
   color: var(--muted);
   font-weight: 500
}

.steps-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   position: relative;
   margin-top: 48px
}

.steps-grid::before {
   content: '';
   position: absolute;
   top: 28px;
   left: calc(12.5% + 28px);
   right: calc(12.5% + 28px);
   height: 2px;
   background: linear-gradient(90deg, var(--border), var(--primary-light), var(--border))
}

.step-item {
   text-align: center;
   padding: 0 16px;
   position: relative;
   z-index: 1
}

.step-number {
   width: 56px;
   height: 56px;
   background: linear-gradient(135deg, var(--primary), var(--purple));
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.125rem;
   font-weight: 800;
   margin: 0 auto 20px;
   box-shadow: 0 4px 12px rgba(37, 99, 235, .3)
}

.step-title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 8px
}

.step-desc {
   font-size: .875rem;
   color: var(--muted);
   line-height: 1.6
}

.test-areas-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 32px
}

.test-area-card {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 20px;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   transition: all var(--transition)
}

.test-area-card:hover {
   border-color: var(--primary);
   background: var(--primary-light);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md)
}

.test-area-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   background: var(--background);
   border: 1px solid var(--border)
}

.test-area-title {
   font-size: .875rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px
}

.test-area-desc {
   font-size: .75rem;
   color: var(--muted);
   line-height: 1.5
}

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.form-section {
   padding-top: calc(var(--nav-height) + 48px);
   padding-bottom: 80px;
   background: var(--surface);
   min-height: 100vh
}

.form-container {
   max-width: 760px;
   margin: 0 auto
}

.form-header {
   margin-bottom: 40px;
   text-align: center
}

.form-card {
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 40px;
   box-shadow: var(--shadow-lg)
}

.form-section-title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text);
   padding: 14px 20px;
   background: var(--surface);
   border-radius: var(--radius-md);
   border-left: 4px solid var(--primary);
   margin-bottom: 24px;
   display: flex;
   align-items: center;
   gap: 10px
}

.form-grid {
   display: grid;
   gap: 20px;
   margin-bottom: 28px
}

.form-grid-2 {
   grid-template-columns: 1fr 1fr
}

.form-grid-3 {
   grid-template-columns: 1fr 1fr 1fr
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.form-group.full-width {
   grid-column: 1/-1
}

.form-label {
   font-size: .875rem;
   font-weight: 600;
   color: var(--text)
}

.form-label .required {
   color: #ef4444;
   margin-left: 2px
}

.form-control {
   width: 100%;
   padding: 11px 14px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-md);
   font-family: var(--font);
   font-size: .875rem;
   color: var(--text);
   background: var(--background);
   transition: all var(--transition);
   outline: none
}

.form-control:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px rgba(37, 99, 235, .12)
}

.form-control.error {
   border-color: #ef4444
}

.form-control.success {
   border-color: var(--green)
}

.form-control::placeholder {
   color: var(--muted)
}

select.form-control {
   cursor: pointer
}

textarea.form-control {
   resize: vertical;
   min-height: 100px
}

.form-help {
   font-size: .75rem;
   color: var(--muted)
}

.form-error {
   font-size: .75rem;
   color: #ef4444;
   display: none;
   align-items: center;
   gap: 4px
}

.form-error.visible {
   display: flex
}

.form-radio-group {
   display: flex;
   gap: 16px;
   flex-wrap: wrap
}

.form-radio-label {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   font-size: .875rem;
   font-weight: 500;
   color: var(--text);
   padding: 10px 16px;
   border: 1.5px solid var(--border);
   border-radius: var(--radius-md);
   transition: all var(--transition)
}

.form-radio-label input {
   display: none
}

.form-radio-label.selected {
   border-color: var(--primary);
   background: var(--primary-light);
   color: var(--primary)
}

.form-checkbox-label {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   cursor: pointer;
   font-size: .875rem;
   color: var(--text-secondary);
   line-height: 1.5
}

.form-checkbox-label input[type="checkbox"] {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
   accent-color: var(--primary);
   cursor: pointer;
   margin-top: 2px
}

.form-submit-row {
   margin-top: 32px;
   display: flex;
   align-items: center;
   justify-content: center
}

.conditional-section {
   display: none;
   padding: 20px;
   background: var(--surface);
   border-radius: var(--radius-lg);
   border: 1px solid var(--border);
   margin-top: 16px;
   grid-column: 1/-1
}

.conditional-section.visible {
   display: block
}

/* ══════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════ */
.faq-section {
   padding-top: calc(var(--nav-height) + 48px)
}

.faq-list {
   max-width: 800px;
   margin: 48px auto 0;
   display: flex;
   flex-direction: column;
   gap: 12px
}

.faq-item {
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   transition: all var(--transition)
}

.faq-item.open {
   box-shadow: var(--shadow-md);
   border-color: var(--primary)
}

.faq-question {
   width: 100%;
   background: none;
   border: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 20px 24px;
   text-align: left;
   font-family: var(--font);
   font-size: 1rem;
   font-weight: 600;
   color: var(--text);
   cursor: pointer;
   transition: all var(--transition)
}

.faq-question:hover {
   color: var(--primary)
}

.faq-item.open .faq-question {
   color: var(--primary)
}

.faq-icon {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   transition: transform var(--transition);
   color: var(--muted)
}

.faq-item.open .faq-icon {
   transform: rotate(45deg);
   color: var(--primary)
}

.faq-answer {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s ease, padding .25s ease;
   padding: 0 24px
}

.faq-answer.open {
   max-height: 600px;
   padding: 0 24px 20px
}

.faq-answer p {
   color: var(--muted);
   line-height: 1.75
}

/* ══════════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════════ */
.contact-page {
   padding-top: calc(var(--nav-height) + 64px)
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.5fr;
   gap: 48px;
   align-items: start
}

.contact-info-card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 32px
}

.contact-info-item {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 16px 0;
   border-bottom: 1px solid var(--border)
}

.contact-info-item:last-child {
   border-bottom: none
}

.contact-info-icon {
   width: 40px;
   height: 40px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   background: var(--primary-light);
   color: var(--primary)
}

.contact-info-label {
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--muted);
   margin-bottom: 4px
}

.contact-info-value {
   font-size: .875rem;
   color: var(--text);
   font-weight: 500
}

.contact-form-card {
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   padding: 40px;
   box-shadow: var(--shadow-card)
}

/* ══════════════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════════════ */
.about-hero {
   padding-top: calc(var(--nav-height) + 80px);
   padding-bottom: 80px;
   background: linear-gradient(160deg, #f0f7ff 0%, #fff 60%)
}

.about-values-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
   margin-top: 40px
}

.value-card {
   padding: 28px;
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-card);
   transition: all var(--transition-slow)
}

.value-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg)
}

.value-icon {
   width: 48px;
   height: 48px;
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px
}

.value-icon.blue {
   background: var(--primary-light);
   color: var(--primary)
}

.value-icon.green {
   background: var(--green-light);
   color: #16a34a
}

.value-icon.purple {
   background: var(--purple-light);
   color: var(--purple)
}

.value-icon.accent {
   background: #fef9c3;
   color: #854d0e
}

.value-icon.orange {
   background: var(--orange-light);
   color: var(--orange)
}

.value-title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 8px
}

.value-desc {
   font-size: .875rem;
   color: var(--muted);
   line-height: 1.65
}

/* ══════════════════════════════════════════════════════
   COURSE DETAILS
══════════════════════════════════════════════════════ */
.course-details-hero {
   padding-top: calc(var(--nav-height) + 48px);
   padding-bottom: 48px
}

.course-details-layout {
   display: grid;
   grid-template-columns: 1fr 340px;
   gap: 40px;
   align-items: start
}

.course-sticky-card {
   position: sticky;
   top: calc(var(--nav-height) + 24px);
   background: var(--background);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
   overflow: hidden
}

.course-sticky-header {
   padding: 24px;
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: #fff
}

.course-sticky-price {
   font-size: 1.875rem;
   font-weight: 800;
   margin-bottom: 4px
}

.course-sticky-body {
   padding: 24px
}

.course-meta-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   border-bottom: 1px solid var(--border);
   font-size: .875rem
}

.course-meta-row:last-of-type {
   border-bottom: none
}

.course-meta-key {
   color: var(--muted);
   font-weight: 500
}

.course-meta-val {
   color: var(--text);
   font-weight: 600
}

.roadmap {
   position: relative;
   padding-left: 32px;
   margin-top: 24px
}

.roadmap::before {
   content: '';
   position: absolute;
   left: 10px;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background: linear-gradient(to bottom, var(--primary), var(--purple));
   border-radius: 2px
}

.roadmap-item {
   position: relative;
   margin-bottom: 24px
}

.roadmap-item::before {
   content: '';
   position: absolute;
   left: -26px;
   top: 6px;
   width: 12px;
   height: 12px;
   background: var(--primary);
   border-radius: 50%;
   border: 3px solid var(--background);
   box-shadow: 0 0 0 2px var(--primary)
}

.roadmap-month {
   font-size: .75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: var(--primary);
   margin-bottom: 6px
}

.roadmap-title {
   font-size: 1rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 4px
}

.roadmap-desc {
   font-size: .875rem;
   color: var(--muted);
   line-height: 1.6
}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
   background: #0f172a;
   color: rgba(255, 255, 255, .75);
   padding: 72px 0 0
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 64px
}

.footer-brand-logo {
   height: 40px;
   width: auto;
   object-fit: contain;
   margin-bottom: 16px;
   filter: brightness(0) invert(1);
   opacity: .9
}

.footer-brand-desc {
   font-size: .875rem;
   line-height: 1.75;
   color: rgba(255, 255, 255, .55);
   margin-bottom: 24px
}

.social-links {
   display: flex;
   gap: 10px
}

.social-link {
   width: 36px;
   height: 36px;
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .6);
   transition: all var(--transition)
}

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

.footer-heading {
   font-size: .875rem;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 20px
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.footer-links a {
   font-size: .875rem;
   color: rgba(255, 255, 255, .55);
   transition: color var(--transition)
}

.footer-links a:hover {
   color: #fff
}

.footer-contact-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   font-size: .875rem;
   color: rgba(255, 255, 255, .55);
   margin-bottom: 12px;
   line-height: 1.5
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .08);
   padding: 24px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px
}

.footer-bottom-copy {
   font-size: .875rem;
   color: rgba(255, 255, 255, .4)
}

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

.footer-bottom-links a {
   font-size: .875rem;
   color: rgba(255, 255, 255, .45);
   transition: color var(--transition)
}

.footer-bottom-links a:hover {
   color: #fff
}

/* ══════════════════════════════════════════════════════
   MODAL & TOAST
══════════════════════════════════════════════════════ */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, .6);
   backdrop-filter: blur(6px);
   z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition)
}

.modal-overlay.open {
   opacity: 1;
   pointer-events: all
}

.modal {
   background: var(--background);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-xl);
   width: 100%;
   max-width: 500px;
   padding: 40px;
   text-align: center;
   transform: scale(.9) translateY(20px);
   transition: transform var(--transition-slow)
}

.modal-overlay.open .modal {
   transform: scale(1) translateY(0)
}

.modal-icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 24px;
   background: var(--green-light);
   color: var(--green)
}

.modal-title {
   font-size: 1.5rem;
   font-weight: 800;
   color: var(--text);
   margin-bottom: 12px
}

.modal-body {
   color: var(--muted);
   line-height: 1.7;
   margin-bottom: 24px
}

.modal-app-id {
   display: inline-block;
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--primary);
   background: var(--primary-light);
   padding: 10px 24px;
   border-radius: var(--radius-md);
   font-family: 'Courier New', monospace;
   letter-spacing: .1em;
   margin-bottom: 20px
}

.modal-disclaimer {
   font-size: .75rem;
   color: var(--muted);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 12px 16px;
   line-height: 1.6;
   margin-bottom: 24px
}

.toast-container {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 3000;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.toast {
   background: var(--text);
   color: #fff;
   padding: 14px 20px;
   border-radius: var(--radius-lg);
   font-size: .875rem;
   font-weight: 500;
   box-shadow: var(--shadow-xl);
   display: flex;
   align-items: center;
   gap: 10px;
   transform: translateX(120%);
   transition: transform .35s ease;
   max-width: 360px
}

.toast.show {
   transform: translateX(0)
}

.toast.success {
   background: #16a34a
}

.toast.error {
   background: #dc2626
}

/* ══════════════════════════════════════════════════════
   MISC COMPONENTS
══════════════════════════════════════════════════════ */
.back-to-top {
   position: fixed;
   bottom: 32px;
   right: 32px;
   width: 44px;
   height: 44px;
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: var(--shadow-blue);
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transform: translateY(12px);
   transition: all var(--transition);
   z-index: 900
}

.back-to-top.visible {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0)
}

.back-to-top:hover {
   background: var(--primary-dark);
   transform: translateY(-2px)
}

.reveal {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity .6s ease, transform .6s ease
}

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

.reveal-delay-1 {
   transition-delay: .1s
}

.reveal-delay-2 {
   transition-delay: .2s
}

.reveal-delay-3 {
   transition-delay: .3s
}

.reveal-delay-4 {
   transition-delay: .4s
}

.page-hero {
   padding-top: calc(var(--nav-height) + 40px);
   padding-bottom: 40px;
   background: linear-gradient(160deg, var(--surface) 0%, var(--background) 100%);
   border-bottom: 1px solid var(--border)
}

.page-hero-label {
   font-size: .75rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--primary);
   margin-bottom: 12px
}

.page-hero-title {
   font-size: 2.25rem;
   font-weight: 800;
   color: var(--text);
   line-height: 1.2;
   letter-spacing: -.02em;
   margin-bottom: 16px
}

.page-hero-sub {
   font-size: 1.125rem;
   color: var(--muted);
   max-width: 600px;
   line-height: 1.7
}

.breadcrumb {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .875rem;
   color: var(--muted);
   margin-bottom: 20px
}

.breadcrumb a {
   color: var(--primary)
}

.notice {
   padding: 14px 18px;
   border-radius: var(--radius-md);
   font-size: .875rem;
   line-height: 1.6;
   display: flex;
   align-items: flex-start;
   gap: 10px
}

.notice-info {
   background: var(--primary-light);
   color: var(--primary-dark);
   border: 1px solid rgba(37, 99, 235, .2)
}

.notice-warning {
   background: #fef9c3;
   color: #854d0e;
   border: 1px solid #fde68a
}

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

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
   :root {
      --section-gap: 72px;
      --content-max: 960px
   }

   .hero-inner {
      grid-template-columns: 1fr;
      gap: 48px
   }

   .hero-visual {
      order: -1;
      max-width: 440px;
      margin: 0 auto
   }

   .hero-title {
      font-size: 2.25rem
   }

   .courses-grid {
      grid-template-columns: 1fr 1fr
   }

   .highlights-grid {
      grid-template-columns: 1fr;
      gap: 20px
   }

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

   .steps-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 32px
   }

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

   .scholarship-levels {
      grid-template-columns: 1fr 1fr 1fr
   }

   .test-areas-grid {
      grid-template-columns: 1fr 1fr
   }

   .course-details-layout {
      grid-template-columns: 1fr
   }

   .course-sticky-card {
      position: static
   }

   .contact-grid {
      grid-template-columns: 1fr
   }

   .about-values-grid {
      grid-template-columns: 1fr 1fr
   }

   .cta-banner {
      padding: 48px;
      flex-direction: column;
      align-items: flex-start
   }
}

@media (max-width:768px) {
   :root {
      --section-gap: 56px;
      --nav-height: 64px
   }

   .container {
      padding: 0 16px
   }

   .navbar-nav {
      display: none
   }

   .navbar-actions .btn {
      display: none
   }

   .hamburger {
      display: flex
   }

   .mobile-menu {
      display: block
   }

   .navbar-logo img {
      height: 36px
   }

   .hero {
      padding-top: calc(var(--nav-height) + 48px);
      padding-bottom: 48px
   }

   .hero-title {
      font-size: 1.875rem
   }

   .hero-description {
      font-size: 1rem
   }

   .hero-actions {
      flex-direction: column;
      align-items: flex-start
   }

   .hero-floating-badge.mid-left {
      display: none
   }

   .section-title {
      font-size: 1.875rem
   }

   .page-hero-title {
      font-size: 1.875rem
   }

   .courses-grid {
      grid-template-columns: 1fr
   }

   .scholarship-levels {
      grid-template-columns: 1fr;
      gap: 16px
   }

   .steps-grid {
      grid-template-columns: 1fr;
      gap: 24px
   }

   .test-areas-grid {
      grid-template-columns: 1fr
   }

   .form-grid-2 {
      grid-template-columns: 1fr
   }

   .form-grid-3 {
      grid-template-columns: 1fr
   }

   .form-card {
      padding: 24px
   }

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

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

   .cta-banner {
      padding: 36px 24px;
      border-radius: var(--radius-lg)
   }

   .cta-banner-title {
      font-size: 1.5rem
   }

   .cta-banner-actions {
      flex-direction: column;
      width: 100%
   }

   .about-values-grid {
      grid-template-columns: 1fr
   }

   .back-to-top {
      bottom: 20px;
      right: 16px
   }

   .toast-container {
      right: 16px;
      bottom: 16px
   }
}

@media (max-width:375px) {
   .hero-title {
      font-size: 1.625rem
   }

   .section-title {
      font-size: 1.5rem
   }

   .btn-lg {
      padding: 12px 20px;
      font-size: .875rem
   }

   .form-radio-group {
      flex-direction: column
   }
}

@media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important
   }

   .reveal {
      opacity: 1;
      transform: none
   }

   html {
      scroll-behavior: auto
   }
}