:root{
  --blue:#0B4EA2; --blue-deep:#073579; --blue-tint:#E8F0FB;
  --green:#39A84A; --green-deep:#256E2F; --green-tint:#E8F6EA;
  --orange:#F28B00; --orange-deep:#C46E00; --orange-tint:#FEF1DD;
  --ink:#0E1726; --muted:#5C6B7E; --line:#E8ECF3;
  --page:#FBFBFD; --card:#FFFFFF;
  --ai-bg:#0A1530; --ai-purple:#6D5BFF; --ai-glow:#A795FF;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
.display{font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-0.02em;}
img,svg{display:block}
a{color:inherit; text-decoration:none}

.container{max-width:1280px; margin:0 auto; padding:0 32px;}

/* ============== TOP NAV ============== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav .row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:22px;
}
.brand .logo{
  width:44px; height:44px; border-radius:12px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--ai-purple) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 22px rgba(11,78,162,.30);
  position:relative; overflow:hidden;
}
.brand .logo .plane-svg{
  width:30px; height:30px; position:relative; z-index:2;
  transform-origin: 50% 60%;
  animation: plane-flight 4.5s cubic-bezier(.6,0,.4,1) infinite;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.brand .logo .trail{
  position:absolute; top:50%; left:0; width:100%; height:1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.85) 50%, transparent 100%);
  transform: translateY(2px);
  opacity:0;
  animation: plane-trail 4.5s cubic-bezier(.6,0,.4,1) infinite;
}
.brand .logo .spark{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff;
  opacity:0;
}
.brand .logo .spark.s1{ top:30%; left:55%; animation: spark 4.5s ease-out infinite;}
.brand .logo .spark.s2{ top:55%; left:65%; animation: spark 4.5s .2s ease-out infinite;}
.brand .logo .spark.s3{ top:70%; left:50%; animation: spark 4.5s .4s ease-out infinite;}
.brand:hover .logo .plane-svg{ animation-duration: 1.8s;}
.brand .logo::before{
  content:""; position:absolute; top:8%; right:10%;
  width:3px; height:3px; border-radius:50%; background:#fff;
  box-shadow:
     6px 4px 0 -1px rgba(255,255,255,.7),
    -8px 8px 0 -1px rgba(255,255,255,.5),
     2px 12px 0 -1px rgba(255,255,255,.4);
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes plane-flight{
  0%   { transform: translate(-140%, 60%) rotate(-18deg); opacity:0;}
  12%  { opacity:1;}
  45%  { transform: translate(0, -2%) rotate(-8deg);}
  60%  { transform: translate(20%, -10%) rotate(2deg);}
  80%  { transform: translate(120%, -50%) rotate(12deg); opacity:1;}
  92%  { transform: translate(160%, -90%) rotate(18deg); opacity:0;}
  100% { transform: translate(-140%, 60%) rotate(-18deg); opacity:0;}
}
@keyframes plane-trail{
  0%, 20%   { opacity:0; transform: translateX(-30%) scaleX(0);}
  45%       { opacity:.6; transform: translateX(0) scaleX(1);}
  80%       { opacity:.4; transform: translateX(30%) scaleX(.6);}
  92%, 100% { opacity:0; transform: translateX(60%) scaleX(0);}
}
@keyframes spark{
  0%, 35% { opacity:0; transform: scale(.4) translate(0,0);}
  50%     { opacity:.9; transform: scale(1) translate(-4px, 4px);}
  75%, 100%{ opacity:0; transform: scale(.2) translate(-10px, 10px);}
}
.brand .b{color:var(--ink);} .brand .g{color:var(--blue);}

.main-nav{display:flex; gap:6px; align-items:center;}
.main-nav a{
  font-size:14px; font-weight:600; color:var(--ink);
  padding:8px 14px; border-radius:10px;
  transition: background .2s, color .2s;
}
.main-nav a:hover{ background:var(--blue-tint); color:var(--blue);}

.nav-actions{ display:flex; align-items:center; gap:10px;}

.lang-toggle{
  display:flex; padding:4px; gap:2px;
  background:var(--line); border-radius:99px;
  position:relative;
}
.lang-toggle button{
  width:34px; height:30px; border:0; background:transparent; cursor:pointer;
  border-radius:99px; font-size:18px; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s, transform .2s;
}
.lang-toggle button:hover{ transform: scale(1.08);}
.lang-toggle button.active{ background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.08);}
.lang-toggle .flag{
  width:22px; height:16px; border-radius:3px; overflow:hidden; display:inline-block; position:relative;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.flag-nl{ background:linear-gradient(to bottom, #AE1C28 33%, #fff 33% 66%, #21468B 66%);}
.flag-en{
  background:#012169;
  background-image:
    linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, #fff 45% 55%, transparent 55%),
    linear-gradient(to bottom, transparent 42%, #C8102E 42% 58%, transparent 58%),
    linear-gradient(to right, transparent 42%, #C8102E 42% 58%, transparent 58%);
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:12px;
  font-weight:700; font-size:14px;
  border:0; cursor:pointer; transition: transform .2s, box-shadow .2s, background .2s;
  font-family:'Inter',sans-serif;
}
.btn-primary{ background:var(--ink); color:#fff;}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(14,23,38,.28);}
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn-ghost:hover{ border-color:var(--ink);}
.btn .arr{transition: transform .25s;}
.btn:hover .arr{ transform: translateX(3px);}

/* ============== HERO ============== */
.hero{
  position:relative; overflow:hidden;
  padding: 60px 0 80px;
  background:
    radial-gradient(circle at 85% 10%, rgba(109,91,255,.10), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(57,168,74,.10), transparent 50%);
}
.hero .grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:60px; align-items:center;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:99px;
  background:#fff; border:1px solid var(--line);
  font-size:12px; font-weight:600; color:var(--blue);
  letter-spacing:0.08em; text-transform:uppercase;
  margin-bottom:24px;
}
.hero .eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); animation: pulse 2s ease-in-out infinite;}
.hero h1{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:64px; line-height:1.02; letter-spacing:-0.03em;
  margin:0 0 24px;
}
.hero h1 .hl{
  color:var(--blue);
  background: linear-gradient(120deg, var(--blue) 0%, var(--ai-purple) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero p.lede{
  font-size:18px; color:var(--muted); margin:0 0 36px; max-width:520px; line-height:1.55;
}
.hero .ctas{ display:flex; gap:12px; flex-wrap:wrap;}
.hero .stats{
  display:flex; gap:32px; margin-top:44px; flex-wrap:wrap;
}
.hero .stats .s{ }
.hero .stats .num{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:28px; color:var(--ink); letter-spacing:-0.02em;}
.hero .stats .lbl{ font-size:12.5px; color:var(--muted); font-weight:500;}

/* Hero illustration */
.hero-art{
  position:relative; aspect-ratio: 1/1; max-width:520px; margin-left:auto;
}
.hero-art svg{ width:100%; height:100%;}
.hero-art .orbit{ animation: orbit 22s linear infinite; transform-origin: center;}
.hero-art .orbit-slow{ animation: orbit 35s linear infinite reverse; transform-origin: center;}
.hero-art .float-a{ animation: floaty 5s ease-in-out infinite;}
.hero-art .float-b{ animation: floaty 6s 1s ease-in-out infinite;}
.hero-art .float-c{ animation: floaty 7s 2s ease-in-out infinite;}
.hero-art .twinkle{ animation: twinkle 3s ease-in-out infinite;}

/* ============== SECTION SHELL ============== */
.section{ padding: 90px 0;}
.section-head{ text-align:center; max-width:760px; margin:0 auto 56px;}
.section-head .label{
  display:inline-block; padding:4px 12px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  margin-bottom:16px;
}
.section-head h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:44px; line-height:1.08; letter-spacing:-0.02em;
  margin:0 0 16px;
  text-wrap: balance;
}
.section-head p{ font-size:17px; color:var(--muted); margin:0; line-height:1.55;}

/* ============== JOURNEY (4-step) ============== */
.journey{ background:#fff;}
.journey .steps{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:24px;
  position:relative;
}
.journey .step{
  background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:28px 24px; position:relative;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.journey .step:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(14,23,38,.18); border-color:transparent;}
.journey .step .num{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:60px; line-height:1; letter-spacing:-0.04em;
  background: linear-gradient(180deg, var(--ink), var(--muted));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:.25; margin-bottom:14px;
}
.journey .step h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:20px; margin:0 0 8px; letter-spacing:-0.01em;
}
.journey .step p{ font-size:13.5px; color:var(--muted); margin:0 0 14px;}
.journey .step .chips{ display:flex; flex-wrap:wrap; gap:6px;}
.journey .step .chip{
  font-size:11.5px; padding:4px 10px; border-radius:99px;
  background:var(--blue-tint); color:var(--blue); font-weight:600;
}
.journey .step:nth-child(2) .chip{ background:var(--green-tint); color:var(--green-deep);}
.journey .step:nth-child(3) .chip{ background:var(--orange-tint); color:var(--orange-deep);}
.journey .step:nth-child(4) .chip{ background:#EEEAFF; color:var(--ai-purple);}
.journey .step .arrow{
  position:absolute; right:-22px; top:50%; transform: translateY(-50%);
  width:24px; height:24px; color:var(--muted); opacity:.35; z-index:2;
}
.journey .step:last-child .arrow{ display:none;}

/* ============== WORLDS ============== */
.worlds{ background:var(--page);}
.worlds .grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:24px;
}
.world-card{
  position:relative; overflow:hidden;
  border-radius:32px; padding:40px;
  min-height:340px;
  display:flex; flex-direction:column;
  transition: transform .4s ease, box-shadow .4s ease;
  color:#fff;
}
.world-card:hover{ transform: translateY(-6px) scale(1.005);}
.world-card .icn{
  width:56px; height:56px; border-radius:16px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:28px; font-weight:800; margin-bottom:24px;
}
.world-card h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:32px; line-height:1.05; letter-spacing:-0.02em;
  margin:0 0 10px;
}
.world-card .lede{ font-size:15px; opacity:.92; margin:0 0 18px; max-width:380px;}
.world-card .topics{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px;}
.world-card .topic{
  font-size:12px; padding:5px 12px; border-radius:99px;
  background:rgba(255,255,255,.18); color:#fff; font-weight:600;
}
.world-card .ask{
  margin-top:auto; padding-top:22px;
  border-top:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.world-card .ask .q{ font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-weight:600; font-size:18px;}
.world-card .ask .cta{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--ink);
  padding:10px 18px; border-radius:99px; font-weight:700; font-size:13px;
  transition: transform .25s, gap .25s;
}
.world-card .ask .cta:hover{ gap:14px;}
.world-card .deco{ position:absolute; right:-40px; top:-40px; width:280px; height:280px; opacity:.18; pointer-events:none;}
.world-card.blue{ background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); box-shadow: 0 30px 60px -25px rgba(11,78,162,.6);}
.world-card.green{ background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); box-shadow: 0 30px 60px -25px rgba(57,168,74,.5);}
.world-card.orange{ background: linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%); box-shadow: 0 30px 60px -25px rgba(242,139,0,.45);}
.world-card.ai{
  background: radial-gradient(circle at 75% 25%, rgba(167,149,255,.45), transparent 50%), linear-gradient(135deg, var(--ai-bg) 0%, #060A1F 100%);
  box-shadow: 0 30px 80px -25px rgba(109,91,255,.55);
}
.world-card.ai .icn{ background: rgba(109,91,255,.25); border:1px solid rgba(167,149,255,.4);}
.world-card.ai .ask{ border-color: rgba(167,149,255,.25);}
.world-card.ai .glow-particle{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--ai-glow); box-shadow: 0 0 14px var(--ai-glow);
  animation: twinkle 3s ease-in-out infinite;
}

/* ============== MISSIONS ============== */
.missions{ background:#fff;}
.missions .grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;
}
.mission{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:24px; transition: transform .35s, box-shadow .35s, border-color .35s;
  cursor:default; position:relative; overflow:hidden;
}
.mission::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition: transform .4s ease;
}
.mission:nth-child(2)::before{ background:var(--green);}
.mission:nth-child(3)::before{ background:var(--orange);}
.mission:nth-child(4)::before{ background:var(--ai-purple);}
.mission:nth-child(5)::before{ background:var(--blue);}
.mission:nth-child(6)::before{ background:var(--green);}
.mission:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(14,23,38,.18);}
.mission:hover::before{ transform: scaleX(1);}
.mission .ic-wrap{ width:48px; height:48px; border-radius:14px; background:var(--blue-tint); color:var(--blue); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:24px;}
.mission:nth-child(2) .ic-wrap{ background:var(--green-tint); color:var(--green-deep);}
.mission:nth-child(3) .ic-wrap{ background:var(--orange-tint); color:var(--orange-deep);}
.mission:nth-child(4) .ic-wrap{ background:#EEEAFF; color:var(--ai-purple);}
.mission:nth-child(5) .ic-wrap{ background:var(--blue-tint); color:var(--blue);}
.mission:nth-child(6) .ic-wrap{ background:var(--green-tint); color:var(--green-deep);}
.mission h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:18px; line-height:1.2; letter-spacing:-0.01em;
  margin:0 0 14px;
}
.mission .meta{ display:flex; gap:14px; font-size:12px; color:var(--muted); margin-bottom:14px; flex-wrap:wrap;}
.mission .meta span{ display:inline-flex; align-items:center; gap:5px;}
.mission .meta svg{ width:13px; height:13px;}
.mission .skills{ display:flex; gap:6px; flex-wrap:wrap;}
.mission .skill{ font-size:11px; padding:3px 8px; border-radius:6px; background:#F3F5F9; color:var(--ink); font-weight:600;}

/* ============== HUMAN SKILLS ============== */
.skills{ background:var(--page);}
.skills .grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
}
.skill-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:28px 22px; text-align:left;
  transition: transform .35s, box-shadow .35s, border-color .35s;
}
.skill-card:hover{ transform: translateY(-4px); border-color:transparent; box-shadow: 0 24px 50px -22px rgba(14,23,38,.16);}
.skill-card .em{ font-size:34px; margin-bottom:14px; display:inline-block;}
.skill-card h4{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:18px; margin:0 0 8px; letter-spacing:-0.01em;
}
.skill-card p{ font-size:13px; color:var(--muted); margin:0; line-height:1.5;}

/* ============== AI MENTOR ============== */
.mentor{
  background: radial-gradient(circle at 20% 30%, rgba(109,91,255,.35), transparent 45%),
              radial-gradient(circle at 80% 70%, rgba(57,168,74,.20), transparent 45%),
              linear-gradient(180deg, var(--ai-bg) 0%, #060A1F 100%);
  color:#fff; position:relative; overflow:hidden;
}
.mentor::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(167,149,255,.18) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events:none; mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.mentor > .container{ position:relative; z-index:1;}
.mentor .grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:60px; align-items:center;
}
.mentor .label{ background:rgba(167,149,255,.18); color:var(--ai-glow);}
.mentor h2{ color:#fff;}
.mentor p.lede{ font-size:17px; color: rgba(255,255,255,.78); margin:0 0 28px;}
.mentor .features{ list-style:none; padding:0; margin:0 0 32px;}
.mentor .features li{
  display:flex; gap:12px; align-items:flex-start; padding:8px 0;
  font-size:15px; color: rgba(255,255,255,.88);
}
.mentor .features .check{
  width:22px; height:22px; border-radius:50%;
  background: linear-gradient(135deg, var(--ai-purple), var(--ai-glow));
  color:#0A1530; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-size:12px; font-weight:800;
}
.mentor .robot-stage{
  position:relative; aspect-ratio: 1/1; max-width:460px; margin-left:auto;
}
.mentor .robot-stage svg{width:100%; height:100%;}
.mentor .robot-stage .glow-orb{
  position:absolute; inset:10%; border-radius:50%;
  background: radial-gradient(circle, rgba(167,149,255,.5), transparent 60%);
  filter: blur(40px);
  animation: pulse-glow 4s ease-in-out infinite;
}
.mentor .chat-bubble{
  position:absolute;
  background:#fff; color:var(--ink);
  padding:12px 18px; border-radius:18px;
  font-size:13.5px; font-weight:600;
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
  animation: floaty 5s ease-in-out infinite;
}
.mentor .chat-bubble.cb1{ top:5%; left:-10%;}
.mentor .chat-bubble.cb2{ top:30%; right:-5%; animation-delay: 1s;}
.mentor .chat-bubble.cb3{ bottom:8%; left:-5%; animation-delay: 2s;}
.mentor .chat-bubble::before{
  content:""; position:absolute; bottom:-6px; left:24px;
  width:12px; height:12px; background:#fff; transform: rotate(45deg);
}

/* ============== PARENTS ============== */
.parents{ background:#fff;}
.parents .grid{
  display:grid; grid-template-columns: 1fr 1.2fr; gap:60px; align-items:center;
}
.parents .visual{
  aspect-ratio: 1/1; max-width:460px;
  background: linear-gradient(135deg, var(--blue-tint), #fff);
  border-radius:32px;
  position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.parents .visual svg{ width:100%; height:100%;}
.parents h2{ font-size:40px; margin-bottom:18px;}
.parents .lede{ font-size:16px; color:var(--muted); margin:0 0 24px;}
.parents .bullets{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
.parents .bullets li{ display:flex; gap:10px; align-items:flex-start; font-size:14px;}
.parents .bullets .bx{
  width:22px; height:22px; border-radius:7px;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:13px; font-weight:800;
}

/* ============== FINAL CTA ============== */
.final{
  background: var(--ink);
  color:#fff;
  text-align:center;
  position:relative; overflow:hidden;
}
.final::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(57,168,74,.20), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(242,139,0,.20), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(109,91,255,.25), transparent 50%);
  pointer-events:none;
}
.final .container{ position:relative; z-index:1; padding-top:30px; padding-bottom:30px;}
.final h2{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:60px; line-height:1.05; letter-spacing:-0.03em;
  margin:0 0 8px; color:#fff;
}
.final h2 .alt{
  background: linear-gradient(120deg, var(--green) 0%, var(--orange) 50%, var(--ai-glow) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.final p{ color: rgba(255,255,255,.7); font-size:17px; margin:24px 0 36px; max-width:560px; margin-left:auto; margin-right:auto;}
.final .btn-primary{ background:#fff; color:var(--ink);}
.final .btn-primary:hover{ box-shadow: 0 16px 40px rgba(255,255,255,.25);}

/* ============== FOOTER ============== */
.foot{
  background:#fff; border-top:1px solid var(--line);
  padding: 50px 0 30px;
}
.foot .row{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:40px;}
.foot h5{ font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; margin:0 0 14px;}
.foot ul{list-style:none; padding:0; margin:0;}
.foot li{ font-size:13.5px; color:var(--muted); margin:6px 0;}
.foot li a:hover{ color:var(--blue);}
.foot .legal{ display:flex; justify-content:space-between; padding-top:30px; margin-top:30px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);}
.foot p.about{ font-size:13.5px; color:var(--muted); margin:10px 0 0; max-width:280px;}

/* ============== MISSION CYCLE ============== */
.cycle{ background:#fff; padding: 60px 0; border-top:1px solid var(--line);}
.cycle .head{ text-align:center; max-width:680px; margin:0 auto 36px;}
.cycle .head .label{
  display:inline-block; padding:4px 12px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  background:var(--orange-tint); color:var(--orange-deep); margin-bottom:14px;
}
.cycle .head h3{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:30px; margin:0 0 10px; letter-spacing:-0.02em;
}
.cycle .head p{ font-size:15px; color:var(--muted); margin:0;}
.cycle .ring{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; position:relative;
  align-items:start;
}
.cycle .ring::before{
  content:""; position:absolute; top:42px; left:8%; right:8%; height:2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--green) 33%, var(--orange) 66%, var(--ai-purple) 100%);
  opacity:.25; z-index:0;
}
.cycle .step{
  position:relative; z-index:1; text-align:center;
  padding: 0 6px;
}
.cycle .step .dot{
  width:80px; height:80px; border-radius:50%; background:#fff;
  border:2px solid var(--line); margin:0 auto 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.cycle .step:hover .dot{ transform: translateY(-4px) scale(1.05); border-color:var(--ink); box-shadow:0 14px 30px -10px rgba(14,23,38,.18);}
.cycle .step:nth-child(1) .dot{ border-color:var(--blue); color:var(--blue);}
.cycle .step:nth-child(2) .dot{ border-color:var(--green); color:var(--green-deep);}
.cycle .step:nth-child(3) .dot{ border-color:var(--orange); color:var(--orange-deep);}
.cycle .step:nth-child(4) .dot{ border-color:var(--ai-purple); color:var(--ai-purple);}
.cycle .step:nth-child(5) .dot{ border-color:var(--ink); color:var(--ink);}
.cycle .step h4{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:15px; margin:0 0 4px; letter-spacing:-0.01em;
}
.cycle .step p{ font-size:12px; color:var(--muted); margin:0;}
@media (max-width: 900px){
  .cycle .ring{ grid-template-columns: repeat(2, 1fr); gap:24px;}
  .cycle .ring::before{ display:none;}
}

/* ============== BADGE in mission card ============== */
.mission .badge{
  position:absolute; top:14px; right:14px;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 10px; border-radius:99px;
  background: var(--blue-tint); color:var(--blue);
  font-size:11px; font-weight:700; letter-spacing:0.04em;
  box-shadow: 0 4px 10px rgba(11,78,162,.10);
}
.mission:nth-child(2) .badge{ background:var(--green-tint); color:var(--green-deep);}
.mission:nth-child(3) .badge{ background:var(--orange-tint); color:var(--orange-deep);}
.mission:nth-child(4) .badge{ background:#EEEAFF; color:var(--ai-purple);}
.mission:nth-child(5) .badge{ background:var(--blue-tint); color:var(--blue);}
.mission:nth-child(6) .badge{ background:var(--green-tint); color:var(--green-deep);}
.mission p.brief{ font-size:13px; color:var(--muted); margin:0 0 14px; line-height:1.45;}
.mission .meta{ margin-top:8px;}

/* ============== SITE-WIDE FLYING PLANES ============== */
.sky{
  position:fixed; inset:0; pointer-events:none; z-index:30;
  overflow:hidden;
}
.sky .p{
  position:absolute; width:42px; height:42px;
  opacity:0;
}
.sky .p svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 4px 10px rgba(11,78,162,.18));}
.sky .p .trail{
  position:absolute; top:50%; right:100%;
  height:1.5px; width:60px;
  background: linear-gradient(to left, rgba(109,91,255,.55), transparent);
  transform: translateY(-1px);
}

/* Plane 1 — diagonal sweep across top, fast */
.sky .p1{
  top:14%; left:-8%;
  animation: fly-sweep 22s linear infinite;
}
.sky .p1 .plane{ color: var(--blue); animation: wobble 3s ease-in-out infinite;}

/* Plane 2 — middle slow drift */
.sky .p2{
  top:48%; left:-10%; width:30px; height:30px;
  animation: fly-drift 34s 4s linear infinite;
}
.sky .p2 .plane{ color: var(--ai-purple); animation: wobble 4s 1s ease-in-out infinite;}
.sky .p2 .trail{ background: linear-gradient(to left, rgba(57,168,74,.5), transparent);}

/* Plane 3 — bottom up, opposite direction */
.sky .p3{
  top:78%; right:-10%; left:auto;
  width:36px; height:36px;
  transform: scaleX(-1);
  animation: fly-reverse 28s 8s linear infinite;
}
.sky .p3 .plane{ color: var(--green); animation: wobble 3.5s ease-in-out infinite;}
.sky .p3 .trail{ background: linear-gradient(to left, rgba(242,139,0,.4), transparent);}

/* Plane 4 — small fast loop near top-right */
.sky .p4{
  top:6%; left:-6%; width:24px; height:24px;
  animation: fly-arc 18s 12s linear infinite;
}
.sky .p4 .plane{ color: var(--orange); animation: wobble 2.5s ease-in-out infinite;}
.sky .p4 .trail{ width:40px; background: linear-gradient(to left, rgba(11,78,162,.4), transparent);}

/* Plane 5 — extra slow background plane */
.sky .p5{
  top:32%; left:-8%; width:20px; height:20px;
  animation: fly-drift 48s 18s linear infinite;
  opacity:.6;
}
.sky .p5 .plane{ color: var(--blue-deep); animation: wobble 5s ease-in-out infinite;}
.sky .p5 .trail{ background: linear-gradient(to left, rgba(11,78,162,.3), transparent);}

@keyframes fly-sweep{
  0%   { transform: translate(0, 0) rotate(-8deg); opacity:0;}
  6%   { opacity:.95;}
  50%  { transform: translate(60vw, -10vh) rotate(4deg);}
  94%  { opacity:.95;}
  100% { transform: translate(125vw, -20vh) rotate(12deg); opacity:0;}
}
@keyframes fly-drift{
  0%   { transform: translate(0, 0) rotate(-6deg); opacity:0;}
  8%   { opacity:.85;}
  50%  { transform: translate(55vw, -6vh) rotate(2deg);}
  92%  { opacity:.85;}
  100% { transform: translate(120vw, -14vh) rotate(8deg); opacity:0;}
}
@keyframes fly-reverse{
  0%   { transform: scaleX(-1) translate(0, 0) rotate(-6deg); opacity:0;}
  8%   { opacity:.9;}
  50%  { transform: scaleX(-1) translate(60vw, 8vh) rotate(4deg);}
  92%  { opacity:.9;}
  100% { transform: scaleX(-1) translate(125vw, 18vh) rotate(12deg); opacity:0;}
}
@keyframes fly-arc{
  0%   { transform: translate(0, 0) rotate(-10deg); opacity:0;}
  10%  { opacity:.9;}
  30%  { transform: translate(30vw, -6vh) rotate(0);}
  50%  { transform: translate(55vw, -14vh) rotate(8deg);}
  70%  { transform: translate(80vw, -8vh) rotate(2deg);}
  90%  { opacity:.9;}
  100% { transform: translate(125vw, -22vh) rotate(14deg); opacity:0;}
}
@keyframes wobble{
  0%,100%{ transform: rotate(-2deg);}
  50%   { transform: rotate(2deg);}
}
@media (prefers-reduced-motion: reduce){
  .sky{ display:none;}
}

/* ============== ANIMATIONS ============== */
@keyframes floaty{ 0%,100%{transform: translateY(0);} 50%{ transform: translateY(-12px);}}
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.5); opacity:.4;}}
@keyframes pulse-glow{ 0%,100%{ opacity:.6; transform:scale(1);} 50%{opacity:1; transform:scale(1.08);}}
@keyframes orbit{ from{transform: rotate(0);} to{transform: rotate(360deg);}}
@keyframes twinkle{ 0%,100%{ opacity:.3; transform: scale(1);} 50%{ opacity:1; transform: scale(1.4);}}

/* Reveal */
[data-r]{ opacity:0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);}
[data-r].in{ opacity:1; transform: none;}
[data-r="2"]{ transition-delay:.1s;} [data-r="3"]{ transition-delay:.2s;}
[data-r="4"]{ transition-delay:.3s;} [data-r="5"]{ transition-delay:.4s;}
[data-r="6"]{ transition-delay:.5s;}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important;}
  [data-r]{ opacity:1 !important; transform:none !important;}
}

/* ============== RESPONSIVE ============== */
@media (max-width: 1024px){
  .hero .grid, .mentor .grid, .parents .grid{ grid-template-columns: 1fr; gap:40px;}
  .hero-art, .parents .visual{ max-width:420px; margin: 0 auto;}
  .hero h1{ font-size: 48px;}
  .journey .steps{ grid-template-columns: repeat(2, 1fr);}
  .journey .step:nth-child(2) .arrow{ display:none;}
  .worlds .grid, .missions .grid, .skills .grid{ grid-template-columns: 1fr 1fr;}
  .section-head h2{ font-size: 34px;}
  .final h2{ font-size: 44px;}
  .foot .row{ grid-template-columns: 1fr 1fr;}
}
@media (max-width: 640px){
  .container{ padding: 0 20px;}
  .hero h1{ font-size: 36px;}
  .section{ padding:60px 0;}
  .journey .steps, .worlds .grid, .missions .grid, .skills .grid{ grid-template-columns: 1fr;}
  .parents .bullets{ grid-template-columns: 1fr;}
  .section-head h2{ font-size: 28px;}
  .final h2{ font-size: 34px;}
  .main-nav{ display:none;}
  .foot .row{ grid-template-columns: 1fr;}
  .foot .legal{ flex-direction:column; gap:10px;}
}

/* === MINISKILLS PAPER AIRPLANE SYSTEM === */

.hero::before,
.hero::after{
  content:"✈";
  position:absolute;
  font-size:42px;
  opacity:.08;
  color:#0B4EA2;
  animation:floatplane 9s ease-in-out infinite;
}

.hero::before{
  top:80px;
  left:8%;
  transform:rotate(-12deg);
}

.hero::after{
  right:10%;
  bottom:90px;
  transform:rotate(18deg);
  animation-delay:2s;
}

@keyframes floatplane{
  0%{transform:translateY(0px) rotate(-12deg);}
  50%{transform:translateY(-14px) rotate(-4deg);}
  100%{transform:translateY(0px) rotate(-12deg);}
}

.world-card::after,
.mission-card::after,
.skill-card::after{
  content:"✈";
  position:absolute;
  top:18px;
  right:18px;
  font-size:18px;
  opacity:.14;
}

.logo{
  position:relative;
}

.logo::after{
  content:"";
  position:absolute;
  width:90px;
  height:2px;
  background:linear-gradient(90deg, rgba(11,78,162,.0), rgba(11,78,162,.25), rgba(11,78,162,0));
  left:100%;
  top:50%;
  margin-left:8px;
}

.plane-svg{
  filter:drop-shadow(0 4px 12px rgba(11,78,162,.25));
}