/* ===== HERO ===== */
  .hero{
    background:
      radial-gradient(ellipse 38% 34% at 88% 6%, rgba(168,112,255,.45), transparent 62%),
      radial-gradient(ellipse 30% 28% at 68% 14%, rgba(90,140,255,.3), transparent 60%),
      radial-gradient(ellipse 42% 38% at 2% 86%, rgba(59,180,245,.26), transparent 62%),
      radial-gradient(ellipse 36% 30% at 18% 55%, rgba(100,70,220,.18), transparent 60%),
      radial-gradient(ellipse 55% 48% at 62% 52%, rgba(90,70,200,.28), transparent 65%),
      linear-gradient(180deg,#05060f,#080b20 50%,#0a0e26);
    color:#fff;
    padding:0;
    position:relative;
    overflow:hidden;
  }
  .hero::before{
    content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:46px 46px;
    mask-image:radial-gradient(ellipse 70% 70% at 60% 35%, #000 10%, transparent 75%);
  }
  .hero-inner{position:relative;padding:calc(var(--header-h, 76px) + 42px) var(--pad-x) 0;min-height:100vh;display:flex;align-items:center;transition:padding-top .35s ease;}
  .nebula-blob{
    position:absolute;border-radius:50%;z-index:0;pointer-events:none;
    filter:blur(40px);mix-blend-mode:screen;
  }
  .neb1{width:280px;height:280px;top:-60px;right:14%;background:radial-gradient(circle,rgba(167,139,250,.45),transparent 70%);}
  .neb2{width:220px;height:220px;bottom:8%;left:-40px;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%);}
  .neb3{width:180px;height:180px;top:38%;left:46%;background:radial-gradient(circle,rgba(236,72,153,.22),transparent 70%);}
  .hero-sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  .hero-sparkles span{
    position:absolute;border-radius:50%;background:#fff;
    opacity:.5;animation:twinkle ease-in-out infinite;
  }
  .hero-sparkles span.c-blue{background:#8ab4ff;}
  .hero-sparkles span.c-pink{background:#e2a6ff;}
  @keyframes twinkle{0%,100%{opacity:.12;transform:scale(1);}50%{opacity:1;transform:scale(1.7);}}
  .shooting-star{
    position:absolute;z-index:0;pointer-events:none;
    width:120px;height:2px;
    background:linear-gradient(90deg,#fff,transparent);
    border-radius:2px;opacity:0;
    animation:shoot 7s linear infinite;
  }
  .star1{top:14%;left:10%;animation-delay:1s;transform:rotate(18deg);}
  .star2{top:60%;right:8%;animation-delay:4.2s;transform:rotate(-24deg);}
  @keyframes shoot{
    0%{opacity:0;transform:translateX(0) translateY(0) rotate(18deg);}
    4%{opacity:1;}
    18%{opacity:0;transform:translateX(160px) translateY(70px) rotate(18deg);}
    100%{opacity:0;}
  }
  .constellation{
    position:absolute;z-index:0;pointer-events:none;
    top:6%;left:3%;width:180px;height:150px;
    overflow:visible;
  }
  .constellation .belt-line{
    stroke:#b9c6ff;stroke-width:.6;fill:none;
    opacity:0;
    animation:belt-connect 10s ease-in-out infinite;
  }
  .constellation circle.star-pt{
    fill:#fff;
    animation:constellation-glow 3.8s ease-in-out infinite;
  }
  @keyframes constellation-glow{
    0%,100%{opacity:.3;}
    50%{opacity:1;}
  }
  @keyframes belt-connect{
    0%,40%{opacity:0;}
    60%,80%{opacity:.7;}
    100%{opacity:0;}
  }
  .hero-grid{
    max-width:1280px;margin:0 auto;width:100%;
    display:grid;grid-template-columns:1.05fr 1fr;
    gap:40px;align-items:center;
    position:relative;z-index:2;
    padding-bottom:50px;
  }
  .eyebrow .ic-circ{
    width:16px;height:16px;border-radius:50%;border:1.4px solid currentColor;
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    position:relative;
  }
  .eyebrow .ic-circ::before{
    content:'';position:absolute;width:1.6px;height:1.6px;border-radius:50%;
    background:currentColor;top:4px;left:50%;transform:translateX(-50%);
  }
  .eyebrow .ic-circ::after{
    content:'';position:absolute;width:1.6px;height:5px;border-radius:1px;
    background:currentColor;bottom:3.5px;left:50%;transform:translateX(-50%);
  }
  .hero h1{
    font-size:54px;line-height:1.1;font-weight:800;margin-bottom:22px;
    letter-spacing:-.5px;
  }
  .hero h1 .grad{
    background:linear-gradient(90deg,#7c9bff,#c084fc);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero p{
    color:var(--text-muted);font-size:16px;max-width:480px;margin-bottom:32px;
    font-family:'Nunito',sans-serif;
  }
  .hero-ctas{display:flex;gap:16px;margin-bottom:38px;flex-wrap:wrap;}
  .btn-outline .play-ic{
    width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.15);
    display:inline-flex;align-items:center;justify-content:center;font-size:9px;
  }
  .hero-social{display:flex;align-items:center;gap:14px;}
  .avatars{display:flex;}
  .avatars img{
    width:38px;height:38px;border-radius:50%;object-fit:cover;
    border:2.5px solid #0a0d24;margin-left:-10px;
  }
  .avatars img:first-child{margin-left:0;}
  .hero-social .label{font-size:14px;color:#fff;font-weight:700;font-family:'Baloo 2',sans-serif;}
  .hero-social .sub{font-size:12.5px;color:var(--text-muted);font-weight:400;font-family:'Nunito',sans-serif;}

  .hero-feature-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin-top:34px;
  }
  .hero-feature-row .feat{
    display:flex;align-items:center;gap:9px;font-size:13.5px;color:#d7dbf0;font-weight:600;
    font-family:'Nunito',sans-serif;
  }
  .hero-feature-row .feat .ic{
    width:40px;height:40px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:rgba(34,65,146,.12);border:1px solid rgba(100,145,255,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  }
  .hero-feature-row .feat .ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .feat1 .ic{color:#78aaff;border-color:rgba(87,151,255,.42);background:rgba(48,112,231,.08);}
  .feat2 .ic{color:#b47aff;border-color:rgba(162,93,255,.42);background:rgba(130,72,219,.08);}
  .feat3 .ic{color:#78aaff;border-color:rgba(87,151,255,.42);background:rgba(48,112,231,.08);}
  .feat4 .ic{color:#b47aff;border-color:rgba(162,93,255,.42);background:rgba(130,72,219,.08);}
  .feat5 .ic{color:#78aaff;border-color:rgba(87,151,255,.42);background:rgba(48,112,231,.08);}

  /* hero visual */
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:580px;cursor:grab;z-index:2;}
  .hero-visual:active{cursor:grabbing;}
  #globeCanvas{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:640px;height:640px;z-index:2;pointer-events:none;
    opacity:0;transition:opacity .7s ease;
  }
  #globeCanvas.ready.after-type{opacity:1;}
  /* "ACCA" types out letter by letter (js/17-hero-typing.js); hidden letters keep their space so nothing moves. */
  .hero-anim .globe-acronym:not(.typing){opacity:0;}   /* set from the page head, so the word is never painted before it types; the script adds .typing once the letters are split (the word itself must stay visible, or its gradient fill disappears) */
  .globe-acronym .ch{position:relative;visibility:hidden;}
  .globe-acronym .ch.on{visibility:visible;}
  .globe-acronym .ch.cur::after{
    content:"";position:absolute;left:100%;top:6%;width:.045em;height:88%;margin-left:.03em;
    background:#cfdcff;box-shadow:0 0 10px rgba(150,180,255,.9);animation:acronymCaret .7s steps(1) infinite;
  }
  @keyframes acronymCaret{50%{opacity:0;}}
  /* Left side: buttons, social proof and the five feature tiles rise in one after another. The headline and subtitle are NOT animated, so the page's main text is painted at once. Only opacity and translate move. */
  .hl-anim .hero-ctas .btn,.hl-anim .hero-social,.hl-anim .hero-feature-row .feat{opacity:0;translate:0 18px;}
  .hl-anim.hl-play .hero-ctas .btn,.hl-anim.hl-play .hero-social,.hl-anim.hl-play .hero-feature-row .feat{
    opacity:1;translate:0 0;
    transition:opacity .55s ease var(--d,0s),translate .6s cubic-bezier(.2,.8,.2,1) var(--d,0s);
  }
  .hl-anim .hero-ctas .btn:nth-child(1){--d:.05s;}
  .hl-anim .hero-ctas .btn:nth-child(2){--d:.15s;}
  .hl-anim .hero-social{--d:.28s;}
  .hl-anim .hero-feature-row .feat1{--d:.4s;}
  .hl-anim .hero-feature-row .feat2{--d:.47s;}
  .hl-anim .hero-feature-row .feat3{--d:.54s;}
  .hl-anim .hero-feature-row .feat4{--d:.61s;}
  .hl-anim .hero-feature-row .feat5{--d:.68s;}
  /* Two rings ripple out from the globe the moment it appears. */
  .globe-ring{
    position:absolute;left:50%;top:50%;width:58%;aspect-ratio:1;margin:0;border-radius:50%;z-index:1;pointer-events:none;
    border:2px solid rgba(150,180,255,.65);box-shadow:0 0 22px rgba(120,150,255,.5);
    opacity:0;translate:-50% -50%;scale:.45;
  }
  .globe-ring.go{animation:globeRing 1.3s cubic-bezier(.15,.7,.3,1) forwards;}
  .globe-ring.r2{border-color:rgba(192,132,252,.6);animation-delay:.22s;}
  @keyframes globeRing{0%{opacity:.85;scale:.45;}100%{opacity:0;scale:1.7;}}
  /* The four cards around the globe pop in one by one after the globe is on screen. */
  .hero-anim .hero-visual .float-card{opacity:0;scale:.86;transition:opacity .55s ease,scale .55s cubic-bezier(.2,.9,.3,1.2),transform .2s ease-out;}
  .hero-anim .hero-visual .float-card.card-in{opacity:1;scale:1;}
  .globe-acronym{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
    color:#fff;font:800 88px/1 'Sora','Nunito',sans-serif;letter-spacing:.12em;
    padding-left:.12em;
    background:linear-gradient(135deg,#fff 8%,#dbe4ff 48%,#a9bdff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-stroke:1px rgba(231,238,255,.25);
    filter:drop-shadow(0 0 8px rgba(112,151,255,.72)) drop-shadow(0 0 24px rgba(123,91,255,.48));
    pointer-events:none;
  }
  .globe-glow{
    position:absolute;width:460px;height:460px;border-radius:50%;z-index:0;
    background:radial-gradient(circle at 42% 35%, rgba(107,92,248,.4), transparent 65%);
    filter:blur(14px);pointer-events:none;
  }
  .float-card{
    position:absolute;z-index:4;background:rgba(14,18,38,.78);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border-radius:14px;padding:10px 16px 10px 10px;
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:700;color:#fff;
    font-family:'Baloo 2',sans-serif;
    box-shadow:0 14px 34px rgba(0,0,0,.4);
    transition:transform .2s ease-out;
    will-change:transform;
    animation:bob 5s ease-in-out infinite;
  }
  .fc-sbr{animation-delay:0s;}
  .fc-aaa{animation-delay:.6s;}
  .fc-students{animation-delay:1.2s;}
  .fc-global{animation-delay:1.8s;}
  @keyframes bob{
    0%,100%{translate:0 0;}
    50%{translate:0 -10px;}
  }
  .float-card .ic-sq{
    width:36px;height:36px;border-radius:11px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2), 0 4px 12px rgba(0,0,0,.25);
  }
  .float-card .ic-sq svg{width:19px;height:19px;}
  .float-card .sub{display:block;font-size:10.5px;font-weight:500;color:var(--text-muted);font-family:'Nunito',sans-serif;}
  .fc-sbr{top:4%;left:-2%;}
  .fc-sbr .ic-sq{background:linear-gradient(135deg,#3f5fe0,#6a86ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 18px rgba(90,120,255,.55);}
  .fc-aaa{top:0%;right:0%;}
  .fc-aaa .ic-sq{background:linear-gradient(135deg,#8a4fe0,#c084fc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 18px rgba(192,132,252,.55);}
  .fc-students{bottom:30%;left:-6%;}
  .fc-students .ic-sq{background:linear-gradient(135deg,#3f5fe0,#6a86ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 18px rgba(90,120,255,.55);}
  .fc-global{top:58%;right:-8%;}
  .fc-global .ic-sq{background:linear-gradient(135deg,#8a4fe0,#c084fc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 18px rgba(192,132,252,.55);}
  .hero-wave{
    position:relative;z-index:3;line-height:0;margin:0;
  }
  .hero-wave svg{display:block;width:100%;height:auto;}
  .section-wave{
    position:absolute;left:0;right:0;bottom:0;height:66px;z-index:4;
    pointer-events:none;line-height:0;
  }
  .section-wave svg{display:block;width:100%;height:100%;}

  section{position:relative;}