:root {
  --brand: #2cc5ff;
  --accent: #1661ff;
  --dark: #0b1220;
  --muted: #8aa2b7;
  --card: #0f172a;
  --text: #e6ebf5;
  --text-dim: #c0c9dc;
  --shadow: 0 20px 40px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--dark); color: var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; scroll-behavior: smooth; }
a { color: var(--brand); text-decoration: none; }
a:hover { opacity: .9; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.btn { display:inline-flex; align-items:center; gap:10px; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #041016; border:0; padding:14px 20px; border-radius: 14px; font-weight: 800; box-shadow: var(--shadow); cursor:pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px); }
.nav { position:sticky; top:0; z-index:60; background: rgba(11,18,32,.8); backdrop-filter: blur(10px); border-bottom:1px solid rgba(255,255,255,.06); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding: 14px 0; }
.brand { display:flex; gap:14px; align-items:center; }
.brand img { height:40px; width:auto; }
.brand .name { font-weight:800; letter-spacing:.5px; }
.menu { display:flex; gap:18px; flex-wrap:wrap; }
.menu a { color: var(--text-dim); font-weight:600; padding:10px 12px; border-radius:10px; }
.menu a:hover { background: rgba(255,255,255,.06); color: var(--text); }
.hero { position:relative; overflow:hidden; }
.hero .inner { display:grid; grid-template-columns: 1.1fr .9fr; gap:30px; align-items:center; padding: 72px 0; }
.hero h1 { font-size: clamp(32px, 6vw, 58px); line-height:1.1; margin:0 0 12px; }
.hero p { color: var(--text-dim); font-size: clamp(16px, 2vw, 18px); }
.hero .card { background: radial-gradient(1200px 400px at -10% 0%, rgba(44,197,255,.17), transparent), var(--card); padding:28px; border-radius:24px; box-shadow: var(--shadow); position:relative; }
.hero .badges { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.badge { background: rgba(44,197,255,.15); border:1px solid rgba(44,197,255,.35); color:#c9f0ff; padding:8px 12px; border-radius:999px; font-weight:600; font-size:14px; }
.section { padding: 64px 0; }
.section h2 { font-size: clamp(24px, 4.8vw, 36px); margin:0 0 8px; }
.section p.lead { color: var(--text-dim); max-width: 820px; }
.grid { display:grid; gap:20px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .hero .inner { grid-template-columns: 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}
.card { background: var(--card); border:1px solid rgba(255,255,255,.06); padding:20px; border-radius:20px; box-shadow: var(--shadow); }
.card h3 { margin:8px 0; font-size: 20px; }
.card p { color: var(--text-dim); font-size: 15px; }
.packages .item img { width:100%; height:220px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#111826; }
.packages .item .meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.price { font-weight:800; }
.features .item .icon { width:48px; height:48px; border-radius:12px; background: rgba(44,197,255,.15); border:1px solid rgba(44,197,255,.35); display:grid; place-items:center; font-size:22px; }
.features .item p { margin: 4px 0 0; }
.testimonials .card blockquote { margin:0; font-size:16px; color:#e9eefc; }
.testimonials .card .who { margin-top:10px; color:#b7c4e3; font-size:14px; }
.contact .row { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; }
@media (max-width: 980px) { .contact .row { grid-template-columns: 1fr; } }
.form { display:grid; gap:12px; }
.input, textarea { background:#0c1322; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; color:var(--text); font-size:15px; }
textarea { min-height: 120px; resize: vertical; }
.footer { padding: 36px 0; color:#9fb0d0; border-top:1px solid rgba(255,255,255,.06); margin-top:40px; }
.footer .row { display:grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items:center; }
.footer .social a { margin-right: 14px; color:#cfe9ff; }
small { color: #9bbada; }