/* ═══════ SHARED STYLES FOR ALL PAGES ═══════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#29ABE2;--navy:#0A1628;--char:#1E2D3D;--gbg:#F4F7FB;--gbd:#E2EDF5;--tm:#4A5568;--tl:#718096;--r:16px}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;background:#EEF3F8;color:var(--char);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ── TYPOGRAPHY ── */
.eyebrow{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:2.5px;color:#0077B6;margin-bottom:8px}
.sec-title{font-family:'Poppins',sans-serif;font-size:clamp(22px,4vw,36px);font-weight:900;color:var(--navy);line-height:1.2;margin-bottom:10px}
.sec-sub{font-size:clamp(13px,2vw,16px);color:var(--tm);max-width:620px;margin:0 auto 36px;font-weight:600;line-height:1.7}

/* ── SCROLL REVEAL ── */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.rv.vis{opacity:1;transform:translateY(0)}

/* ── HERO (Main Page) ── */
.hero{background:linear-gradient(150deg,#0A1628 0%,#0E1F45 40%,#0D2860 70%,#1040A0 100%);padding:clamp(40px,8vw,72px) 24px clamp(48px,10vw,80px);text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(41,171,226,.15) 0%,transparent 60%);pointer-events:none}
.hero-badge{display:inline-block;background:rgba(41,171,226,.15);border:1.5px solid rgba(41,171,226,.35);border-radius:99px;padding:7px 22px;color:#7DD3F6;font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;margin-bottom:24px;backdrop-filter:blur(4px)}
.hero h1{font-family:'Poppins',sans-serif;font-size:clamp(28px,6vw,56px);font-weight:900;color:#fff;line-height:1.1;letter-spacing:-1.5px;max-width:800px;margin:0 auto 18px}
.hero h1 span{color:#29ABE2}
.hero-sub{font-size:clamp(14px,2.2vw,18px);color:rgba(255,255,255,.6);max-width:580px;margin:0 auto 40px;font-weight:600;line-height:1.7}
.hero-stats{display:flex;justify-content:center;gap:clamp(16px,5vw,56px);flex-wrap:wrap}
.hs{text-align:center}.hs-n{font-family:'Poppins',sans-serif;font-size:clamp(36px,7vw,60px);font-weight:900;color:#fff;line-height:1}
.hs-n em{font-style:normal;color:#29ABE2}.hs-l{font-size:11px;font-weight:800;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:1.5px;margin-top:6px}

/* ── HOW IT WORKS ── */
.how-sec{background:#fff;border-top:2px solid var(--gbd);border-bottom:2px solid var(--gbd);padding:28px 20px}
.how-inner{max-width:920px;margin:0 auto}
.how-label{text-align:center;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:2px;color:#0077B6;margin-bottom:16px}
.how-flow{display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap}
.how-step{display:flex;align-items:center;gap:10px;background:var(--gbg);border:2px solid var(--gbd);border-radius:14px;padding:14px 20px;transition:all .2s}
.how-step:hover{transform:scale(1.04);box-shadow:0 8px 24px rgba(10,22,40,.1)}
.how-num{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#29ABE2,#0077B6);color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.how-txt{font-size:13px;font-weight:800;color:var(--char);white-space:nowrap}
.how-arrow{width:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.how-arrow svg{width:40px;height:20px}
.how-arrow .dash{stroke:#CBD5E0;stroke-width:2;stroke-dasharray:6 4;fill:none}
.how-arrow .head{fill:#CBD5E0}
@media(max-width:700px){.how-flow{flex-direction:column;gap:8px}.how-arrow{transform:rotate(90deg)}}

/* ── ROADMAP SPINE ── */
.roadmap{position:relative;max-width:980px;margin:0 auto;padding:40px 20px 20px}
.spine{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);overflow:hidden;border-radius:99px}
.spine-bg{position:absolute;inset:0;background:linear-gradient(180deg,#29ABE2,#059669,#7C3AED,#DC2626,#F59E0B,#0E7490);opacity:.18}
.spine-glow{position:absolute;top:-100%;left:0;width:100%;height:200px;background:linear-gradient(180deg,transparent,#29ABE2,transparent);animation:spineMove 4s linear infinite;opacity:.6}
@keyframes spineMove{0%{top:-200px}100%{top:calc(100% + 200px)}}

/* ── STOP ROW ── */
.stop{display:flex;align-items:stretch;margin-bottom:0;position:relative}
.stop.L{flex-direction:row}.stop.R{flex-direction:row-reverse}
.stop-dot{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:5}
.dot-ring{width:28px;height:28px;border-radius:50%;background:var(--sc);border:5px solid #fff;box-shadow:0 0 0 4px var(--sc),0 6px 20px rgba(0,0,0,.18);position:relative}
.dot-ring::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid var(--sc);opacity:.25;animation:dotPulse 2.5s ease-in-out infinite}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.25}50%{transform:scale(1.5);opacity:0}}
.arm{flex:0 0 calc(50% - 60px);display:flex;align-items:flex-start;padding-top:52px}
.arm svg{width:100%;height:4px;overflow:visible}
.arm .dline{stroke:var(--sc);stroke-width:3;stroke-dasharray:10 8;stroke-linecap:round;fill:none;opacity:.35}
.arm .movingdot{r:5;fill:var(--sc);opacity:.8}
.gap-col{flex:0 0 120px}

/* ── GROUP CARD (main page clickable) ── */
.gcard{flex:0 0 calc(50% - 60px);border-radius:20px;background:#fff;border:2px solid var(--gbd);overflow:hidden;box-shadow:0 8px 36px rgba(10,22,40,.08);transition:transform .3s,box-shadow .3s;cursor:pointer;position:relative}
.gcard::before{content:'';position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--sc),var(--sc2))}
.gcard:hover{transform:translateY(-6px);box-shadow:0 20px 56px rgba(10,22,40,.15)}
.gc-banner{width:100%;border-bottom:2px solid var(--gbd)}
.gc-banner img{width:100%;height:auto;display:block}
.gc-head{padding:22px 24px 18px;background:linear-gradient(135deg,var(--sc),var(--sc2));color:#fff;position:relative;overflow:hidden}
.gc-head::after{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.gc-tag{font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.gc-title-row{display:flex;align-items:center;gap:10px}
.gc-emoji{font-size:32px}
.gc-title{font-family:'Poppins',sans-serif;font-size:clamp(18px,2.8vw,24px);font-weight:900;line-height:1.2}
.gc-desc{font-size:13px;font-weight:700;opacity:.82;line-height:1.55;margin-top:8px}
.gc-body{padding:20px 22px}
.gc-skills{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.gc-pill{display:flex;align-items:center;gap:6px;background:var(--gbg);border:1.5px solid var(--gbd);border-radius:99px;padding:7px 14px;font-size:12px;font-weight:800;color:var(--char);transition:all .15s}
.gc-pill:hover{background:var(--sc);border-color:var(--sc);color:#fff}
.gc-pill span{font-size:16px}
.gc-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.gc-stat{background:var(--gbg);border:1.5px solid var(--gbd);border-radius:10px;padding:8px 14px;font-size:11px;font-weight:800;color:var(--char);display:flex;align-items:center;gap:6px}
.gc-stat em{font-style:normal;font-family:'Poppins',sans-serif;font-size:16px;font-weight:900;color:var(--sc)}
.gc-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--sc),var(--sc2));color:#fff;border-radius:12px;padding:14px;font-size:14px;font-weight:900;letter-spacing:.5px;transition:all .2s}
.gcard:hover .gc-cta{box-shadow:0 6px 20px rgba(0,0,0,.2)}

/* ── MILESTONE ── */
.milestone{display:flex;justify-content:center;margin:8px 0 16px;position:relative;z-index:6}
.m-chip{background:#fff;border:2.5px solid var(--sc);border-radius:99px;padding:10px 26px;font-size:12px;font-weight:900;color:var(--sc);text-transform:uppercase;letter-spacing:1px;box-shadow:0 6px 20px rgba(0,0,0,.1);display:flex;align-items:center;gap:8px}

/* ── FOUNDER BANNER ── */
.founder{max-width:920px;margin:40px auto;padding:36px 32px;background:linear-gradient(135deg,#0077B6,#7C3AED);border-radius:24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;box-shadow:0 12px 48px rgba(0,119,182,.3)}
.founder-ico{font-size:56px;flex-shrink:0}
.founder h3{font-family:'Poppins',sans-serif;font-size:clamp(18px,3vw,24px);font-weight:900;color:#fff;margin-bottom:8px;line-height:1.2}
.founder p{font-size:14px;color:rgba(255,255,255,.82);font-weight:700;line-height:1.65}

/* ── FOOTER ── */
.footer{background:var(--navy);color:rgba(255,255,255,.5);text-align:center;padding:32px 24px;font-size:12px;font-weight:700}
.footer strong{color:#29ABE2}

/* ── BANNER IMAGE HERO ── */
.d-banner{width:100%;position:relative;overflow:hidden}
.d-banner img{width:100%;height:auto;display:block}
.d-mini-stats{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap;padding:20px 24px;background:linear-gradient(135deg,var(--sc),var(--sc2));color:#fff}
.dms{text-align:center}
.dms-n{font-family:'Poppins',sans-serif;font-size:clamp(24px,4vw,36px);font-weight:900;line-height:1}
.dms-l{font-size:10px;font-weight:800;opacity:.6;text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}

/* ═══════ DETAIL PAGE STYLES ═══════ */
/* back nav */
.back-nav{display:flex;align-items:center;gap:8px;padding:14px 24px;background:#fff;border-bottom:2px solid var(--gbd);font-size:13px;font-weight:800;color:var(--tm);cursor:pointer;transition:all .2s}
.back-nav:hover{color:var(--blue);background:var(--gbg)}
.back-nav svg{width:18px;height:18px;fill:currentColor}

/* detail hero */
.d-hero{padding:clamp(32px,6vw,56px) 24px;text-align:center;position:relative;overflow:hidden;color:#fff}
.d-hero::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,.06);pointer-events:none}
.d-hero::after{content:'';position:absolute;bottom:-100px;left:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.d-emoji{font-size:56px;margin-bottom:16px;display:block}
.d-tag{font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase;opacity:.65;margin-bottom:8px}
.d-title{font-family:'Poppins',sans-serif;font-size:clamp(26px,5vw,44px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:12px}
.d-desc{font-size:clamp(13px,2vw,16px);opacity:.75;font-weight:600;line-height:1.7;max-width:600px;margin:0 auto 28px}
.d-stats{display:flex;justify-content:center;gap:clamp(14px,4vw,40px);flex-wrap:wrap}
.ds{text-align:center}.ds-n{font-family:'Poppins',sans-serif;font-size:clamp(28px,5vw,40px);font-weight:900;line-height:1}
.ds-l{font-size:10px;font-weight:800;opacity:.55;text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}

/* ── SKILL DETAIL CARDS ── */
.skills-sec{max-width:900px;margin:0 auto;padding:clamp(32px,5vw,56px) 20px 20px}
.skill-full{background:#fff;border-radius:20px;border:2px solid var(--gbd);overflow:hidden;margin-bottom:20px;box-shadow:0 6px 28px rgba(10,22,40,.07);transition:transform .2s}
.skill-full:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(10,22,40,.11)}
.sf-head{display:flex;align-items:center;gap:16px;padding:24px;border-bottom:2px solid var(--gbd);background:var(--gbg)}
.sf-icon{font-size:40px;flex-shrink:0}
.sf-career{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:2px}
.sf-name{font-family:'Poppins',sans-serif;font-size:clamp(16px,2.5vw,20px);font-weight:900;color:var(--navy);line-height:1.2}
.sf-body{padding:24px}
.sf-desc{font-size:14px;color:var(--tm);font-weight:600;line-height:1.7;margin-bottom:16px}
.sf-tools-label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:var(--tl);margin-bottom:8px}
.sf-tools{display:flex;flex-wrap:wrap;gap:8px}
.sf-tool{display:flex;align-items:center;gap:6px;background:var(--gbg);border:1.5px solid var(--gbd);border-radius:99px;padding:8px 16px;font-size:12px;font-weight:800;color:var(--char);transition:all .15s}
.sf-tool:hover{border-color:var(--sc);background:#fff;transform:scale(1.03)}

/* skill banner image */
.sf-banner{width:100%;overflow:hidden;border-bottom:2px solid var(--gbd)}
.sf-banner img{width:100%;height:auto;display:block}

/* class flow indicator (2 AI + 1 Speaking) */
.sf-flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;padding:14px 16px;background:linear-gradient(135deg,#F0F9FF,#EEF2FF);border:1.5px solid #DBEAFE;border-radius:12px}
.sf-flow-step{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:99px;font-size:11px;font-weight:900;white-space:nowrap}
.sf-flow-ai{background:#E0F2FE;color:#0369A1;border:1.5px solid #BAE6FD}
.sf-flow-speak{background:#FEF3C7;color:#92400E;border:1.5px solid #FCD34D}
.sf-flow-arrow{font-size:14px;color:#94A3B8;flex-shrink:0}
.sf-flow-label{font-size:10px;font-weight:800;color:#64748B;margin-left:auto}

/* month summary banner */
.month-summary{max-width:900px;margin:0 auto;padding:0 20px 28px}
.ms-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,#0077B6,#29ABE2);border-radius:16px;padding:20px 24px;color:#fff;box-shadow:0 6px 24px rgba(0,119,182,.2)}
.ms-card .ms-icon{font-size:32px;flex-shrink:0}
.ms-card .ms-text{font-size:13px;font-weight:700;line-height:1.6;opacity:.9}
.ms-card .ms-text strong{font-weight:900;opacity:1}
.ms-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ms-pill{padding:5px 14px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.5px}
.ms-pill-ai{background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.35);color:#fff}
.ms-pill-speak{background:rgba(245,158,11,.3);border:1.5px solid rgba(245,158,11,.5);color:#FEF3C7}

/* speaking skill card gold theme */
.skill-full.speaking{border-color:#FCD34D}
.skill-full.speaking .sf-head{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-bottom-color:#FCD34D}
.skill-full.speaking .sf-career{color:#B45309}
.skill-full.speaking .sf-flow{background:linear-gradient(135deg,#FFFBEB,#FEF3C7);border-color:#FCD34D}
.skill-full.speaking::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#F59E0B,#FBBF24);border-radius:20px 20px 0 0}
.skill-full.speaking{position:relative}

/* ── SESSION TIMELINE ── */
.sessions-sec{max-width:900px;margin:0 auto;padding:0 20px 40px}
.sess-card{background:#fff;border-radius:20px;border:2px solid var(--gbd);overflow:hidden;box-shadow:0 6px 28px rgba(10,22,40,.07)}
.sess-head{padding:20px 24px;border-bottom:2px solid var(--gbd);background:var(--gbg);display:flex;align-items:center;gap:10px}
.sess-head-ico{font-size:28px}
.sess-head-t{font-family:'Poppins',sans-serif;font-size:clamp(16px,2.5vw,20px);font-weight:900;color:var(--navy)}
.sess-head-sub{font-size:12px;color:var(--tm);font-weight:700}
.sess-body{padding:24px 24px 24px 40px;position:relative}
.sess-body::before{content:'';position:absolute;left:36px;top:24px;bottom:24px;width:3px;background:linear-gradient(180deg,var(--sc),var(--sc2));border-radius:99px;opacity:.2}
.s-item{position:relative;padding:0 0 24px 32px}
.s-item:last-child{padding-bottom:0}
.s-item::before{content:'';position:absolute;left:-8px;top:8px;width:16px;height:16px;border-radius:50%;border:4px solid var(--sc);background:#fff;z-index:1}
.s-item.mentor::before{background:#FEF3C7;border-color:#F59E0B}
.s-num{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.s-act{font-size:14px;font-weight:700;color:var(--char);line-height:1.55;background:var(--gbg);border:1.5px solid var(--gbd);border-radius:12px;padding:14px 16px}
.s-item.mentor .s-num{color:#B45309}
.s-item.mentor .s-act{background:#FFFBEB;border-color:#FED7AA;color:#78350F}

/* ── SPIKITHON BANNER ── */
.spiki-sec{max-width:900px;margin:0 auto;padding:0 20px 40px}
.spiki-card{background:linear-gradient(135deg,#FFF7ED,#FFFBEB);border:2px solid #FED7AA;border-radius:20px;padding:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.spiki-ico{font-size:48px;flex-shrink:0}
.spiki-t{font-family:'Poppins',sans-serif;font-size:clamp(16px,2.5vw,20px);font-weight:900;color:#92400E;margin-bottom:4px}
.spiki-d{font-size:13px;color:#B45309;font-weight:700;line-height:1.6}

/* ── OUTCOME SECTION ── */
.outcome-sec{max-width:900px;margin:0 auto;padding:0 20px 56px}
.outcome-card{background:#fff;border-radius:20px;border:2px solid var(--gbd);padding:28px;display:flex;align-items:flex-start;gap:16px;box-shadow:0 6px 28px rgba(10,22,40,.07)}
.outcome-ico{font-size:36px;flex-shrink:0}
.outcome-t{font-family:'Poppins',sans-serif;font-size:16px;font-weight:900;color:var(--navy);margin-bottom:6px}
.outcome-d{font-size:13px;color:var(--tm);font-weight:600;line-height:1.65}

/* ── NAV BETWEEN GROUPS ── */
.group-nav{max-width:900px;margin:0 auto;padding:0 20px 56px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.gn-link{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--gbd);border-radius:14px;padding:12px 20px;font-size:13px;font-weight:800;color:var(--char);transition:all .2s;text-decoration:none}
.gn-link:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,22,40,.1)}
.gn-link.active{border-color:var(--sc);background:var(--gbg)}

/* ═══════ RESPONSIVE — TABLET ═══════ */
@media(max-width:820px){
  /* roadmap zigzag → vertical */
  .spine{left:20px}
  .stop{flex-direction:column!important;align-items:flex-start;padding-left:48px}
  .stop-dot{left:20px;top:32px}
  .arm,.gap-col{display:none}
  .gcard{flex:none;width:100%}

  /* session timeline */
  .sess-body{padding-left:28px}
  .sess-body::before{left:24px}

  /* skill cards */
  .sf-head{flex-wrap:wrap}
  .sf-flow{flex-wrap:wrap;gap:6px}

  /* level compare */
  .level-compare{grid-template-columns:1fr!important;gap:8px}
}

/* ═══════ RESPONSIVE — MOBILE ═══════ */
@media(max-width:500px){
  .hero h1{font-size:28px}
  .sf-head{flex-direction:column;text-align:center}
  .sf-flow-step,.g9-sk-flow-step,.g10-sk-flow-step{font-size:9px;padding:3px 8px}
  .sf-banner img,.d-banner img,.gc-banner img,.sc-banner img{border-radius:0}
  .gc-skills,.gc-pills{gap:4px}
  .gc-pill{font-size:10px;padding:4px 8px}
  .gc-stats{gap:6px}
  .gc-stat{font-size:9px;padding:5px 8px}
  .d-mini-stats{gap:clamp(10px,3vw,20px);padding:14px 16px}
  .ms-card{flex-direction:column;text-align:center}
  .ms-pills{justify-content:center}
  .spiki-card{flex-direction:column;text-align:center}
  .outcome-card{flex-direction:column}
  .founder,.rm-founder{flex-direction:column;text-align:center}
}