:root{ --navy:#0f1f3d; --gold:#c8a96b; --white:#ffffff; --bg:#f7f8fb; --text:#253043; --border:#e5e8ef; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:Inter,Arial,sans-serif; background:#fff; color:var(--text); line-height:1.7; } .container{ width:min(1180px,90%); margin:auto; } .header{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; } .header .container{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; } .logo{ font-weight:700; font-size:1.1rem; text-decoration:none; color:var(--navy); } .hero{ background:linear-gradient(135deg,#0f1f3d,#162f5f); color:#fff; padding:120px 0; } .hero-content{ max-width:850px; } .badge{ display:inline-block; padding:10px 16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:50px; margin-bottom:24px; } h1{ font-size:clamp(2.4rem,5vw,4.5rem); line-height:1.1; margin-bottom:24px; } .hero-text{ font-size:1.2rem; max-width:720px; margin-bottom:35px; } .section{ padding:90px 0; } .section-alt{ background:var(--bg); } h2{ font-size:2rem; color:var(--navy); margin-bottom:40px; text-align:center; } .grid{ display:grid; gap:24px; } .benefits{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .target-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .card{ background:#fff; padding:30px; border-radius:16px; border:1px solid var(--border); } .card h3{ margin-bottom:12px; color:var(--navy); } .btn{ display:inline-block; padding:16px 28px; background:var(--gold); color:#fff; text-decoration:none; border:none; border-radius:10px; font-weight:600; cursor:pointer; } .btn:hover{ opacity:.92; } .btn-small{ padding:12px 18px; } .keywords{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:30px; } .keywords span{ padding:12px 18px; background:#fff; border:1px solid var(--border); border-radius:50px; } .narrow{ max-width:850px; } .contact-form{ max-width:750px; margin:auto; display:grid; gap:16px; } .contact-form input, .contact-form textarea{ padding:16px; border:1px solid var(--border); border-radius:10px; font-size:1rem; } .faq-item{ margin-bottom:24px; } .faq-item h3{ margin-bottom:8px; color:var(--navy); } .footer{ background:var(--navy); color:#fff; text-align:center; padding:30px 0; } @media(max-width:768px){ .hero{ padding:90px 0; } .section{ padding:70px 0; } }