/* =========================================================
   CLASS 4 · NEEV BATCH · AARSH INSTITUTE
   Theme: "Nightfall Campus"
   A deep midnight-indigo campus lit by warm lamplight.
   Namespace: class4-
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

.class4-page {
  --c4-bg: #0B1220;
  --c4-bg-deep: #070C16;
  --c4-surface: #131B2E;
  --c4-surface-2: #1B2540;
  --c4-border: rgba(244, 239, 230, 0.08);
  --c4-cream: #F5EFE6;
  --c4-muted: #A8B0C3;
  --c4-gold: #F4B860;
  --c4-gold-soft: rgba(244, 184, 96, 0.16);
  --c4-mint: #7FDBB6;
  --c4-blue: #7CA8E0;
  --c4-font-display: 'Fraunces', Georgia, serif;
  --c4-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --c4-font-mono: 'IBM Plex Mono', monospace;
  --c4-radius: 22px;
  --c4-radius-sm: 12px;
  --c4-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  background: var(--c4-bg);
  color: var(--c4-cream);
  font-family: var(--c4-font-body);
  overflow-x: clip;
}

.class4-page *, .class4-page *::before, .class4-page *::after { box-sizing: border-box; }
.class4-page img { max-width: 100%; display: block; }
.class4-page a { color: inherit; text-decoration: none; }

/* ---------- lamp cursor companion (signature element) ---------- */
.class4-lamp {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--c4-gold-soft) 0%, rgba(244,184,96,0.05) 45%, transparent 70%);
  transition: opacity 0.4s var(--c4-ease);
  will-change: transform;
}

/* ---------- shared type & layout ---------- */
.class4-eyebrow {
  font-family: var(--c4-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c4-gold);
  margin-bottom: 14px;
}

.class4-h2 {
  font-family: var(--c4-font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.15;
  color: var(--c4-cream);
  max-width: 16ch;
  margin: 0 0 20px;
}

.class4-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--c4-muted);
  max-width: 62ch;
  line-height: 1.7;
}

.class4-note { color: var(--c4-muted); font-size: 0.85rem; margin-top: 16px; }

.class4-section {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 24px;
}

.class4-card, .class4-tile, .class4-subject, .class4-skill,
.class4-stem__card, .class4-trust__card, .class4-contact__card {
  background: var(--c4-surface);
  border: 1px solid var(--c4-border);
  border-radius: var(--c4-radius);
  padding: 28px;
  transition: transform 0.5s var(--c4-ease), border-color 0.4s var(--c4-ease), box-shadow 0.4s var(--c4-ease);
}
.class4-card:hover, .class4-tile:hover, .class4-subject:hover, .class4-skill:hover,
.class4-stem__card:hover, .class4-trust__card:hover {
  transform: translateY(-6px);
  border-color: rgba(244,184,96,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.class4-card h3, .class4-tile h3, .class4-subject h3, .class4-skill h3, .class4-stem__card h3 {
  font-family: var(--c4-font-display);
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: var(--c4-cream);
}
.class4-card p, .class4-tile p, .class4-subject p, .class4-skill p, .class4-stem__card p {
  color: var(--c4-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}

/* buttons */
.class4-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.35s var(--c4-ease), box-shadow 0.35s var(--c4-ease), background 0.3s;
}
.class4-btn--primary {
  background: linear-gradient(135deg, var(--c4-gold), #e2a24a);
  color: #1a1305;
  box-shadow: 0 10px 30px rgba(244,184,96,0.25);
}
.class4-btn--primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(244,184,96,0.35); }
.class4-btn--ghost {
  background: transparent;
  border-color: rgba(245,239,230,0.3);
  color: var(--c4-cream);
}
.class4-btn--ghost:hover { border-color: var(--c4-mint); color: var(--c4-mint); transform: translateY(-3px); }

/* badges & pills */
.class4-badge {
  font-family: var(--c4-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--c4-border);
  background: rgba(245,239,230,0.04);
  color: var(--c4-muted);
}
.class4-badge--accent { color: var(--c4-gold); border-color: rgba(244,184,96,0.3); }
.class4-badge--mint { color: var(--c4-mint); border-color: rgba(127,219,182,0.3); }

.class4-pill {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--c4-surface-2);
  border: 1px solid var(--c4-border);
  font-size: 0.88rem;
  color: var(--c4-cream);
}

/* =========================================================
   01 · HERO
========================================================= */
.class4-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 100px;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(124,168,224,0.18), transparent 60%),
    linear-gradient(180deg, var(--c4-bg-deep), var(--c4-bg) 60%);
  overflow: hidden;
}

.class4-hero__sky { position: absolute; inset: 0; z-index: 0; }
.class4-star {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--c4-cream);
  border-radius: 50%;
  opacity: 0.6;
  animation: class4-twinkle 3.4s ease-in-out infinite;
}
.class4-star--1 { top: 12%; left: 10%; animation-delay: 0s; }
.class4-star--2 { top: 20%; left: 80%; animation-delay: 0.6s; }
.class4-star--3 { top: 65%; left: 6%; animation-delay: 1.2s; }
.class4-star--4 { top: 8%; left: 45%; animation-delay: 1.8s; }
.class4-star--5 { top: 40%; left: 90%; animation-delay: 2.2s; }
.class4-star--6 { top: 75%; left: 60%; animation-delay: 2.8s; }
@keyframes class4-twinkle { 0%,100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.6); } }

.class4-cloud {
  position: absolute;
  width: 220px; height: 70px;
  background: rgba(245,239,230,0.03);
  border-radius: 100px;
  filter: blur(2px);
  animation: class4-drift 26s linear infinite;
}
.class4-cloud--1 { top: 18%; left: -10%; }
.class4-cloud--2 { top: 55%; left: -20%; animation-duration: 34s; }
@keyframes class4-drift { from { transform: translateX(-10vw); } to { transform: translateX(120vw); } }

.class4-plane {
  position: absolute;
  top: 30%; left: -6%;
  width: 26px; height: 26px;
  background: var(--c4-gold);
  clip-path: polygon(0 50%, 100% 0, 70% 50%, 100% 100%);
  animation: class4-fly 18s linear infinite;
}
@keyframes class4-fly { from { transform: translate(-10vw, 0) rotate(6deg); } to { transform: translate(115vw, -40px) rotate(6deg); } }

.class4-hero__badges { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; }

.class4-hero__content { position: relative; z-index: 2; max-width: 900px; }
.class4-hero__title {
  font-family: var(--c4-font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.08;
  margin: 0 0 22px;
}
.class4-glow-text {
  color: var(--c4-gold);
  text-shadow: 0 0 40px rgba(244,184,96,0.45);
}
.class4-hero__subtitle { color: var(--c4-muted); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 56ch; margin: 0 auto 36px; line-height: 1.7; }
.class4-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.class4-hero__stage { position: relative; z-index: 2; margin-top: 56px; max-width: 420px; width: 100%; }
.class4-hero__student { border-radius: var(--c4-radius); border: 1px solid var(--c4-border); }

.class4-glass {
  position: absolute;
  padding: 10px 16px;
  border-radius: var(--c4-radius-sm);
  background: rgba(19, 27, 46, 0.55);
  border: 1px solid rgba(245,239,230,0.12);
  backdrop-filter: blur(14px);
  font-size: 0.82rem;
  color: var(--c4-cream);
}
.class4-glass--book { top: -6%; left: -18%; }
.class4-glass--math { top: 10%; right: -20%; }
.class4-glass--science { bottom: 14%; left: -22%; }
.class4-glass--globe { bottom: -8%; right: -12%; }

.class4-hero__scroll {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--c4-font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--c4-muted); display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 2;
}
.class4-hero__scroll span { width: 1px; height: 30px; background: linear-gradient(var(--c4-gold), transparent); animation: class4-scrollline 1.8s ease-in-out infinite; }
@keyframes class4-scrollline { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* =========================================================
   02 · ABOUT
========================================================= */
.class4-about__grid, .class4-assessment__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }

/* =========================================================
   03 · WHY CLASS 4 MATTERS
========================================================= */
.class4-why-class4 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.class4-why__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.class4-why__list li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 18px 20px; background: var(--c4-surface); border-radius: var(--c4-radius-sm); border: 1px solid var(--c4-border);
}
.class4-why__list span { font-family: var(--c4-font-mono); color: var(--c4-gold); font-size: 0.8rem; }

/* =========================================================
   04 · WHY US
========================================================= */
.class4-why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.class4-tile img { border-radius: var(--c4-radius-sm); margin-bottom: 16px; aspect-ratio: 4/3; object-fit: cover; }

/* =========================================================
   05 · PARENT TRUST
========================================================= */
.class4-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.class4-trust__card { text-align: center; }
.class4-trust__card strong { display: block; font-family: var(--c4-font-display); font-size: 1.6rem; color: var(--c4-gold); }
.class4-trust__card span { color: var(--c4-muted); font-size: 0.85rem; }

/* =========================================================
   06 · FUTURE READY
========================================================= */
.class4-future__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* =========================================================
   07 · SMART LEARNING SYSTEM
========================================================= */
.class4-flow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }
.class4-flow__step {
  flex: 1; min-width: 140px; text-align: center; padding: 24px 16px;
  background: var(--c4-surface-2); border: 1px solid var(--c4-border); border-radius: var(--c4-radius-sm);
  font-family: var(--c4-font-display); color: var(--c4-mint);
  position: relative;
}
.class4-flow__step:not(:last-child)::after {
  content: '→'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--c4-muted);
}

/* =========================================================
   08-13 · SUBJECTS
========================================================= */
.class4-subjects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.class4-subject img { border-radius: var(--c4-radius-sm); margin-bottom: 16px; aspect-ratio: 16/10; object-fit: cover; }

/* =========================================================
   14-18 · SKILLS
========================================================= */
.class4-skills__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }

/* =========================================================
   19-21 · STEM
========================================================= */
.class4-stem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.class4-stem__card img { border-radius: var(--c4-radius-sm); margin-bottom: 16px; aspect-ratio: 4/3; object-fit: cover; }

/* =========================================================
   22 · SMART CLASSROOM
========================================================= */
.class4-classroom { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.class4-classroom__media img { border-radius: var(--c4-radius); border: 1px solid var(--c4-border); }

/* =========================================================
   24 · LIBRARY
========================================================= */
.class4-library__frame { margin-top: 36px; border-radius: var(--c4-radius); overflow: hidden; border: 1px solid var(--c4-border); }

/* =========================================================
   28 · GALLERY
========================================================= */
.class4-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.class4-gallery__grid img { border-radius: var(--c4-radius-sm); aspect-ratio: 1/1; object-fit: cover; }

/* =========================================================
   29 · DAILY JOURNEY
========================================================= */
.class4-journey__line { display: flex; gap: 0; margin-top: 46px; position: relative; }
.class4-journey__line::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: var(--c4-border); }
.class4-journey__stop { flex: 1; text-align: center; position: relative; padding-top: 26px; }
.class4-journey__stop::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--c4-gold); }
.class4-journey__stop time { display: block; font-family: var(--c4-font-mono); color: var(--c4-gold); font-size: 0.78rem; margin-bottom: 6px; }
.class4-journey__stop p { color: var(--c4-muted); font-size: 0.88rem; margin: 0; }

/* =========================================================
   30 · RESOURCES
========================================================= */
.class4-resources__row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.class4-resource {
  padding: 14px 22px; border-radius: var(--c4-radius-sm); background: var(--c4-surface);
  border: 1px solid var(--c4-border); font-size: 0.9rem; transition: border-color 0.3s, transform 0.3s;
}
.class4-resource:hover { border-color: var(--c4-mint); transform: translateY(-3px); }

/* =========================================================
   31 · FAQ
========================================================= */
.class4-faq__list { display: flex; flex-direction: column; gap: 14px; margin-top: 36px; }
.class4-faq__item { background: var(--c4-surface); border: 1px solid var(--c4-border); border-radius: var(--c4-radius-sm); padding: 18px 22px; }
.class4-faq__item summary { cursor: pointer; font-weight: 600; color: var(--c4-cream); }
.class4-faq__item p { color: var(--c4-muted); margin-top: 12px; line-height: 1.6; }



/* ==========================================================================
   PREMIUM ADMISSION FORM
========================================================================== */

.class4-form{

    max-width:900px;

    margin:70px auto 0;

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:24px;

}

.class4-field{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.class4-field:nth-child(6){

    grid-column:1/-1;

}

.class4-field label{

    font-size:.92rem;

    font-weight:600;

    color:var(--class4-text);

}

.class4-field input,
.class4-field textarea{

    width:100%;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:var(--class4-text);

    border-radius:16px;

    padding:15px 18px;

    font:inherit;

    transition:.3s;

    outline:none;

}

.class4-field input::placeholder,
.class4-field textarea::placeholder{

    color:rgba(255,255,255,.45);

}

.class4-field input:focus,
.class4-field textarea:focus{

    border-color:var(--class4-accent);

    box-shadow:0 0 0 4px rgba(255,180,0,.08);

    background:rgba(255,255,255,.06);

}

.class4-field textarea{

    resize:vertical;

    min-height:150px;

}

#submitBtn{

    grid-column:1/-1;

    justify-self:center;

    min-width:260px;

    border:none;

    cursor:pointer;

    border-radius:999px;

    padding:16px 34px;

    font-weight:700;

    font-size:16px;

    color:#111;

    background:linear-gradient(135deg,#ffd34d,#ffb400);

    transition:.3s;

}

#submitBtn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(255,180,0,.28);

}

#submitBtn.loading{

    opacity:.75;

    pointer-events:none;

}

#submitBtn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    display:inline-block;

    border:2px solid rgba(0,0,0,.25);

    border-top-color:#000;

    border-radius:50%;

    animation:class4Spin .8s linear infinite;

    vertical-align:middle;

}

@keyframes class4Spin{

    to{

        transform:rotate(360deg);

    }

}

#formMessage{

    grid-column:1/-1;

    text-align:center;

    font-weight:600;

    margin-top:8px;

}

#formMessage.success{

    color:#4ade80;

}

#formMessage.error{

    color:#ff7b7b;

}

@media(max-width:768px){

    .class4-form{

        grid-template-columns:1fr;

    }

    .class4-field:nth-child(6){

        grid-column:auto;

    }

    #submitBtn{

        width:100%;

    }

}


/* ==========================================================================
   THANK YOU POPUP
========================================================================== */

.thankyou-modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(8px);

    z-index:99999;

}

.thankyou-modal.active{

    display:flex;

    animation:fadeIn .35s ease;

}

.thankyou-box{

    width:100%;

    max-width:520px;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:40px 32px;

    text-align:center;

    color:#fff;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

    animation:popupScale .35s ease;

}

.thankyou-icon{

    width:82px;

    height:82px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#22c55e,#16a34a);

}

.thankyou-box h3{

    font-size:34px;

    margin-bottom:16px;

}

.thankyou-box p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:34px;

}

.thankyou-actions{

    display:flex;

    gap:14px;

    justify-content:center;

    flex-wrap:wrap;

    margin-bottom:24px;

}

.thankyou-btn{

    padding:12px 22px;

    border-radius:999px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.thankyou-btn:hover{

    transform:translateY(-3px);

}

.whatsapp{

    background:#25D366;

}

.instagram{

    background:#E1306C;

}

.facebook{

    background:#1877F2;

}

.thankyou-close{

    border:none;

    cursor:pointer;

    padding:14px 32px;

    border-radius:999px;

    background:#fbbf24;

    color:#111;

    font-weight:700;

    font-size:15px;

    transition:.3s;

}

.thankyou-close:hover{

    transform:translateY(-3px);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes popupScale{

    from{

        transform:scale(.85);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@media(max-width:600px){

    .thankyou-box{

        padding:32px 24px;

    }

    .thankyou-box h3{

        font-size:28px;

    }

    .thankyou-actions{

        flex-direction:column;

    }

    .thankyou-btn{

        width:100%;

    }

    .thankyou-close{

        width:100%;

    }

}

.thankyou-modal,
.thankyou-modal *{
    cursor: default;
}

.thankyou-btn,
.thankyou-close{
    cursor: pointer !important;
}
/* =========================================================
   33 · CONTACT
========================================================= */
.class4-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; }
.class4-contact__card img { border-radius: var(--c4-radius-sm); margin-bottom: 18px; aspect-ratio: 16/9; object-fit: cover; }
.class4-contact__addr { color: var(--c4-cream); font-weight: 600; }
.class4-social { display: flex; gap: 10px; margin-top: 16px; }
.class4-social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c4-surface-2); border: 1px solid var(--c4-border); font-size: 0.72rem; font-family: var(--c4-font-mono); }
.class4-contact__map {
  border-radius: var(--c4-radius); border: 1px solid var(--c4-border);
  background: repeating-linear-gradient(45deg, var(--c4-surface), var(--c4-surface) 10px, var(--c4-surface-2) 10px, var(--c4-surface-2) 20px);
  display: flex; align-items: center; justify-content: center; color: var(--c4-muted); font-family: var(--c4-font-mono); font-size: 0.85rem; min-height: 260px;
}

/* =========================================================
   34 · CAMPUS VISIT
========================================================= */
.class4-visit { text-align: center; }
.class4-visit .class4-h2 { margin-left: auto; margin-right: auto; }
.class4-visit .class4-lead { margin-left: auto; margin-right: auto; margin-bottom: 30px; }

/* =========================================================
   35 · FINAL CTA
========================================================= */
.class4-final {
  position: relative;
  min-height: 90vh;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 120px 24px;
  background: radial-gradient(ellipse at 50% 30%, rgba(244,184,96,0.14), transparent 60%), var(--c4-bg-deep);
  overflow: hidden;
}
.class4-final__sky { position: absolute; inset: 0; z-index: 0; }
.class4-final__student { position: absolute; bottom: 0; right: 6%; width: 320px; opacity: 0.9; border-radius: var(--c4-radius); z-index: 1; display: none; }
.class4-final__content { position: relative; z-index: 2; max-width: 720px; }
.class4-final .class4-h2 { margin: 0 auto 30px; max-width: 20ch; }

@media (min-width: 900px) { .class4-final__student { display: block; } }

/* =========================================================
   scroll reveal base state (JS toggles .is-visible)
========================================================= */
[data-class4-reveal] { opacity: 0; transform: translateY(28px); }
[data-class4-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.9s var(--c4-ease), transform 0.9s var(--c4-ease); }

[data-class4-float] { animation: class4-float 5s ease-in-out infinite; }
@keyframes class4-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* =========================================================
   responsive
========================================================= */
@media (max-width: 1024px) {
  .class4-why-class4, .class4-classroom { grid-template-columns: 1fr; gap: 32px; }
  .class4-about__grid, .class4-why-us__grid, .class4-subjects__grid, .class4-skills__list,
  .class4-stem__grid, .class4-trust__grid, .class4-assessment__grid, .class4-contact__grid,
  .class4-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .class4-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .class4-section { padding: 80px 20px; }
  .class4-about__grid, .class4-why-us__grid, .class4-subjects__grid, .class4-skills__list,
  .class4-stem__grid, .class4-trust__grid, .class4-assessment__grid, .class4-contact__grid,
  .class4-gallery__grid { grid-template-columns: 1fr; }
  .class4-journey__line { flex-direction: column; gap: 24px; }
  .class4-journey__line::before { display: none; }
  .class4-glass { display: none; }
  .class4-lamp { display: none; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .class4-page * { animation: none !important; transition: none !important; }
  [data-class4-reveal] { opacity: 1; transform: none; }
}
.class4-page a:focus-visible, .class4-page button:focus-visible, .class4-page input:focus-visible,
.class4-page select:focus-visible, .class4-page textarea:focus-visible, .class4-page summary:focus-visible {
  outline: 2px solid var(--c4-gold);
  outline-offset: 3px;
}



/* ==========================================================================
   RELATED COURSES
========================================================================== */

.class4-related{

    background:var(--c3-bg);

}

.class4-related .class4-container{

    max-width:1240px;

    margin:0 auto;

}

.class4-related .class4-eyebrow--center{

    display:table;

    margin:0 auto 18px;

}

.class4-related .class4-section-title--center{

    width:100%;

    max-width:760px;

    margin:0 auto 18px;

    text-align:center;

    font-size:clamp(34px,4vw,56px);

    line-height:1.15;

}

.class4-related .class4-section-lead{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

    line-height:1.8;

}

.class4-related__grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:28px;

}

.class4-related__card{

    position:relative;

    display:flex;

    flex-direction:column;

    text-decoration:none;

    background:var(--c3-surface-2);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:32px 28px;

    transition:.35s ease;

    overflow:hidden;

}

.class4-related__card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,
        var(--c3-blue),
        var(--c3-mint),
        var(--c3-yellow),
        var(--c3-orange));

}

.class4-related__card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,155,84,.35);

    box-shadow:0 22px 55px rgba(0,0,0,.35);

}

.class4-related__number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:95px;

    height:38px;

    border-radius:999px;

    background:rgba(255,155,84,.12);

    color:var(--c3-orange);

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.class4-related__card h3{

    color:var(--c3-navy);

    font-size:24px;

    margin-bottom:14px;

    line-height:1.3;

}

.class4-related__card p{

    color:var(--c3-navy-soft);

    line-height:1.8;

    flex:1;

}

.class4-related__link{

    margin-top:24px;

    color:var(--c3-orange);

    font-weight:700;

    font-size:15px;

    transition:.3s;

}

.class4-related__card:hover .class4-related__link{

    transform:translateX(6px);

}

@media(max-width:992px){

    .class4-related__grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .class4-related .class4-section-title--center{

        max-width:100%;

    }

    .class4-related .class4-section-lead{

        margin-bottom:40px;

    }

}

@media(max-width:576px){

    .class4-related__grid{

        grid-template-columns:1fr;

    }

    .class4-related__card{

        padding:28px 22px;

    }

}