:root{
    --navy-deep:#050b1c;
    --navy:#0a1530;
    --navy-panel:#0f1c3f;
    --line: rgba(172,201,240,0.10);
    --line-strong: rgba(172,201,240,0.22);
    --sky-1:#eef7ff;
    --sky-2:#a9d2f2;
    --sky-3:#5f97d6;
    --sky-4:#2f5fa3;
    --ink:#eef3fb;
    --ink-dim:#98a9c9;
    --ink-faint:#54628a;
    --rain-grad: linear-gradient(135deg, var(--sky-1) 0%, var(--sky-2) 45%, var(--sky-3) 100%);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    background:var(--navy-deep);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    position:relative;
  }

  /* ambient grain for premium texture */
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:1;
    mix-blend-mode:overlay;
  }

  ::selection{ background:var(--sky-3); color:var(--navy-deep); }
  a{ color:inherit; text-decoration:none; }

  .eyebrow{
    font-family:'Space Grotesk', sans-serif;
    font-size:0.72rem;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--sky-2);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:0.7rem;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--rain-grad);
    display:inline-block;
  }

  h1,h2,h3{
    font-family:'Manrope', sans-serif;
    font-weight:300;
    letter-spacing:-0.02em;
    color:var(--ink);
  }
  h2{ font-weight:400; }
  h3{ font-weight:600; letter-spacing:-0.01em; }

  .grad-text{
    background:var(--rain-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .gold-text{
    background:linear-gradient(135deg, #f5dc94, #d4af37, #f5dc94);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:20px 0;
    background:linear-gradient(to bottom, rgba(5,11,28,0.88), rgba(5,11,28,0));
    backdrop-filter: blur(8px);
  }
  nav{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ display:flex; align-items:center; gap:12px; }
  .logo-badge{
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .logo-badge img{
    width:100%; height:100%; object-fit:contain;
    filter: drop-shadow(0 0 8px rgba(95,151,214,0.45));
  }

  .nav-links{ display:flex; gap:24px; font-size:0.85rem; color:var(--ink-dim); }
  .nav-links a{ transition:color .25s ease; }
  .nav-links a:hover{ color:var(--ink); }

  .nav-cta{
    font-family:'Space Grotesk', sans-serif;
    font-size:0.76rem;
    letter-spacing:0.04em;
    color:var(--navy-deep);
    background:var(--rain-grad);
    padding:10px 20px;
    border-radius:100px;
    transition: all .25s ease;
    display:inline-block;
  }
  .nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }

  .social-icons{ display:flex; align-items:center; gap:10px; }
  .social-icon{
    width:34px; height:34px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong);
    background:rgba(172,201,240,0.05);
    transition: all .25s ease;
  }
  .social-icon svg{ width:16px; height:16px; }
  .social-fill{ fill:url(#aGrad); transition: fill .25s ease; }
  .social-stroke{ fill:none; stroke:url(#aGrad); transition: stroke .25s ease; }
  .social-icon:hover{
    background:var(--rain-grad); border-color:transparent;
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(95,151,214,0.35);
  }
  .social-icon:hover .social-fill{ fill:var(--navy-deep); }
  .social-icon:hover .social-stroke{ stroke:var(--navy-deep); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex; align-items:center;
    padding-top:110px;
    overflow:hidden;
  }

  .glow{
    position:absolute; border-radius:50%;
    filter:blur(90px);
    z-index:0;
    opacity:0.55;
  }
  .glow-1{ width:520px; height:520px; background:radial-gradient(circle, var(--sky-4), transparent 70%); top:-140px; right:-120px; }
  .glow-2{ width:420px; height:420px; background:radial-gradient(circle, var(--sky-3), transparent 70%); bottom:-160px; left:10%; opacity:0.3; }

  .rain{ position:fixed; inset:0; pointer-events:none; opacity:0.65; z-index:1; }
  .rain i{
    position:absolute; top:-15%;
    width:1px;
    background:linear-gradient(to bottom, transparent, rgba(169,210,242,0.7), transparent);
    animation: fall linear infinite;
    will-change: transform;
  }
  .rain i.far{ opacity:0.35; background:linear-gradient(to bottom, transparent, rgba(169,210,242,0.4), transparent); }
  .rain i.near{ width:1.5px; }
  @keyframes fall{ to{ transform:translateY(130vh); } }

  .rain-veil{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, var(--navy-deep) 92%);
    opacity:0.55;
  }

  .hero-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:32px;
    align-items:start;
    position:relative;
    z-index:2;
  }

  .hero h1{
    font-size:clamp(2.3rem, 4.6vw, 3.7rem);
    line-height:1.12;
    margin:22px 0 26px;
    color:var(--ink);
  }
  .hero h1 strong{ font-weight:600; }

  .hero p.lede{
    font-size:1.06rem;
    color:var(--ink-dim);
    max-width:520px;
    margin-bottom:38px;
    font-weight:400;
  }

  .btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:15px 28px;
    font-size:0.92rem; font-weight:500;
    border-radius:100px;
    transition: all .25s ease;
  }
  .btn-primary{ background:var(--rain-grad); color:var(--navy-deep); }
  .btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); box-shadow:0 8px 30px rgba(95,151,214,0.35); }
  .btn-ghost{ border:1px solid var(--line-strong); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--sky-3); background:rgba(169,210,242,0.05); }

  .hero-meta{
    margin-top:60px; display:flex; gap:44px;
    font-family:'Space Grotesk', sans-serif; font-size:0.74rem;
    color:var(--ink-faint); flex-wrap:wrap;
  }
  .hero-meta strong{ color:var(--ink); display:block; font-family:'Manrope', sans-serif; font-size:1.5rem; font-weight:300; margin-bottom:3px; }
  body.page-academy .hero-meta strong{
    background:linear-gradient(135deg, #f5dc94, #d4af37, #f5dc94);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  /* wordmark — extracted from logo type, reused at hero and nav scale */
  .wordmark{
    display:inline-flex; align-items:baseline;
    font-family:'Jost', sans-serif;
    white-space:nowrap;
  }
  .wordmark span{
    background:var(--rain-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .a-glyph{
    width:0.56em; height:0.66em;
    display:inline-block;
    margin:0 0.01em;
    vertical-align:baseline;
    transform:translateY(0.06em);
  }

  .hero-art{
    position:relative;
    display:flex; align-items:center; justify-content:flex-end;
    margin-top:38px;
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
  .hero-wordmark{
    justify-content:flex-end;
    font-weight:300;
    font-size:clamp(2.8rem, 9.5vw, 7.4rem);
  }
  .hero-wordmark span{ letter-spacing:0.015em; }
  .hero-wordmark span, .hero-wordmark .a-glyph{
    filter:
      drop-shadow(0 0 18px rgba(238,247,255,0.45))
      drop-shadow(0 0 46px rgba(95,151,214,0.4));
  }

  .nav-wordmark{
    font-weight:400;
    font-size:1.05rem;
  }
  .nav-wordmark span{ letter-spacing:0.05em; }
  .nav-wordmark span, .nav-wordmark .a-glyph{
    filter: drop-shadow(0 0 8px rgba(95,151,214,0.4));
  }

  /* ---------- GATE DIVIDER ---------- */
  .gate-divider{ display:flex; align-items:center; justify-content:center; gap:10px; padding:0; height:38px; position:relative; z-index:2; }
  .gate-divider i{ width:1px; height:38px; background:var(--line); }
  .gate-divider i:nth-child(2){ background:var(--rain-grad); box-shadow:0 0 16px rgba(95,151,214,0.4); width:1.5px; }
  .gate-divider.gold-divider i:nth-child(2){
    background:linear-gradient(180deg, #f5dc94, #d4af37, #f5dc94);
    box-shadow:0 0 18px rgba(212,175,55,0.55);
  }

  /* gold pricing & buttons — RainGate Academy pages */
body.page-academy .tier-price,
body.page-courses-gold .tier-price{
  background:linear-gradient(135deg, #f5dc94, #d4af37, #f5dc94);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.page-academy .btn-primary,
body.page-courses-gold .btn-primary{
  background:linear-gradient(135deg, #f5dc94, #d4af37);
  color:var(--navy-deep);
}
body.page-academy .nav-cta{
  background:linear-gradient(135deg, #f5dc94, #d4af37);
}

/* Academy: click-triggered referral popup modal */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,11,28,0.75); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
  padding:24px;
}
.modal-overlay.visible{ opacity:1; pointer-events:auto; }
.modal-popup{
  position:relative; width:100%; max-width:380px;
  background:linear-gradient(170deg, var(--navy-panel), var(--navy-deep));
  border:1px solid var(--line-strong); border-radius:22px; overflow:hidden;
  box-shadow:0 40px 100px rgba(5,11,28,0.6);
  transform:translateY(20px); transition:transform .3s ease;
}
.modal-overlay.visible .modal-popup{ transform:translateY(0); }
.modal-popup-img{ width:100%; aspect-ratio:4/5; overflow:hidden; background:transparent; display:flex; align-items:center; justify-content:center; }
.modal-popup-img img{ width:100%; height:100%; object-fit:contain; }
.modal-popup-body{ padding:26px 26px 30px; }
.modal-popup-body .eyebrow{ margin-bottom:10px; }
.modal-popup-body h3{ font-size:1.4rem; margin-bottom:10px; color:var(--ink); }
.modal-popup-body p{ color:var(--ink-dim); font-size:0.88rem; margin-bottom:20px; line-height:1.6; }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:2;
  width:32px; height:32px; border-radius:50%;
  background:rgba(5,11,28,0.6); border:1px solid var(--line-strong);
  color:var(--ink); font-size:1.2rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s ease;
}
.modal-close:hover{ background:rgba(5,11,28,0.85); }

@media (max-width:480px){
  .modal-popup{ max-width:100%; }
}

/* Academy page: gold rain */
  body.page-academy .rain i,
  body.page-courses-gold .rain i{ background:linear-gradient(to bottom, transparent, rgba(212,175,55,0.7), transparent); }
  body.page-academy .rain i.far,
  body.page-courses-gold .rain i.far{ background:linear-gradient(to bottom, transparent, rgba(212,175,55,0.4), transparent); }

  .hero-academy-logo{ display:flex; align-items:center; justify-content:center; }
  .hero-academy-logo img{ width:100%; max-width:300px; height:auto; filter:drop-shadow(0 0 34px rgba(212,175,55,0.4)); }
  @media (max-width:980px){
    .hero-academy-logo img{ max-width:180px; }
  }

  /* gold scrolling marquee banner (Academy header) */
  .gold-marquee{
    width:100%; overflow:hidden;
    background:linear-gradient(90deg, #d4af37, #f5dc94, #d4af37);
    height:34px; display:flex; align-items:center;
    border-top:1px solid rgba(5,11,28,0.12);
    margin-top:12px;
  }
  .gold-marquee-track{ display:flex; width:max-content; animation:marquee-scroll 24s linear infinite; }
  .gold-marquee-set{ display:flex; flex-shrink:0; }
  .gold-marquee-set span{
    display:inline-flex; align-items:center; white-space:nowrap; padding:0 26px;
    font-family:'Space Grotesk', sans-serif; font-size:0.8rem; font-weight:600;
    letter-spacing:0.16em; color:var(--navy-deep); text-transform:uppercase;
  }
  @keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  body.page-academy .page-hero{ padding-top:214px; }

  @media (prefers-reduced-motion: reduce){
    .gold-marquee-track{ animation:none; }
  }

  @media (max-width:980px){
    .gold-marquee{ height:30px; margin-top:10px; }
    .gold-marquee-set span{ font-size:0.7rem; padding:0 18px; }
    body.page-academy .page-hero{ padding-top:188px; }
  }

  /* ---------- SECTION SHELL ---------- */
  section{ position:relative; padding:130px 0; z-index:2; }
  .section-head{ max-width:640px; margin-bottom:68px; }
  .section-head h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin-top:18px; }
  .section-head p{ color:var(--ink-dim); margin-top:16px; font-size:1rem; max-width:520px; }

  /* ---------- SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
  .service-card{
    background:linear-gradient(160deg, rgba(172,201,240,0.06), rgba(172,201,240,0.01));
    border:1px solid var(--line);
    border-radius:16px;
    padding:36px 30px;
    transition: all .35s ease;
  }
  .service-card:hover{
    border-color:var(--line-strong);
    background:linear-gradient(160deg, rgba(172,201,240,0.1), rgba(172,201,240,0.02));
    transform:translateY(-4px);
  }
  .service-tag{
    font-family:'Space Grotesk', sans-serif;
    font-size:0.68rem; letter-spacing:0.08em; font-weight:500;
    color:var(--sky-2);
    display:block; margin-bottom:20px;
  }
  .service-card h3{ font-size:1.24rem; margin-bottom:10px; }
  .service-card p{ color:var(--ink-dim); font-size:0.92rem; }

  /* ---------- AI AUTOMATION (FLAGSHIP) ---------- */
  .automation-section{
    background: radial-gradient(ellipse at 80% 35%, rgba(95,151,214,0.12), transparent 55%), var(--navy);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .automation-grid{
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:center;
  }
  .automation-copy h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:18px 0 22px; }
  .automation-copy p{ color:var(--ink-dim); margin-bottom:16px; max-width:540px; font-size:1.02rem; }
  .automation-copy .btn-row{ margin-top:30px; margin-bottom:26px; }
  .automation-visual{
    position:relative; display:flex; align-items:center; justify-content:center;
    animation: float 7s ease-in-out infinite;
  }
  .automation-visual img{
    width:100%; max-width:380px;
    filter:drop-shadow(0 25px 50px rgba(95,151,214,0.4));
  }
  .automation-glow{
    position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, var(--sky-4), transparent 70%);
    filter:blur(70px); opacity:0.5; z-index:-1;
  }

  /* ---------- WEBSITE DESIGN (FLAGSHIP) ---------- */
  .website-section{
    background: radial-gradient(ellipse at 20% 40%, rgba(95,151,214,0.12), transparent 55%), var(--navy);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .website-grid{
    display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;
  }
  .website-copy h2{ font-size:clamp(2rem,3.6vw,2.9rem); margin:18px 0 22px; }
  .website-copy p{ color:var(--ink-dim); margin-bottom:16px; max-width:540px; font-size:1.02rem; }
  .website-copy .btn-row{ margin-top:30px; }
  .website-visual{
    position:relative; display:flex; align-items:center; justify-content:center;
    animation: float 7s ease-in-out infinite;
  }
  .browser-mock{
    width:100%; max-width:420px;
    border-radius:14px; overflow:hidden;
    border:1px solid var(--line-strong);
    background:var(--navy-deep);
    box-shadow:0 30px 70px rgba(5,11,28,0.6);
  }
  .browser-bar{
    height:36px; display:flex; align-items:center; gap:7px;
    padding:0 16px; background:rgba(172,201,240,0.05);
    border-bottom:1px solid var(--line);
  }
  .browser-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
  .browser-address{
    margin-left:10px; height:16px; flex:1; max-width:180px;
    border-radius:100px; background:rgba(172,201,240,0.08);
  }
  .browser-body{ padding:26px; display:flex; flex-direction:column; gap:14px; }
  .browser-block{ height:12px; border-radius:4px; background:linear-gradient(90deg, rgba(172,201,240,0.16), rgba(172,201,240,0.05)); }
  .browser-block.wide{ width:80%; height:22px; background:var(--rain-grad); opacity:0.85; }
  .browser-block.med{ width:60%; }
  .browser-block.short{ width:35%; }
  .browser-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
  .browser-tile{ height:52px; border-radius:8px; border:1px solid var(--line); background:rgba(172,201,240,0.04); }
  .website-glow{
    position:absolute; width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, var(--sky-4), transparent 70%);
    filter:blur(70px); opacity:0.45; z-index:-1;
  }

  /* ---------- COURSES ---------- */
  .courses-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
  .course-card{
    background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
    border:1px solid var(--line);
    border-radius:22px; padding:46px;
    display:flex; flex-direction:column;
    transition: all .35s ease;
  }
  .course-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
  .course-tag{
    font-family:'Space Grotesk', sans-serif; font-size:0.68rem; letter-spacing:0.1em;
    color:var(--sky-2); margin-bottom:20px; display:inline-block;
  }
  .course-card h3{ font-size:1.42rem; margin-bottom:14px; line-height:1.25; }
  .course-lede{ color:var(--ink-dim); margin-bottom:26px; font-size:0.95rem; }
  .course-list{ list-style:none; font-family:'Space Grotesk', sans-serif; font-size:0.82rem; color:var(--ink); margin-top:auto; }
  .course-list li{ padding:12px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; }
  .course-list li:last-child{ border-bottom:1px solid var(--line); }
  .course-list span{ color:var(--ink-faint); text-align:right; }

  /* ---------- GAME ---------- */
  .game-section{
    background: radial-gradient(ellipse at 25% 30%, rgba(95,151,214,0.08), transparent 55%), var(--navy);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .game-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center; }
  .game-visual{
    position:relative; aspect-ratio: 4/5;
    border:1px solid var(--line); border-radius:18px; overflow:hidden;
    background:var(--navy-deep);
  }
  .game-visual img{
    width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  }
  .game-visual::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(5,11,28,0) 55%, rgba(5,11,28,0.6) 100%);
    pointer-events:none;
  }
  .episode-badge{
    display:inline-flex; align-items:center;
    padding:7px 16px; margin:16px 0 6px;
    border:1px solid var(--line-strong); border-radius:100px;
    font-family:'Space Grotesk', sans-serif; font-size:0.7rem;
    letter-spacing:0.12em; color:var(--sky-2);
  }
  .game-copy h2{ font-size:clamp(1.8rem,3.2vw,2.45rem); margin-bottom:20px; }
  .game-copy p{ color:var(--ink-dim); margin-bottom:16px; max-width:520px; }
  .game-copy .status{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Grotesk', sans-serif; font-size:0.76rem; color:var(--sky-2);
    margin-top:12px;
  }
  .status i{ width:7px; height:7px; border-radius:50%; background:var(--sky-2); box-shadow:0 0 8px var(--sky-3); animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

  /* ---------- STRIP ---------- */
  .strip{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px;
    padding:58px 0; border-bottom:1px solid var(--line);
  }
  .strip p{ font-family:'Manrope', sans-serif; font-weight:300; font-style:italic; font-size:1.2rem; color:var(--ink-dim); max-width:480px; }
  .strip .flag{ font-family:'Space Grotesk', sans-serif; font-size:0.74rem; color:var(--ink-faint); letter-spacing:0.06em; }

  /* ---------- CONTACT / FOOTER ---------- */
  .cta-section{ text-align:center; padding:160px 0 110px; }
  .cta-section h2{ font-size:clamp(2.3rem,5vw,3.8rem); margin-bottom:26px; }
  .cta-section p{ color:var(--ink-dim); max-width:460px; margin:0 auto 40px; }
  .cta-section .btn-row{ justify-content:center; }

  footer{
    border-top:1px solid var(--line); padding:64px 0 32px;
    font-size:0.74rem; color:var(--ink-faint);
    position:relative; z-index:2;
  }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start;
    flex-wrap:wrap; gap:40px;
    padding-bottom:40px; margin-bottom:28px;
    border-bottom:1px solid var(--line);
  }
  .footer-brand .logo{ margin-bottom:14px; }
  .footer-brand p{ color:var(--ink-faint); font-size:0.85rem; max-width:320px; line-height:1.6; }

  .footer-contact{ display:flex; flex-direction:column; gap:14px; }
  .footer-contact .social-icons{ margin-top:6px; }
  .contact-item{
    display:flex; align-items:center; gap:12px;
    font-family:'Inter', sans-serif; font-size:0.92rem; color:var(--ink-dim);
    transition: color .25s ease;
  }
  .contact-item:hover{ color:var(--ink); }
  .contact-icon{
    width:36px; height:36px; flex-shrink:0;
    border-radius:50%;
    background:rgba(172,201,240,0.08);
    border:1px solid var(--line-strong);
    display:flex; align-items:center; justify-content:center;
    transition: all .25s ease;
  }
  .contact-item:hover .contact-icon{
    background:var(--rain-grad);
    border-color:transparent;
  }
  .contact-icon svg{ width:16px; height:16px; stroke:var(--sky-2); transition: stroke .25s ease; }
  .contact-item:hover .contact-icon svg{ stroke:var(--navy-deep); }

  footer .foot-links{ display:flex; flex-direction:column; gap:12px; font-family:'Space Grotesk', sans-serif; }
  footer .foot-links a:hover{ color:var(--sky-2); }

  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:16px;
    font-family:'Space Grotesk', sans-serif;
  }

  .reveal{ opacity:0; transform:translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:none; }

  @media (max-width:980px){
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ order:-1; margin-bottom:8px; margin-top:0; justify-content:center; }
    .hero-wordmark{ justify-content:center; }
    .services-grid{ grid-template-columns:1fr; }
    .automation-grid{ grid-template-columns:1fr; gap:40px; }
    .automation-visual{ order:-1; }
    .website-grid{ grid-template-columns:1fr; gap:40px; }
    .courses-grid{ grid-template-columns:1fr; }
    .course-card{ padding:34px; }
    .game-grid{ grid-template-columns:1fr; }
    .footer-top{ flex-direction:column; gap:32px; }

    .btn-row{ flex-wrap:nowrap; gap:10px; }
    .btn-row .btn{ flex:1; padding:13px 12px; font-size:0.82rem; white-space:nowrap; justify-content:center; }
    .cta-section .btn-row .btn{ flex:none; white-space:normal; text-align:center; }

    .hero-meta{
      display:grid; grid-template-columns:repeat(3, 1fr);
      gap:16px; margin-top:44px;
    }
    .hero-meta strong{ font-size:1.15rem; }
  }

  @media (prefers-reduced-motion: reduce){
    .rain i, .status i, .hero-art{ animation:none !important; }
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

  :focus-visible{ outline:2px solid var(--sky-3); outline-offset:3px; }

  /* ---------- HAMBURGER MENU ---------- */
  .menu-toggle{
    display:none;
    width:40px; height:40px;
    align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer;
    z-index:110;
  }
  .menu-toggle span{
    display:block; width:22px; height:1.5px;
    background:var(--ink); position:relative;
    transition:all .25s ease;
  }
  .menu-toggle span::before, .menu-toggle span::after{
    content:""; position:absolute; left:0;
    width:22px; height:1.5px; background:var(--ink);
    transition:all .25s ease;
  }
  .menu-toggle span::before{ top:-7px; }
  .menu-toggle span::after{ top:7px; }
  .menu-toggle.active span{ background:transparent; }
  .menu-toggle.active span::before{ top:0; transform:rotate(45deg); }
  .menu-toggle.active span::after{ top:0; transform:rotate(-45deg); }

  .mobile-drawer{
    position:fixed; inset:0; z-index:105;
    background:rgba(5,11,28,0.98);
    backdrop-filter:blur(10px);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:28px;
    opacity:0; pointer-events:none;
    transition:opacity .3s ease;
  }
  .mobile-drawer.active{ opacity:1; pointer-events:auto; }
  .mobile-drawer a{
    font-family:'Manrope', sans-serif; font-weight:500;
    font-size:1.3rem; color:var(--ink);
  }
  .mobile-drawer a:hover{ color:var(--sky-2); }
  .mobile-drawer .social-icons{ margin-top:16px; }
  body.drawer-open{ overflow:hidden; }

  @media (max-width:980px){
    .menu-toggle{ display:flex; }
  }

  /* ---------- FOOTER ADDITIONS: address + slogan ---------- */
  .footer-address{
    display:flex; align-items:center; gap:10px;
    font-family:'Inter', sans-serif; font-size:0.92rem; color:var(--ink-dim);
    margin-top:14px;
  }
  .footer-address svg{ width:16px; height:16px; flex-shrink:0; stroke:var(--sky-2); }
  .footer-slogan{
    font-family:'Jost', sans-serif; font-weight:400;
    font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase;
    background:var(--rain-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-top:18px;
  }
  .footer-academy-link{ display:inline-block; margin-top:16px; opacity:0.85; transition:opacity .25s ease; }
  .footer-academy-link:hover{ opacity:1; }
  .footer-academy-link img{ height:32px; width:auto; display:block; }

  /* ---------- SUB-PAGE SHARED HERO ---------- */
  .page-hero{ padding:170px 0 80px; position:relative; }
  .page-hero-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
  .page-hero-visual{
    border-radius:18px; overflow:hidden; border:1px solid var(--line);
    aspect-ratio:4/3; box-shadow:0 30px 70px rgba(5,11,28,0.5);
  }
  .page-hero-visual img{ width:100%; height:100%; object-fit:cover; }
  .page-hero .eyebrow{ justify-content:flex-start; }
  .page-hero h1{ font-size:clamp(2.2rem,5vw,3.6rem); margin:18px 0 22px; max-width:780px; }
  .page-hero p.lede{ color:var(--ink-dim); font-size:1.08rem; max-width:620px; }

  /* ---------- ALLIANCE PAGE ---------- */
  .benefit-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .benefit-card{
    background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
    border:1px solid var(--line); border-radius:16px; padding:34px;
    transition:all .3s ease;
  }
  .benefit-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
  .benefit-card .tag{ font-family:'Space Grotesk', sans-serif; font-size:0.68rem; letter-spacing:0.1em; color:var(--sky-2); display:block; margin-bottom:16px; }
  .benefit-card h3{ font-size:1.2rem; margin-bottom:10px; }
  .benefit-card p{ color:var(--ink-dim); font-size:0.92rem; }
  .tier-panel{
    background:linear-gradient(160deg, rgba(172,201,240,0.08), rgba(172,201,240,0.01));
    border:1px solid var(--line); border-radius:22px; padding:50px;
    text-align:center;
  }
  .tier-panel h2{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:16px; }
  .tier-panel p{ color:var(--ink-dim); max-width:560px; margin:0 auto 30px; }

  /* ---------- BLOG PAGE ---------- */
  .blog-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
  .blog-card{
    background:var(--navy-deep); padding:36px; display:grid;
    grid-template-columns:140px 1fr; gap:28px; align-items:center;
    transition:background .3s ease;
  }
  .blog-card:hover{ background:var(--navy); }
  .blog-thumb{
    width:140px; height:100px; border-radius:10px; overflow:hidden;
    border:1px solid var(--line);
  }
  .blog-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .blog-meta{ font-family:'Space Grotesk', sans-serif; font-size:0.7rem; letter-spacing:0.08em; color:var(--sky-2); margin-bottom:8px; display:block; }
  .blog-card h3{ font-size:1.3rem; margin-bottom:8px; }
  .blog-card p{ color:var(--ink-dim); font-size:0.92rem; }

  .article{ max-width:760px; }
  .article .eyebrow{ margin-bottom:18px; }
  .article h1{ font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:20px; }
  .article .byline{ color:var(--ink-faint); font-family:'Space Grotesk', sans-serif; font-size:0.8rem; letter-spacing:0.04em; margin-bottom:44px; }
  .article-cover{ width:100%; border-radius:16px; border:1px solid var(--line); overflow:hidden; margin-bottom:48px; aspect-ratio:16/9; }
  .article-cover img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
  .article h2{ font-size:1.6rem; margin:44px 0 18px; font-weight:400; }
  .article p{ color:var(--ink-dim); font-size:1.02rem; line-height:1.85; margin-bottom:22px; }
  .article blockquote{
    border-left:2px solid var(--sky-3); padding-left:24px; margin:32px 0;
    font-family:'Jost', sans-serif; font-size:1.2rem; font-weight:300; color:var(--ink);
  }

  /* ---------- CONTACT PAGE ---------- */
  .contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
  .contact-form{ display:flex; flex-direction:column; gap:18px; }
  .field label{
    display:block; font-family:'Space Grotesk', sans-serif; font-size:0.72rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--sky-2); margin-bottom:8px;
  }
  .field input, .field textarea{
    width:100%; background:rgba(172,201,240,0.05);
    border:1px solid var(--line-strong); border-radius:8px;
    padding:13px 16px; color:var(--ink); font-family:'Inter', sans-serif; font-size:0.95rem;
    transition:border-color .25s ease, background .25s ease;
  }
  .field input:focus, .field textarea:focus{
    outline:none; border-color:var(--sky-3); background:rgba(172,201,240,0.08);
  }
  .field textarea{ min-height:140px; resize:vertical; }
  .field input.referral-input{
    font-family:'Space Grotesk', sans-serif; letter-spacing:0.06em; text-transform:uppercase;
  }
  .field input.referral-input::placeholder{ text-transform:none; letter-spacing:0.02em; }
  .form-submit{ align-self:flex-start; margin-top:6px; border:none; cursor:pointer; }
  .contact-side-card{
    background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
    border:1px solid var(--line); border-radius:18px; padding:36px;
  }
  .contact-side-card .contact-item{ font-size:1rem; margin-bottom:20px; }
  .contact-side-card .contact-item:last-child{ margin-bottom:0; }
  .contact-side-card.payment-card{ margin-top:28px; }
  .payment-intro{ color:var(--ink-dim); font-size:0.88rem; line-height:1.6; margin:18px 0 26px; }
  .bank-account{
    background:rgba(172,201,240,0.04); border:1px solid var(--line);
    border-radius:14px; padding:20px 22px; margin-bottom:16px;
  }
  .bank-account:last-child{ margin-bottom:0; }
  .bank-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .bank-logo{ height:28px; width:auto; max-width:80px; object-fit:contain; }
  .bank-name{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:0.95rem; color:var(--ink); }
  .bank-details{ display:flex; flex-direction:column; gap:10px; }
  .bank-details > div{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
  .bank-details dt{ color:var(--ink-faint); font-size:0.78rem; letter-spacing:0.02em; flex-shrink:0; }
  .bank-details dd{ color:var(--ink); font-size:0.9rem; font-family:'Space Grotesk', sans-serif; text-align:right; word-break:break-word; }
  .payment-confirm-note{
    margin-top:20px; padding-top:20px; border-top:1px solid var(--line);
    color:var(--ink-dim); font-size:0.85rem; line-height:1.6;
  }
  .payment-confirm-note strong{ color:var(--ink); }
  .payment-confirm-note a{ color:var(--sky-2); }

  .payment-method-options{ display:flex; gap:14px; flex-wrap:wrap; margin-top:2px; }
  .radio-option{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    background:rgba(172,201,240,0.05); border:1px solid var(--line-strong);
    border-radius:8px; padding:11px 16px; flex:1; min-width:150px;
    font-size:0.9rem; color:var(--ink-dim); transition:all .2s ease;
  }
  .radio-option input{ accent-color:var(--sky-3); width:16px; height:16px; flex-shrink:0; }
  .radio-option:has(input:checked){ border-color:var(--sky-3); color:var(--ink); background:rgba(172,201,240,0.08); }
  .payment-details-link{
    display:inline-block; margin-top:10px; font-size:0.82rem; color:var(--sky-2);
  }
  .payment-details-link:hover{ color:var(--ink); }

  /* ---------- INITIATIVE PAGE ---------- */
  .initiative-hero{ text-align:center; padding:170px 0 60px; }
  .initiative-hero h1{ margin-left:auto; margin-right:auto; }
  .initiative-hero p.lede{ margin-left:auto; margin-right:auto; }
  .pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .pillar-card{
    background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
    border:1px solid var(--line); border-radius:16px; padding:32px; text-align:center;
  }
  .pillar-card .pillar-icon{
    width:52px; height:52px; border-radius:50%; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong);
  }
  .pillar-card .pillar-icon svg{ width:22px; height:22px; }
  .pillar-card h3{ font-size:1.1rem; margin-bottom:10px; }
  .pillar-card p{ color:var(--ink-dim); font-size:0.9rem; }

  .sponsor-section{
    background: radial-gradient(ellipse at 75% 30%, rgba(95,151,214,0.12), transparent 55%), var(--navy);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  }
  .sponsor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .sponsor-copy h2{ font-size:clamp(2rem,3.6vw,2.8rem); margin:18px 0 20px; }
  .sponsor-copy p{ color:var(--ink-dim); margin-bottom:16px; max-width:520px; }
  .sponsor-stats{ display:flex; gap:36px; margin-top:32px; flex-wrap:wrap; }
  .sponsor-stats div strong{
    display:block; font-family:'Manrope', sans-serif; font-weight:300; font-size:2rem;
    background:var(--rain-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .sponsor-stats div span{ font-family:'Space Grotesk', sans-serif; font-size:0.72rem; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; }
  .sponsor-tiers{ display:flex; flex-direction:column; gap:14px; }
  .sponsor-tier{
    display:flex; justify-content:space-between; align-items:center;
    background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
    border:1px solid var(--line); border-radius:14px; padding:22px 26px;
    transition:all .3s ease;
  }
  .sponsor-tier:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
  .sponsor-tier .amount{ font-family:'Manrope', sans-serif; font-size:1.3rem; font-weight:600; color:var(--ink); }
  .sponsor-tier .desc{ color:var(--ink-dim); font-size:0.88rem; margin-top:4px; }

  @media (max-width:980px){
    .benefit-grid{ grid-template-columns:1fr; }
    .blog-card{ grid-template-columns:1fr; }
    .blog-thumb{ width:100%; height:160px; }
    .contact-layout{ grid-template-columns:1fr; gap:40px; }
    .pillar-grid{ grid-template-columns:1fr; }
    .sponsor-grid{ grid-template-columns:1fr; gap:36px; }
    .page-hero{ padding:150px 0 60px; }
    .page-hero-grid{ grid-template-columns:1fr; gap:32px; }
  }

  /* ---------- PRICING TIER CARDS ---------- */
  .pricing-header{ text-align:center; max-width:700px; margin:0 auto 64px; }
  .pricing-header .eyebrow{ justify-content:center; }
  .pricing-header h1{ font-size:clamp(2.2rem,4.6vw,3.4rem); margin:18px 0 16px; }
  .pricing-header .suite-tag{
    display:inline-flex; margin-top:18px; padding:10px 26px;
    border-radius:100px; background:linear-gradient(135deg, var(--sky-4), var(--sky-3));
    font-family:'Space Grotesk', sans-serif; font-size:0.85rem; color:var(--ink);
  }
  .pricing-header p.lede{ margin:22px auto 0; text-align:center; }

  .tier-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
    align-items:start; margin-top:10px;
  }
  .tier-card{
    position:relative; border-radius:22px; overflow:visible;
  }
  .tier-card-inner{
    position:relative; z-index:1;
    background:linear-gradient(170deg, var(--navy-panel), var(--navy-deep));
    border:1px solid var(--line);
    border-radius:22px;
    padding:40px 32px 32px;
    box-shadow:0 24px 60px rgba(5,11,28,0.55);
    transition: transform .4s ease, border-color .4s ease;
  }
  .tier-card::before{
    content:""; position:absolute; inset:0; border-radius:22px; padding:1.5px;
    background:var(--rain-grad);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:2;
  }
  .tier-card::after{
    content:""; position:absolute; inset:-18px; border-radius:34px;
    background:radial-gradient(ellipse at center, rgba(95,151,214,0.35), transparent 70%);
    opacity:0; filter:blur(20px); transition:opacity .45s ease; pointer-events:none; z-index:0;
  }
  .tier-card:hover::before{ opacity:1; }
  .tier-card:hover::after{ opacity:1; }
  .tier-card:hover .tier-card-inner{ transform:translateY(-8px); }
  .tier-card.featured .tier-card-inner{ border-color:var(--line-strong); }

  .tier-badge-top{
    position:absolute; top:-16px; left:50%; transform:translateX(-50%); z-index:3;
    padding:7px 20px; border-radius:100px;
    background:linear-gradient(135deg, #3fd1a5, #5f97d6);
    font-family:'Space Grotesk', sans-serif; font-size:0.7rem; letter-spacing:0.08em;
    color:var(--navy-deep); font-weight:600; white-space:nowrap;
  }
  .tier-name{
    display:inline-flex; padding:8px 20px; border-radius:100px;
    background:linear-gradient(135deg, var(--sky-4), var(--sky-3));
    font-family:'Space Grotesk', sans-serif; font-size:0.85rem; color:var(--ink);
    margin-bottom:22px;
  }
  .tier-price-unit{ font-family:'Space Grotesk', sans-serif; font-size:0.7rem; letter-spacing:0.1em; color:var(--ink-faint); text-transform:uppercase; }
  .tier-price{
    font-family:'Manrope', sans-serif; font-weight:300; font-size:2.6rem;
    background:var(--rain-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
    line-height:1.1; margin-bottom:4px;
  }
  .tier-price .from{ font-size:1.6rem; }
  .tier-desc{ color:var(--ink-dim); font-size:0.9rem; margin:12px 0 26px; min-height:44px; }
  .tier-features{ list-style:none; margin-bottom:30px; }
  .tier-features li{
    display:flex; align-items:flex-start; gap:10px;
    padding:11px 0; border-top:1px solid var(--line);
    font-size:0.9rem; color:var(--ink-dim);
  }
  .tier-features li:last-child{ border-bottom:1px solid var(--line); }
  .tier-features li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke:var(--sky-2); }
  .tier-card .btn{ width:100%; justify-content:center; }
  .pricing-footnote{ text-align:center; margin-top:40px; color:var(--ink-faint); font-size:0.85rem; font-style:italic; }

  /* ---------- HOMEPAGE POPUP ---------- */
  .home-popup{
    position:fixed; bottom:28px; right:28px; z-index:200;
    max-width:340px;
    background:linear-gradient(170deg, var(--navy-panel), var(--navy-deep));
    border:1px solid var(--line-strong);
    border-radius:18px; padding:26px 24px;
    box-shadow:0 24px 60px rgba(5,11,28,0.6), 0 0 40px rgba(95,151,214,0.2);
    opacity:0; transform:translateY(24px) scale(0.96);
    pointer-events:none;
    transition: opacity .5s ease, transform .5s ease;
  }
  .home-popup.visible{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
  .home-popup.popup-secondary{ bottom:238px; z-index:199; }
  .home-popup-close{
    position:absolute; top:14px; right:14px;
    width:22px; height:22px; border:none; background:none; cursor:pointer;
    color:var(--ink-faint); font-size:1.1rem; line-height:1;
  }
  .home-popup-close:hover{ color:var(--ink); }
  .home-popup h3{
    font-family:'Manrope', sans-serif; font-weight:600; font-size:1.15rem; color:var(--ink);
    margin-bottom:10px; padding-right:16px;
  }
  .home-popup p{ color:var(--ink-dim); font-size:0.88rem; margin-bottom:18px; }
  .home-popup .btn{ width:100%; justify-content:center; padding:12px 20px; font-size:0.85rem; }

  .home-popup-img-wrap{
    width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
    background:transparent; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
  }
  .home-popup-img-wrap img{ width:100%; height:100%; object-fit:contain; }

  @media (max-width:980px){
    .tier-grid{ grid-template-columns:1fr; gap:52px; }
    .home-popup{ left:20px; right:20px; bottom:20px; max-width:none; }
    .home-popup.popup-secondary{ bottom:230px; }
  }

/* ---------- ACADEMY PAGE ---------- */
.format-grid{ display:flex; flex-direction:column; gap:24px; }
.format-intro-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; margin-bottom:60px; }
.format-section-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.format-visual{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 30px 70px rgba(5,11,28,0.5); }
.format-card{
  display:flex; gap:24px; align-items:flex-start;
  background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
  border:1px solid var(--line); border-radius:18px; padding:28px;
  transition:all .3s ease;
}
.format-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.format-card-media{
  width:110px; height:110px; border-radius:14px; flex-shrink:0; overflow:hidden;
  background:transparent; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
}
.format-card-media img{ width:100%; height:100%; object-fit:contain; }
.format-card-body{ flex:1; min-width:0; }
.format-card h3{ font-size:1.15rem; margin-bottom:10px; }
.format-card p{ color:var(--ink-dim); font-size:0.92rem; margin-bottom:18px; }
.format-meta{ display:flex; gap:24px; flex-wrap:wrap; font-family:'Space Grotesk', sans-serif; font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.04em; padding-top:16px; border-top:1px solid var(--line); text-transform:uppercase; }
.format-meta strong{ color:var(--sky-2); display:block; font-size:0.95rem; margin-bottom:3px; font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:0; }


/* alternating course showcase */
.academy-course{ padding:90px 0; border-top:1px solid var(--line); }
.academy-course-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.academy-course.reverse .academy-visual{ order:2; }
.academy-visual{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 30px 70px rgba(5,11,28,0.5); }
.academy-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.academy-copy .eyebrow{ margin-bottom:14px; }
.academy-copy h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:18px; }
.academy-copy p{ color:var(--ink-dim); margin-bottom:16px; max-width:540px; }
.academy-format-list{ display:flex; flex-direction:column; gap:14px; margin:24px 0 28px; }
.academy-format-item{
  display:flex; gap:16px; align-items:flex-start;
  background:rgba(172,201,240,0.05); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px;
}
.academy-format-item .fmt-icon{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--rain-grad); display:flex; align-items:center; justify-content:center;
}
.academy-format-item .fmt-icon svg{ width:16px; height:16px; stroke:var(--navy-deep); }
.academy-format-item strong{ display:block; font-family:'Manrope',sans-serif; font-size:0.95rem; color:var(--ink); margin-bottom:3px; }
.academy-format-item span{ color:var(--ink-dim); font-size:0.86rem; }

/* Build Beyond Belief — premium course window showcase */
.showcase-section{ padding:20px 0 40px; }
.window-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.course-window{
  background:linear-gradient(160deg, rgba(172,201,240,0.08), rgba(172,201,240,0.015));
  border:1px solid var(--line-strong); border-radius:24px; padding:28px;
  box-shadow:0 30px 70px rgba(5,11,28,0.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.course-window:hover{ transform:translateY(-6px); box-shadow:0 40px 90px rgba(5,11,28,0.5); }
.window-media{
  width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:transparent; margin-bottom:24px;
  display:flex; align-items:center; justify-content:center;
}
.window-media img{ width:100%; height:100%; object-fit:contain; }
.window-course-name{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem;
  color:var(--ink); text-align:left; margin-bottom:14px; line-height:1.4;
}
.window-desc-primary{
  color:var(--ink-dim); font-size:0.95rem; line-height:1.7;
  text-align:left; margin-bottom:16px;
}
.window-gold-desc{
  font-family:'Manrope', sans-serif; font-size:0.88rem; line-height:1.65; font-weight:500;
  background:linear-gradient(135deg, #f5dc94, #d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:26px;
}
.window-price-row{ display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.window-price{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:2.7rem;
  background:linear-gradient(135deg, #f5dc94, #d4af37, #f5dc94); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:4px 0 4px;
}
.window-price-unit{ color:var(--ink-dim); font-size:0.85rem; margin-bottom:26px; }
.window-btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.window-btn-row .btn{ flex:1; justify-content:center; min-width:140px; }

@media (max-width:860px){
  .window-grid{ grid-template-columns:1fr; }
  .window-price{ font-size:2.3rem; }
}

/* compact referral teaser (de-emphasized, sits after the enroll CTA) */
.referral-teaser{ padding:50px 0; border-top:1px solid var(--line); }
.referral-teaser-inner{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.referral-teaser-text{ max-width:580px; }
.referral-teaser-text .eyebrow{ margin-bottom:10px; }
.referral-teaser-text p{ color:var(--ink-dim); font-size:0.9rem; margin:0; line-height:1.6; }

@media (max-width:768px){
  .referral-teaser-inner{ flex-direction:column; align-items:flex-start; }
}

/* 3-step price selector — premium redesign */
.price-selector{ max-width:820px; margin:0 auto; }
.selector-step{ margin-bottom:40px; }
.selector-step-label{
  display:flex; align-items:center; gap:10px;
  font-family:'Space Grotesk', sans-serif; font-size:0.8rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:18px;
}
.selector-step-label .step-num{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--rain-grad); color:var(--navy-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:700;
}

/* segmented-control style container */
.selector-options{
  display:flex; gap:6px; flex-wrap:wrap;
  background:rgba(172,201,240,0.04); border:1px solid var(--line);
  border-radius:18px; padding:7px;
}
.option-btn{
  flex:1; min-width:170px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:18px 16px; border-radius:13px; border:none;
  background:transparent; color:var(--ink-dim);
  font-family:'Manrope', sans-serif; font-size:0.86rem; font-weight:500;
  cursor:pointer; text-align:center;
  transition:background .3s cubic-bezier(.4,0,.2,1), color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.option-btn svg{ width:22px; height:22px; stroke:currentColor; opacity:0.6; transition:opacity .3s ease; }
.option-btn:hover{ background:rgba(172,201,240,0.07); color:var(--ink); }
.option-btn:hover svg{ opacity:0.85; }
.option-btn:active{ transform:scale(0.98); }
.option-btn.active{
  color:var(--navy-deep); font-weight:600;
  background:var(--rain-grad);
  box-shadow:0 14px 32px rgba(95,151,214,0.32);
}
.option-btn.active svg{ opacity:1; }
.option-recommended{
  font-family:'Space Grotesk', sans-serif; font-size:0.62rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--navy-deep); background:rgba(5,11,28,0.14);
  padding:3px 10px; border-radius:100px; margin-top:2px;
}
.option-btn:not(.active) .option-recommended{ color:var(--sky-2); background:rgba(172,201,240,0.1); }

/* elevated, glowing result card */
.price-result{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(172,201,240,0.10), rgba(172,201,240,0.02));
  border:1px solid var(--line-strong); border-radius:26px; padding:56px 48px;
  text-align:center; margin-top:20px;
  box-shadow:0 40px 90px rgba(5,11,28,0.45);
}
.price-result::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:2px;
  background:var(--rain-grad); border-radius:100px;
}
.price-result::after{
  content:""; position:absolute; top:-180px; left:50%; transform:translateX(-50%);
  width:360px; height:360px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(95,151,214,0.16), transparent 70%);
}
.price-result > *{ position:relative; z-index:1; }
.price-result .tier-name{ margin-bottom:22px; }
.price-result .tier-desc{ max-width:440px; margin-left:auto; margin-right:auto; }
.price-result .tier-features{ max-width:360px; margin-left:auto; margin-right:auto; text-align:left; }
.price-result .btn{ min-width:250px; }

.price-row{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:2px; }
.price-result .tier-price-old{ margin:0; }
.savings-chip{
  display:inline-flex; align-items:center;
  font-family:'Space Grotesk', sans-serif; font-size:0.7rem; font-weight:600; letter-spacing:0.03em;
  color:#3fd1a5; background:rgba(63,209,165,0.12); border:1px solid rgba(63,209,165,0.32);
  padding:5px 13px; border-radius:100px; white-space:nowrap;
}
.price-result .tier-price{ font-size:3.4rem; }
.result-trust{ color:var(--ink-faint); font-size:0.78rem; margin-top:18px; letter-spacing:0.01em; }

@media (max-width:640px){
  .selector-options{ flex-direction:column; padding:6px; }
  .option-btn{ min-width:0; flex-direction:row; justify-content:flex-start; padding:14px 16px; }
  .price-result{ padding:36px 26px; }
  .price-result .tier-price{ font-size:2.8rem; }
}

/* pricing groups (self-paced vs live) */
.pricing-group{ margin-bottom:76px; }
.pricing-group:last-child{ margin-bottom:0; }
.pricing-group-head{ text-align:center; margin-bottom:40px; }
.pricing-group-head .eyebrow{ justify-content:center; }
.pricing-group-head h3{ font-size:1.5rem; margin-top:10px; }
.pricing-group-head p{ color:var(--ink-dim); font-size:0.92rem; margin-top:10px; }

/* strikethrough sale pricing */
.tier-price-old{
  font-family:'Space Grotesk', sans-serif; font-size:1rem; color:var(--ink-faint);
  text-decoration:line-through; text-decoration-color:rgba(172,201,240,0.4);
  margin-bottom:2px;
}

/* referral / alliance app section */
.app-section{
  background: radial-gradient(ellipse at 75% 30%, rgba(95,151,214,0.12), transparent 55%), var(--navy);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:100px 0;
}
.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.app-visual img{ width:100%; border-radius:22px; border:1px solid var(--line); display:block; box-shadow:0 30px 70px rgba(5,11,28,0.55); }
.app-feature-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0; }
.app-feature{
  background:rgba(172,201,240,0.05); border:1px solid var(--line); border-radius:14px; padding:20px;
}
.app-feature strong{ display:block; font-family:'Manrope',sans-serif; font-size:0.95rem; color:var(--ink); margin-bottom:4px; }
.app-feature span{ color:var(--ink-dim); font-size:0.84rem; }
.code-chip{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Grotesk', sans-serif; font-size:0.88rem; letter-spacing:0.08em;
  background:var(--navy-deep); border:1px dashed var(--line-strong); border-radius:100px;
  padding:11px 22px; color:var(--sky-2); margin:6px 0 28px;
}
.code-chip svg{ width:14px; height:14px; stroke:var(--sky-2); flex-shrink:0; }

/* image containers that must show the full graphic, uncropped */
.visual-contain{
  background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.visual-contain img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
}

.hero-credibility{ color:var(--ink-faint); font-size:0.85rem; margin-top:22px; max-width:480px; line-height:1.6; }
.hero-logo{ height:52px; width:auto; margin-bottom:20px; filter:drop-shadow(0 0 10px rgba(212,175,55,0.35)); }

/* FAQ accordion */
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:820px; margin:0 auto; }
.faq-item{
  background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
  border:1px solid var(--line); border-radius:14px; padding:4px 28px;
  transition:border-color .3s ease;
}
.faq-item:hover{ border-color:var(--line-strong); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 0;
  font-family:'Manrope', sans-serif; font-weight:500; font-size:1rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.4rem; color:var(--sky-2); flex-shrink:0; line-height:1;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ color:var(--ink-dim); font-size:0.92rem; line-height:1.75; padding-bottom:24px; margin:0; max-width:640px; }

/* Young Web Creators Camp */
.camp-visual-hover{
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .45s ease;
}
.camp-visual-hover:hover{
  transform:translateY(-8px) scale(1.03);
  box-shadow:0 40px 90px rgba(212,175,55,0.25);
  border-color:rgba(212,175,55,0.5);
}
.camp-visual-hover img{ transition:transform .5s ease; }
.camp-visual-hover:hover img{ transform:scale(1.06); }

.camp-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.camp-badge{
  font-family:'Space Grotesk', sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.03em;
  padding:10px 20px; border-radius:100px; color:#d4af37;
  border:1px solid rgba(212,175,55,0.4); background:rgba(212,175,55,0.08);
}
.camp-subhead{ font-size:1.15rem; color:var(--ink); margin-bottom:16px; font-family:'Manrope', sans-serif; font-weight:600; }

.camp-timetable{
  margin-top:56px; padding:44px; border-radius:24px;
  background:linear-gradient(160deg, rgba(172,201,240,0.07), rgba(172,201,240,0.01));
  border:1px solid var(--line-strong);
}

.camp-format-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:48px; align-items:center; }
.camp-format-visual{
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:1/1; box-shadow:0 30px 70px rgba(5,11,28,0.5);
}
.camp-primary-badge{
  display:inline-block; font-family:'Space Grotesk', sans-serif; font-size:0.7rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--navy-deep);
  background:linear-gradient(135deg, #f5dc94, #d4af37); padding:8px 18px; border-radius:100px;
}
.camp-format-title{ font-size:1.6rem; color:var(--ink); margin:16px 0 26px; font-family:'Space Grotesk', sans-serif; font-weight:600; }

.camp-info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:36px; }
.camp-info-item{ display:flex; align-items:flex-start; gap:12px; }
.camp-info-icon{ font-size:1.3rem; flex-shrink:0; line-height:1; }
.camp-info-item strong{ display:block; color:var(--ink); font-size:0.9rem; font-weight:600; margin-bottom:3px; }
.camp-info-item span{ color:var(--ink-dim); font-size:0.85rem; }

.camp-dates{ list-style:none; display:flex; flex-direction:column; gap:0; }
.camp-dates li{
  padding:13px 0; border-top:1px solid var(--line); color:var(--ink-dim); font-size:0.92rem;
}
.camp-dates li:last-child{ border-bottom:1px solid var(--line); }
.camp-dates li::before{ content:"•  "; color:#d4af37; }

.camp-session-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.camp-date-grid{ grid-template-columns:repeat(2,1fr); }
.camp-session-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:22px 16px; border-radius:16px;
  background:rgba(172,201,240,0.04); border:1px solid var(--line);
  transition:border-color .25s ease, background .25s ease;
}
.camp-session-card:hover{ border-color:rgba(212,175,55,0.4); background:rgba(212,175,55,0.05); }
.camp-session-icon{ font-size:1.6rem; margin-bottom:4px; }
.camp-session-card strong{ color:var(--ink); font-size:0.95rem; font-weight:600; }
.camp-session-card span{ color:var(--ink-dim); font-size:0.85rem; }

.camp-timetable-note{ color:var(--ink-dim); font-size:0.9rem; line-height:1.6; margin-top:36px; text-align:center; font-style:italic; }

.camp-lists-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; margin-top:56px; }

@media (max-width:860px){
  .camp-format-grid{ grid-template-columns:1fr; gap:32px; }
  .camp-format-visual{ max-width:280px; margin:0 auto; }
  .camp-info-grid{ grid-template-columns:1fr 1fr; }
  .camp-session-grid{ grid-template-columns:1fr; }
  .camp-lists-grid{ grid-template-columns:1fr; gap:36px; }
  .camp-timetable{ padding:28px 22px; }
}

/* lecturer credit link inline in course sections */
.lecturer-credit{
  display:inline-flex; align-items:center; gap:12px;
  padding:8px 20px 8px 8px; border-radius:100px;
  background:rgba(172,201,240,0.05); border:1px solid var(--line);
  margin:22px 0 4px; text-decoration:none;
  transition:border-color .25s ease, background .25s ease;
}
.lecturer-credit:hover{ border-color:rgba(212,175,55,0.4); background:rgba(172,201,240,0.08); }
.lecturer-credit img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.lecturer-credit span{ font-size:0.84rem; color:var(--ink-dim); }
.lecturer-credit strong{ font-weight:500; }
.lecturer-credit strong{
  background:linear-gradient(135deg, #f5dc94, #d4af37);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Meet the Lecturer section */
.lecturer-grid{ display:grid; grid-template-columns:0.6fr 1.4fr; gap:60px; align-items:center; }
.lecturer-visual{
  max-width:168px;
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  aspect-ratio:3/4; box-shadow:0 30px 70px rgba(5,11,28,0.5);
}
.lecturer-title{
  font-family:'Space Grotesk', sans-serif; font-size:0.85rem; letter-spacing:0.04em;
  color:var(--sky-2); margin-bottom:18px;
}
.lecturer-bio{ color:var(--ink-dim); font-size:0.97rem; line-height:1.75; margin-bottom:26px; max-width:520px; }
.lecturer-courses{ display:flex; gap:12px; flex-wrap:wrap; }
.lecturer-course-tag{
  font-family:'Space Grotesk', sans-serif; font-size:0.74rem; letter-spacing:0.03em;
  padding:8px 18px; border-radius:100px; color:#d4af37;
  border:1px solid rgba(212,175,55,0.4); background:rgba(212,175,55,0.08);
}

@media (max-width:860px){
  .lecturer-grid{ grid-template-columns:1fr; gap:32px; }
  .lecturer-visual{ max-width:192px; margin:0 auto; }
}

/* course curriculum list */
.syllabus{ margin:8px 0 28px; }
.syllabus h4{ font-family:'Space Grotesk', sans-serif; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sky-2); margin-bottom:16px; }
.syllabus-list{ list-style:none; display:flex; flex-direction:column; }
.syllabus-list li{
  display:flex; gap:18px; align-items:flex-start;
  padding:16px 4px; border-top:1px solid var(--line);
}
.syllabus-list li:last-child{ border-bottom:1px solid var(--line); }
.syl-num{
  flex-shrink:0; width:32px; height:32px; margin-top:1px; border-radius:9px;
  background:rgba(212,175,55,0.12); border:1px solid rgba(212,175,55,0.4);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk', sans-serif; font-size:0.72rem; letter-spacing:0.02em;
  background-image:linear-gradient(135deg, #f5dc94, #d4af37);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.syl-content{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.syl-content strong{ color:var(--ink); font-weight:500; font-size:0.94rem; line-height:1.4; }
.syl-content span{ color:var(--sky-2); font-size:0.85rem; line-height:1.55; opacity:0.85; }
.syllabus .syllabus-note{ color:var(--ink-faint); font-size:0.8rem; font-style:italic; margin-top:14px; }

@media (max-width:980px){
  .format-intro-grid{ grid-template-columns:1fr; gap:32px; margin-bottom:36px; }
  .format-section-grid{ grid-template-columns:1fr; gap:32px; }
  .format-card{ flex-direction:column; }
  .format-card-media{ width:100%; height:180px; }
  .academy-course{ padding:60px 0; }
  .academy-course-grid{ grid-template-columns:1fr; gap:36px; }
  .academy-course.reverse .academy-visual{ order:0; }
  .app-grid{ grid-template-columns:1fr; gap:36px; }
  .app-feature-grid{ grid-template-columns:1fr; }
}