@charset "UTF-8";
:root { --bg:#0b132b; --panel:#1c2541; --accent:#5bc0be; --accent2:#7bd6ff; --text:#f2f2f2; --muted:#b7c4d0; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--text); font-size:16px; line-height:1.6; }
a { color: var(--accent2); text-decoration: none; }
img, svg, video { max-width:100%; height:auto; display:block; }

#scroll-progress { position: fixed; top:0; left:0; height:3px; width:0; background: linear-gradient(90deg, var(--accent), var(--accent2)); z-index:9999; box-shadow: 0 0 8px rgba(91,192,190,.5); }

header.site { position: sticky; top:0; z-index:10; background: rgba(12,20,43,0.85); backdrop-filter: blur(6px); border-bottom: 1px solid #243b55; }
header.site .wrap { max-width:1100px; margin:0 auto; padding:12px clamp(12px, 3.8vw, 20px); display:flex; align-items:center; justify-content:space-between; }
nav.desktop ul { list-style:none; margin:0; padding:0; display:flex; gap:16px; }
nav.desktop a { padding:6px 10px; border-radius:6px; }
nav.desktop a:hover { background:#172036; }
.menu-toggle { display:none; border:1px solid #243b55; background:#284b72; color:#fff; border-radius:8px; padding:8px 10px; cursor:pointer; }
nav.mobile { display:none; border-top:1px solid #243b55; background: rgba(12,20,43,0.85); }
nav.mobile.open { display:block; }
nav.mobile ul { list-style:none; margin:0; padding:0; }
nav.mobile a { display:block; padding:12px 16px; border-bottom:1px solid #172036; }

.hero { padding: clamp(40px, 8vw, 100px) clamp(16px, 4vw, 20px); border-bottom:1px solid #243b55; overflow:hidden; background: radial-gradient(800px 400px at 20% 10%, #0f1a33 0%, #0b132b 60%), linear-gradient(180deg, #0b132b 0%, #1c2541 100%); }
.hero .inner { max-width:1100px; margin:0 auto; position:relative; }
.hero h1 { font-size: clamp(26px, 4.2vw, 46px); margin:0 0 10px; }
.hero p { color: var(--muted); font-size: clamp(16px, 2.6vw, 18px); }
.hero .orbs { position:absolute; inset:0; pointer-events:none; }
.hero .orb { position:absolute; width:160px; height:160px; border-radius:50%; filter: blur(24px); opacity:.25; animation: float 14s ease-in-out infinite; }
.hero .orb.o1 { background:#3a506b; top:10%; left:60%; animation-delay:0s; }
.hero .orb.o2 { background:#5bc0be; top:50%; left:10%; animation-delay:3s; }
.hero .orb.o3 { background:#7bd6ff; top:30%; left:80%; animation-delay:6s; }
@keyframes float { 0%{ transform: translateY(0) translateX(0);} 50%{ transform: translateY(-12px) translateX(8px);} 100%{ transform: translateY(0) translateX(0);} }

.section { max-width:1100px; margin:0 auto; padding: clamp(24px, 5vw, 50px) clamp(16px, 4vw, 20px); scroll-margin-top: 100px; }
.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.tile { background: var(--panel); border:1px solid #243b55; border-radius:12px; padding: clamp(14px, 3.8vw, 18px); position:relative; overflow:hidden; transform: translateY(8px); opacity:0; will-change: transform, opacity; transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.tile.in-view { transform: translateY(0); opacity:1; }
.tile::after { content:''; position:absolute; inset:auto auto 0 0; height:3px; width:0; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.tile:hover::after { width:100%; }
.features { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:18px; }

.counters { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:16px; margin-top: 8px; }
.counter { background:#13203f; border:1px solid #243b55; border-radius:12px; padding:16px; text-align:center; }
.counter .num { font-size: clamp(22px, 3vw, 32px); font-weight:700; letter-spacing:.5px; }
.counter .label { color: var(--muted); }

.accordion { border:1px solid #243b55; border-radius:12px; overflow:hidden; }
.ac-item + .ac-item { border-top:1px solid #243b55; }
.ac-header { background: #142341; cursor:pointer; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
.ac-title { margin:0; font-weight:600; }
.ac-icon { transition: transform .2s ease; }
.ac-content { max-height:0; overflow:hidden; transition:max-height .35s ease; background:#101a33; padding:0 16px; }
.ac-item.open .ac-content { padding:16px; }
.ac-item.open .ac-icon { transform: rotate(90deg); }

.form { background: var(--panel); border:1px solid #243b55; border-radius:12px; padding:18px; }
label { display:block; margin:10px 0 6px; }
input, textarea { width:100%; padding:10px; border-radius:8px; border:1px solid #243b55; background:#0f1a33; color:var(--text); transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, textarea:focus { border-color:#5bc0be; box-shadow:0 0 0 3px rgba(91,192,190,.2); outline:0; }
button { margin-top:12px; padding:10px 14px; border-radius:8px; border:1px solid #243b55; background:#284b72; color:#fff; cursor:pointer; transition: transform .2s ease, background .2s ease; }
button:hover { background:#31628f; transform: translateY(-1px); }
.small { font-size: 14px; color: var(--muted); }
.alert { margin-top:10px; padding:10px; border-radius:8px; font-size:14px; display:none; }
.alert.ok { background:#163a2f; border:1px solid #2e7d6d; color:#c7f7ee; }
.alert.err { background:#3b1f22; border:1px solid #8a2f3b; color:#ffd9df; }
.input-error { border-color:#d06c78 !important; box-shadow:0 0 0 3px rgba(208,108,120,.25) !important; }
.field-msg { color:#ffd9df; font-size:13px; margin-top:6px; }

footer { border-top: 1px solid #243b55; }
footer .inner { max-width: 1100px; margin: 0 auto; padding: 20px; color: var(--muted); }
.sep{margin:0 6px;color:#49627f}
footer a:hover{text-decoration:underline}

@media (max-width: 980px) { .hero .orb { width:120px; height:120px; filter:blur(20px); } nav.desktop ul { gap:10px; } }
@media (max-width: 768px) { nav.desktop { display:none; } .menu-toggle { display:inline-flex; align-items:center; gap:8px; } .hero .orbs { display:none; } .tiles, .features { grid-template-columns: 1fr; gap: 14px; } .section { padding: 24px 14px; scroll-margin-top: 120px; } }
@media (max-width: 480px) { .tile { padding:12px; } }