:root{
  --bg:#0a0e14;
  --bg-2:#10151f;
  --card:#12181f;
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(90,170,255,0.35);
  --blue:#2f7dff;
  --cyan:#5fc3ff;
  --text:#f2f5fa;
  --text-dim:#8a94a6;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(1000px 700px at 12% -8%, rgba(78,70,255,0.22), transparent 55%),
    radial-gradient(900px 650px at 88% 6%, rgba(47,125,255,0.24), transparent 55%),
    radial-gradient(800px 600px at 50% 40%, rgba(95,195,255,0.10), transparent 60%),
    radial-gradient(900px 700px at 78% 92%, rgba(180,90,255,0.14), transparent 55%),
    radial-gradient(700px 500px at 6% 88%, rgba(255,150,80,0.08), transparent 55%),
    var(--bg);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(1200px 800px at 50% 0%, black 0%, transparent 75%);
}

.ambient{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.ambient span{position:absolute; border-radius:50%; filter:blur(140px); opacity:0.55;}
.ambient .a1{width:620px; height:620px; top:-240px; right:-140px;
  background:radial-gradient(circle, rgba(47,125,255,0.30), transparent 70%);
  animation:drift 22s ease-in-out infinite;}
.ambient .a2{width:520px; height:520px; bottom:-220px; left:-160px;
  background:radial-gradient(circle, rgba(120,90,255,0.16), transparent 70%);
  animation:drift 26s ease-in-out infinite reverse;}
.ambient .a3{width:460px; height:460px; top:38%; right:8%;
  background:radial-gradient(circle, rgba(95,195,255,0.14), transparent 70%);
  animation:drift 30s ease-in-out infinite;}
@keyframes drift{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-26px,20px);}
}

h1,h2,h3{
  font-family:'Rajdhani', sans-serif;
  font-weight:700;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;}

nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 6vw;
  background:rgba(10,14,20,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:38px; width:auto;}
.brand .wordmark{font-family:'Rajdhani'; font-weight:700; font-size:1.15rem; letter-spacing:0.04em;}
.brand .wordmark .c2{color:var(--cyan); font-weight:500;}
.nav-right{display:flex; align-items:center; gap:26px;}

.lang{position:relative;}
.lang-btn{
  display:flex; align-items:center; gap:8px; font-size:0.9rem; color:var(--text-dim);
  cursor:pointer; background:none; border:none; padding:8px 4px;
}
.lang-btn:hover{color:var(--text);}
.lang-btn .chev{transition:transform .2s;}
.lang.open .lang-btn .chev{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  min-width:160px; padding:6px; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  box-shadow:0 12px 30px rgba(0,0,0,0.4);
}
.lang.open .lang-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.lang-option{
  display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:7px;
  font-size:0.88rem; color:var(--text-dim); cursor:pointer; transition:background .15s, color .15s;
}
.lang-option:hover{background:rgba(95,195,255,0.08); color:var(--text);}
.lang-option.active{color:var(--cyan);}

.lang-btn .fi, .lang-option .fi{
  border-radius:3px; width:1.25em; line-height:1em; box-shadow:0 0 0 1px rgba(255,255,255,0.08);
}
.navlinks{display:flex; align-items:center; gap:26px; font-size:0.92rem; color:var(--text-dim);}
.navlinks a{transition:color .2s;}
.navlinks a:hover{color:var(--text);}
.nav-cta{
  padding:10px 20px; border-radius:9px;
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#04101f; font-weight:600; font-size:0.9rem;
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
  transition:filter .2s, transform .2s;
}
.nav-cta:hover{filter:brightness(1.1); transform:translateY(-1px);}

.hero{
  padding:110px 6vw 130px;
  position:relative;
}
.hero-inner{
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  max-width:1300px; margin:0 auto;
}
.hero-copy{max-width:560px; text-align:left; flex-shrink:0;}
.hero h1{
  font-size:clamp(2.8rem, 4.6vw, 4.4rem);
  line-height:1.02; margin-bottom:22px;
  animation:fadeUp .8s ease .05s both;
}
.hero p{
  color:var(--text-dim); font-size:1.08rem; line-height:1.7; margin-bottom:34px; max-width:520px;
  animation:fadeUp .8s ease .1s both;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-actions{display:flex; gap:14px; animation:fadeUp .8s ease .15s both;}

.hero-modules{
  position:relative; display:flex; align-items:center; gap:22px;
  flex-shrink:0; animation:fadeUp .9s ease .2s both;
}
.module-img{
  width:210px; border-radius:20px; display:block;
  box-shadow:0 30px 60px rgba(0,0,0,0.45);
  transition:transform .3s ease;
}
.module-img.mc-combat{transform:rotate(-4deg);}
.module-img.mc-movement{transform:rotate(3deg);}
.module-img.mc-combat:hover{transform:rotate(-4deg) translateY(-6px);}
.module-img.mc-movement:hover{transform:rotate(3deg) translateY(-6px);}
.btn-primary, .btn-ghost{
  padding:14px 26px; border-radius:9px; font-weight:600; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  transition:filter .2s, transform .2s, border-color .2s;
}
.btn-primary{
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#04101f;
}
.btn-primary:hover{filter:brightness(1.1); transform:translateY(-2px);}
.btn-ghost{
  background:#1a2029; color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover{border-color:var(--border-hover); transform:translateY(-2px);}

section{padding:90px 6vw;}
.section-head{max-width:560px; margin:0 auto 50px; text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.4rem); margin-bottom:12px;}
.section-head p{color:var(--text-dim); line-height:1.6;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

.adv-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; max-width:1100px; margin:0 auto;
}
.adv-head{grid-column:1; grid-row:1;}
.adv-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:28px 26px; transition:border-color .25s, transform .25s;
}
.adv-card:hover{border-color:var(--border-hover); transform:translateY(-5px);}
.adv-icon{font-size:1.3rem; margin-bottom:14px; color:var(--cyan);}
.adv-card h3{font-size:1.15rem; margin-bottom:10px; text-transform:none; font-weight:600;}
.adv-card p{font-size:0.9rem; color:var(--text-dim); line-height:1.6;}

.video-wrap{
  border-radius:16px; overflow:hidden; border:1px solid var(--border);
  aspect-ratio:16/9; background:#000; max-width:1100px; margin:0 auto;
  position:relative; cursor:pointer;
}
.video-wrap iframe{width:100%; height:100%; border:none; display:block;}
.video-thumb{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s, filter .3s;
}
.video-wrap:hover .video-thumb{transform:scale(1.03); filter:brightness(0.75);}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:76px; height:76px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(120deg, var(--blue), var(--cyan)); color:#04101f;
  font-size:1.5rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 0 rgba(47,125,255,0.5);
  transition:transform .2s, box-shadow .2s;
}
.video-wrap:hover .video-play{transform:translate(-50%,-50%) scale(1.08);}
.video-yt-link{
  display:block; text-align:center; margin:18px auto 0; max-width:1100px;
  color:var(--text-dim); font-size:0.9rem; transition:color .2s;
}
.video-yt-link:hover{color:var(--cyan);}

.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1100px; margin:0 auto;
}
.stat-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  padding:22px 24px; display:flex; align-items:center; gap:14px;
  transition:border-color .25s;
}
.stat-card:hover{border-color:var(--border-hover);}
.stat-ico{
  width:38px; height:38px; border-radius:9px;
  background:linear-gradient(135deg, rgba(47,125,255,0.22), rgba(95,195,255,0.1));
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan); font-size:1.1rem; flex-shrink:0;
}
.stat-card .lab{font-size:0.82rem; color:var(--text-dim); margin-bottom:3px;}
.stat-card .num{font-family:'Rajdhani'; font-weight:700; font-size:1.35rem; display:flex; align-items:center; gap:8px;}
.num .spin{
  width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(95,195,255,0.25); border-top-color:var(--cyan);
  animation:spin .8s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

#licenses{display:flex; flex-direction:column; align-items:center;}
.license-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; margin:0 auto;
  justify-content:center;
}
.license-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:34px 30px; position:relative; text-align:left;
  transition:border-color .25s, transform .25s;
}
.license-card:hover{transform:translateY(-5px);}
.license-card.featured{border-color:var(--border-hover);
  background:linear-gradient(180deg, rgba(47,125,255,0.10), var(--card));}
.lic-tag{
  position:absolute; top:-12px; left:30px;
  background:linear-gradient(120deg, var(--blue), var(--cyan));
  color:#04101f; font-family:'Rajdhani'; font-weight:700; font-size:0.7rem;
  letter-spacing:0.08em; padding:5px 14px; border-radius:999px; text-transform:uppercase;
}
.license-card h3{font-size:1.2rem; font-weight:600; text-transform:none; margin-bottom:8px; color:var(--text-dim);}
.license-card .price{font-size:2.4rem; font-family:'Rajdhani'; font-weight:700; margin-bottom:22px;}
.license-card .price span{font-size:0.95rem; color:var(--text-dim); font-family:'Inter'; font-weight:400;}
.license-card ul{margin-bottom:26px;}
.license-card li{
  font-size:0.88rem; color:var(--text-dim); padding:8px 0;
  border-top:1px solid var(--border);
}
.license-card li:first-child{border-top:none;}
.license-card li::before{content:"— "; color:var(--cyan);}
.license-card button{display:block; text-align:center; width:100%;}

footer{border-top:1px solid var(--border); padding:60px 6vw 30px;}
.footer-brand{text-align:center; font-family:'Rajdhani'; font-weight:700; font-size:1.5rem; letter-spacing:0.08em; margin-bottom:50px;}
.footer-brand .c2{color:var(--cyan); font-weight:500;}
.footer-cols{
  display:flex; justify-content:center; gap:120px; flex-wrap:wrap; margin-bottom:40px;
}
.footer-cols h4{font-size:0.85rem; margin-bottom:14px; text-transform:uppercase; letter-spacing:0.05em; text-align:center;}
.footer-cols li{padding:5px 0; font-size:0.9rem; color:var(--text-dim); text-align:center;}
.footer-cols a:hover{color:var(--cyan);}
.copyright{
  text-align:center; color:var(--text-dim); font-size:0.8rem;
  border-top:1px solid var(--border); padding-top:24px;
}

@media (max-width:900px){
  .navlinks{display:none;}
  .hero-inner{flex-direction:column; text-align:center;}
  .hero-copy{text-align:center; margin:0 auto;}
  .hero-actions{justify-content:center;}
  .hero-modules{margin-top:20px;}
  .adv-grid, .stats-grid{grid-template-columns:1fr;}
  .adv-head{grid-column:1;}
  .license-grid{grid-template-columns:1fr;}
  .footer-cols{gap:50px;}
}