/* ================================================================
   MARLIN STEM VIRTUAL ACADEMY
   Content Sections Styles
   sections.css

   Covers (in page order):
   01. Stats Bar         — key numbers strip
   02. About             — split intro with feature list
   03. Curriculum        — tabbed CBC / 8-4-4 / A-Level cards
   04. AI Academy        — three AI pillars
   05. Tech Courses      — data analytics, IoT tracks
   06. How It Works      — four step process
   07. Team              — founder cards
   08. Pricing           — three plan cards
   09. Registration      — split form section
================================================================ */


/* ================================================================
   01. STATS BAR
   Full-width dark strip showing key numbers.
   Compact — sits between hero and about section.
================================================================ */

.stats-bar {
    display:          grid;
    grid-template-columns: repeat(4, 1fr);
    background:       var(--navy-800);
    border-top:       1px solid var(--navy-600);
    border-bottom:    1px solid var(--navy-600);
}

.stats-bar__item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-10) var(--space-6);
    text-align:      center;
    border-right:    1px solid var(--navy-600);
    transition:      background var(--duration-base) var(--ease);
}

.stats-bar__item:last-child {
    border-right: none;
}

.stats-bar__item:hover {
    background: var(--navy-700);
}

.stats-bar__number {
    font-family:   var(--font-display);
    font-size:     clamp(32px, 4vw, 52px);
    font-weight:   var(--weight-bold);
    color:         var(--white);
    line-height:   1;
    margin-bottom: var(--space-2);
    display:       flex;
    align-items:   baseline;
    gap:           2px;
}

.stats-bar__number span {
    font-size:   clamp(16px, 2vw, 22px);
    color:       var(--cyan-500);
    font-family: var(--font-body);
    font-weight: var(--weight-semi);
}

.stats-bar__label {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-medium);
    color:          rgba(255, 255, 255, 0.40);
    text-transform: uppercase;
    letter-spacing: 0.10em;
}


/* ================================================================
   02. ABOUT — Split layout
   Left: image placeholder (replace with real photo)
   Right: eyebrow, heading, body text, feature list
================================================================ */

.about {
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--space-20);
    align-items: center;
}

/* ---- Image side ---- */

.about__image {
    position:      relative;
    border-radius: var(--radius-lg);
    overflow:      hidden;
    aspect-ratio:  4 / 3;
}

.about__image img {
    width:        100%;
    height:       100%;
    object-fit:   cover;
    object-position: center;
}

/* Floating tag over the image */
.about__image-tag {
    position:       absolute;
    bottom:         var(--space-5);
    left:           var(--space-5);
    background:     var(--cyan-500);
    color:          var(--navy-800);
    padding:        var(--space-2) var(--space-4);
    border-radius:  var(--radius-sm);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---- Text side ---- */

.about__text {
    display:        flex;
    flex-direction: column;
}

.about__body {
    font-size:     var(--text-lg);
    color:         var(--grey-500);
    line-height:   var(--leading-relaxed);
    margin-bottom: var(--space-8);
    max-width:     480px;
}

/* Feature list */
.about__features {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.about__feature {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-4);
    padding:       var(--space-5) 0;
    border-bottom: 1px solid var(--grey-200);
}

.about__feature:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about__feature-icon {
    width:           46px;
    height:          46px;
    border-radius:   var(--radius);
    background:      var(--cyan-100);
    color:           var(--cyan-600);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    flex-shrink:     0;
    transition:      var(--transition);
}

.about__feature:hover .about__feature-icon {
    background:  var(--cyan-500);
    color:       var(--navy-800);
    transform:   scale(1.08);
}

.about__feature-title {
    font-size:     var(--text-base);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-1);
}

.about__feature-desc {
    font-size:   var(--text-sm);
    color:       var(--grey-500);
    line-height: var(--leading-relaxed);
}


/* ================================================================
   03. CURRICULUM — Tabbed section
   Tabs: CBC | 8-4-4 | AS & A-Level Revision
   This replaces three separate long sections with one compact one.
================================================================ */

.curriculum__header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--space-8);
    margin-bottom:   var(--space-10);
    flex-wrap:       wrap;
}

/* Tab bar */
.curriculum__tabs {
    display:          flex;
    background:       var(--grey-100);
    border-radius:    var(--radius-md);
    padding:          5px;
    gap:              4px;
    flex-shrink:      0;
}

.curriculum__tab {
    padding:          10px 22px;
    border-radius:    var(--radius);
    font-size:        var(--text-sm);
    font-weight:      var(--weight-semi);
    color:            var(--grey-500);
    background:       transparent;
    border:           none;
    cursor:           pointer;
    transition:       var(--transition);
    white-space:      nowrap;
}

.curriculum__tab:hover {
    color:      var(--grey-900);
    background: var(--white);
}

.curriculum__tab.is-active {
    background: var(--navy-800);
    color:      var(--white);
    box-shadow: var(--shadow-sm);
}

/* Tab panels */
.curriculum__panel {
    display: none;
}

.curriculum__panel.is-active {
    display: block;
    animation: fadeInPanel 0.3s var(--ease-out) both;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Programme cards grid */
.curriculum__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
}

/* Single programme card */
.prog-card {
    background:    var(--white);
    border:        1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding:       var(--space-8) var(--space-6);
    transition:    var(--transition);
    position:      relative;
    overflow:      hidden;
    cursor:        default;
}

/* Accent top border — colored per card */
.prog-card::before {
    content:       '';
    position:      absolute;
    top:           0;
    left:          0;
    right:         0;
    height:        3px;
    background:    var(--card-accent, var(--cyan-500));
    transform:     scaleX(0);
    transform-origin: left;
    transition:    transform var(--duration-base) var(--ease);
}

.prog-card:hover {
    border-color: var(--card-accent, var(--cyan-500));
    transform:    translateY(-4px);
    box-shadow:   var(--shadow-md);
}

.prog-card:hover::before {
    transform: scaleX(1);
}

/* Card accent color variants */
.prog-card--cyan   { --card-accent: var(--cyan-500);   }
.prog-card--navy   { --card-accent: var(--navy-500);   }
.prog-card--gold   { --card-accent: var(--gold);       }

/* Card icon */
.prog-card__icon {
    width:            52px;
    height:           52px;
    border-radius:    var(--radius);
    background:       var(--cyan-100);
    color:            var(--cyan-600);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        24px;
    margin-bottom:    var(--space-5);
    transition:       var(--transition);
}

.prog-card--navy .prog-card__icon {
    background: rgba(26, 51, 87, 0.10);
    color:      var(--navy-500);
}

.prog-card--gold .prog-card__icon {
    background: rgba(240, 180, 41, 0.12);
    color:      var(--warning);
}

.prog-card:hover .prog-card__icon {
    background: var(--card-accent, var(--cyan-500));
    color:      var(--white);
    transform:  scale(1.08) rotate(-4deg);
}

/* Card tag */
.prog-card__tag {
    display:        inline-block;
    background:     var(--cyan-100);
    color:          var(--cyan-700);
    padding:        3px 10px;
    border-radius:  var(--radius-full);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom:  var(--space-3);
}

.prog-card--navy .prog-card__tag {
    background: rgba(26, 51, 87, 0.10);
    color:      var(--navy-500);
}

.prog-card--gold .prog-card__tag {
    background: rgba(240, 180, 41, 0.12);
    color:      var(--warning);
}

/* Card title */
.prog-card__title {
    font-family:   var(--font-display);
    font-size:     var(--text-2xl);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-2);
    line-height:   var(--leading-snug);
}

/* Card subtitle */
.prog-card__sub {
    font-size:     var(--text-sm);
    color:         var(--grey-400);
    margin-bottom: var(--space-4);
}

/* Card description */
.prog-card__desc {
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    line-height:   var(--leading-relaxed);
    margin-bottom: var(--space-5);
}

/* Subject tags */
.prog-card__subjects {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

.prog-card__subject {
    font-size:     var(--text-xs);
    color:         var(--grey-500);
    background:    var(--grey-100);
    padding:       4px 10px;
    border-radius: var(--radius-full);
    font-weight:   var(--weight-medium);
    transition:    var(--transition-fast);
}

.prog-card:hover .prog-card__subject {
    background: var(--cyan-100);
    color:      var(--cyan-700);
}


/* ================================================================
   04. AI ACADEMY — Three pillars
   The core USP: AI for Students, AI for Teachers, AI Tools
================================================================ */

.ai-section__header {
    text-align:    center;
    max-width:     620px;
    margin:        0 auto var(--space-12);
}

.ai-section__header .body-text {
    margin: 0 auto;
    text-align: center;
}

/* Three pillars grid */
.ai-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0;
    border:                1px solid var(--grey-200);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
}

.ai-pillar {
    padding:       var(--space-10) var(--space-8);
    border-right:  1px solid var(--grey-200);
    transition:    background var(--duration-slow) var(--ease);
    position:      relative;
    overflow:      hidden;
}

.ai-pillar:last-child {
    border-right: none;
}

/* Hover — section turns dark navy */
.ai-pillar:hover {
    background: var(--navy-800);
}

.ai-pillar:hover .ai-pillar__number  { color: rgba(255,248,235,0.06); }
.ai-pillar:hover .ai-pillar__icon    { background: rgba(200,165,92,0.15); color: var(--cyan-500); }
.ai-pillar:hover .ai-pillar__title   { color: var(--white); }
.ai-pillar:hover .ai-pillar__desc    { color: rgba(255,248,235,0.55); }
.ai-pillar:hover .ai-pillar__item    { color: rgba(255,248,235,0.65); border-color: rgba(200,165,92,0.12); }
.ai-pillar:hover .ai-pillar__item i  { color: var(--cyan-500); }

/* Large decorative number */
.ai-pillar__number {
    font-family:    var(--font-display);
    font-size:      80px;
    font-weight:    var(--weight-bold);
    color:          var(--grey-200);
    line-height:    1;
    margin-bottom:  var(--space-4);
    letter-spacing: -0.04em;
    transition:     color var(--duration-slow) var(--ease);
}

/* Icon */
.ai-pillar__icon {
    width:           56px;
    height:          56px;
    border-radius:   var(--radius);
    background:      var(--cyan-100);
    color:           var(--cyan-600);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       26px;
    margin-bottom:   var(--space-5);
    transition:      var(--transition);
}

/* Title */
.ai-pillar__title {
    font-family:   var(--font-display);
    font-size:     var(--text-2xl);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-3);
    line-height:   var(--leading-snug);
    transition:    color var(--duration-slow) var(--ease);
}

/* Description */
.ai-pillar__desc {
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    line-height:   var(--leading-relaxed);
    margin-bottom: var(--space-6);
    transition:    color var(--duration-slow) var(--ease);
}

/* Module list */
.ai-pillar__list {
    display:        flex;
    flex-direction: column;
    gap:            0;
}

.ai-pillar__item {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    padding:       var(--space-3) 0;
    border-bottom: 1px solid var(--grey-200);
    transition:    color var(--duration-base) var(--ease),
                   border-color var(--duration-slow) var(--ease);
}

.ai-pillar__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ai-pillar__item i {
    font-size:   15px;
    color:       var(--cyan-600);
    flex-shrink: 0;
    transition:  color var(--duration-slow) var(--ease);
}


/* ================================================================
   05. TECH COURSES — Data Analytics + IoT
   Numbered editorial cards — clean and readable
================================================================ */

.tech-section__header {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           var(--space-16);
    align-items:   end;
    margin-bottom: var(--space-12);
}

/* Cards grid */
.tech-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-5);
}

.tech-card {
    background:    var(--white);
    border:        1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding:       var(--space-10) var(--space-8);
    transition:    var(--transition);
}

.tech-card:hover {
    border-color: var(--cyan-600);
    box-shadow:   var(--shadow-md);
    transform:    translateY(-3px);
}

/* Large editorial number */
.tech-card__number {
    font-family:    var(--font-display);
    font-size:      68px;
    font-weight:    var(--weight-bold);
    color:          var(--grey-200);
    line-height:    1;
    margin-bottom:  var(--space-4);
    letter-spacing: -0.04em;
    transition:     color var(--duration-base) var(--ease);
}

.tech-card:hover .tech-card__number {
    color: var(--cyan-100);
}

/* Icon */
.tech-card__icon {
    width:           52px;
    height:          52px;
    border-radius:   var(--radius);
    background:      var(--cyan-100);
    color:           var(--cyan-600);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    margin-bottom:   var(--space-5);
    transition:      var(--transition);
}

.tech-card:hover .tech-card__icon {
    background: var(--cyan-500);
    color:      var(--navy-800);
    transform:  scale(1.08);
}

/* Title */
.tech-card__title {
    font-family:   var(--font-display);
    font-size:     var(--text-2xl);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-3);
}

/* Description */
.tech-card__desc {
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    line-height:   var(--leading-relaxed);
    margin-bottom: var(--space-6);
}

/* Module list */
.tech-card__modules {
    border-top:  1px solid var(--grey-200);
    padding-top: var(--space-5);
    margin-bottom: var(--space-6);
}

.tech-card__module {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    padding:       var(--space-3) 0;
    border-bottom: 1px solid var(--grey-200);
}

.tech-card__module:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.tech-card__module i {
    font-size:   15px;
    color:       var(--cyan-600);
    flex-shrink: 0;
}

/* Footer — price + enroll button */
.tech-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     var(--space-5);
    border-top:      1px solid var(--grey-200);
}

.tech-card__price {
    font-family: var(--font-display);
    font-size:   var(--text-2xl);
    font-weight: var(--weight-bold);
    color:       var(--grey-900);
}

.tech-card__price small {
    font-family: var(--font-body);
    font-size:   var(--text-xs);
    color:       var(--grey-400);
    font-weight: var(--weight-normal);
}

.tech-card__enroll {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         9px 20px;
    border-radius:   var(--radius);
    background:      var(--navy-800);
    color:           var(--white);
    font-size:       var(--text-sm);
    font-weight:     var(--weight-semi);
    text-decoration: none;
    transition:      var(--transition);
    border:          2px solid var(--navy-800);
}

.tech-card__enroll:hover {
    background:   var(--cyan-500);
    color:        var(--navy-800);
    border-color: var(--cyan-500);
}


/* ================================================================
   06. HOW IT WORKS — Four step process
   Hover turns each step dark navy — same pattern as AI pillars
================================================================ */

.how-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    border:                1px solid var(--grey-200);
    border-radius:         var(--radius-lg);
    overflow:              hidden;
    margin-top:            var(--space-12);
}

.how-step {
    padding:      var(--space-10) var(--space-8);
    border-right: 1px solid var(--grey-200);
    transition:   background var(--duration-slow) var(--ease);
}

.how-step:last-child {
    border-right: none;
}

.how-step:hover {
    background: var(--navy-800);
}

/* Hover text colors */
.how-step:hover .how-step__number { color: rgba(255,248,235,0.06); }
.how-step:hover .how-step__icon   { background: rgba(200,165,92,0.15); color: var(--cyan-500); }
.how-step:hover .how-step__title  { color: var(--white); }
.how-step:hover .how-step__desc   { color: rgba(255,248,235,0.55); }

/* Step number */
.how-step__number {
    font-family:    var(--font-display);
    font-size:      56px;
    font-weight:    var(--weight-bold);
    color:          var(--grey-200);
    line-height:    1;
    margin-bottom:  var(--space-5);
    letter-spacing: -0.03em;
    transition:     color var(--duration-slow) var(--ease);
}

/* Step icon */
.how-step__icon {
    width:           46px;
    height:          46px;
    border-radius:   var(--radius);
    background:      var(--cyan-100);
    color:           var(--cyan-600);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       20px;
    margin-bottom:   var(--space-4);
    transition:      var(--transition);
}

/* Step title */
.how-step__title {
    font-size:     var(--text-lg);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-3);
    transition:    color var(--duration-slow) var(--ease);
}

/* Step description */
.how-step__desc {
    font-size:   var(--text-sm);
    color:       var(--grey-500);
    line-height: var(--leading-relaxed);
    transition:  color var(--duration-slow) var(--ease);
}


/* ================================================================
   07. TEAM — Founder cards
   Photo area (initials until real photos added) + info strip
================================================================ */

.team__header {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             var(--space-16);
    align-items:     end;
    margin-bottom:   var(--space-12);
}

/* Five cards in one row */
.team-grid {
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   var(--space-4);
}

.team-card {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    border:        1px solid var(--grey-200);
    transition:    var(--transition);
    background:    var(--white);
}

.team-card:hover {
    transform:   translateY(-5px);
    box-shadow:  var(--shadow-md);
    border-color:var(--cyan-500);
}

/* Photo area */
.team-card__photo {
    aspect-ratio:    3 / 4;
    background:      linear-gradient(
        160deg,
        var(--navy-700) 0%,
        var(--navy-800) 100%
    );
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
}

/* Radial glow behind initials */
.team-card__photo::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(
        circle at 50% 45%,
        rgba(200, 165, 92, 0.08),
        transparent 65%
    );
}

/* Real photo — shown when src is provided */
.team-card__photo img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top center;
}

/* Initials placeholder */
.team-card__initials {
    font-family:  var(--font-display);
    font-size:    52px;
    font-weight:  var(--weight-bold);
    color:        rgba(200, 165, 92, 0.30);
    position:     relative;
    z-index:      1;
    line-height:  1;
    transition:   color var(--duration-base) var(--ease);
}

.team-card:hover .team-card__initials {
    color: rgba(200, 165, 92, 0.50);
}

/* Info strip */
.team-card__info {
    padding:      var(--space-4) var(--space-4) var(--space-5);
    border-top:   2px solid var(--cyan-500);
    background:   var(--white);
    transition:   background var(--duration-base) var(--ease);
}

.team-card:hover .team-card__info {
    background: var(--navy-800);
}

.team-card__name {
    font-family:   var(--font-display);
    font-size:     var(--text-base);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: 3px;
    line-height:   var(--leading-snug);
    transition:    color var(--duration-base) var(--ease);
}

.team-card:hover .team-card__name {
    color: var(--white);
}

.team-card__role {
    font-size:     var(--text-xs);
    font-weight:   var(--weight-semi);
    color:         var(--cyan-600);
    margin-bottom: var(--space-2);
    transition:    color var(--duration-base) var(--ease);
}

.team-card:hover .team-card__role {
    color: var(--cyan-500);
}

.team-card__subjects {
    font-size:   var(--text-xs);
    color:       var(--grey-400);
    line-height: var(--leading-relaxed);
    transition:  color var(--duration-base) var(--ease);
}

.team-card:hover .team-card__subjects {
    color: rgba(255, 255, 255, 0.40);
}


/* ================================================================
   08. PRICING — Three plan cards
================================================================ */

.pricing__header {
    text-align:    center;
    max-width:     560px;
    margin:        0 auto var(--space-12);
}

.pricing__header .body-text {
    margin:     0 auto;
    text-align: center;
}

/* Cards layout */
.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
    align-items:           start;
}

.pricing-card {
    background:    var(--white);
    border:        1px solid var(--grey-200);
    border-radius: var(--radius-lg);
    padding:       var(--space-10) var(--space-8);
    position:      relative;
    transition:    var(--transition);
}

.pricing-card:hover {
    box-shadow:  var(--shadow-md);
    transform:   translateY(-3px);
    border-color:var(--grey-300);
}

/* Featured card — dark navy */
.pricing-card--featured {
    background:   var(--navy-800);
    border-color: var(--navy-800);
    color:        var(--white);
    box-shadow:   var(--shadow-navy);
}

.pricing-card--featured:hover {
    border-color: var(--cyan-500);
    box-shadow:   var(--shadow-cyan);
}

/* Popular badge */
.pricing-card__badge {
    position:       absolute;
    top:            -14px;
    left:           50%;
    transform:      translateX(-50%);
    background:     linear-gradient(135deg, var(--cyan-500), var(--cyan-600));
    color:          var(--navy-800);
    padding:        6px 22px;
    border-radius:  var(--radius-full);
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space:    nowrap;
    box-shadow:     var(--shadow-cyan);
}

/* Plan label */
.pricing-card__label {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--grey-400);
    margin-bottom:  var(--space-4);
}

.pricing-card--featured .pricing-card__label {
    color: rgba(255, 255, 255, 0.45);
}

/* Price */
.pricing-card__price {
    font-family:   var(--font-display);
    font-size:     clamp(36px, 5vw, 52px);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    line-height:   1;
    margin-bottom: var(--space-2);
    display:       flex;
    align-items:   baseline;
    gap:           var(--space-1);
    flex-wrap:     wrap;
}

.pricing-card--featured .pricing-card__price {
    color: var(--white);
}

.pricing-card__price small {
    font-family:  var(--font-body);
    font-size:    var(--text-base);
    font-weight:  var(--weight-normal);
    color:        var(--grey-400);
}

.pricing-card--featured .pricing-card__price small {
    color: rgba(255, 255, 255, 0.45);
}

/* Description */
.pricing-card__desc {
    font-size:     var(--text-sm);
    color:         var(--grey-500);
    line-height:   var(--leading-relaxed);
    margin:        var(--space-4) 0 var(--space-6);
    padding-bottom:var(--space-6);
    border-bottom: 1px solid var(--grey-200);
}

.pricing-card--featured .pricing-card__desc {
    color:         rgba(255, 255, 255, 0.55);
    border-color:  rgba(255, 255, 255, 0.10);
}

/* Feature list */
.pricing-card__features {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin-bottom:  var(--space-8);
}

.pricing-card__feature {
    display:       flex;
    align-items:   center;
    gap:           var(--space-3);
    font-size:     var(--text-sm);
    color:         var(--grey-600);
    padding:       var(--space-3) 0;
    border-bottom: 1px solid var(--grey-200);
}

.pricing-card__feature:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

.pricing-card--featured .pricing-card__feature {
    color:        rgba(255, 248, 235, 0.74);
    border-color: rgba(200, 165, 92, 0.14);
}

.pricing-card__feature i {
    font-size:   16px;
    color:       var(--cyan-600);
    flex-shrink: 0;
}

/* CTA button */
.pricing-card__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         14px;
    border-radius:   var(--radius);
    font-size:       var(--text-base);
    font-weight:     var(--weight-semi);
    cursor:          pointer;
    font-family:     var(--font-body);
    transition:      var(--transition);
    text-decoration: none;
    border:          2px solid transparent;
}

/* Outline button — on light cards */
.pricing-card__btn--outline {
    background:   transparent;
    color:        var(--grey-900);
    border-color: var(--grey-200);
}

.pricing-card__btn--outline:hover {
    background:   var(--navy-800);
    color:        var(--white);
    border-color: var(--navy-800);
}

/* Solid cyan button — on featured card */
.pricing-card__btn--solid {
    background:   var(--cyan-500);
    color:        var(--navy-800);
    border-color: var(--cyan-500);
}

.pricing-card__btn--solid:hover {
    background:   transparent;
    color:        var(--cyan-500);
    transform:    translateY(-1px);
    box-shadow:   var(--shadow-cyan);
}

/* School pricing note below grid */
.pricing__note {
    text-align:  center;
    margin-top:  var(--space-8);
    font-size:   var(--text-sm);
    color:       var(--grey-400);
}

.pricing__note a {
    color:           var(--cyan-600);
    font-weight:     var(--weight-semi);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pricing__note a:hover {
    color: var(--cyan-500);
}


/* ================================================================
   09. REGISTRATION — Split layout with form
================================================================ */

.reg-grid {
    display:               grid;
    grid-template-columns: 1fr 1.2fr;
    gap:                   var(--space-20);
    align-items:           center;
}

/* Left — benefits list */
.reg-perks {
    margin-top: var(--space-8);
    display:    flex;
    flex-direction: column;
    gap:        0;
}

.reg-perk {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    font-size:     var(--text-base);
    color:         rgba(255, 248, 235, 0.76);
    padding:       var(--space-4) 0;
    border-bottom: 1px solid rgba(200, 165, 92, 0.12);
}

.reg-perk:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.reg-perk i {
    font-size:   18px;
    color:       var(--cyan-500);
    flex-shrink: 0;
}

/* Right — form card */
.reg-form-card {
    background:    var(--white);
    border-radius: var(--radius-lg);
    padding:       var(--space-12) var(--space-10);
    box-shadow:    var(--shadow-xl);
}

.reg-form-card__title {
    font-family:   var(--font-display);
    font-size:     var(--text-3xl);
    font-weight:   var(--weight-bold);
    color:         var(--grey-900);
    margin-bottom: var(--space-8);
    line-height:   var(--leading-snug);
}

/* Form layout */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-4);
}

.form-group {
    margin-bottom: var(--space-4);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-2);
}

.form-group label {
    font-size:      var(--text-xs);
    font-weight:    var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--grey-400);
}

.form-group input,
.form-group select {
    width:         100%;
    padding:       12px var(--space-4);
    border:        1.5px solid var(--grey-200);
    border-radius: var(--radius);
    font-size:     var(--text-base);
    font-family:   var(--font-body);
    color:         var(--grey-900);
    background:    var(--grey-50);
    outline:       none;
    transition:    var(--transition);
}

/* Focus state */
.form-group input:focus,
.form-group select:focus {
    border-color: var(--cyan-600);
    background:   var(--white);
    box-shadow:   0 0 0 3px rgba(0, 150, 200, 0.12);
}

.form-group input::placeholder {
    color: var(--grey-300);
}

/* Submit button */
.form-submit {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-3);
    width:           100%;
    padding:         16px;
    margin-top:      var(--space-2);
    border-radius:   var(--radius);
    background:      var(--navy-800);
    color:           var(--white);
    font-family:     var(--font-display);
    font-size:       var(--text-xl);
    font-weight:     var(--weight-bold);
    border:          2px solid var(--navy-800);
    cursor:          pointer;
    transition:      var(--transition);
    letter-spacing:  0.01em;
}

.form-submit:hover {
    background:   var(--cyan-500);
    color:        var(--navy-800);
    border-color: var(--cyan-500);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-cyan);
}

/* Form note */
.form-note {
    text-align:  center;
    font-size:   var(--text-xs);
    color:       var(--grey-400);
    margin-top:  var(--space-4);
    line-height: var(--leading-relaxed);
}

/* Form result alert */
.form-result {
    margin-bottom: var(--space-4);
    border-radius: var(--radius);
    padding:       var(--space-4);
    font-size:     var(--text-sm);
    font-weight:   var(--weight-medium);
    line-height:   var(--leading-relaxed);
}

.form-result--error   {
    background:  var(--error-bg);
    color:       var(--error);
    border:      1px solid rgba(220, 38, 38, 0.20);
}

.form-result--success {
    background:  var(--success-bg);
    color:       var(--success);
    border:      1px solid rgba(22, 163, 74, 0.20);
}


/* ================================================================
   RESPONSIVE — ALL SECTIONS
================================================================ */

/* Large tablet */
@media (max-width: 1100px) {

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 900px) {

    /* Stats bar — 2 columns */
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-bar__item:nth-child(2) { border-right: none; }
    .stats-bar__item:nth-child(1),
    .stats-bar__item:nth-child(2) {
        border-bottom: 1px solid var(--navy-600);
    }

    /* About — stack vertically */
    .about { grid-template-columns: 1fr; gap: var(--space-12); }

    /* Curriculum — 2 columns */
    .curriculum__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* AI pillars — stack vertically */
    .ai-grid {
        grid-template-columns: 1fr;
    }

    .ai-pillar {
        border-right:  none;
        border-bottom: 1px solid var(--grey-200);
    }

    .ai-pillar:last-child { border-bottom: none; }

    /* Tech courses — stack */
    .tech-section__header { grid-template-columns: 1fr; gap: var(--space-6); }
    .tech-grid             { grid-template-columns: 1fr; }

    /* How it works — 2 columns */
    .how-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .how-step:nth-child(2) { border-right: none; }
    .how-step:nth-child(1),
    .how-step:nth-child(2) {
        border-bottom: 1px solid var(--grey-200);
    }

    /* Team — 2 columns */
    .team__header { grid-template-columns: 1fr; gap: var(--space-6); }
    .team-grid    { grid-template-columns: repeat(2, 1fr); }

    /* Pricing — stack */
    .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }

    /* Registration — stack */
    .reg-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* Mobile */
@media (max-width: 600px) {

    /* Curriculum — single column + scrollable tabs */
    .curriculum__header { flex-direction: column; align-items: flex-start; }

    .curriculum__tabs {
        width:     100%;
        overflow-x:auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .curriculum__tabs::-webkit-scrollbar { display: none; }

    .curriculum__tab { flex-shrink: 0; }

    .curriculum__grid { grid-template-columns: 1fr; }

    /* How it works — single column */
    .how-grid { grid-template-columns: 1fr; border-radius: var(--radius); }
    .how-step { border-right: none; border-bottom: 1px solid var(--grey-200); }
    .how-step:last-child { border-bottom: none; }

    /* Team — 2 columns on mobile */
    .team-grid { grid-template-columns: repeat(2, 1fr); }

    /* Registration form */
    .reg-form-card { padding: var(--space-8) var(--space-5); }
    .form-row      { grid-template-columns: 1fr; }
}

/* Very small phones */
@media (max-width: 380px) {

    .team-grid { grid-template-columns: 1fr; }

    .stats-bar {
        grid-template-columns: 1fr 1fr;
    }
}