/* ============ Tokens ============ */
  :root{
    --bg:#0a0e1f;
    --bg-2:#0f1430;
    --surface:#141a3a;
    --surface-2:#1b2247;
    --line:rgba(255,255,255,.09);
    --text:#e9ecff;
    --muted:#9aa3c7;
    --brand:#7c5cff;      /* purple */
    --brand-2:#22d3ee;    /* cyan */
    --accent:#f59e0b;     /* amber */
    --hot:#ef4444;        /* red - urgency */
    --good:#22c55e;
    --grad: linear-gradient(135deg,#7c5cff 0%,#22d3ee 50%,#f59e0b 100%);
    --grad-soft: linear-gradient(135deg,rgba(124,92,255,.18),rgba(34,211,238,.12));
    --radius:14px;
    --shadow: 0 18px 40px -18px rgba(124,92,255,.55);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .container{max-width:1200px;margin:0 auto;padding:0 22px}
  h1,h2,h3{font-family:'Poppins','Inter',sans-serif;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px}
  h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:800}
  h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700}
  h3{font-size:1.2rem;font-weight:700}
  p{margin:0 0 12px;color:var(--muted)}
  .text-w{color:var(--text)}
  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ============ Decorative background ============ */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(60% 50% at 12% 8%,rgba(124,92,255,.35),transparent 60%),
      radial-gradient(50% 40% at 92% 18%,rgba(34,211,238,.28),transparent 60%),
      radial-gradient(40% 35% at 85% 95%,rgba(245,158,11,.22),transparent 60%);
  }
  main,header,footer{position:relative;z-index:1}

  /* ============ Nav ============ */
  .nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,14,31,.72);border-bottom:1px solid var(--line)}
  .nav-row{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.15rem}
  .brand-logo{height:50px;width:auto;display:block}
  .brand-mark{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;overflow:hidden}
  .brand-logo-img{width:34px;height:34px;object-fit:contain;display:block}
  .nav-links{display:flex;gap:6px}
  .nav-links a{padding:9px 14px;border-radius:10px;color:var(--muted);font-size:.95rem;font-weight:500;transition:.18s}
  .nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .nav-cta{background:var(--grad);color:#fff !important;font-weight:600;box-shadow:var(--shadow)}
  .nav-cta:hover{transform:translateY(-1px)}
  .nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer}
  @media (max-width: 880px){
    .nav-links{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--bg-2);padding:14px;border-bottom:1px solid var(--line)}
    .nav-links.open{display:flex}
    .nav-toggle{display:block}
  }

  /* ============ Brand Hero ============ */
  .brand-hero{padding:80px 0 40px;text-align:center;position:relative;overflow:hidden}
  .brand-hero::after{
    content:"";position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);
    width:1100px;height:1100px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(124,92,255,.22),rgba(34,211,238,.08) 50%,transparent 75%);
    filter:blur(40px);pointer-events:none;z-index:-1;
  }
  .bh-inner{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px}
  .bh-mark{position:relative;width:120px;height:120px;margin-bottom:6px}
  .bh-mark-inner{
    position:absolute;inset:14px;border-radius:50%;background:var(--grad);
    display:grid;place-items:center;color:#fff;font-family:'Poppins',sans-serif;font-weight:900;font-size:3.4rem;
    box-shadow:0 18px 50px -10px rgba(124,92,255,.65), inset 0 -10px 30px rgba(0,0,0,.3);
  }
  .bh-mark-logo{width:62px;height:62px;object-fit:contain;display:block}
  .bh-mark-ring{
    position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from 0deg,#22d3ee,#7c5cff,#f59e0b,#22d3ee);
    -webkit-mask:radial-gradient(closest-side,transparent 64%,#000 66%);
            mask:radial-gradient(closest-side,transparent 64%,#000 66%);
    animation:spin 6s linear infinite;
  }
  .bh-name-wrap{position:relative;display:inline-block;margin:6px 0 0}
  .bh-name{
    font-family:'Poppins',sans-serif;font-weight:900;letter-spacing:.04em;
    margin:0;line-height:.95;color:#fff;
    display:flex;flex-direction:column;align-items:center;gap:4px;
  }
  /* === CT attention sticker (next to STOGO ACADEMICS) === */
  .ct-sticker{
    position:absolute;top:-18px;right:-155px;
    width:148px;height:148px;
    display:grid;place-items:center;text-align:center;
    border-radius:50%;cursor:pointer;text-decoration:none;
    transform:rotate(-12deg);
    animation:ctBounce 2.2s ease-in-out infinite;
    z-index:5;
  }
  .ct-burst{
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(closest-side,#fcd34d 0%,#f59e0b 55%,#ef4444 100%);
    box-shadow:0 0 0 6px rgba(245,158,11,.18), 0 14px 32px -8px rgba(239,68,68,.55),
               inset 0 -6px 14px rgba(0,0,0,.18);
    z-index:0;
  }
  .ct-burst::before{
    content:"";position:absolute;inset:-12px;border-radius:50%;
    background:conic-gradient(from 0deg,#f59e0b 0deg 18deg,transparent 18deg 36deg,
                              #fcd34d 36deg 54deg,transparent 54deg 72deg,
                              #f59e0b 72deg 90deg,transparent 90deg 108deg,
                              #fcd34d 108deg 126deg,transparent 126deg 144deg,
                              #f59e0b 144deg 162deg,transparent 162deg 180deg,
                              #fcd34d 180deg 198deg,transparent 198deg 216deg,
                              #f59e0b 216deg 234deg,transparent 234deg 252deg,
                              #fcd34d 252deg 270deg,transparent 270deg 288deg,
                              #f59e0b 288deg 306deg,transparent 306deg 324deg,
                              #fcd34d 324deg 342deg,transparent 342deg 360deg);
    -webkit-mask:radial-gradient(closest-side,transparent 60%,#000 62% 100%);
            mask:radial-gradient(closest-side,transparent 60%,#000 62% 100%);
    animation:spin 8s linear infinite;z-index:-1;opacity:.9;
  }
  .ct-sticker-inner{
    position:relative;z-index:1;color:#000;
    display:flex;flex-direction:column;align-items:center;line-height:1;
    text-shadow:0 1px 0 rgba(255,255,255,.4);
  }
  .ct-mini{font-size:.74rem;font-weight:900;letter-spacing:.1em;color:#7c2d12}
  .ct-mini-b{margin-top:4px;color:#7c2d12;background:rgba(255,255,255,.6);padding:3px 8px;border-radius:14px}
  .ct-big{
    font-family:'Poppins',sans-serif;font-weight:900;font-size:1.35rem;
    margin:3px 0;letter-spacing:.04em;line-height:1.15;
    background:linear-gradient(180deg,#1e1b4b,#7c2d12);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  @keyframes ctBounce{
    0%,100%{transform:rotate(-12deg) scale(1)}
    50%{transform:rotate(-8deg) scale(1.08)}
  }
  .ct-sticker:hover{
    animation:none;
    transform:rotate(0deg) scale(1.22);
    transition:transform .25s ease-out;
  }
  .ct-sticker:hover .ct-burst{
    box-shadow:0 0 0 10px rgba(245,158,11,.3), 0 20px 50px -10px rgba(239,68,68,.7),
               inset 0 -6px 14px rgba(0,0,0,.18);
  }
  @media (max-width:880px){
    .ct-sticker{position:relative;top:auto;right:auto;margin:14px auto 0;display:flex;width:120px;height:120px}
  }
  .bh-word{display:block;font-size:clamp(2.6rem,7.5vw,5.6rem);text-shadow:0 6px 30px rgba(124,92,255,.5)}
  .bh-word-2{
    background:linear-gradient(90deg,#22d3ee,#7c5cff,#f59e0b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    letter-spacing:.12em;font-size:clamp(1.5rem,4.2vw,3rem);font-weight:800;
  }
  .bh-tagline{font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:700;margin:14px 0 4px;letter-spacing:.005em}
  .bh-sub{color:var(--muted);font-size:1.02rem;margin:0;font-style:italic}
  .bh-mission{color:#cbd0ee;font-size:1rem;max-width:760px;margin:16px auto 8px;line-height:1.65}

  /* legacy hero kept for back-compat (unused) */
  .hero{padding:60px 0 50px}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .pill{display:inline-flex;align-items:center;gap:8px;background:rgba(245,158,11,.14);color:#fcd34d;border:1px solid rgba(245,158,11,.3);padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:18px}
  .pill .dot{width:8px;height:8px;border-radius:50%;background:#fcd34d;box-shadow:0 0 12px #fcd34d;animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}
  .hero h1 span.line{display:block}
  .hero p.lead{font-size:1.1rem;color:var(--muted);max-width:560px}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;font-weight:600;font-size:.98rem;border:0;cursor:pointer;transition:transform .18s, box-shadow .18s, background .18s}
  .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 50px -18px rgba(124,92,255,.7)}
  .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line)}
  .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
  .btn-wa{background:#25D366;color:#000}
  .btn-wa:hover{background:#1ebe5b}
  @media (max-width: 880px){.hero-grid{grid-template-columns:1fr;gap:30px}}

  /* CT spotlight (right side of hero) */
  .ct-card{
    position:relative;
    background:linear-gradient(160deg,rgba(124,92,255,.22),rgba(34,211,238,.14) 60%,rgba(245,158,11,.18));
    border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:28px;overflow:hidden;
  }
  .ct-card::before{
    content:"";position:absolute;inset:-2px;border-radius:22px;padding:2px;
    background:conic-gradient(from 0deg, #7c5cff,#22d3ee,#f59e0b,#7c5cff);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:spin 7s linear infinite;opacity:.55;pointer-events:none;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  .ct-tag{display:inline-block;background:#000;color:#fcd34d;padding:5px 12px;border-radius:6px;font-size:.78rem;font-weight:800;letter-spacing:.06em;margin-bottom:14px}
  .ct-card h3{font-size:1.4rem;margin-bottom:6px}
  .ct-card .big{font-size:2.6rem;font-weight:900;line-height:1;margin:8px 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .ct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  .ct-stat{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center}
  .ct-stat b{display:block;color:#fff;font-size:1.2rem}
  .ct-stat span{color:var(--muted);font-size:.78rem}
  .ct-card .cta-link{display:inline-flex;align-items:center;gap:6px;color:#fcd34d;font-weight:700;margin-top:18px}

  /* ============ Section base ============ */
  section{padding:74px 0;position:relative}
  .section-head{text-align:center;max-width:780px;margin:0 auto 40px}
  .eyebrow{color:var(--brand-2);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}

  /* ============ Urgency Banner ============ */
  .urgency{background:linear-gradient(120deg,#ef4444 0%,#f59e0b 60%,#facc15 100%);color:#000;padding:14px 0;overflow:hidden;position:relative}
  .urgency .container{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;font-weight:700}
  .urgency .badge{background:#000;color:#fcd34d;padding:5px 11px;border-radius:6px;font-size:.78rem;letter-spacing:.06em}
  .countdown{font-variant-numeric:tabular-nums;background:rgba(0,0,0,.18);padding:6px 12px;border-radius:8px}

  /* ============ Free 5000 hero banner ============ */
  .freebanner{padding:60px 0;background:radial-gradient(80% 100% at 50% 0%,rgba(239,68,68,.18),transparent 70%);}
  .freebanner-inner{background:linear-gradient(135deg,#1c1238 0%,#2a1450 50%,#3a1530 100%);border:1px solid rgba(245,158,11,.35);border-radius:24px;padding:42px;position:relative;overflow:hidden}
  .freebanner-inner::after{
    content:"";position:absolute;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(245,158,11,.25),transparent 70%);
    top:-300px;right:-200px;pointer-events:none;
  }
  .freebanner h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem)}
  .freebanner h2 .hot{background:linear-gradient(90deg,#f59e0b,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent}
  .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:24px}
  .feature{background:rgba(255,255,255,.04);border:1px solid var(--line);padding:14px 16px;border-radius:12px;display:flex;gap:10px;align-items:center;color:#fff;font-weight:500;font-size:.95rem}
  .feature .check{width:24px;height:24px;border-radius:50%;background:var(--good);color:#000;display:grid;place-items:center;font-weight:800;flex-shrink:0}
  .freebanner .cta-row{margin-top:30px}

  /* ============ Pillars ============ */
  .pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .pillar{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;transition:transform .25s, border-color .25s, box-shadow .25s;position:relative;overflow:hidden}
  .pillar:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.5);box-shadow:0 22px 40px -22px rgba(124,92,255,.5)}
  .pillar .icon{width:54px;height:54px;border-radius:14px;background:var(--grad-soft);display:grid;place-items:center;font-size:1.6rem;margin-bottom:16px;border:1px solid var(--line)}
  .pillar h3{color:#fff}
  .pillar .visit{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--brand-2);font-weight:600}
  .pillar .visit:hover{color:#fff}
  .pillar.featured{background:linear-gradient(160deg,rgba(124,92,255,.18),rgba(34,211,238,.1));border-color:rgba(124,92,255,.55)}
  .pillar.featured::before{content:"FEATURED";position:absolute;top:14px;right:-30px;background:#f59e0b;color:#000;font-size:.7rem;padding:3px 36px;font-weight:800;transform:rotate(35deg)}

  /* ============ Why STOGO ============ */
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .why{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;transition:.22s;cursor:default}
  .why:hover{background:var(--surface-2);transform:translateY(-3px);border-color:rgba(34,211,238,.4)}
  .why .emoji{font-size:2.1rem;display:block;margin-bottom:8px}
  .why b{display:block;color:#fff;font-size:.98rem;margin-bottom:4px}
  .why span{color:var(--muted);font-size:.84rem}
  @media (max-width:880px){.why-grid{grid-template-columns:repeat(2,1fr)}}

  /* ============ Grade Modules ============ */
  .grade-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
  .grade-tab{padding:11px 22px;border-radius:11px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-weight:700;cursor:pointer;transition:.18s;font-size:.95rem}
  .grade-tab:hover{color:#fff;border-color:rgba(124,92,255,.5)}
  .grade-tab.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
  .grade-pane{display:none}
  .grade-pane.active{display:block;animation:fadeIn .25s ease-out}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  .modules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
  .module{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column}
  .module-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .module-icon{width:42px;height:42px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--line);display:grid;place-items:center;font-size:1.2rem}
  .module h3{margin:0;color:#fff;font-size:1.05rem}
  .module .sub{color:var(--muted);font-size:.78rem}
  .chapter-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px;flex:1}
  .chapter-list li a, .chapter-list li.locked{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--line);font-size:.88rem;color:#cbd0ee;transition:.16s}
  .chapter-list li a:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.45);color:#fff}
  /* Locked rows keep the title fully readable — only the right-side badge signals the lock */
  .chapter-list li.locked{color:#cbd0ee;background:rgba(255,255,255,.025);cursor:not-allowed;position:relative}
  .chapter-list li.locked::after{
    content:"🔒 Available after registration";
    position:absolute;top:-32px;left:50%;transform:translateX(-50%);
    background:#000;color:#fcd34d;padding:5px 10px;border-radius:6px;font-size:.74rem;white-space:nowrap;
    opacity:0;pointer-events:none;transition:.18s;border:1px solid rgba(255,255,255,.15);z-index:5
  }
  .chapter-list li.locked:hover::after{opacity:1}
  .ch-no{font-weight:700;color:#7c5cff;flex-shrink:0;min-width:26px}
  .ch-no.locked{color:#7c5cff;opacity:.7}
  .ch-title{flex:1;margin:0 8px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
  .ch-state{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:5px;flex-shrink:0}
  .ch-state.free{background:rgba(34,197,94,.18);color:#86efac;border:1px solid rgba(34,197,94,.4)}
  .ch-state.lock{background:linear-gradient(90deg,rgba(245,158,11,.18),rgba(239,68,68,.18));color:#fcd34d;border:1px solid rgba(245,158,11,.35);font-weight:700}
  .module-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:var(--muted)}

  /* ============ Register form ============ */
  .form-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
  .form-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px}
  .form-card h3{font-size:1.4rem}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field.full{grid-column:1/-1}
  label{font-size:.82rem;color:var(--muted);font-weight:600}
  input,select,textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);color:#fff;padding:12px 14px;border-radius:10px;font:inherit;font-size:.95rem;transition:.16s}
  input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);background:rgba(124,92,255,.08)}
  textarea{resize:vertical;min-height:80px}
  .form-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}
  .form-side .info-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:16px}
  .info-card h4{margin:0 0 8px;color:#fff;font-size:1.05rem;display:flex;align-items:center;gap:8px}
  .info-card p{margin:0;font-size:.92rem}
  .info-card a{color:var(--brand-2);font-weight:600}
  @media (max-width:880px){.form-wrap{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}

  /* ============ Footer ============ */
  footer{background:#06091a;border-top:1px solid var(--line);padding:42px 0 24px;margin-top:40px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
  .foot-grid h4{color:#fff;font-size:.95rem;margin:0 0 12px}
  .foot-grid a{display:block;color:var(--muted);font-size:.88rem;margin-bottom:7px;transition:.15s}
  .foot-grid a:hover{color:#fff}
  .foot-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.82rem}
  @media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:24px}}

  /* ============ Pillar Hub (orbital) ============ */
  .hub-wrap{position:relative;padding:30px 0 10px}
  .hub-tagline{text-align:center;margin-bottom:36px}
  .hub-tagline h2{font-size:clamp(1.7rem,3.4vw,2.8rem)}
  .hub-tagline .sub{color:var(--muted);font-size:1.05rem;max-width:640px;margin:6px auto 0}
  .hub-stage{
    position:relative;width:100%;max-width:580px;aspect-ratio:1/1;margin:0 auto;
  }
  .hub-stage::before{
    content:"";position:absolute;inset:5%;border-radius:50%;
    background:radial-gradient(closest-side,rgba(124,92,255,.35) 0%,rgba(34,211,238,.12) 50%,transparent 75%);
    filter:blur(28px);pointer-events:none;z-index:0;
  }
  .hub-core{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:32%;aspect-ratio:1/1;border-radius:50%;
    background:radial-gradient(closest-side,rgba(180,240,255,.9) 0%,#22d3ee 18%,#7c5cff 50%,#2a0f5f 80%,#0a0e1f 100%);
    box-shadow:0 0 90px rgba(124,92,255,.7), 0 0 160px rgba(34,211,238,.35), inset 0 0 60px rgba(0,0,0,.65);
    display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:900;
    color:#fff;font-size:clamp(1rem,2.4vw,1.8rem);letter-spacing:.18em;text-shadow:0 0 20px rgba(255,255,255,.7), 0 0 40px rgba(34,211,238,.6);
    animation:coreGlow 4s ease-in-out infinite alternate;z-index:4;
  }
  .hub-core::before{
    content:"";position:absolute;inset:-18%;border-radius:50%;
    border:1px solid rgba(34,211,238,.3);
    animation:spin 14s linear infinite reverse;z-index:-1;pointer-events:none;
  }
  .hub-core::after{
    content:"";position:absolute;inset:-28%;border-radius:50%;
    background:conic-gradient(from 0deg,transparent,rgba(34,211,238,.55),transparent 30%,transparent 60%,rgba(124,92,255,.5),transparent 90%);
    animation:spin 9s linear infinite;z-index:-1;pointer-events:none;
  }
  @keyframes coreGlow{
    from{box-shadow:0 0 70px rgba(124,92,255,.6), 0 0 130px rgba(34,211,238,.2), inset 0 0 55px rgba(0,0,0,.65)}
    to{box-shadow:0 0 130px rgba(34,211,238,.85), 0 0 200px rgba(124,92,255,.3), inset 0 0 75px rgba(0,0,0,.65)}
  }
  .pillar-node{
    position:absolute;width:21%;aspect-ratio:1/1;border-radius:50%;
    display:grid;place-items:center;text-align:center;cursor:pointer;
    background:radial-gradient(closest-side,rgba(34,211,238,.32) 0%,rgba(124,92,255,.18) 55%,rgba(10,14,31,.96));
    border:2px solid rgba(34,211,238,.85);
    box-shadow:0 0 40px rgba(34,211,238,.6), 0 0 80px rgba(34,211,238,.2), inset 0 0 28px rgba(0,0,0,.55);
    backdrop-filter:blur(8px);transition:transform .28s, box-shadow .28s, border-color .28s;
    color:#fff;font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(.7rem,1.15vw,.95rem);letter-spacing:.06em;line-height:1.1;
    padding:6px;z-index:3;overflow:visible;
  }
  .pillar-node::before{
    content:"";position:absolute;inset:-7px;border-radius:50%;
    border:1.5px solid rgba(34,211,238,.45);
    animation:nodeRingA 2.8s ease-in-out infinite;pointer-events:none;
  }
  .pillar-node::after{
    content:"";position:absolute;inset:-16px;border-radius:50%;
    border:1px solid rgba(124,92,255,.28);
    animation:nodeRingA 2.8s ease-in-out infinite .9s;pointer-events:none;
  }
  @keyframes nodeRingA{
    0%,100%{transform:scale(1);opacity:.3}
    50%{transform:scale(1.09);opacity:.75}
  }
  .pillar-node:hover{transform:scale(1.13);box-shadow:0 0 65px rgba(34,211,238,.9), 0 0 120px rgba(34,211,238,.35), inset 0 0 28px rgba(0,0,0,.3);border-color:#22d3ee;z-index:5}
  .pillar-node .pn-icon{display:block;font-size:1.8rem;margin-bottom:4px;filter:drop-shadow(0 0 10px rgba(34,211,238,.8))}
  .pillar-node .pn-name{display:block;text-shadow:0 0 14px rgba(34,211,238,.85)}
  /* Positions: matches uploaded image (3 rows × 2 columns around core) */
  .pn-1{top:8%;left:8%}        /* WORLD - top left */
  .pn-2{top:8%;right:8%}       /* SUITE - top right */
  .pn-3{top:40%;left:-2%}      /* AI    - mid left */
  .pn-4{top:40%;right:-2%}     /* ROUTE - mid right */
  .pn-5{bottom:8%;left:8%}     /* FEST  - bottom left */
  .pn-6{bottom:8%;right:8%}    /* CLUB  - bottom right */
  /* Connector lines: z-index 1 sits below nodes (z:3), lines visually terminate at node edge */
  .hub-stage svg.connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:1}
  .hub-grid-mobile{display:none !important}
  @media (max-width:480px){
    .hub-stage{max-width:340px}
    .pillar-node{font-size:clamp(.55rem,.9vw,.75rem)}
    .hub-core{font-size:clamp(.7rem,2vw,1.1rem);letter-spacing:.1em}
  }
  .hub-grid-mobile{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
  .hub-grid-mobile .pm{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;text-align:center;cursor:pointer;transition:.2s}
  .hub-grid-mobile .pm:hover{border-color:rgba(34,211,238,.5);transform:translateY(-3px)}
  .hub-grid-mobile .pm-icon{font-size:1.8rem;display:block;margin-bottom:6px}
  .hub-grid-mobile .pm-name{font-weight:800;color:#fff;letter-spacing:.04em;font-size:.95rem}

  /* Pillar mini-cards row below hub */
  .pillar-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px}
  @media (max-width:880px){.pillar-cards{grid-template-columns:1fr}}
  .pc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:30px;cursor:pointer;transition:.2s;display:flex;gap:12px;align-items:center}
  .pc:hover{border-color:rgba(124,92,255,.55);transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(124,92,255,.5)}
  .pc-icon{width:55px;height:55px;border-radius:10px;background:var(--grad-soft);border:1px solid var(--line);display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
  .pc-text b{display:block;color:#fff;font-size:.95rem;letter-spacing:.04em}
  .pc-text span{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}

  /* ============ Modal ============ */
  .modal-backdrop{
    position:fixed;inset:0;background:rgba(4,6,18,.78);backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;z-index:300;padding:20px;
    opacity:0;transition:opacity .2s;
  }
  .modal-backdrop.show{display:flex;opacity:1}
  .modal{
    background:linear-gradient(160deg,#181f44,#0f1430);border:1px solid rgba(124,92,255,.5);
    border-radius:20px;max-width:560px;width:100%;padding:32px;position:relative;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 0 80px rgba(124,92,255,.3);
    transform:scale(.94);transition:transform .22s;max-height:90vh;overflow-y:auto;
  }
  .modal-backdrop.show .modal{transform:scale(1)}
  .modal-close{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:grid;place-items:center;transition:.15s}
  .modal-close:hover{background:rgba(239,68,68,.7)}
  .modal-icon{width:64px;height:64px;border-radius:16px;background:var(--grad);display:grid;place-items:center;font-size:2rem;margin-bottom:14px;box-shadow:0 14px 30px -10px rgba(124,92,255,.6)}
  .modal h3{font-size:1.6rem;color:#fff;margin:0 0 4px}
  .modal .m-tagline{color:#22d3ee;font-weight:600;font-size:.95rem;margin-bottom:14px}
  .modal .m-desc{color:#cbd0ee;font-size:.97rem;margin-bottom:18px;line-height:1.65}
  .modal .m-features{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .modal .m-features li{background:rgba(255,255,255,.04);border:1px solid var(--line);padding:9px 12px;border-radius:9px;font-size:.86rem;color:#e9ecff;display:flex;gap:8px;align-items:center}
  .modal .m-features li::before{content:"✓";color:#22c55e;font-weight:800}
  .modal-actions{display:flex;gap:10px;flex-wrap:wrap}
  @media (max-width:520px){.modal .m-features{grid-template-columns:1fr}}

  /* Floating WhatsApp */
  .fab{position:fixed;bottom:22px;right:22px;background:#25D366;color:#000;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;box-shadow:0 18px 28px -8px rgba(37,211,102,.55);z-index:40;font-size:1.6rem;cursor:pointer;transition:.18s}
  .fab:hover{transform:scale(1.08)}

  /* Toast */
  .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(40px);background:#1b2247;border:1px solid rgba(34,211,238,.4);color:#fff;padding:14px 22px;border-radius:12px;font-size:.92rem;box-shadow:0 22px 40px -18px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.25s;z-index:200}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .select-box{
    background-color: #141a3a!important;
    color: #fff!important;
  }
  /* ===== CT Portal Pill CTA ===== */
  /* ===== CT Portal Pill CTA ===== */
  .ct-portal-pill {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    padding: 12px 30px 12px 14px;
    text-decoration: none;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 10;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
  }
  .ct-portal-pill:hover {
    border-color: rgba(124,92,255,0.5);
    box-shadow: 0 0 28px rgba(124,92,255,0.3);
  }
  .ct-portal-pill > * { position: relative; z-index: 1; }

  /* CT Portal label — fully static */
  .ct-portal-label {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    padding-left: 4px;
  }
  /* FREE ACCESS badge — fully static */
  .ct-portal-badge {
    color: var(--brand-2);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 1rem;
  }

  /* Arrow circle */
  .ct-portal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    flex-shrink: 0;
    transition: background 0.45s ease, color 0.45s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .ct-portal-arrow svg {
    width: 24px;
    height: 24px;
    color: inherit;
    display: block;
  }

  /* CLAIM NOW text */
  .ct-portal-cta {
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 1rem;
    color: #7c5cff;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
  }

  /* Hover: arrow travels full width with color shift, CLAIM NOW follows */
  .ct-portal-pill:hover .ct-portal-arrow {
    animation: ctArrowTravel 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .ct-portal-pill:hover .ct-portal-cta {
    color: var(--brand-2);
  }
  @keyframes ctArrowTravel {
    0%   { background: var(--brand);           color: #fff;          transform: translateX(0)                            rotate(0deg);   }
    35%  { background: var(--brand-2);         color: #fff;                                                                              }
    70%  { background: #ffffff;                color: var(--brand);                                                                      }
    100% { background: rgba(255,255,255,0.15); color: var(--brand-2); transform: translateX(var(--ct-arrow-move, 220px)) rotate(360deg); }
  }

  /* ===== CT Claim Modal ===== */
  .ct-claim-backdrop {
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .ct-claim-backdrop.show {
    opacity: 1;
    pointer-events: all;
  }
  .ct-claim-modal {
    background: linear-gradient(160deg, var(--surface), var(--bg-2));
    border: 1px solid rgba(124,92,255,0.4);
    border-radius: var(--radius);
    padding: 38px 32px 28px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 30px 80px -20px rgba(124,92,255,0.5), 0 0 60px rgba(124,92,255,0.15);
    transform: translateY(22px) scale(0.96);
    transition: transform 0.28s ease;
  }
  .ct-claim-backdrop.show .ct-claim-modal {
    transform: translateY(0) scale(1);
  }
  .ct-claim-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: rgba(255,255,255,0.07);
    border: none;
    color: var(--muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
  }
  .ct-claim-close:hover { background: rgba(239,68,68,0.65); color: #fff; }
  .ct-claim-icon { font-size: 2.6rem; margin-bottom: 10px; }
  .ct-claim-modal h3 { color: var(--text); font-size: 1.25rem; margin-bottom: 10px; }
  .ct-claim-modal > p { color: var(--muted); font-size: 0.92rem; margin-bottom: 18px; line-height: 1.6; }
  .ct-claim-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
  }
  .ct-claim-perks li {
    padding: 10px 14px;
    color: var(--text);
    font-size: 0.88rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ct-claim-perks li:last-child { border-bottom: none; }
  .ct-check { color: var(--good); font-weight: 800; flex-shrink: 0; }
  .ct-claim-action {
    width: 100%;
    display: block;
    text-align: center;
    justify-content: center;
    font-size: 1rem;
  }
  .ct-claim-note {
    font-size: 0.76rem !important;
    margin: 12px 0 0 !important;
    color: var(--muted) !important;
  }