:root{
  --bg:#0a0f18;
  --bg-2:#0e1624;
  --txt:#e5f1ff;
  --muted:#b5c5d6;
  --accent:#13e38a;
  --accent-2:#00e6ff;
  --danger:#ff5f5f;
  --card:#0f1829;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --max:1200px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 800px at 80% -10%, rgba(0,230,255,.08), transparent 60%),
linear-gradient(180deg, var(--bg), var(--bg-2)); color:var(--txt); font-family:var(--font);}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.btn{display:inline-flex;gap:10px;align-items:center;background:linear-gradient(135deg,var(--accent),#34ffc3);
  color:#022; border:0;border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:var(--shadow);}
.btn.secondary{background:transparent;border:1px solid #1b2538;color:var(--txt)}
.btn:focus{outline:3px solid var(--accent-2)}
nav{position:sticky;top:0;z-index:50;background:rgba(10,15,24,.7);backdrop-filter:blur(10px);border-bottom:1px solid #142036}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;max-width:var(--max);margin:0 auto}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.3px}
.logo .dot{width:10px;height:10px;border-radius:999px;background:conic-gradient(from 0deg, var(--accent), var(--accent-2))}
nav ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0}
nav li a{padding:8px 12px;border-radius:10px}
nav li a:hover{background:#0c1220}
.topbar{background:linear-gradient(90deg,#0c1526,#0c2036);border-bottom:1px solid #11213b;color:var(--muted);font-size:14px}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.hero{position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center;padding:48px 24px}
.tag{display:inline-block;padding:6px 10px;border:1px solid #183251;border-radius:999px;color:var(--muted);font-size:12px}
h1{font-size:48px;line-height:1.05;margin:14px 0}
p.lead{font-size:18px;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
.card{background:linear-gradient(180deg,#0d1627,#0a1322);padding:18px;border:1px solid #12233d;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:8px 0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid-3, .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} h1{font-size:36px}}

footer{border-top:1px solid #13223a;background:#0b1426;margin-top:48px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer li a{color:var(--muted)}
.footer-note{color:var(--muted);font-size:12px;margin-top:18px}

.bubble{position:absolute;border-radius:999px;filter:blur(30px);opacity:.5}
.b1{width:220px;height:220px;background:#13e38a40;top:-20px;right:20%}
.b2{width:260px;height:260px;background:#00e6ff35;bottom:-40px;right:-40px}
.b3{width:160px;height:160px;background:#ff5f5f2b;top:40%;left:-40px}

.marquee{overflow:hidden;white-space:nowrap;border:1px solid #123; border-radius:12px}
.marquee span{display:inline-block;padding:12px 18px}
.ad-slot{background:repeating-linear-gradient(-45deg,#0f1c32,#0f1c32 10px,#0c1526 10px,#0c1526 20px);
  border:1px dashed #1f355b;border-radius:14px;padding:14px;text-align:center;color:#8fb3ff}
.ad-slot small{display:block;color:#6f8bb8}
.hero-illustration{aspect-ratio:4/3;background:
radial-gradient(400px 200px at 70% 30%, #13e38a20, transparent),
radial-gradient(300px 160px at 20% 80%, #00e6ff1f, transparent),
linear-gradient(180deg,#0e182c,#0a1323);
border:1px solid #11233f;border-radius:24px;position:relative;overflow:hidden}
.hero-illustration:before,.hero-illustration:after{
  content:""; position:absolute; inset:0; background:
  repeating-conic-gradient(from 0deg, transparent 0 40deg, #142238 40deg 43deg);
  mix-blend-mode:overlay; opacity:.2;pointer-events:none}
.badge{font-size:12px;color:#9bd9ff;border:1px solid #153656;border-radius:999px;padding:4px 8px}
.notice{padding:10px 12px;border:1px solid #214f5b;background:#0c1e28;color:#9bd9ff;border-radius:12px}
kbd{border:1px solid #234;border-radius:6px;background:#0a1320;padding:2px 6px}
input,select,textarea{background:#0a1220;border:1px solid #1b2d4b;color:var(--txt);border-radius:12px;padding:12px;width:100%}
label{font-size:14px;color:#a4bbd6}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border-bottom:1px solid #13223a;padding:10px;text-align:left}
hr{border:0;border-top:1px solid #13223a;margin:18px 0}
.toast{position:fixed; bottom:18px; right:18px; background:#0c1e2c; border:1px solid #12314f; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);display:none}
.toast.show{display:block}
.carousel{position:relative; overflow:hidden;border:1px solid #143456;border-radius:18px}
.carousel-track{display:flex; transition:transform .6s ease}
.carousel .item{min-width:100%; padding:24px}
.carousel .nav{position:absolute; inset:auto 10px 10px auto; display:flex; gap:10px}
.icon-btn{border:1px solid #173054; background:#0b1527; color:var(--txt); border-radius:999px; width:42px; height:42px; display:grid; place-items:center}
.small{font-size:13px;color:var(--muted)}
.badge-green{background:linear-gradient(180deg,#0affb3,#14e38a);color:#012;border-radius:10px;padding:4px 8px}
header .cart{display:flex;align-items:center;gap:8px}
.cart-count{background:#14e38a;color:#012; font-weight:700; border-radius:999px; padding:2px 8px; font-size:12px}
figure{margin:0}
figcaption{font-size:12px;color:#94a8c6;margin-top:6px}
blockquote{border-left:3px solid #1b8; padding-left:12px; color:#cde}
code.inline{background:#0a1422; border:1px solid #193256; padding:2px 6px; border-radius:6px}
/* Accessibility focus */
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

/* 404 */
.big404{font-size:84px; font-weight:900; letter-spacing:2px; color:#83ffd8}