/* === Core Styles: modern, fast, accessible === */
:root{
  --bg:#0e0f12;
  --card:#14161b;
  --muted:#a9b2c3;
  --text:#e8ecf3;
  --brand:#74f0c0;
  --brand-2:#7aa8ff;
  --accent:#d8b4fe;
  --ok:#6ee7b7;
  --warn:#fbbf24;
  --err:#f87171;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} .reveal,.fadein,.float{animation:none!important}}

body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 10% -10%, #182033 0%, transparent 55%), radial-gradient(900px 500px at 100% 0%, #1a1730 0%, transparent 45%), var(--bg);
  color:var(--text); line-height:1.6;
}

.container{max-width:1200px; margin:0 auto; padding:20px}
.header{
  position:sticky; top:0; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(10,12,16,.6); z-index:100; border-bottom:1px solid rgba(255,255,255,.06)
}
.nav{display:flex; align-items:center; gap:18px; padding:14px 0}
.logo{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  font-weight:700; letter-spacing:.3px
}
.logo-mark{
  width:34px; height:34px; border-radius:12px;
  background: conic-gradient(from 210deg at 50% 50%, var(--brand), var(--brand-2), var(--accent), var(--brand));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 6px 20px rgba(116,240,192,.25);
}
.logo-type{font-size:1.05rem}

.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.nav a:hover{color:var(--text)}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; text-decoration:none; color:#0b1220;
  background:linear-gradient(180deg, var(--brand), #47dea5);
  font-weight:700; box-shadow:0 8px 18px rgba(71, 222, 165, .25);
}
.btn.secondary{background:linear-gradient(180deg, #ffffff, #e8edf6); color:#0b1220}

.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; padding:68px 0 34px;
}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06)
}
.grid{display:grid; gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr}}

.kpi{display:flex; gap:14px; align-items:center}
.kpi .dot{width:10px; height:10px; border-radius:50%; background:var(--brand)}
.kpi .num{font-size:1.4rem; font-weight:800}

.section{padding:36px 0}
.section h2{margin:0 0 10px; font-size:1.6rem}
.lead{color:var(--muted)}

.footer{margin-top:40px; border-top:1px solid rgba(255,255,255,.08); padding:28px 0; color:var(--muted)}
.footer a{color:var(--muted); text-decoration:none}
.footer a:hover{color:var(--text)}

.badge{
  font-size:.8rem; color:#0b1220; background:linear-gradient(180deg, var(--brand-2), #5f86ff);
  padding:6px 10px; border-radius:999px; font-weight:800; display:inline-block
}

.tag{display:inline-block; padding:6px 10px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:var(--muted); font-weight:700}

.reveal{animation:reveal .7s ease both}
.fadein{animation:fadein .9s ease both}
.float{animation:float 6s ease-in-out infinite}
@keyframes reveal{from{transform:translateY(10px); opacity:0} to{transform:none; opacity:1}}
@keyframes fadein{from{opacity:0} to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.breadcrumbs{font-size:.9rem; color:var(--muted); margin:10px 0}
.breadcrumbs a{color:var(--muted); text-decoration:none}
.breadcrumbs a:hover{color:var(--text)}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(255,255,255,.08); padding:10px; text-align:left}
.table th{color:var(--muted); font-weight:700}

.notice{border-left:4px solid var(--brand); padding:12px 14px; background:rgba(116,240,192,.06); border-radius:8px}

input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:#0c111b; color:var(--text); outline:none;
}
label{font-weight:700}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:700px){form .row{grid-template-columns:1fr}}

.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; background:#0b0f16; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.08)}

.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:9999;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); padding:14px; border-radius:14px; box-shadow:var(--shadow); display:none;
}
.cookie-banner.show{display:block}
.cookie-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.cookie-actions button{border:0; padding:10px 14px; border-radius:10px; font-weight:800; cursor:pointer}
.cookie-accept{background:linear-gradient(180deg, var(--brand), #4ade80); color:#071313}
.cookie-decline{background:#0e1524; color:var(--text); border:1px solid rgba(255,255,255,.12)}
small.helper{color:var(--muted)}