:root{
  --red:#D91E1E;
  --dark:#222;
  --mid:#6b7280;
  --light:#f5f6f7;
  --white:#fff;
}

*{ 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(--dark); background:var(--white) }
img{ max-width:100%; display:block }
a{ color:var(--red); text-decoration:none }
a:hover{ text-decoration:underline }

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

.header{ position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:50 }
.header__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px }
.brand__logo{ width:40px; height:40px; object-fit:contain; border-radius:6px }
.brand__name{ font-weight:700; color:var(--dark) }

.nav a{ margin-left:18px; font-weight:600; color:var(--dark) }
.nav .btn{ margin-left:16px }

.btn{ display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; border:1px solid var(--dark); }
.btn--primary{ background:var(--red); color:#fff; border-color:var(--red) }
.btn--primary:hover{ opacity:.9; text-decoration:none }
.btn--ghost{ background:#fff; color:var(--dark) }

.hero{ background:linear-gradient(180deg, #fff, var(--light)); border-bottom:1px solid #eee }
.hero__inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; padding:48px 0 }
.hero__text h1{ font-size:42px; line-height:1.15; margin:0 0 12px }
.hero__text p{ color:var(--mid); margin:0 0 22px }
.hero__cta{ display:flex; gap:12px }
.hero__img{ border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.08) }

.section{ padding:56px 0 }
.section--alt{ background:var(--light) }
h2{ font-size:32px; margin:0 0 22px }

.grid{ display:grid; gap:18px }
.grid--3{ grid-template-columns:repeat(3, 1fr) }
.card{ background:#fff; border:1px solid #eee; border-radius:14px; padding:18px; box-shadow:0 2px 8px rgba(0,0,0,.03) }
.card h3{ margin:0 0 6px }
.card p{ margin:0; color:var(--mid) }

.about{ display:grid; grid-template-columns:1fr 1.2fr; gap:26px; align-items:center }
.about__img{ border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.08) }
.ticks{ padding-left:18px }
.ticks li{ margin:8px 0 }

.form.card{ padding:22px }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.field{ display:flex; flex-direction:column; gap:6px }
.field--full{ grid-column:1 / -1 }
input, textarea{ padding:12px 12px; border:1px solid #dadde1; border-radius:10px; outline:none }
input:focus, textarea:focus{ border-color:var(--red); box-shadow:0 0 0 3px rgba(217,30,30,.12) }
.error{ color:#b42318; min-height:16px }
.form__actions{ display:flex; align-items:center; gap:16px; margin-top:12px }
.muted{ color:var(--mid); margin:8px 0 0 }

.alert{ margin-top:14px; padding:12px 14px; border-radius:10px; font-weight:600 }
.alert--success{ background:#e6f6ec; color:#1a7f37 }

.contacts{ display:flex; gap:24px; align-items:flex-start }
.contacts__list{ display:flex; flex-direction:column; gap:10px }
.contact{ color:var(--dark) }
.socials{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }
.socials a{ background:#fff; border:1px solid #ddd; padding:8px 12px; border-radius:999px; color:var(--dark) }
.socials a:hover{ border-color:var(--red) }

.footer{ border-top:1px solid #eee; background:#fff }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0 }

/* Avoid background scroll when mobile nav open */
html.no-scroll, html.no-scroll body{ overflow:hidden }

/* Content visibility for faster rendering of offscreen sections */
.section{ content-visibility:auto; contain-intrinsic-size: 1px 600px }

/* Shared CTA row */
.cta-row{ display:flex; gap:12px; justify-content:center; align-items:center; margin:22px 0 0; flex-wrap:wrap }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; padding:32px 0 }
  .about{ grid-template-columns:1fr }
  .grid--3{ grid-template-columns:1fr 1fr }
}
@media (max-width: 600px){
  .nav a{ margin-left:12px }
  .grid--3{ grid-template-columns:1fr }
  .form__grid{ grid-template-columns:1fr }
  .hero__text h1{ font-size:32px }
}

/* Mobile navigation */
.nav__toggle{ display:none; background:none; border:0; padding:8px; margin-left:auto; cursor:pointer }
.nav__toggle span{ display:block; width:24px; height:2px; background:var(--dark); margin:5px 0; transition:transform .2s ease, opacity .2s ease }

@media (max-width: 900px){
  .nav__toggle{ display:inline-block }
  .nav{ position:fixed; inset:60px 0 auto 0; /* below header */
        background:#fff; border-bottom:1px solid #eee; display:flex; flex-direction:column;
        gap:8px; padding:12px 4%; transform:translateY(-120%); transition:transform .2s ease; z-index:40 }
  .nav a, .nav .btn{ margin:0; padding:12px 8px }
  .nav.nav--open{ transform:translateY(0) }
}

/* Sticky mobile CTA bar */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; display:none; gap:10px; padding:10px 12px; background:#fff; border-top:1px solid #eee; box-shadow:0 -8px 20px rgba(0,0,0,.06); z-index:45; justify-content:center }
.mobile-cta .btn{ flex:1; text-align:center }
@media (max-width: 600px){
  .mobile-cta{ display:flex }
  body{ padding-bottom:64px }
}