/* Base */
:root{--blue-600:#0b1b2b;--blue-700:#27345D;--blue-800:rgb(2, 28, 93);--ink:#0b1220;--ink-2:#1f2937;--muted:#667085;--border:#e6eaf2;--bg:#ffffff;--bg-soft:#f7f9fc;--white:#ffffff}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
/* Prevent horizontal scrolling on all devices */
html,body{overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,92%);margin:0 auto}

/* Header */
.page-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{width:56px;height:46px}
.page-nav{display:flex;gap:18px;align-items:center}
.menu-toggle{display:none;background:#ffffff;border:1px solid var(--border);border-radius:10px;width:40px;height:40px;place-items:center;color:#03246b}
.menu-toggle i{font-size:18px}
.page-nav a{padding:8px 12px;border-radius:10px;color:#1f2a44;font-weight: 900;}
.page-nav a:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(22,96,255,.35);color: #000;}
.btn-primary{background:var(--blue-600);border-radius:12px;padding:10px 16px;box-shadow:0 10px 25px rgba(22,96,255,.25);transition:.25s ease;color: white;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(22,96,255,.35);}
.btn-lg{padding:14px 22px;border-radius:14px;font-weight:600}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#ffffff, #f8fbff)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:80px 0}
.visual-wrapper{display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:500px;width:100%}

.copy .eyebrow{display:inline-block;color:#011341;background:#eef4ff;border:1px solid #d6e2ff;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;margin:0 0 10px}
.copy h1{font-size:52px;line-height:1.05;margin:0 0 10px;letter-spacing:-0.5px}
.copy p{color:#4b5565;margin:0 0 18px;font-size:18px}
.badges{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:10px 0 18px}
.badge{display:inline-flex;align-items:center;gap:8px;background:#ffffff;border:1px solid var(--border);color:#0b1220;padding:8px 12px;border-radius:12px;font-size:13px}
.badge i{color:#031c52}
.dot{width:6px;height:6px;border-radius:50%;background:#c9d8ff}
.cta{display:flex;gap:12px;align-items:center}
.visual{position:relative;min-height:260px;perspective:900px;transform-style:preserve-3d;overflow:hidden}
.orb{position:absolute;inset:auto 0 0 0;margin:auto;width:220px;height:220px;border-radius:50%;
  background:
    radial-gradient(120px 140px at 30% 28%, rgba(255, 255, 255, 0.23), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 35% 35%, #0442c8, #012173 60%, #072168 72%, #0b2b78 100%);
  filter:blur(0.2px);box-shadow:0 30px 80px rgba(26,79,255,.28), inset -20px -30px 60px rgba(2,25,94,.55), inset 20px 30px 60px rgba(0, 24, 68, 0.15);
  
}
.orb::before{content:"";position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.05), rgba(255,255,255,.2) 25%, rgba(255,255,255,0) 40%, rgba(255,255,255,.18) 60%, rgba(255,255,255,.06) 75%, rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay;filter:blur(0.3px);
}
.orb::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.765), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 70%);
  top:26px;left:42px;transform:translateZ(35px);filter:blur(0.2px);
}
.rings{position:absolute;inset:0;display:grid;place-items:center;transform:rotateX(62deg) translateZ(-20px);transform-style:preserve-3d}
.rings span{position:absolute;border:1px solid #999ea8;border-radius:50%;animation:pulse 4s ease-in-out infinite;backdrop-filter:blur(0.5px)}
.rings span:nth-child(1){width:280px;height:280px;animation-delay:0s}
.rings span:nth-child(2){width:360px;height:360px;animation-delay:.8s}
.rings span:nth-child(3){width:440px;height:440px;animation-delay:1.6s}
@keyframes pulse{0%,100%{opacity:.2;transform:scale(.98)}50%{opacity:.55;transform:scale(1)}}
@keyframes orb-rotate{0%{transform:rotateY(0deg)}100%{transform:rotateY(360deg)}}
@keyframes highlight-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Sparkles + Floating card */
.sparkles{position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d}
.sparkles i{position:absolute;width:6px;height:6px;background:linear-gradient(180deg,#3a7bff,#011c62);border-radius:50%;box-shadow:0 0 16px rgba(22,96,255,.55);transform:translateZ(var(--z,0px))}
.sparkles i:nth-child(1){top:10%;left:10%;animation:float 6s ease-in-out infinite}
.sparkles i:nth-child(2){top:20%;right:20%;animation:float 7s ease-in-out infinite .6s}
.sparkles i:nth-child(3){bottom:25%;left:25%;animation:float 8s ease-in-out infinite 1s}
.sparkles i:nth-child(4){bottom:10%;right:10%;animation:float 6.5s ease-in-out infinite .2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.float-card{display:flex;gap:10px;align-items:center;background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;box-shadow:0 12px 30px rgba(16,24,40,.12);animation:drift 8s ease-in-out infinite}
.fc-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#eef4ff;color:#03246b}
.fc-text{display:flex;flex-direction:column}
.fc-text strong{font-size:14px;line-height:1}
.fc-text span{font-size:12px;color:#4b5565}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Form */
.collab-section{padding:56px 0}
.collab-section h2{font-size:32px;margin:0 0 6px}
.collab-section .sub{color:#4b5565;margin:0 0 22px}
.form-card{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:22px;display:grid;gap:14px;box-shadow:0 10px 30px rgba(16,24,40,.05)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{position:relative;display:flex;align-items:center;background:#ffffff;border:1px solid var(--border);border-radius:14px;padding:10px 12px;transition:.2s}
.field:focus-within{border-color:#012a7c;box-shadow:0 0 0 4px rgba(58,123,255,.15)}
.field .icon{color:#032872;margin-right:10px;display:grid;place-items:center}
.field input, .field textarea{flex:1;background:transparent;border:0;outline:0;color:#0b1220;font-size:14px;font-family:inherit}
.field textarea{resize:none;padding:5px 0}
.btn-gradient{margin-top:6px;border:0;padding:14px 20px;width:100%;border-radius:14px;font-weight:700;color:#fff;background:linear-gradient(90deg,#02287a,#011549);box-shadow:0 14px 30px rgba(22,96,255,.35);cursor:pointer;transition:.25s}
.btn-gradient:hover{transform:translateY(-1px);filter:saturate(1.1)}
.tiny{color:#667085;text-align:center;margin:6px 0 0;font-size:12px}

/* Benefits */
.benefits-section{padding:56px 0}
.benefits-section h2{font-size:32px;margin:0 0 18px}
.benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.benefit-card{background:#ffffff;border:1px solid var(--border);border-radius:16px;padding:18px;transition:transform .25s, box-shadow .25s, border-color .25s}
.benefit-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(16,24,40,.08);border-color:#c9d8ff}
.benefit-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:#eef4ff;color:#04266a;margin-bottom:10px}
.benefit-card h3{margin:0 0 6px;font-size:18px}
.benefit-card p{margin:0;color:#4b5565}

/* Promo + Schools */
.promo-section{padding:56px 0;background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.promo-copy h2{font-size:36px;margin:0 0 10px}
.promo-copy p{color:#4b5565;margin:0 0 16px}
.schools-scroller{overflow:hidden}
.schools-track{display:flex;gap:14px;animation:scroll 22s linear infinite}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.school-card{min-width:220px;background:#ffffff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.school-card img{height:120px;width:100%;object-fit:cover}
.school-card .meta{padding:10px}
.school-card h4{margin:0 0 4px;font-size:16px}
.school-card span{color:#667085;font-size:13px}

/* Footer */
.page-footer{border-top:1px solid var(--border);padding:20px 0;background:#ffffff}
.footer-row{display:flex;align-items:center;justify-content:space-between}
.link{color:#032468}

@media (max-width: 1200px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:30px}
  .atom-orbit{transform:scale(.8)}
  .visual-wrapper{min-height:400px}
}
@media (max-width: 992px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .copy{display:flex;flex-direction:column;align-items:center}
  .badges, .cta{justify-content:center}
  .atom-orbit{transform:scale(.7)}
  .visual-wrapper{min-height:350px}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .promo-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .hero-grid{gap:20px;padding:44px 0}
  .copy h1{font-size:42px}
  .cta{flex-direction:column;align-items:stretch}
  .float-card{align-self:center}
  .atom-orbit{transform:scale(.6)}
  .visual-wrapper{min-height:300px}
}
@media (max-width: 480px){
  .copy h1{font-size:32px; word-break: break-word;}
  .copy p{font-size:15px;}
  .atom-orbit{transform:scale(.5)}
  .visual-wrapper{min-height:300px; margin-top: -50px;}
  .badges{flex-direction: column; gap: 5px; align-items: center;}
  .badges .dot{display: none;}
}

@media (max-width: 480px){
  .copy h1{font-size:32px; line-height: 1.2;}
  .copy p{font-size:15px; margin-bottom: 20px;}
  .atom-orbit{transform:scale(.7) !important}
  .visual-wrapper{min-height:380px; margin-top: -30px; margin-bottom: -40px;}
  .badges{flex-direction: column; gap: 8px; align-items: center; margin-top: 15px;}
  .badges .dot{display: none;}
  .cta{gap: 15px;}
  .btn-lg{padding: 12px 24px; font-size: 16px;}
}

/* Static Atom Design */
.atom-orbit {
  position: relative;
  width: 600px;
  height: 500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Nucleus */
.atom-sphere {
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle at 35% 35%,
    #7ab1ff 0%,
    #1a56db 50%,
    #0c4a6e 100%
  );
  border-radius: 50%;
  box-shadow: 
    inset 0 0 30px rgba(255, 255, 255, 0.4),
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 60px rgba(26, 86, 219, 0.5);
  z-index: 10;
}

/* Shine effect on the nucleus */
.atom-shine {
  position: absolute;
  top: 20%;
  left: 20%;
  width: 25%;
  height: 25%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  filter: blur(4px);
}

/* Electron orbits */
.atom-ring {
  position: absolute;
  border: 1px solid rgba(180, 200, 255, 0.3);
  border-radius: 50%;
  transform-style: preserve-3d;
  box-shadow: 0 0 15px rgba(100, 150, 255, 0.2);
}

.ring1 {
  width: 400px;
  height: 400px;
  transform: rotateX(70deg) rotateY(20deg);
  animation: atom-spin 8s linear infinite;
}

.ring2 {
  width: 500px;
  height: 500px;
  transform: rotateX(80deg) rotateY(30deg);
  animation: atom-spin 12s linear infinite reverse;
}

.ring3 {
  width: 600px;
  height: 600px;
  transform: rotateX(85deg) rotateY(15deg);
  animation: atom-spin 15s linear infinite;
}

@keyframes atom-spin {
  from { transform: rotate3d(1, 1, 1, 0deg); }
  to { transform: rotate3d(1, 1, 1, 360deg); }
}

/* Electrons */
.atom-electron {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #1a3a8f;
  border-radius: 50%;
  box-shadow: 
    0 0 3px #1a3a8f,
    0 0 8px #1a3a8f,
    inset 0 1px 1px rgba(255,255,255,0.3);
  z-index: 5;
}

/* Position electrons on their orbits */
.electron1 {
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.electron2 {
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
}

.electron3 {
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.electron4 {
  top: 50%;
  left: 15%;
  transform: translateY(-50%);
}