/* ============ FDE ACADEMY — Cyber Youth Design System ============ */
:root{
  --ink:#0a0e1a; --ink2:#0d1224; --panel:#121a30; --panel2:#182142;
  --line:rgba(200,255,46,.14); --line2:rgba(124,92,255,.22);
  --lime:#c8ff2e; --violet:#7c5cff; --cyan:#4de3ff; --pink:#ff5c8a;
  --txt:#e8ecf8; --mut:#8b93ad; --mut2:#5a6178;
  --f-disp:'Syne','Noto Sans SC',sans-serif; --f-body:'Sora','Noto Sans SC',sans-serif; --f-mono:'IBM Plex Mono','Noto Sans SC',monospace;
  --r:14px; --nav-h:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--txt); font-family:var(--f-body);
  font-size:15px; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* global atmosphere: grid + glow + grain */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,92,255,.16), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(77,227,255,.07), transparent 60%),
    radial-gradient(600px 600px at 110% 90%, rgba(200,255,46,.05), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(139,147,173,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,147,173,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 75%);
}
::selection{background:var(--lime); color:var(--ink)}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}

/* ---------- typography ---------- */
.disp{font-family:var(--f-disp); font-weight:800; letter-spacing:-.02em; line-height:1.04}
.mono{font-family:var(--f-mono)}
.kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--lime); display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:26px; height:1px; background:var(--lime)}
h1.disp{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2.disp{font-size:clamp(1.9rem,4vw,3.2rem)}
.grad-txt{background:linear-gradient(92deg,var(--lime) 0%,var(--cyan) 55%,var(--violet) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.outline-txt{-webkit-text-stroke:1.5px rgba(232,236,248,.5); color:transparent}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:15px 28px; border-radius:100px; position:relative; transition:.25s; white-space:nowrap;
}
.btn-primary{background:var(--lime); color:var(--ink); font-weight:600}
.btn-primary:hover{box-shadow:0 0 0 2px var(--ink),0 0 34px rgba(200,255,46,.55); transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(232,236,248,.28); color:var(--txt)}
.btn-ghost:hover{border-color:var(--lime); color:var(--lime); box-shadow:inset 0 0 24px rgba(200,255,46,.07)}
.btn-violet{background:var(--violet); color:#fff}
.btn-violet:hover{box-shadow:0 0 32px rgba(124,92,255,.6); transform:translateY(-2px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.4; pointer-events:none}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; gap:28px; padding:0 clamp(18px,4vw,48px);
  background:rgba(10,14,26,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:11px; font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:-.01em}
.logo-mark{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  background:linear-gradient(135deg,var(--lime),var(--cyan)); color:var(--ink);
  font-size:15px; font-weight:800; box-shadow:0 0 22px rgba(200,255,46,.4);
}
.logo b{color:var(--lime)}
.nav-links{display:flex; gap:26px; margin-left:14px}
.nav-links a{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mut); position:relative; padding:6px 0; transition:.2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--lime)}
.nav-links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--lime)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.cur-select{
  background:var(--panel); border:1px solid rgba(232,236,248,.14); color:var(--txt);
  font-family:var(--f-mono); font-size:12px; padding:8px 10px; border-radius:8px; cursor:pointer;
}
.cart-btn{
  position:relative; display:flex; align-items:center; gap:9px; padding:10px 18px;
  border:1px solid var(--line2); border-radius:100px; font-family:var(--f-mono);
  font-size:12px; letter-spacing:.1em; color:var(--txt); transition:.2s;
}
.cart-btn:hover{border-color:var(--violet); box-shadow:0 0 20px rgba(124,92,255,.35)}
.cart-count{
  min-width:20px; height:20px; padding:0 5px; display:grid; place-items:center;
  background:var(--lime); color:var(--ink); border-radius:100px; font-size:11px; font-weight:700;
}
.nav-burger{display:none; flex-direction:column; gap:5px; padding:8px}
.nav-burger span{width:22px; height:2px; background:var(--txt); transition:.25s}

/* ---------- layout ---------- */
.wrap{max-width:1280px; margin:0 auto; padding:0 clamp(18px,4vw,48px)}
section{padding:clamp(60px,8vw,110px) 0; position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap}
.sec-head p{color:var(--mut); max-width:420px}

/* ---------- marquee ticker ---------- */
.ticker{
  border-block:1px solid var(--line); background:rgba(200,255,46,.03);
  overflow:hidden; padding:12px 0; position:relative;
}
.ticker-track{display:flex; gap:0; width:max-content; animation:tick 28s linear infinite}
.ticker span{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mut); padding:0 26px; display:flex; align-items:center; gap:26px; white-space:nowrap;
}
.ticker span::after{content:"◆"; color:var(--lime); font-size:8px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.card{
  background:linear-gradient(160deg,var(--panel) 0%,var(--ink2) 100%);
  border:1px solid rgba(232,236,248,.08); border-radius:var(--r); position:relative;
  transition:transform .3s, border-color .3s, box-shadow .3s; overflow:hidden;
}
.card:hover{transform:translateY(-6px); border-color:var(--line2); box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(124,92,255,.15)}
.card-art{position:relative; aspect-ratio:16/9.5; overflow:hidden}
.card-art .art{position:absolute; inset:0; transition:transform .5s}
.card:hover .card-art .art{transform:scale(1.06)}
.art-badge{
  position:absolute; top:14px; left:14px; z-index:2; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; padding:6px 12px; border-radius:100px;
  background:rgba(10,14,26,.75); backdrop-filter:blur(8px); border:1px solid rgba(232,236,248,.16);
}
.art-badge.pdf{color:var(--pink); border-color:rgba(255,92,138,.4)}
.art-badge.video{color:var(--cyan); border-color:rgba(77,227,255,.4)}
.art-badge.bestseller{color:var(--lime); border-color:rgba(200,255,46,.4)}
.card-body{padding:22px 22px 20px}
.card-cat{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--violet)}
.card-title{font-family:var(--f-disp); font-weight:700; font-size:19px; margin:9px 0 8px; line-height:1.25}
.card-meta{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--f-mono); font-size:11px; color:var(--mut)}
.card-meta i{font-style:normal; color:var(--mut2)}
.card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:16px; border-top:1px dashed rgba(232,236,248,.12)}
.price{font-family:var(--f-mono); font-size:19px; font-weight:600; color:var(--lime)}
.price s{color:var(--mut2); font-size:12px; margin-left:8px; font-weight:400}
.rate{font-family:var(--f-mono); font-size:11.5px; color:#ffd166}
.grid-products{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}

/* generated course art (pure CSS, per-product hue) */
.art-gen{display:grid; place-items:center}
.art-gen::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px),
    linear-gradient(var(--a1), var(--a2));
}
.art-gen .glyph{
  position:relative; font-family:var(--f-disp); font-weight:800; font-size:56px;
  color:rgba(255,255,255,.92); text-shadow:0 6px 40px rgba(0,0,0,.5); z-index:1;
  transform:rotate(-4deg);
}
.art-gen::after{
  content:""; position:absolute; width:150px; height:150px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.35); right:-40px; top:-40px;
  box-shadow:inset 0 0 40px rgba(255,255,255,.12);
}

/* ---------- tags / chips ---------- */
.chip{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; padding:7px 15px;
  border-radius:100px; border:1px solid rgba(232,236,248,.16); color:var(--mut);
  transition:.2s; text-transform:uppercase;
}
.chip:hover{color:var(--txt); border-color:rgba(232,236,248,.4)}
.chip.on{background:var(--lime); color:var(--ink); border-color:var(--lime); font-weight:600}

/* ---------- social icons ---------- */
.social-ic{
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  border:1px solid rgba(232,236,248,.14); color:var(--mut); font-size:13px; transition:.2s;
}
.social-ic:hover{color:var(--lime); border-color:var(--lime); transform:translateY(-3px); box-shadow:0 8px 20px rgba(200,255,46,.15)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 34px; margin-top:40px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.foot-grid h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--lime); margin-bottom:16px}
.foot-grid a{display:block; color:var(--mut); font-size:13.5px; padding:4px 0; transition:.2s}
.foot-grid a:hover{color:var(--txt); transform:translateX(3px)}
.foot-note{margin-top:44px; padding-top:22px; border-top:1px solid rgba(232,236,248,.07);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:11px; color:var(--mut2); letter-spacing:.06em}

/* ---------- cart drawer ---------- */
.drawer-mask{position:fixed; inset:0; background:rgba(5,8,16,.7); backdrop-filter:blur(4px);
  z-index:90; opacity:0; pointer-events:none; transition:.3s}
.drawer-mask.open{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:-440px; width:min(430px,92vw); height:100vh; z-index:95;
  background:var(--ink2); border-left:1px solid var(--line2);
  display:flex; flex-direction:column; transition:right .38s cubic-bezier(.16,1,.3,1);
}
.drawer.open{right:0}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid rgba(232,236,248,.08)}
.drawer-head h3{font-family:var(--f-disp); font-size:18px}
.drawer-close{font-size:20px; color:var(--mut); padding:6px 10px; transition:.2s}
.drawer-close:hover{color:var(--pink); transform:rotate(90deg)}
.drawer-items{flex:1; overflow-y:auto; padding:16px 24px}
.d-item{display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed rgba(232,236,248,.1)}
.d-thumb{width:64px; height:46px; border-radius:8px; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--f-disp); font-weight:800; font-size:16px; color:rgba(255,255,255,.9)}
.d-info{flex:1; min-width:0}
.d-info b{font-size:13.5px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.d-info .mono{font-size:11px; color:var(--mut)}
.d-x{color:var(--mut2); font-size:15px; align-self:flex-start; padding:2px 6px}
.d-x:hover{color:var(--pink)}
.drawer-foot{padding:20px 24px 26px; border-top:1px solid rgba(232,236,248,.08); background:var(--panel)}
.d-row{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:13px; margin-bottom:8px; color:var(--mut)}
.d-row.total{color:var(--txt); font-size:16px; font-weight:600; margin:12px 0 16px}
.d-row.total b{color:var(--lime)}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%,140%); z-index:120;
  background:var(--panel); border:1px solid var(--line2); border-left:3px solid var(--lime);
  padding:14px 22px; border-radius:12px; font-size:13.5px; display:flex; gap:10px; align-items:center;
  box-shadow:0 20px 50px rgba(0,0,0,.5); transition:transform .4s cubic-bezier(.16,1,.3,1); max-width:90vw;
}
.toast.show{transform:translate(-50%,0)}
.toast .tick{color:var(--lime); font-family:var(--f-mono); font-weight:700}

/* ---------- animations ---------- */
@keyframes rise{from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes blink{50%{opacity:.25}}
@keyframes scan{from{top:-10%} to{top:110%}}
.reveal{opacity:0}
.reveal.in{animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
.reveal.d1{animation-delay:.1s}.reveal.d2{animation-delay:.22s}.reveal.d3{animation-delay:.34s}.reveal.d4{animation-delay:.46s}

::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--panel2); border-radius:10px; border:2px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--violet)}

@media(max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cur-select{display:none}
}