/* ============================================================
   Somali AI Academy — v3 "School + Business" concept
   Academy wing: gamified learning path (levels 01→03)
   Business wing: agency services + EVC payment card
   ============================================================ */
:root{
  --bg0:#030711;
  --bg1:#071022;
  --navy:#0B1F3A;
  --blue:#2D9CFF;
  --cyan:#22D3EE;
  --text:#EAF2FC;
  --muted:#8FA6C4;
  --muted2:#BCD6F3;
  --line:rgba(255,255,255,.1);
  --radius:24px;
  --font-display:"Space Grotesk",-apple-system,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--text);
  background:linear-gradient(180deg,var(--bg1),var(--bg0) 30%);
  line-height:1.7;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
b{color:#fff}
h1,h2,h3,.price,.btn,.brand,.pc-num,.lv-node,.milestone-chip,.why-quote{font-family:var(--font-display)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 12px rgba(34,211,238,.8);
  pointer-events:none;
}

/* ---------- aurora ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:blobDrift 22s ease-in-out infinite alternate;will-change:transform}
.blob-a{width:min(55vw,640px);height:min(55vw,640px);top:-18%;right:-10%;background:radial-gradient(circle,rgba(45,156,255,.5),transparent 65%)}
.blob-b{width:min(45vw,520px);height:min(45vw,520px);top:55%;left:-12%;background:radial-gradient(circle,rgba(34,211,238,.32),transparent 65%);animation-delay:-8s}
.blob-c{width:min(40vw,470px);height:min(40vw,470px);bottom:-15%;right:5%;background:radial-gradient(circle,rgba(45,110,255,.3),transparent 65%);animation-delay:-15s}
@keyframes blobDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,6vh,0) scale(1.15)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;border-radius:999px;font-weight:700;font-size:15px;
  padding:14px 30px;cursor:pointer;border:none;position:relative;letter-spacing:.01em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-lg{padding:17px 36px;font-size:16px}
.btn-sm{padding:10px 22px;font-size:14px}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#03101C;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 16px rgba(3,16,28,.25),
    0 12px 30px rgba(34,211,238,.3);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -10px 16px rgba(3,16,28,.2),
    0 18px 44px rgba(34,211,238,.5),
    0 0 30px rgba(45,156,255,.4);
}
.btn-ghost{
  background:rgba(255,255,255,.04);color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-ghost:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 32px rgba(2,8,20,.6)}
.btn-glass{
  background:rgba(45,156,255,.1);color:var(--cyan);
  border:1.5px solid rgba(34,211,238,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-glass:hover{transform:translateY(-3px);background:rgba(45,156,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(34,211,238,.3)}

.pill{
  display:inline-block;background:rgba(45,156,255,.1);color:#7cc4ff;
  border:1px solid rgba(45,156,255,.35);padding:7px 18px;border-radius:999px;
  font-size:13px;font-weight:600;margin-bottom:22px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 30px rgba(45,156,255,.15);
}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
  padding-left:34px;position:relative;
}
.eyebrow::before{
  content:"";position:absolute;left:0;top:50%;width:24px;height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  box-shadow:0 0 10px rgba(34,211,238,.7);
}

/* ---------- glass dock nav ---------- */
nav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1120px, calc(100% - 24px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px 10px 20px;border-radius:999px;
  background:rgba(7,16,34,.6);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 16px 40px rgba(2,8,20,.5);
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16.5px;white-space:nowrap}
.brand svg{width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(34,211,238,.7))}
.navlinks{display:flex;gap:6px;align-items:center}
.navlinks a{
  color:var(--muted2);font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;
  transition:color .2s, background .2s;
}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.07)}
@media(max-width:820px){.navlinks{display:none}}

/* ---------- HERO ---------- */
header{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;padding:130px 0 110px;
}
#net{position:absolute;inset:0;z-index:0;opacity:.45}
.floor{
  position:absolute;left:50%;bottom:-4%;transform:translateX(-50%) perspective(600px) rotateX(60deg);
  width:1800px;max-width:280vw;height:52vh;z-index:0;pointer-events:none;
  overflow:hidden;
}
.floor::before{
  content:"";position:absolute;left:0;right:0;top:-64px;bottom:0;
  background-image:
    linear-gradient(rgba(34,211,238,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,211,238,.13) 1px,transparent 1px);
  background-size:64px 64px;
  animation:gridMove 2.6s linear infinite;
  will-change:transform;
}
.floor::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, transparent 15%, var(--bg0) 90%);
}
@keyframes gridMove{to{transform:translateY(64px)}}

.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;width:100%;
}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:44px;text-align:center}
  .hero-copy .hero-cta{justify-content:center}
  .chat{margin:0 auto}
}
header h1{
  font-size:clamp(38px, 5.4vw, 62px);
  line-height:1.06;margin-bottom:22px;font-weight:700;letter-spacing:-.03em;
  text-shadow:0 16px 50px rgba(2,8,20,.7);
}
.grad-text{
  background:linear-gradient(100deg,var(--blue),var(--cyan) 40%,#9BEFFF 60%,var(--blue) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradSlide 6s ease-in-out infinite alternate;
}
@keyframes gradSlide{from{background-position:0% 0}to{background-position:100% 0}}
header p.lead{font-size:clamp(16px,2vw,18.5px);color:var(--muted2);max-width:560px;margin:0 0 34px}
@media(max-width:960px){header p.lead{margin:0 auto 34px}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

.scroll-cue{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:2px solid rgba(255,255,255,.3);border-radius:999px;
}
.scroll-cue span{
  position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
  border-radius:4px;background:var(--cyan);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- chat window ---------- */
.chat{
  position:relative;width:min(470px,100%);border-radius:22px;overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .35s ease, border-color .35s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 40px 90px rgba(2,8,20,.65), 0 0 60px rgba(45,156,255,.12);
}
.chat-bar{
  display:flex;align-items:center;gap:14px;padding:15px 20px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.chat-dots{display:flex;gap:7px}
.chat-dots i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.chat-dots i:first-child{background:rgba(45,156,255,.6)}
.chat-dots i:nth-child(2){background:rgba(34,211,238,.6)}
.chat-title{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--muted2);letter-spacing:.02em;
}
.chat-title svg{width:16px;height:16px;filter:drop-shadow(0 0 6px rgba(34,211,238,.7))}
.chat-live{
  margin-left:auto;width:9px;height:9px;border-radius:50%;
  background:#3fe0a1;box-shadow:0 0 10px rgba(63,224,161,.9);
  animation:livePulse 2s ease-in-out infinite;
}
@keyframes livePulse{50%{opacity:.45}}
.chat-body{
  padding:22px 20px;display:flex;flex-direction:column;gap:12px;
  min-height:290px;max-height:380px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:6px}
.msg{
  max-width:88%;padding:12px 16px;border-radius:16px;
  font-size:14px;line-height:1.55;
}
.msg.u{
  align-self:flex-end;color:#03101C;font-weight:600;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-bottom-right-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(34,211,238,.25);
}
.msg.a{
  align-self:flex-start;color:var(--muted2);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-bottom-left-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* typing indicator (three bouncing dots) */
.msg.typing{display:flex;align-items:center;gap:5px;padding:15px 18px}
.tdot{
  width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:tblink 1.1s ease-in-out infinite;
}
.tdot:nth-child(2){animation-delay:.18s}
.tdot:nth-child(3){animation-delay:.36s}
@keyframes tblink{
  0%,70%,100%{opacity:.25;transform:translateY(0)}
  35%{opacity:1;transform:translateY(-3px)}
}

.chat-input{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px 11px 20px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
#chatText{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.4;
}
#chatText::placeholder{color:var(--muted)}
.chat-send{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#03101C;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(34,211,238,.35);
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.chat-send:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px rgba(34,211,238,.5)}
.chat-send svg{width:16px;height:16px}
.chat-input.busy .chat-send{opacity:.45;pointer-events:none}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;position:relative;z-index:2;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
  padding:16px 0;
}
.marquee-track{
  display:flex;align-items:center;gap:44px;width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display);font-weight:500;font-size:15px;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.marquee-track i{color:var(--cyan);font-style:normal;text-shadow:0 0 12px rgba(34,211,238,.8)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections / wings ---------- */
.wing{padding:120px 0;position:relative;z-index:2;overflow:hidden}
.sec-ghost{
  position:absolute;top:34px;left:50%;transform:translateX(-50%);z-index:0;
  font-family:var(--font-display);font-weight:700;line-height:1;white-space:nowrap;
  font-size:clamp(90px,17vw,210px);letter-spacing:.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
  user-select:none;pointer-events:none;
}
.sec-head{position:relative;margin-bottom:64px}
.sec-head h2{
  font-size:clamp(32px,4.6vw,50px);font-weight:700;letter-spacing:-.02em;color:#fff;
  margin-bottom:14px;
}
.sec-head .sub{color:var(--muted);max-width:640px;font-size:16.5px}

/* ---------- glass base ---------- */
.glass{
  background:linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 55%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 60px rgba(2,8,20,.55);
}
.glare{position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;z-index:1}

/* ---------- learning path ---------- */
.path{position:relative;padding:20px 0 10px;perspective:1400px}
.path-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.08);border-radius:2px;
}
.path-fill{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  box-shadow:0 0 16px rgba(34,211,238,.8);
  transform:scaleY(0);transform-origin:top center;
}

.level{
  position:relative;width:calc(50% - 64px);
  padding:36px 32px;display:flex;flex-direction:column;
  margin-bottom:56px;
  transform-style:preserve-3d;will-change:transform;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  overflow:visible;
}
.lv-left{margin-right:auto}
.lv-right{margin-left:auto}
.tilt:hover{border-color:rgba(34,211,238,.35)}

.lv-node{
  position:absolute;top:36px;z-index:3;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:var(--muted2);
  background:rgba(7,16,34,.9);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 8px 22px rgba(2,8,20,.6);
  transition:background .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.lv-left .lv-node{right:-88px}
.lv-right .lv-node{left:-88px}
.lv-node.lit{
  color:#03101C;border-color:transparent;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 26px rgba(34,211,238,.7), 0 8px 22px rgba(2,8,20,.6);
}

/* ---------- YouTube panel (slot beside Level 01) ---------- */
.video-slot{
  position:absolute;top:20px;right:0;width:calc(50% - 64px);z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  padding:20px;border-radius:var(--radius);
  background:linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 55%);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 26px 60px rgba(2,8,20,.55);
}
.video-head{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:700;color:#fff;font-size:15px;
}
.yt-ico{width:26px;height:26px;filter:drop-shadow(0 0 10px rgba(255,0,0,.45))}
.video-frame{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.8 15.1V8.6l6.2 3.3z' fill='%23233a5c'/%3E%3C/svg%3E") center/56px no-repeat;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(2,8,20,.5);
}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame noscript a{color:var(--cyan);display:block;padding:20px;text-align:center}
.video-slot .btn{width:100%;text-align:center}
@media(max-width:880px){
  .video-slot{position:static;width:auto;margin:0 0 56px 62px}
}

.milestone{position:relative;text-align:center;margin:6px 0 62px;z-index:2}
.milestone-chip{
  display:inline-block;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cyan);padding:9px 24px;border-radius:999px;
  background:rgba(7,16,34,.92);
  border:1px solid rgba(34,211,238,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 24px rgba(34,211,238,.2);
}
.milestone-sub{margin-top:12px;color:var(--muted);font-size:14.5px;max-width:420px;margin-left:auto;margin-right:auto}

/* card interiors (levels share offer styling) */
.level h3, .glow-border .inner h3{font-size:22px;color:#fff;margin-bottom:8px;letter-spacing:-.01em;position:relative;z-index:2}
.price{font-size:54px;font-weight:700;margin:8px 0 6px;letter-spacing:-.03em;line-height:1;position:relative;z-index:2}
.price small{font-size:14px;color:var(--muted);font-weight:500;font-family:var(--font-body);letter-spacing:0}
.level > p, .glow-border .inner > p{color:var(--muted);font-size:15px;margin-bottom:18px;flex-grow:1;position:relative;z-index:2}
.level ul, .glow-border .inner ul{list-style:none;margin:0 0 26px;font-size:14.5px;color:var(--muted2);position:relative;z-index:2}
.level li, .glow-border .inner li{padding-left:28px;position:relative;margin-bottom:10px}
.level li::before, .glow-border .inner li::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--cyan);font-weight:800;
  text-shadow:0 0 12px rgba(34,211,238,.8);
}
.level .btn, .glow-border .inner .btn{width:100%;text-align:center;position:relative;z-index:2}

.tag{
  align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  padding:5px 14px;border-radius:8px;margin-bottom:14px;position:relative;z-index:2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.tag-free{background:rgba(35,197,131,.14);color:#3fe0a1;border:1px solid rgba(63,224,161,.35)}
.tag-pop{background:rgba(255,176,66,.13);color:#ffc46e;border:1px solid rgba(255,196,110,.35)}
.tag-pro{background:rgba(45,156,255,.13);color:#7cc4ff;border:1px solid rgba(124,196,255,.35)}

/* popular card: animated gradient border */
@property --spin{syntax:'<angle>';initial-value:0deg;inherits:false}
.glow-border{
  padding:2px;border-radius:calc(var(--radius) + 2px);
  background:conic-gradient(from var(--spin),
    rgba(45,156,255,0) 0deg, rgba(34,211,238,.9) 40deg, rgba(45,156,255,0) 110deg,
    rgba(45,156,255,0) 180deg, rgba(45,156,255,.7) 230deg, rgba(45,156,255,0) 300deg);
  animation:borderSpin 5s linear infinite;
  box-shadow:0 0 44px rgba(34,211,238,.18), 0 26px 60px rgba(2,8,20,.55);
}
@keyframes borderSpin{to{--spin:360deg}}
.level.glow-border{padding:2px} /* beats .level padding at any breakpoint */
.glow-border .inner{
  height:100%;border-radius:var(--radius);
  background:linear-gradient(155deg,#0d1c36,#081226 60%);
  padding:46px 32px 36px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.ribbon{
  position:absolute;top:14px;right:-34px;transform:rotate(38deg);z-index:3;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;
  color:#03101C;padding:6px 40px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(34,211,238,.4);
}

/* shine sweep — lives inside .glare so cards can keep overflow:visible
   (the path nodes hang outside the card edge) */
.glare{overflow:hidden}
.glare::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);
  transform:skewX(-18deg);transition:left .8s ease;
}
.level:hover .glare::after, .glow-border:hover .glare::after{left:130%}

/* path on mobile: line on the left
   card left edge sits 62px in; node (48px wide) at left:-62px centers on the 23px line */
@media(max-width:880px){
  .path-line{left:23px}
  .level{width:auto;margin-left:62px;margin-right:0}
  .lv-left .lv-node,.lv-right .lv-node{left:-62px;right:auto}
  .milestone{text-align:left;margin-left:62px}
  .milestone-sub{margin-left:0}
}

/* ---------- community banner ---------- */
.community{
  position:relative;display:flex;align-items:center;gap:36px;
  padding:34px 40px;margin-top:26px;overflow:hidden;
}
.community p{color:var(--muted2);font-size:16.5px;max-width:560px;position:relative;z-index:2}
.orbit{position:relative;flex:0 0 120px;width:120px;height:120px}
.orbit svg{
  position:absolute;inset:24%;
  filter:drop-shadow(0 0 20px rgba(45,156,255,.7)) drop-shadow(0 12px 22px rgba(2,8,20,.6));
}
.orbit-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px dashed rgba(34,211,238,.4);
  animation:orbitSpin 16s linear infinite;
}
.orbit-ring::before{
  content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px rgba(34,211,238,1);
}
.orbit-ring.o2{inset:14%;border-color:rgba(45,156,255,.3);animation-duration:10s;animation-direction:reverse}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .community{flex-direction:column;text-align:center;gap:24px;padding:34px 24px}
}

/* ---------- EVC ---------- */
.evc-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
@media(max-width:900px){.evc-grid{grid-template-columns:1fr;gap:36px}}

.pay-wrap{position:relative;perspective:1200px;display:flex;flex-direction:column;align-items:center}
.pay-card{
  position:relative;width:min(430px,100%);aspect-ratio:1.586;
  border-radius:22px;padding:7% 8%;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(45,156,255,.35), transparent 50%),
    radial-gradient(120% 160% at 100% 100%, rgba(34,211,238,.2), transparent 55%),
    linear-gradient(155deg,#12264a,#081226 70%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -14px 30px rgba(2,8,20,.5),
    0 40px 80px rgba(2,8,20,.65),
    0 0 60px rgba(45,156,255,.18);
  transform-style:preserve-3d;will-change:transform;
  transition:transform .35s ease;
  animation:cardFloat 7s ease-in-out infinite alternate;
}
@keyframes cardFloat{from{transform:rotateX(4deg) rotateY(-6deg) translateY(-8px)}to{transform:rotateX(-3deg) rotateY(5deg) translateY(8px)}}
.pay-card:hover{animation:none}
.pc-shine{
  position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.13) 50%,transparent 75%);
  transform:skewX(-18deg);
  animation:cardShine 5.5s ease-in-out infinite;
}
@keyframes cardShine{0%,55%{left:-70%}85%,100%{left:140%}}
.pc-top{display:flex;justify-content:space-between;align-items:center}
.pc-chip{
  width:46px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,#8fd8ff,#2D9CFF 60%,#1668b8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -4px 8px rgba(3,16,28,.4), 0 4px 12px rgba(2,8,20,.4);
  position:relative;
}
.pc-chip::after{
  content:"";position:absolute;inset:7px 9px;
  border:1px solid rgba(3,16,28,.35);border-radius:4px;
}
.pc-brand{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;letter-spacing:.02em;text-shadow:0 0 16px rgba(34,211,238,.5)}
.pc-num{
  font-size:clamp(24px,5.4vw,31px);font-weight:700;color:#fff;letter-spacing:.14em;
  text-shadow:0 2px 0 rgba(2,8,20,.55), 0 0 22px rgba(45,156,255,.45);
}
.pc-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.pc-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pc-name{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:#fff;letter-spacing:.04em}
.pc-star{width:44px;height:44px;opacity:.9;filter:drop-shadow(0 0 10px rgba(34,211,238,.7))}
.pay-shadow{
  width:70%;height:26px;margin-top:34px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(34,211,238,.25),rgba(2,8,20,0) 70%);
  filter:blur(10px);
  animation:shadowPulse 7s ease-in-out infinite alternate;
}
@keyframes shadowPulse{from{transform:scaleX(1);opacity:.9}to{transform:scaleX(.82);opacity:.55}}

.steps-panel{padding:38px 34px}
.steps-panel h3{font-size:22px;color:#fff;margin-bottom:20px}
.steps{margin:0 0 26px;list-style:none;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;padding-left:48px;margin-bottom:18px;
  font-size:15px;color:var(--muted2);
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:0;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-weight:800;font-size:13px;color:#03101C;font-family:var(--font-display);
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(34,211,238,.4);
}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:14px;top:34px;bottom:-14px;width:2px;
  background:linear-gradient(rgba(34,211,238,.4),rgba(34,211,238,.05));
}
.steps-panel .btn{width:100%;text-align:center}

/* ---------- business wing ---------- */
.wing-biz .sec-ghost{-webkit-text-stroke-color:rgba(45,156,255,.09)}
.svc{
  position:relative;border-radius:30px;padding:70px 48px;text-align:center;overflow:hidden;
}
.svc-glow{
  position:absolute;top:-45%;left:50%;transform:translateX(-50%);
  width:85%;height:75%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(45,156,255,.25),transparent 70%);
}
.svc .eyebrow{padding-left:0}
.svc .eyebrow::before{display:none}
.svc h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;letter-spacing:-.02em;color:#fff;margin-bottom:16px;position:relative}
.svc-lead{color:var(--muted2);max-width:620px;margin:0 auto 40px;position:relative;font-size:16.5px}
.tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:880px;margin:0 auto 44px;position:relative;
}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tiles{grid-template-columns:1fr 1fr;gap:12px}}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:26px 14px;border-radius:18px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  font-size:14px;font-weight:600;color:var(--muted2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tile:hover{
  transform:translateY(-6px);border-color:rgba(34,211,238,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 16px 36px rgba(2,8,20,.5), 0 0 26px rgba(45,156,255,.15);
}
.tile-ico{
  font-size:30px;line-height:1;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;border-radius:18px;
  background:linear-gradient(155deg,rgba(45,156,255,.18),rgba(34,211,238,.06));
  border:1px solid rgba(45,156,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 24px rgba(2,8,20,.4);
}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
@media(max-width:880px){.why-grid{grid-template-columns:1fr;gap:32px}}
.why-quote{
  font-size:clamp(24px,3.4vw,36px);font-weight:500;line-height:1.4;letter-spacing:-.01em;
  color:#fff;border:none;position:relative;padding-left:28px;
}
.why-quote::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--blue),var(--cyan));
  box-shadow:0 0 16px rgba(34,211,238,.6);
}
.why-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.why-pane{padding:30px 30px;position:relative;overflow:hidden}
.why-pane::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),transparent 80%);
  box-shadow:0 0 14px rgba(34,211,238,.6);
}
.why-pane p{color:var(--muted2);font-size:16px;line-height:1.75}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:2;text-align:center;padding:80px 24px 56px;
  color:var(--muted);font-size:14.5px;
  background:linear-gradient(180deg,transparent,rgba(45,156,255,.05));
}
footer::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(720px,80%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.5),transparent);
  box-shadow:0 0 18px rgba(34,211,238,.4);
}
.f-star{width:44px;height:44px;margin-bottom:14px;filter:drop-shadow(0 0 14px rgba(34,211,238,.7))}
.fbrand{font-family:var(--font-display);color:#fff;font-weight:700;font-size:19px;margin-bottom:6px}
.ftag{margin-bottom:14px}
.flinks{margin-bottom:22px}
.flinks a{color:var(--cyan);font-weight:600}
.flinks a:hover{text-shadow:0 0 14px rgba(34,211,238,.7)}
.fcopy{font-size:13px;opacity:.75}

/* ---------- scroll reveal ---------- */
html.js .reveal{
  opacity:0;transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media(max-width:600px){
  .wing{padding:84px 0}
  header{padding:110px 0 84px}
  .hero-cta .btn{width:100%;max-width:360px;margin:0 auto}
  .svc{padding:54px 22px}
  .steps-panel{padding:30px 22px}
  .chat-body{min-height:250px;padding:18px 14px}
  .msg{font-size:13.5px}
  .level{padding:30px 22px;margin-left:52px}
  .glow-border .inner{padding:42px 22px 30px}
  .lv-left .lv-node,.lv-right .lv-node{left:-52px}
  .path-line{left:23px}
  .milestone{margin-left:52px}
  .video-slot{margin-left:52px;padding:16px}
  .price{font-size:46px}
  .why-quote{padding-left:20px}
  .tile{font-size:12.5px;padding:20px 10px}
  .tile-ico{width:54px;height:54px;font-size:26px;border-radius:14px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
  .path-fill{transform:scaleY(1) !important}
  #net,.scroll-cue{display:none}
}