:root{
  --bg:#040816;
  --bg-2:#071126;
  --panel:rgba(10,19,40,.50);
  --panel-2:rgba(14,26,54,.62);
  --panel-3:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.18);
  --text:#f8fbff;
  --muted:#d7e4f5;
  --soft:#9db2c9;
  --brand:#5eead4;
  --brand-2:#7c9cff;
  --brand-3:#22c55e;
  --warn:#fde68a;
  --pink:#f472b6;
  --shadow:0 25px 70px rgba(0,0,0,.34);
  --blur:16px;
  --radius:24px;
  --radius-lg:32px;
  --wrap:min(1240px, calc(100% - 32px));
  --speed:.55s;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(94,234,212,.15), transparent 24%),
    radial-gradient(circle at 85% 14%, rgba(124,156,255,.16), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(244,114,182,.08), transparent 26%),
    linear-gradient(180deg, #030713 0%, #061022 42%, #040916 100%);
  line-height:1.6;
  overflow-x:hidden;
}
body:before, body:after{
  content:"";position:fixed;border-radius:50%;filter:blur(80px);z-index:-1;pointer-events:none;
}
body:before{
  width:360px;height:360px;left:-100px;top:120px;
  background:rgba(94,234,212,.12);animation:floatOrb 12s ease-in-out infinite;
}
body:after{
  width:420px;height:420px;right:-120px;top:80px;
  background:rgba(124,156,255,.11);animation:floatOrb 16s ease-in-out infinite reverse;
}
@keyframes floatOrb{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-24px,0) scale(1.08)}
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{width:var(--wrap);margin:0 auto}
section{padding:96px 0;position:relative}
h1,h2,h3,h4,h5,h6{margin:0;color:#fff}
p{margin:0}
.muted{color:var(--muted)}
.soft{color:var(--soft)}
.center{text-align:center}
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}
.glass-strong{
  background:linear-gradient(180deg, rgba(13,23,45,.76), rgba(8,15,30,.62));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  backdrop-filter:blur(calc(var(--blur) + 2px));
  -webkit-backdrop-filter:blur(calc(var(--blur) + 2px));
}
.grid-bg{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.85), transparent 90%);
}
.noise{
  position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='16' r='1'/%3E%3Ccircle cx='64' cy='58' r='1'/%3E%3Ccircle cx='103' cy='32' r='1'/%3E%3Ccircle cx='147' cy='116' r='1'/%3E%3Ccircle cx='33' cy='120' r='1'/%3E%3Ccircle cx='92' cy='144' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.topbar{
  position:sticky; top:0; z-index:90;
  background:rgba(3,8,19,.42);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav{
  min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;font-weight:900}
.brand-logo{
  width:48px;
  height:48px;
  border-radius:16px;
  display:block;
  box-shadow:0 18px 42px rgba(94,234,212,.22);
}
.brand-mark{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(94,234,212,.95), rgba(124,156,255,.95));
  color:#03101f;box-shadow:0 18px 42px rgba(94,234,212,.22);font-weight:900
}
.brand-lines{display:flex;flex-direction:column;line-height:1.05}
.brand-lines small{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--soft);font-weight:800}
.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links a{
  padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;color:#eff6ff;
  border:1px solid transparent;transition:.22s ease;
}
.nav-links a:hover,.nav-links a.active{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);transform:translateY(-1px)
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:16px;font-size:15px;font-weight:800;
  transition:transform .18s ease, box-shadow .24s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent;cursor:pointer;white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#03111f;
  background:linear-gradient(135deg, rgba(94,234,212,.95), rgba(128,210,255,.95));
  box-shadow:0 20px 50px rgba(94,234,212,.22);
}
.btn-primary:hover{box-shadow:0 24px 58px rgba(94,234,212,.28)}
.btn-secondary{
  color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)
}
.btn-secondary:hover{background:rgba(255,255,255,.10)}
.btn-outline{
  color:#fff;background:transparent;border-color:rgba(255,255,255,.18)
}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font-size:12px;
  text-transform:uppercase;letter-spacing:1.25px;font-weight:800;color:#eaffff
}
.hero{
  min-height:calc(100vh - 82px); display:flex; align-items:center; overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:30px;align-items:center;padding:72px 0 38px;
}
.eyebrow{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#cbfff8;font-weight:800}
.display{
  margin-top:18px;font-size:clamp(44px,7vw,84px);line-height:.96;letter-spacing:-.055em;font-weight:900
}
.display .accent{
  display:block;background:linear-gradient(135deg,#fff 0%,#9ff7eb 44%,#9eb3ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.lead{
  margin-top:18px;font-size:19px;max-width:720px;color:var(--muted)
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px
}
.strip-card,.card{
  position:relative;border-radius:var(--radius);transition:transform .24s ease,border-color .22s ease, box-shadow .22s ease
}
.strip-card:hover,.card:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.strip-card{padding:18px}
.strip-k{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--soft);font-weight:800}
.strip-v{margin-top:8px;font-size:20px;font-weight:900}
.hero-side{display:grid;gap:16px}
.panel{padding:24px}
.panel-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.live-pill{
  padding:9px 13px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.22);
  color:#ddffea;font-size:12px;font-weight:900;letter-spacing:1px;text-transform:uppercase
}
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px}
.kpi{
  padding:18px;border-radius:20px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08)
}
.kpi strong{display:block;font-size:34px;line-height:1;font-weight:900}
.kpi span{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.info-row{
  display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.08)
}
.info-row:first-child{padding-top:0;border-top:none}
.dot{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:18px
}
.section-head{
  display:flex;justify-content:space-between;gap:22px;align-items:end;flex-wrap:wrap;margin-bottom:28px
}
.title{
  margin-top:10px;font-size:clamp(32px,4.2vw,58px);line-height:1.03;letter-spacing:-.045em
}
.desc{font-size:16px;color:var(--muted);max-width:760px}
.cards-2,.cards-3,.cards-4{display:grid;gap:18px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.service-card,.feature-card,.course-card,.testimonial,.contact-card,.stats-card,.faq-card{
  padding:26px
}
.icon{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:26px;margin-bottom:18px;
  background:linear-gradient(135deg, rgba(94,234,212,.18), rgba(124,156,255,.16));
  border:1px solid rgba(255,255,255,.12)
}
.service-card h3,.feature-card h3,.course-card h3,.testimonial h3,.contact-card h3,.stats-card h3,.faq-card h3{font-size:23px;line-height:1.14}
.service-card p,.feature-card p,.course-card p,.testimonial p,.contact-card p,.stats-card p,.faq-card p{margin-top:10px;color:var(--muted)}
.service-card ul,.contact-card ul,.course-card ul{margin:16px 0 0;padding-left:18px;color:var(--muted)}
.service-card li,.contact-card li,.course-card li{margin:8px 0}
.course-card .btn{margin-top:18px}
.band{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025)
}
.logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.logo-pill{
  padding:18px 14px;border-radius:18px;text-align:center;font-weight:800;color:#eef5ff
}
.split{display:grid;grid-template-columns:1.03fr .97fr;gap:24px;align-items:start}
.step-list{display:grid;gap:14px;margin-top:24px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:18px;border-radius:22px
}
.step-n{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg, rgba(94,234,212,.98), rgba(124,156,255,.98));color:#03111f
}
.quote{font-size:21px;line-height:1.7;color:#f1f7ff}
.person{display:flex;align-items:center;gap:12px;margin-top:18px}
.avatar{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg, rgba(94,234,212,.92), rgba(124,156,255,.92));color:#03111f
}
.stats-big{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.stat-box{padding:28px;text-align:center}
.stat-box strong{display:block;font-size:42px;font-weight:900;line-height:1}
.stat-box span{display:block;margin-top:10px;color:var(--muted)}
.page-hero{padding:94px 0 42px;overflow:hidden}
.page-hero .card{padding:36px}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tag{
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  color:#eef7ff;font-size:13px;font-weight:700
}
.timeline{display:grid;gap:16px}
.timeline-item{
  display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px;border-radius:22px
}
.timeline-dot{
  width:14px;height:14px;border-radius:50%;background:var(--brand);margin-top:9px;box-shadow:0 0 0 8px rgba(94,234,212,.12)
}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.metric{padding:24px;text-align:center}
.metric strong{display:block;font-size:38px;line-height:1;font-weight:900}
.metric span{display:block;margin-top:10px;color:var(--muted)}
.table-like{display:grid;gap:14px}
.row-card{
  display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px;padding:22px;border-radius:24px
}
.label-pill{
  display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.22);
  color:#e4ffea;font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase
}
.checks{display:grid;gap:10px;margin-top:16px}
.check{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.check b{color:#fff}
form{display:grid;gap:16px}
.field{display:grid;gap:8px}
label{font-size:14px;font-weight:800;color:#f3f9ff}
input,textarea,select{
  width:100%;padding:15px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.95);color:#07111f;font-size:15px;outline:none
}
input::placeholder,textarea::placeholder{color:#5c6f88}
textarea{min-height:140px;resize:vertical}
input:focus,textarea:focus,select:focus{
  border-color:rgba(94,234,212,.9);box-shadow:0 0 0 4px rgba(94,234,212,.16)
}
.notice{
  padding:14px 16px;border-radius:16px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.18);
  color:#eaffef;font-weight:700
}
.faq{display:grid;gap:14px}
details{
  border-radius:20px;overflow:hidden
}
summary{
  list-style:none;cursor:pointer;padding:20px 22px;font-weight:800;font-size:17px;position:relative
}
summary::-webkit-details-marker{display:none}
details .faq-body{padding:0 22px 22px;color:var(--muted)}
.cta .card{
  padding:46px;
  background:
    radial-gradient(circle at top right, rgba(124,156,255,.18), transparent 28%),
    radial-gradient(circle at bottom left, rgba(94,234,212,.14), transparent 32%),
    linear-gradient(180deg, rgba(14,26,54,.68), rgba(7,13,27,.64));
}
footer{
  margin-top:28px;border-top:1px solid rgba(255,255,255,.08);background:rgba(2,6,15,.48);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.footer-grid{
  display:grid;grid-template-columns:1.1fr .8fr .8fr .9fr;gap:24px;padding:54px 0
}
.footer-grid h4{font-size:15px;letter-spacing:.02em}
.footer-links{display:grid;gap:12px;margin-top:14px}
.footer-links a,.footer-copy,.footer-links span{color:var(--muted)}
.footer-links a:hover{color:#fff}
.footer-copy{padding:16px 0 28px;border-top:1px solid rgba(255,255,255,.08);font-size:14px}
.reveal{
  opacity:0;transform:translateY(24px) scale(.985);transition:opacity .8s var(--ease), transform .8s var(--ease)
}
.reveal.in{opacity:1;transform:translateY(0) scale(1)}
.floaty{animation:floaty 6s ease-in-out infinite}
.floaty-2{animation:floaty 8s ease-in-out infinite reverse}
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.shine{position:relative;overflow:hidden}
.shine:after{
  content:"";position:absolute;inset:-120% auto auto -120%;width:70%;height:300%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform:rotate(22deg);transition:transform .9s ease
}
.shine:hover:after{transform:translateX(320%) rotate(22deg)}
@media (max-width:1080px){
  .hero-grid,.split,.footer-grid{grid-template-columns:1fr}
  .cards-4,.hero-strip,.logo-row,.metric-grid,.stats-big{grid-template-columns:repeat(2,1fr)}
  .cards-3,.cards-2{grid-template-columns:1fr}
}
@media (max-width:760px){
  section{padding:74px 0}
  .nav{min-height:76px}
  .nav-links{display:none}
  .hero-grid{padding:48px 0 18px}
  .hero-strip,.metric-grid,.logo-row,.stats-big,.kpi-grid,.cards-4{grid-template-columns:1fr}
  .display{font-size:clamp(38px,12vw,62px)}
  .lead{font-size:16px}
  .page-hero .card,.cta .card{padding:28px}
  .row-card{grid-template-columns:1fr}
}