/* Base + brand */

:root{
  --bg:#0B0F1A;
  --text:#E8EEF9;
  --muted:#A7B3C9;
  --card:#10182A;
  --border:#1C2640;
  --accent:#00C2B8; /* teal */
  --accent-2:#4C7AF1; /* indigo */
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --text:#0f172a;
    --muted:#475569;
    --card:#f8fafc;
    --border:#e2e8f0;
    --accent:#06B6D4;
    --accent-2:#4F46E5;
  }
}


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Helvetica Neue', sans-serif;
  color: var(--text);
  background: radial-gradient(1000px 700px at 10% -10%, rgba(76,122,241,0.15), transparent 60%),
              radial-gradient(800px 600px at 110% 10%, rgba(0,194,184,0.18), transparent 55%),
              var(--bg);
  line-height: 1.58;
}

.container { width: min(1100px, 92%); margin: 0 auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--bg), transparent 10%);
}
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:800; }
.brand img { width: 34px; height:34px; }
.menu { display:flex; gap:18px; }
.menu a { color:var(--text); text-decoration:none; opacity:.9; font-weight:600; }
.menu a:hover { opacity:1; }
.mobile-toggle { display:none; background:none; border:1px solid var(--border); color:var(--text); padding:8px 10px; border-radius:10px; }
@media(max-width:720px){
  .menu { display:none; }
  .mobile-toggle { display:block; }
  .menu.open { display:flex; flex-direction:column; gap:12px; padding:10px 0; }
}

/* Hero */
.hero { padding: 64px 0 28px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); line-height:1.08; margin:0 0 12px; }
.hero p.lead { color:var(--muted); font-size: clamp(16px, 2.4vw, 19px); margin:0 0 22px; }
.badge { display:inline-block; padding:6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 35%, transparent); color:#042A28; font-weight:800; letter-spacing:.04em; }
.cta { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-weight:800; text-decoration:none;
        box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cta:hover { transform: translateY(-1px);}

/* Sections & cards */
section { padding: 34px 0; }
h2 { font-size: clamp(22px, 3vw, 32px); margin:0 0 12px; }
.muted { color: var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin: 22px 0; }
.card { background: var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; }
.card h3 { margin:0 0 8px; }
.card p { margin:0; color:var(--muted);}
@media(max-width:900px){ .cards { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .cards { grid-template-columns:1fr; } }

/* Feature list */
.list { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.list .item { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); padding:14px; border-radius:12px; }
.bullet { width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); margin-top:6px; }
@media(max-width:800px){ .list { grid-template-columns:1fr; } }

/* Gallery */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; }
.gallery img { width:100%; height:100%; object-fit:cover; border-radius:12px; border:1px solid var(--border); }
@media(max-width:900px){ .gallery { grid-template-columns:1fr 1fr; } }

/* Footer */
footer { border-top:1px solid var(--border); padding:20px 0 60px; color:var(--muted); font-size:14px; }

/* Forms */
input, textarea { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text);}
label { font-weight:700; font-size:14px; }
button.btn { padding:12px 16px; border-radius:10px; border:none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-weight:800; cursor:pointer; }
button.btn:hover { transform: translateY(-1px); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:640px){ .form-grid { grid-template-columns:1fr; } }