
:root {
  --primary: #0d2940;
  --primary-2: #1a3c59;
  --accent: #6e8ea3;
  --bg: #0b1220;
  --text: #0e1b2a;
  --muted: #5a7184;
  --radius: 18px;
}

* {box-sizing: border-box;}
html, body {margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background:#fff;}

.container {max-width: 1180px; margin: 0 auto; padding: 0 20px;}

.site-header {position: sticky; top:0; z-index: 50; background: #fff; border-bottom: 1px solid #eef2f7;}
.site-header .nav {display:flex; align-items:center; gap:16px; height:72px;}
.logo {height:34px; display:block;}
.logo.small {height:28px;}
.menu {display:flex; gap:18px; margin-left:auto;}
.menu a {text-decoration:none; font-weight:600; color:#2a4050; opacity:.9;}
.menu a:hover {opacity:1;}
.burger {display:none; margin-left:auto; font-size:22px; background:transparent; border:0; cursor:pointer;}

.cta {display:flex; gap:10px;}
.btn {padding:12px 16px; border-radius: var(--radius); border:1px solid transparent; text-decoration:none; font-weight:700; display:inline-block; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
.btn:hover {transform: translateY(-1px);}
.btn.solid {background: linear-gradient(135deg, #0d2940 0%, #6e8ea3 100%); color:#fff; box-shadow: 0 10px 30px rgba(13,41,64,.25);}
.btn.ghost {background:#fff; color:var(--primary); border-color: rgba(13,41,64,.15);}
.btn.ghost:hover {background:rgba(13,41,64,.06);}

.hero {padding: 80px 0;}
.gradient-bg {background: radial-gradient(1000px 500px at 90% -10%, rgba(13,41,64,.08), transparent 60%), #fff;}
.grid2 {display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;}
.grid3 {display:grid; grid-template-columns: .9fr .55fr .55fr; gap:30px; align-items:start;}
.hero h1 {font-size: clamp(28px, 4vw, 44px); line-height:1.05; margin:0 0 10px; color:var(--primary);}
.lead {font-size: 18px; color:#3a5568; max-width: 60ch;}
.actions {display:flex; gap:12px; margin-top:18px;}
.stats {display:flex; gap:22px; margin-top:26px;}
.stat .num {font-size: 24px; font-weight:800; color:var(--primary);}
.stat .label {display:block; font-size:14px; color:var(--muted);}

.hero-art .glass-card {border-radius: 26px; padding: 18px; background: rgba(255,255,255,.7); box-shadow: 0 20px 60px rgba(13,41,64,.15); backdrop-filter: blur(6px);}
.hero-art img {width:100%; border-radius: 18px;}

.section {padding:80px 0;}
.section.alt {background:#f7fafc;}
.section h2 {letter-spacing:.12em; font-size: 13px; color:var(--muted); text-transform:uppercase; margin:0 0 6px;}
.section h3 {font-size: clamp(22px, 3.4vw, 36px); line-height:1.15; margin:0 0 22px; color:#0d2940;}

.cards {display:grid; grid-template-columns: repeat(2,1fr); gap:18px;}
.cards.three {grid-template-columns: repeat(3,1fr);}
.card {background:#fff; border-radius: 18px; padding:20px; border:1px solid #e6eef5; box-shadow: 0 6px 18px rgba(13,41,64,.05); transition: transform .2s ease, box-shadow .2s ease;}
.card:hover {transform: translateY(-4px); box-shadow: 0 20px 40px rgba(13,41,64,.08);}
.card h4 {margin:0 0 8px;}
.card.icon::before {content:""; display:block; height:6px; background:linear-gradient(135deg, #0d2940 0%, #6e8ea3 100%); border-radius:8px; margin-bottom:14px;}

.feature-grid {display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; margin: 16px 0 0;}
.feature-grid li {list-style:none; background:#fff; border:1px dashed #d9e3ec; padding:14px 16px; border-radius: 14px; font-weight:600; color:#15344b; box-shadow: 0 3px 10px rgba(13,41,64,.04);}

.testimonials {display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.bubble {background:#fff; border:1px solid #e6eef5; padding:18px; border-radius: 16px; box-shadow: 0 8px 24px rgba(13,41,64,.06);}
.bubble footer {margin-top:10px; color:#5a7184;}

.form {display:grid; grid-template-columns: 1fr 1fr; gap:14px; max-width: 640px;}
.form label {display:flex; flex-direction:column; font-size:14px; gap:6px; color:#27475d;}
.form input {height:44px; border-radius: 12px; border:1px solid #d8e5ef; padding: 0 12px; font-size:16px;}
.form button {grid-column: 1 / -1; margin-top:4px;}
.form-note {grid-column:1/-1; font-size:12px; color:#70879a;}

.contact-box {background:#fff; border:1px solid #e6eef5; border-radius:20px; padding:20px; box-shadow: 0 8px 30px rgba(13,41,64,.07);}
.contact-box .mini h4 {margin:14px 0 4px;}
.link {color: var(--primary); font-weight:700; text-decoration:none;}

.site-footer {border-top:1px solid #edf2f7; padding:30px 0; background:#fff;}
.footer-grid {display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.legal {color:#5b7284; font-size:14px;}

.br-hide {display:none;}

/* Animations */
[data-animate] {opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease;}
[data-animate].visible {opacity:1; transform: translateY(0);}
[data-animate="fade-left"] {transform: translateX(18px);}
[data-animate="fade-left"].visible {transform: translateX(0);}
[data-animate="fade-right"] {transform: translateX(-18px);}
[data-animate="fade-right"].visible {transform: translateX(0);}

@media (max-width: 980px) {
  .grid2 {grid-template-columns: 1fr;}
  .grid3 {grid-template-columns: 1fr;}
  .cards, .cards.three {grid-template-columns: 1fr;}
  .feature-grid {grid-template-columns: repeat(2, 1fr);}
  .testimonials {grid-template-columns: 1fr;}
  .menu {display:none;}
  .burger {display:block;}
  .cta {display:none;}
  .br-hide {display:inline;}
}
