/* --- Base --- */
* { box-sizing: border-box; }
html, body { height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: #e9e9ec;
  background: #0b0b0d;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 92vw); margin: 0 auto; }
:root{ --header-h: 72px; }
@media (max-width: 720px){ :root{ --header-h: 56px; } }

/* Skip */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:#e31b23;color:#fff;border-radius:.5rem;}

/* Header */
.header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11,11,13,.6);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.header.is-scrolled{
  background: rgba(11,11,13,.85);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:inline-flex; align-items:center; gap:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;}
.brand__logo{width:34px;height:34px; object-fit:contain;}
.brand__divider{width:1px; height:26px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border-radius:1px;}
.brand__text{opacity:.8; font-size:.78rem; letter-spacing:.18em;}
.brand--small .brand__logo{width:28px;height:28px;}

.nav{position:relative;}
.nav__list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.4rem;}
.nav__link{
  position:relative; padding:.6rem .4rem; font-size:1rem; letter-spacing:.04em;
  opacity:.88; transition:opacity .2s ease, color .2s ease;
}
.nav__link:hover, .nav__link:focus-visible{opacity:1;}
/* red underline animation from center (desktop only) */

.nav__link:hover::after, .nav__link:focus-visible::after{width:100%;}


.nav__cta{padding:.55rem .9rem; border:1px solid rgba(255,255,255,.18); border-radius:.6rem; transition: background .2s ease, color .2s ease, border-color .2s ease;}
.nav__cta:hover{background:#e31b23; border-color:#e31b23; color:#fff;}

.burger{display:none; background:none; border:none; width:40px; height:40px; position:relative;}
.burger__bar, .burger__bar::before, .burger__bar::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:#e9e9ec; border-radius:2px; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.burger__bar{top:50%; transform:translateY(-50%);}
.burger__bar::before{top:-8px;}
.burger__bar::after{top:8px;}
.burger[aria-expanded="true"] .burger__bar{ background: transparent; }
.burger[aria-expanded="true"] .burger__bar::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 720px){
  .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:10px 0; }
  .brand{ order:1; }
  .burger{ order:2; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; z-index:1001; width:44px; height:44px; }
  .nav{ order:3; }
  .nav__list{
    position:fixed; top:56px; left:0; right:0;
    display:flex; flex-direction:column; align-items:stretch;
    gap:0; padding:8px 12px;
    border-top:1px solid rgba(255,255,255,.12);
    border-radius:0 0 12px 12px;
    background:#0f0f12; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:1000;
  }
  .nav__list.is-open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__link{ padding:1rem .8rem; line-height:1.2; }
  .nav__link + .nav__link{ border-top:1px solid rgba(255,255,255,.08); }
  /* disable underline animation in panel to avoid overlap */
  
}

/* Hero */
.hero{padding: min(8vw,96px) 0;}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:min(6vw,72px); align-items:center;}
.hero__title{font-size: clamp(32px, 4.6vw, 60px); line-height:1.1; margin:0 0 .8rem; letter-spacing:-.02em;}
.muted{opacity:.65; font-weight:500; font-size: .9em;}
.hero__sub{opacity:.8; margin:0 0 1.6rem; font-size: clamp(16px, 1.6vw, 18px);}
.hero__actions{display:flex; gap:.8rem; align-items:center;}
.hero__logo{width:min(420px, 36vw); margin-inline:auto; opacity:.95; filter: drop-shadow(0 16px 28px rgba(0,0,0,.35));}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:.7rem; border:1px solid transparent; font-weight:600; letter-spacing:.01em; transition:transform .02s ease, background .2s ease, border-color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:#e31b23; color:#fff;}
.btn--primary:hover{background:#ff2a32;}
.btn--ghost{border-color:rgba(255,255,255,.18); color:#e9e9ec; background:transparent;}
.btn--ghost:hover{border-color:rgba(255,255,255,.36);}

/* Sections */
.section{padding: min(10vw, 96px) 0;}
.section--tinted{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));}
.section__title{font-size: clamp(24px, 2.6vw, 34px); margin:0 0 1.2rem;}
/* Anchor offset */
.hero, .section, #services, #benefits, #process, #faq, #contact {  }

/* Tiles */
.tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1.2rem;}
.tile{position:relative; padding:1.2rem; border-radius:1rem; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); transition: transform .12s ease, background .2s ease, border-color .2s ease;}
.tile:hover{transform: translateY(-2px); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.14);}
.tile__icon{width:36px; height:36px; margin-bottom:.6rem; color:#e31b23; opacity:.95;}
.tile__title{margin:.1rem 0 .35rem; font-size:1.1rem; font-weight:650;}
.tile__text{margin:0; opacity:.8;}

/* Benefits */
.benefit-tiles{display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; margin-top:1.2rem;}
.b-tile{padding:1.2rem; border-radius:1rem; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); transition: transform .12s ease, border-color .2s ease;}
.b-tile:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.14);}
.b-tile__icon{width:32px; height:32px; margin-bottom:.6rem; color:#e31b23;}
.b-tile__title{margin:.1rem 0 .35rem; font-weight:650;}
.b-tile__text{margin:0; opacity:.8;}

/* Timeline */
.timeline{position:relative; list-style:none; padding:0; margin:1.4rem 0 0; display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem;}
.timeline::before{content:""; position:absolute; left:calc(16.66%); right:calc(16.66%); top:24px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06));}
.t-step{position:relative; display:flex; gap:.8rem; align-items:flex-start;}
.t-dot{flex:0 0 32px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#e31b23; color:#fff; font-weight:700;}
.t-body{display:grid; gap:.25rem;}
.t-title{margin:0; font-weight:650;}
.t-text{margin:0; opacity:.8;}

@media (max-width: 1024px){
  .tiles{grid-template-columns: repeat(2, 1fr);}
  .benefit-tiles{grid-template-columns: repeat(2, 1fr);}
  .timeline{grid-template-columns: 1fr; gap:1rem;}
  .timeline::before{left:24px; right:auto; width:2px; height:calc(100% - 16px); top:16px; background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));}
  .t-step{align-items:center;}
  .t-dot{margin-left:0;}
}

/* FAQ */
.faq__item{border:1px solid rgba(255,255,255,.08); border-radius:.9rem; padding:1rem; background:rgba(255,255,255,.01); margin-bottom:.6rem;}
.faq__item > summary{cursor:pointer; font-weight:600;}
.faq__item[open]{background:rgba(255,255,255,.02);}

/* Form */
.form__grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem;}
.field{display:grid; gap:.35rem;}
.field--full{grid-column: 1/-1;}
.field__label{font-size:.9rem; opacity:.9;}
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:.7rem; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02); color:#fff; outline:none;
}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.45);}
input:focus, textarea:focus{border-color:rgba(255,255,255,.36);}
.form__note{opacity:.6; font-size:.9rem; margin:.8rem 0 0;}
.form__actions{display:flex; align-items:center; gap:.9rem; margin-top:1rem;}
.form__status{opacity:.85; min-height:1.2em;}

/* Footer */
.footer{border-top: 1px solid rgba(255,255,255,.06); padding: 20px 0 40px;}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.footer__nav{display:flex; gap:1rem; opacity:.85;}
.footer__nav a:hover{opacity:1;}
.footer__meta{display:flex; gap:1rem; opacity:.85;}

@media (max-width: 720px){
  .form__grid{grid-template-columns: 1fr;}
  .tiles{grid-template-columns: 1fr;}
  .benefit-tiles{grid-template-columns: 1fr;}
  .hero__grid{grid-template-columns: 1fr; gap: 32px;}
  .hero__right{order:-1; display:flex; align-items:center; justify-content:center;}
  .hero__logo{width:min(72vw, 520px);}
}

@media (max-width: 720px){
  /* Better mobile menu spacing */
  .nav__list{
    gap:0;
    padding: 12px 0;
  }
  .nav__link{
    display:block;
    padding: 1.1rem 1.2rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav__link:last-child{ border-bottom:none; }
}

/* --- Mobile menu polish (spacing, readability) --- */
@media (max-width: 720px){
  .nav__list{
    gap: 10px;                 /* space between items */
    padding: 14px 16px 16px;   /* comfortable panel padding */
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
  }
  .nav__link{
    display:block;
    padding: 14px 14px;        /* larger touch target */
    font-size: 1.05rem;
    letter-spacing: .02em;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    line-height: 1.25;
  }
  /* remove previous separator lines */
  .nav__link + .nav__link{ border-top: none; }
  /* keep underline animation disabled inside panel */
  
  /* CTA stands out a bit more */
  .nav__cta{
    background:#e31b23; border-color:#e31b23; color:#fff;
    text-align:center;
  }
}

/* --- Mobile form: prevent zoom on focus (iOS/Safari requires >=16px) --- */
@media (max-width: 720px){
  input, textarea, select { font-size: 16px; }
  input[type="tel"], input[type="text"], input[type="email"], input[type="search"]{
    font-size: 16px;
  }
  /* Slightly larger touch targets for comfort */
  input, textarea{ padding: 14px 14px; }
}

/* --- Footer polish --- */
.footer__inner{
  flex-wrap:wrap;
}
.footer__nav a{ font-size:.95rem; }
.footer__meta{ font-size:.9rem; }

@media (max-width: 720px){
  .footer__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:1rem;
  }
  .footer__nav{
    flex-direction:column;
    gap:.6rem;
  }
  .footer__meta{
    flex-direction:column;
    gap:.4rem;
  }
  .footer__nav a, .footer__meta span, .footer__meta a{
    display:block;
  }
}

/* --- Footer mobile refinement --- */
@media (max-width: 720px){
  .footer{ padding: 24px 0 48px; }
  .footer__inner{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 16px;
    text-align: center;
  }
  .footer .brand{ margin-bottom: 4px; }
  .footer__nav{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    opacity: 1; /* better readability on mobile */
  }
  .footer__nav a{
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
  }
  .footer__meta{
    display: grid;
    grid-auto-flow: row;
    justify-items: center;
    gap: 6px;
    opacity: .9;
  }
}

/* --- Footer simplified (no nav) --- */
.footer__inner{ justify-content: space-between; }
@media (max-width: 720px){
  .footer__inner{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* --- Simplified footer --- */
.footer__inner{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; text-align:center; }
.footer__meta{ opacity:.85; font-size:.95rem; }
@media (max-width: 720px){
  .footer__inner{ flex-direction:column; gap:6px; }
}


/* === Design Tokens (Premium Minimal) === */
:root{
  --bg:#0B0B0D; --text:#E9E9EC; --text-dim:rgba(233,233,236,.72);
  --accent:#E31B23; --accent-hover:#FF2A32;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.18);
  --glass-hi:rgba(255,255,255,.06); --glass-lo:rgba(255,255,255,.01);
  --radius:12px; --radius-sm:10px; --container:1120px; --gap:16px;
  --shadow:0 12px 40px rgba(0,0,0,.40);
  --fs-base:17px; --fs-mobile:16px;
}
@media (max-width:720px){ :root{ --fs-base: var(--fs-mobile);} }


/* Header contrast + burger visibility */
.header .nav__link{ color: var(--text); opacity:.95; }
.header .nav__link:hover{ opacity:1; }
.burger__bar, .burger__bar::before, .burger__bar::after{ background: var(--text); }
.header{ background: rgba(11,11,13,.80); }
.header.is-scrolled{ background: rgba(11,11,13,.90); }

/* Hero band + white card */
.hero{ padding:0; }
.hero__band{ background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); position: relative; }
.hero__band::before{ content:""; position:absolute; inset:0; background: radial-gradient(80% 100% at 100% 0%, rgba(227,27,35,.10), transparent 60%); pointer-events:none; }
.hero__band-inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap:min(6vw,72px); align-items:center; padding: min(8vw, 96px) 0; }
.hero__card{ background:#fff; color:#0b0b0d; border-radius: var(--radius); box-shadow: var(--shadow); border:1px solid #e9e9ef; padding: 28px; max-width: 720px; }
.hero__card .btn--ghost{ border-color:#d0d0d8; color:#111; }
.hero__bullets{ margin:.6rem 0 0; padding:0; list-style:none; display:grid; grid-template-columns: repeat(3, auto); gap:1rem; opacity:.85; }
.hero__bullets li{ display:flex; align-items:center; gap:.45rem; }
.hero__bullets li::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--accent); display:inline-block; }
.hero__actions{ display:flex; gap:.6rem; margin-top:.8rem; }
.hero__note{ margin:.4rem 0 0; }
.hero__visual{ display:flex; align-items:center; justify-content:center; }
.hero__visual-box{ width:min(420px, 36vw); height:min(300px, 28vw); border-radius: var(--radius); background: rgba(255,255,255,.03); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--text-dim); }

/* Trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: rgba(255,255,255,.02); }
.trust__row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 0; font-weight:600; letter-spacing:.02em; opacity:.95; }
.trust__item{ padding:10px 12px; border:1px solid var(--line); border-radius: 10px; text-align:center; background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); }

/* Pricing / Cases / Reviews */
.section__lead{ opacity:.75; margin-top:.3rem; }
.cards{ display:grid; gap:1rem; margin-top:1.2rem; }
.cards--pricing{ grid-template-columns: repeat(4, 1fr); }
.card{ padding:1.2rem; border-radius: var(--radius); border:1px solid var(--line); background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); box-shadow: var(--shadow); display:grid; gap:.6rem; align-content:start; }
.card__title{ margin:.1rem 0; font-weight:650; }
.card__price{ margin:0 0 .3rem; font-size:1.1rem; opacity:.95; }
.card__list{ margin:0 0 .6rem 1rem; opacity:.85; }
.cards--cases{ grid-template-columns: repeat(3, 1fr); }
.case{ border:1px solid var(--line); border-radius: var(--radius); padding: .9rem; background: linear-gradient(180deg, var(--glass-hi), var(--glass-lo)); box-shadow: var(--shadow); }
.case__thumb{ height:140px; border-radius: 10px; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; opacity:.75; margin-bottom:.5rem; }
.case__title{ margin:.2rem 0 .1rem; }
.case__meta{ margin:0; opacity:.8; }
.cards--reviews{ grid-template-columns: repeat(3, 1fr); }
.review{ margin:0; padding:1rem; border:1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.02); }
.review p{ margin:0 0 .4rem; }
.review cite{ opacity:.8; font-style: normal; }

/* Selector */
.selector{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0 0; flex-wrap:wrap; }
.selector select{ appearance:none; padding:.7rem .9rem; border-radius:10px; border:1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); }
.selector button{ white-space:nowrap; }

/* Responsive */
@media (max-width:1024px){
  .hero__band-inner{ grid-template-columns: 1fr; }
  .cards--pricing{ grid-template-columns: repeat(2, 1fr); }
  .cards--cases{ grid-template-columns: repeat(2, 1fr); }
  .cards--reviews{ grid-template-columns: 1fr; }
}
@media (max-width:720px){
  .hero__card{ padding:20px; }
  .hero__bullets{ grid-template-columns: 1fr; }
  .trust__row{ grid-template-columns: 1fr 1fr; }
  .hero__visual-box{ width:88vw; height:44vw; }
}

/* SVG brand & hero polish */
.brand .brand__logo img, .brand .brand__logo svg{ display:block; }
.hero__card{ background:#f4f5f7; } /* off-white */
.hero__bullets .i{ margin-right:.35rem; opacity:.9; }
.hero__bullets li{ gap:.35rem; }

/* Fix: remove legacy bullet dots specifically in hero list */
.hero__bullets li::before{ content:none !important; display:none !important; }
/* Scale icons for proper proportion */
.hero__bullets .i{ width:22px; height:22px; flex:0 0 22px; }
@media (max-width: 720px){
  .hero__bullets .i{ width:18px; height:18px; flex:0 0 18px; }
}
/* Logo sizing on the right visual */
.hero__logo{ width:min(320px, 36vw); height:auto; opacity:.95; }

.hero__card .hero__title{ color:#0b0b0d; }
.hero__card .hero__sub{ color:#202028; opacity:.85; }


/* Bullet icons display + remove legacy dots */
.hero__bullets li::before{ content:none !important; display:none !important; }
.hero__bullets .i{ display:inline-block; width:22px; height:22px; flex:0 0 22px; vertical-align:-3px; opacity:.95; }
@media (max-width: 720px){
  .hero__bullets .i{ width:18px; height:18px; flex:0 0 18px; vertical-align:-2px; }
}
/* Ensure hero logo visibility */
.hero__logo{ width:min(340px, 36vw); height:auto; opacity:.98; }


/* Scoped premium styling for hero logo */
.hero .hero__visual{ position:relative; }
.hero .hero__visual::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(40% 40% at 50% 50%, rgba(227,27,35,.25), transparent 60%);
  filter: blur(18px); opacity:.45;
}
.hero .hero__logo{
  width:min(300px, 34vw); height:auto;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)) drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
@media (max-width:720px){
  .hero .hero__logo{ width:min(240px, 62vw); }
  .hero .hero__visual::before{ filter: blur(14px); opacity:.38; }
}

.hero .hero__visual-box{ background:transparent !important; border:none !important; box-shadow:none !important; }

/* Hero bullets: responsive grid (no horizontal scroll) */
.hero .hero__bullets{
  margin:.8rem 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.6rem .6rem;
}
.hero .hero__bullets li{
  display:inline-flex; align-items:center; gap:.4rem; justify-content:center;
  padding:.48rem .8rem; border:1px solid #dfe3ea; background:#eef1f5; color:#0f1115;
  border-radius:999px; font-weight:600; font-size:1rem; min-height:40px; white-space:nowrap;
}
.hero .hero__bullets .i{ width:20px; height:20px; flex:0 0 20px; }
.hero .hero__bullets li::before{ content:none !important; display:none !important; }
@media (max-width:1024px){ .hero .hero__bullets{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .hero .hero__bullets{ grid-template-columns: 1fr; } }

/* Hide the original trust band near hero to avoid duplication on first screen */
.hero + .trust, .hero .trust{ display:none !important; }

/* Hero advantages 2x2 grid */
.hero__bullets{
  display:grid; grid-template-columns: repeat(2,1fr); gap:.6rem .6rem;
  margin:.8rem 0 0; padding:0; list-style:none;
}
.hero__bullets li{
  display:flex; align-items:center; gap:.4rem; padding:.5rem .8rem;
  border:1px solid #dfe3ea; background:#eef1f5; color:#0f1115;
  border-radius:999px; font-weight:600; font-size:1rem;
}
.hero__bullets .i{ width:20px; height:20px; flex:0 0 20px; }
.hero__bullets li::before{ content:none !important; }

@media (max-width:720px){
  .hero__bullets{ grid-template-columns: 1fr; }
}

/* Hero car photo */
.hero__car{ width:min(420px,40vw); height:auto; border-radius:14px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); }
.hero__visual-box{ background:transparent !important; border:none !important; box-shadow:none !important; }


/* === FIX: Hero advantages reliable 2x2 grid (no overlap) === */
.hero .hero__bullets{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px 16px !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  align-items: stretch !important;
  align-content: start !important;
}
.hero .hero__bullets li{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border: 1px solid #dfe3ea !important;
  background: #eef1f5 !important;
  color: #0f1115 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  white-space: normal !important; /* allow wrapping */
  min-height: 44px !important;
  box-sizing: border-box !important;
}
.hero .hero__bullets .i{
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
}
.hero .hero__bullets li::before{ content:none !important; display:none !important; }

@media (max-width: 1024px){
  .hero .hero__bullets{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px){
  .hero .hero__bullets{ grid-template-columns: 1fr !important; }
}

/* Hero: big brand logo on desktop */
.hero__visual{ display:flex; align-items:center; justify-content:center; }
.hero__logo--hero{
  width:min(560px, 46vw);
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.45)) drop-shadow(0 4px 10px rgba(0,0,0,.25));
  opacity:.98;
}

}


/* Desktop: pull hero up slightly and center nicely */
.hero__band-inner{
  padding: clamp(24px, 4vw, 48px) 0;
  display: grid;
  align-items: center;
}
@media (min-width: 901px){
  .hero__band-inner{ min-height: calc(100vh - 90px); align-items: center; }
}
/* Mobile: stack hero, card first, logo second with generous spacing */
@media (max-width: 900px){
  .hero__band-inner{ display:flex; flex-direction:column; align-items:center; row-gap: 40px; }
  .hero__card{ order:1; padding: 24px 16px; }
  .hero__visual{ order:2; margin-top: 8px; }
  .hero__logo--hero{ width: min(260px, 62vw); }
}


/* Header nav compaction for more items */
.header .nav__list{ display:flex; gap: 14px; flex-wrap: wrap; }
.header .nav__link{ font-size: 15px; padding: 8px 0; }
@media (max-width: 1200px){
  .header .nav__link{ font-size: 14px; }
  .header .nav__list{ gap: 12px; }
}
/* Burger menu spacing: consistent first item offset */
@media (max-width: 900px){
  .nav__list li{ margin: 10px 0; }
  .nav__list li:first-child{ margin-top: 10px; }
}

/* Underline strictly by .active */
.header 
.header 


/* Hero adjustments */
.hero__band-inner{
  padding: clamp(16px, 2vw, 28px) 0;
  display: grid;
  align-items: start;
}
@media (min-width: 901px){
  .hero__band-inner{ min-height: calc(100vh - 120px); align-content: start; }
}
@media (max-width: 900px){
  .hero__band-inner{ display:flex; flex-direction:column; align-items:center; row-gap: 48px; }
  .hero__card{ order:1; padding: 24px 16px; }
  .hero__visual{ order:2; margin-top: 8px; }
  .hero__logo--hero{ width: min(260px, 62vw); }
}

/* Burger list spacing uniform */
@media (max-width: 900px){
  .nav__list li{ margin: 12px 0; }
  .nav__list li:first-child{ margin-top: 12px; }
}


/* === Desktop hero alignment fix === */
@media (min-width: 901px){
  .hero__band-inner{
    min-height: calc(100vh - var(--header-h) - 10px);
    display: grid;
    align-content: center;
    align-items: center;
    padding: clamp(8px, 1.6vh, 16px) 0;
  }
}


/* === Nav underline: show on .active === */
.header 


/* === CTA looks confident, not "зажатая" === */
.nav__link.nav__cta{
  padding: .55rem 1rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  margin-left: .6rem;
}
.nav__link.nav__cta:hover{ background: rgba(255,255,255,.06); }
@media (max-width: 1200px){
  .nav__link.nav__cta{ padding:.5rem .9rem; }
}


/* === Mobile menu panel tidy === */
@media (max-width: 720px){
  .nav__list{
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 20px;
  }
  .nav__list li{ width:100%; }
  .nav__list li + li{ border-top:1px solid rgba(255,255,255,.08); }
  .nav__link{ display:block; padding: 14px 18px; font-size: 18px; }
}


/* === Mobile hero: no overlap between card and logo === */
@media (max-width: 900px){
  .hero__band-inner{ display:flex; flex-direction:column; align-items:center; row-gap: 48px; }
  .hero__card{ order:1; position:relative; z-index:2; }
  .hero__visual{ order:2; position:relative; z-index:1; margin-top: 8px; }
  .hero__logo--hero{ width:min(260px,62vw); }
}

/* Hygiene: consistent spacing in mobile menu */
@media (max-width: 720px){
  .nav__list li{ margin: 12px 0; }
  .nav__list li:first-child{ margin-top: 12px; }
  .nav__list li:last-child{ margin-bottom: 12px; }
}


/* === Mobile hero pull-up & clean spacing === */
@media (max-width: 900px){
  .hero__band-inner{
    padding-top: 8px !important;  /* pull closer to header */
    row-gap: 36px !important;     /* keep airy but tighter */
    align-items: stretch !important;
    justify-content: flex-start !important;
  }
  .hero__card{
    margin-top: 0 !important;
    padding: 22px 16px !important;
  }
  .hero__visual{
    margin-top: 4px !important;
  }
  .hero__logo--hero{
    width: min(260px, 62vw) !important;
    margin-left: auto !important;
    margin-right: auto !important; /* keep centered under card */
  }
}


/* === Mobile burger menu: clean buttons, no divider lines === */
@media (max-width: 720px){
  .nav__list{
    align-items: stretch !important;
    text-align: left !important;
    padding: 16px 14px !important;
    gap: 8px !important;
  }
  .nav__list li{ margin: 0 !important; }
  .nav__list li + li{ border-top: none !important; } /* remove ugly lines */
  .nav__link{
    display: block !important;
    padding: 14px 14px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    background: transparent !important;
  }
  .nav__link:hover{ background: rgba(255,255,255,.06) !important; }
  .nav__link:active{ background: rgba(255,255,255,.10) !important; }
}


/* === Pricing cards alignment === */
#pricing .cards.cards--pricing{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

#pricing .card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 18px 16px;
  min-height: 320px;
}

#pricing .card__title{
  line-height: 1.2;
  /* reserve space for up to 2 lines to keep all titles equal height */
  min-height: calc(1.2em * 2);
  margin-bottom: 10px;
}

#pricing .card__price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  /* keep single-line height consistent */
  min-height: 1.2em;
  margin-bottom: 10px;
  opacity: .95;
}

/* feature list grows to fill space; consistent top/bottom margins */
#pricing .card__list{
  margin: 6px 0 12px 18px; /* slight indent for bullets */
  flex: 1 1 auto;          /* take remaining space so button sticks to bottom */
}
#pricing .card__list li{ margin: 4px 0; }

/* CTA strictly pinned to bottom inside the card */
#pricing .card .btn{
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}

/* Responsive fine-tune */
@media (max-width: 900px){
  #pricing .card{
    min-height: 280px;
    padding: 16px 14px;
  }
  #pricing .card .btn{ padding: .8rem 1rem; }
}


/* === Mobile: pricing cards single column === */
@media (max-width: 720px){
  #pricing .cards.cards--pricing{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #pricing .card{ width: 100% !important; }
}




#cases .case-card{
  display:flex;
  flex-direction:column;
  background:#111;
  border-radius:12px;
  overflow:hidden;
}
#cases .case-card__image img{ width:100%; display:block; }
#cases .case-card__content{ padding:16px; }
#cases .case-card .btn{ margin-top:auto; display:inline-block; text-align:center; }


/* Cases images: no cropping for vertical photos; keep aspect ratio */
#cases .case-card__image{
  background: #0d0d0d;
}
#cases .case-card__image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
#cases .case-card{
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}


/* === Case button as real button === */
#cases .case-card .btn{
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  background: #d61f2c; /* фирменный акцент (можно поправить под твой) */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .2px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 20px rgba(214,31,44,.25);
}
#cases .case-card .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(214,31,44,.35); }
#cases .case-card .btn:active{ transform: translateY(0); box-shadow:none; background:#bb1b26; }


/* === Reviews grid & cards === */
.section--reviews{ padding-top: 48px; padding-bottom: 48px; }
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px){
  .reviews-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .reviews-grid{ grid-template-columns: 1fr; }
}
.review-card{
  background:#111;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.review-card__header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.review-card .avatar{
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#1b1b1b; color:#fff; font-weight:700;
  letter-spacing:.3px;
}
.review-card .name{ font-weight:700; margin-bottom:2px; }
.review-card .car{ opacity:.7; font-size: .95rem; }
.review-card__text{ margin-top:8px; line-height:1.5; opacity:.9; }


/* === Cases: uniform images (16:9) and aligned CTA === */
#cases .case-card{
  display:flex;
  flex-direction:column;
  background:#111;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
#cases .case-card__image{
  aspect-ratio: 16/9;
  width:100%;
  overflow:hidden;
  background:#0d0d0d;
}
#cases .case-card__image img{
  width:100%;
  height:100%;
  object-fit: cover;   /* одинаковая высота, без «длинных» фото */
  display:block;
}
#cases .case-card__content{
  display:flex;
  flex-direction:column;
  padding:16px;
  gap:10px;
  flex: 1 1 auto;
}
#cases .case-card .card__list{ flex:1 1 auto; }
#cases .case-card .btn{
  margin-top:auto;
  align-self:flex-start;
}


/* === Cases grid 2x2 desktop/tablet, 1x mobile === */
#cases .cards.cards--cases { 
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:24px;
}
@media (max-width: 599px){
  #cases .cards.cards--cases { grid-template-columns: 1fr; }
}


/* === Cases: equalized text layout === */
#cases .case-card__content{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#cases .case-card .card__title{
  line-height: 1.25;
  min-height: calc(1.25em * 2); /* резерв под 2 строки */
}
#cases .case-card .card__subtitle{
  opacity: .85;
  line-height: 1.25;
  min-height: calc(1.25em * 1); /* резерв под 1 строку */
}
#cases .case-card .card__list{
  flex: 1 1 auto; /* тянется, выравнивая кнопку внизу */
}
#cases .case-card .btn{
  margin-top: auto;
}

/* Hide car finder temporarily */
#services .car-finder, #services .car-select, #services .car-cta { display:none !important; }


/* === Smooth scroll via CSS + header offset === */

/* CSS-only smooth scrolling */
/* Hide car-finder remnants if any */
#services .car-finder, #services .car-select, #services .vehicle-select, 
#services .brand-model, #services .car-cta { display:none !important; }


/* Anchor offset so fixed header doesn't cover section titles (native scroll only) */
.section, #hero, #services, #benefits, #process, #pricing, #cases, #reviews, #faq, #contact {
  scroll-margin-top: 88px;
}
@media (max-width: 720px){
  .section, #hero, #services, #benefits, #process, #pricing, #cases, #reviews, #faq, #contact {
    scroll-margin-top: 72px;
  }
}


/* === Premium polish: unified layout, buttons, nav hover, cards, reveal === */

/* Layout container */
.container{ max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Section spacing */
.section{ padding: 100px 0; }
@media (max-width: 720px){
  .section{ padding: 60px 0; }
}

/* Headings rhythm */
.section h2{ margin-bottom: 40px; line-height: 1.2; letter-spacing: 0.02em; }

/* Typography soft whites on dark */
body{ color: #eaeaea; }
.section--light{ background:#fff; color:#222; }
.section--dark{ background:#0e0e0f; color:#eaeaea; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 20px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.btn:active{ transform: translateY(0); box-shadow: 0 4px 10px rgba(0,0,0,.18); }

/* Nav underline hover */
.nav__link{
  position: relative;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
  opacity:.85;
}
.nav__link:hover::after{ transform: scaleX(1); }

/* Mobile nav spacing and centering */
@media (max-width: 720px){
  .nav__list{ gap: 18px; align-items:center; text-align:center; }
  .nav__link{ font-size: 18px; }
}

/* Cards (pricing/cases) equal height */
.card{
  display:flex; flex-direction:column;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow:hidden;
}
.card__media img{ width:100%; height:auto; display:block; }
.card__content{ flex: 1 1 auto; display:flex; flex-direction:column; gap:12px; padding: 16px; }
.card__title{ line-height:1.25; min-height: calc(1.25em * 2); }
.card__subtitle{ opacity:.85; line-height:1.25; min-height: calc(1.25em * 1); }
.card__list{ flex: 1 1 auto; }
.card .btn{ margin-top:auto; }

/* Reveal animations (light) */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform: none; }


/* === Fix: remove black gap under fixed header on desktop === */
body{ margin-top: 0; }
.header{ top:0; }
.hero.section{ padding-top: clamp(40px, 6vh, 80px); } /* was 100px; make hero tighter on desktop */
@media (max-width: 720px){
  .hero.section{ padding-top: 60px; } /* keep mobile consistent */
}


/* === Hard fix: remove black gap under fixed header on desktop === */
html, body { margin:0; padding:0; }
.header { margin-bottom: 0; top: 0; }
.section:first-of-type { padding-top: 48px; } /* tighten the very first section */
.hero.section { padding-top: 32px !important; } /* stronger cut for hero */
.hero .container, .hero .content { margin-top: 0; padding-top: 0; }
.hero h1, .hero h2, .hero p:first-child { margin-top: 0; }

/* If any spacer exists right under header — collapse it */
.header + .spacer, .header + .offset, .header + .pad { display:none !important; height:0 !important; margin:0 !important; padding:0 !important; }

/* === Mobile buttons in the white hero block: full-width & symmetric === */
@media (max-width: 720px){
  .hero .btn-group{ display:flex; flex-direction: column; gap: 12px; align-items: stretch; }
  .hero .btn-group .btn{ width: 100%; }
  /* Ensure consistent spacing inside the white block */
  .hero.section { padding-top: 48px !important; padding-bottom: 56px; }
}

/* Ensure sections have consistent bottom spacing too */
.section { padding-bottom: 100px; }
@media (max-width:720px){ .section { padding-bottom: 60px; } }


/* === Definitive fix: zero black gap under header on desktop === */
@media (min-width: 901px){
  .hero__band-inner{
    min-height: auto !important;
    align-content: start !important;
    align-items: start !important;
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
}

/* === Mobile hero buttons: full-width & symmetric (correct selector) === */
@media (max-width: 720px){
  .hero__actions{
    display:flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .hero__actions .btn{ width: 100% !important; }
}


/* === One-shot fix: remove perceived top gap under sticky header (keep original background) === */
@media (min-width: 901px){
  .hero__band-inner{
    min-height: calc(100vh - var(--header-h)) !important;
    padding-top: 0 !important;
    align-items: center !important;
    align-content: center !important;
  }
}
/* Normalize any residual top margins in the first elements within hero */
#hero .hero__card > :first-child,
#hero .hero__visual > :first-child{ margin-top: 0 !important; }


/* === Live gap fix without changing hero background === */
:root { --header-h: 72px; } /* JS will overwrite at runtime */

@media (min-width: 901px){
  /* Primary: hero fills viewport minus real header height */
  #hero .hero__band-inner{
    min-height: calc(100vh - var(--header-h)) !important;
    display: grid !important;
    align-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Fallback to fully eliminate any 1-2px visual seam:
     pull hero up under the sticky header and restore padding */
  #hero{
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
  }
}

/* Prevent top-margin collapse inside hero */
#hero h1:first-child, #hero h2:first-child, #hero p:first-child { margin-top: 0 !important; }


/* === Header CTA alignment (Desktop) === */
@media (min-width: 901px){
  .header .btn, .header .button, .header .cta {
    align-self: center !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    height: auto !important;
  }
  .header .nav__list { align-items: center !important; }
}

/* === Remove underline/active bar inside mobile burger === */
@media (max-width: 900px){
  .nav__list.is-open .nav__link::after { display: none !important; transform: none !important; }
  .nav__link { text-decoration: none !important; }
}

/* === Mobile hero top-gap fix (same technique as desktop) === */
@media (max-width: 900px){
  #hero{
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
  }
}


/* === Desktop CTA fits header height & centers === */
@media (min-width: 901px){
  .header { display: flex; align-items: center; }
  .header .nav__list { display: flex; align-items: center !important; }
  .header .btn, .header .button, .header .cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 16px !important;
    line-height: 1.1 !important;
    font-size: 14px !important;
    margin: 0 !important;
  }
}

/* === Mobile: kill the thin black seam under header === */
@media (max-width: 900px){
  /* Pull hero exactly under header with +1px compensation */
  #hero{
    margin-top: calc((var(--header-h) + 1px) * -1) !important;
    padding-top: calc(var(--header-h) + 1px) !important;
  }
  /* If the seam is the header border/shadow — neutralize it on mobile */
  .header{ box-shadow: none !important; border-bottom: none !important; }
  /* Ensure hero is above any background bleed */
  #hero{ position: relative; z-index: 1; }
}


/* === Desktop: keep CTA inside header and perfectly aligned === */
@media (min-width: 901px){
  .header{ display:flex; }
  .header__inner{ display:flex; align-items:center; }
  .header .nav__list{ display:flex; align-items:center; }
  .nav__link.nav__cta{
    display:inline-flex;
    align-items:center; justify-content:center;
    height: 40px; padding: 0 16px;
    line-height: 1.1; font-size: 14px;
    margin: 0; border-radius: 10px;
  }
  /* CTA doesn't show hover underline beyond header */
  .nav__link.nav__cta::after{ display:none !important; }
  /* Clip any stray underline from other links at header bottom */
  .header{ overflow: hidden; }
}

/* === Mobile: eliminate remaining thin line under sticky header === */
@media (max-width: 900px){
  #hero{
    margin-top: calc((var(--header-h) + 2px) * -1) !important;
    padding-top: calc(var(--header-h) + 2px) !important;
  }
  .header{ box-shadow: none !important; border-bottom: 0 !important; }
}

/* === Mobile: give logo breathing room above white block below === */
@media (max-width: 900px){
  .hero__band-inner{ padding-bottom: 24px !important; }
  .hero__visual{ margin-bottom: 12px; }
}


/* === Desktop header CTA: visually smaller, with breathing space === */
@media (min-width: 901px){
  .header{ display:flex; align-items:center; }
  .header__inner{ display:flex; align-items:center; }
  .header .nav__list{ display:flex; align-items:center; }
  .nav__link.nav__cta{
    display:inline-flex;
    align-items:center; justify-content:center;
    height: auto;                   /* allow natural height */
    padding: 6px 18px;              /* smaller vertical padding */
    font-size: 15px;
    line-height: 1.2;
    border-radius: 8px;
    margin: 0;
  }
}

/* === Mobile hero: ensure first screen fits (no overflow) === */
@media (max-width: 900px){
  #hero{
    /* keep existing top compensation from previous patches */
    margin-top: calc((var(--header-h) + 2px) * -1) !important;
    padding-top: calc(var(--header-h) + 2px) !important;
  }
  #hero .hero__band-inner{
    min-height: calc(100vh - var(--header-h)) !important; /* fit viewport */
    display: grid !important;
    align-content: center !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    row-gap: 12px !important;
  }
  /* Tighten title/subtitle spacing */
  #hero .hero__title{ margin-bottom: 10px !important; }
  #hero .hero__subtitle{ margin-bottom: 8px !important; }
  /* Compact actions: stacked but slimmer buttons */
  #hero .hero__actions{ display:flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  #hero .hero__actions .btn,
  #hero .hero__actions .nav__link{ padding: 10px 14px !important; font-size: 14px !important; line-height: 1.2 !important; }
  /* Prevent logo from eating too much height */
  #hero .hero__visual img{ max-height: 28vh; height: auto; width: auto; object-fit: contain; }
}


/* === ONE-SHOT FIX PACK === */

/* 1) Desktop CTA — visually smaller, guaranteed inner spacing */
@media (min-width: 901px){
  .header{ display:flex; align-items:center; }
  .header__inner{ display:flex; align-items:center; }
  .header .nav__list{ display:flex; align-items:center; }
  .nav__link.nav__cta{
    display:inline-flex !important;
    align-items:center !important; justify-content:center !important;
    height:auto !important;
    padding: 6px 16px !important;
    font-size: 15px !important; line-height: 1.2 !important;
    border-radius: 8px !important;
    margin: 0 !important;
  }
}

/* 2) Mobile hero — perfectly centered & fully in screen */
@media (max-width: 900px){
  #hero{
    margin-top: calc((var(--header-h) + 2px) * -1) !important;
    padding-top: calc(var(--header-h) + 2px) !important;
  }
  #hero .hero__band{ margin: 0 auto !important; }
  #hero .hero__band-inner{
    min-height: calc(100vh - var(--header-h)) !important;
    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    padding: 12px !important;
    row-gap: 10px !important;
  }
  /* Center the white card and limit width */
  #hero .hero__card{
    margin: 0 auto !important;
    max-width: 560px !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* Logo spacing from the white card below */
  #hero .hero__visual{ margin-bottom: 14px !important; }
  #hero .hero__visual img{ max-height: 24vh !important; height: auto !important; object-fit: contain !important; }
  /* Actions compact */
  #hero .hero__actions{ display:flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  #hero .hero__actions .btn, #hero .hero__actions .nav__link{ padding: 10px 14px !important; font-size: 14px !important; }
}

/* 3) Kill any accidental horizontal shift on mobile (no right drift) */
@media (max-width: 900px){
  html, body { overflow-x: hidden !important; }
  #hero, #hero .hero__band, #hero .hero__band-inner, #hero .hero__card { margin-left: auto !important; margin-right: auto !important; }
  .container{ margin-left: auto !important; margin-right: auto !important; }
}


/* === Mobile hero refinement: smaller white block, more spacing below logo === */
@media (max-width: 900px){
  #hero .hero__band-inner{
    min-height: calc(92vh - var(--header-h)) !important; /* reduce to 92% of viewport */
    max-width: 92% !important; /* narrower for smaller feel */
    padding: 10px !important;
  }
  #hero .hero__card{
    transform: scale(0.95); /* visually shrink */
  }
  #hero .hero__visual{ margin-bottom: 22px !important; } /* more gap below logo */
  #hero .hero__visual img{ max-height: 22vh !important; }
}


/* === UNIFORM SECTION SPACING (explicit IDs) === */
#services, #benefits, #process, #pricing, #cases, #reviews, #faq, #contact{
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
@media (max-width: 900px){
  #services, #benefits, #process, #pricing, #cases, #reviews, #faq, #contact{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
/* Reduce any extra top margins on the first child inside sections */
#services > *:first-child,
#benefits > *:first-child,
#process > *:first-child,
#pricing  > *:first-child,
#cases    > *:first-child,
#reviews  > *:first-child,
#faq      > *:first-child,
#contact  > *:first-child{
  margin-top: 0 !important;
}



@media (max-width: 900px){
  .sublogo img{
    display:block;
    margin: 26px auto 30px;
    max-width: 76vw;
    height: auto;
  }
}

/* Anchor elevation for pricing & cases under sticky header */
#pricing, #cases { scroll-margin-top: calc(var(--header-h) - 18px); }
@media (min-width: 1200px){
  #pricing, #cases { scroll-margin-top: calc(var(--header-h) - 26px); }
}


/* === FINAL MOBILE HERO LOGO FIX (equal spacing & larger, wins last) === */
@media (max-width: 900px){
  /* Ensure the logo block (between white card and services) has equal spacing */
  #hero .hero__visual{
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  /* Force the logo image to be larger and centered, regardless of prior rules */
  #hero .hero__visual .hero__logo,
  #hero .hero__visual img{
    width: 88vw !important;
    max-width: 420px !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Burger menu: "Оставить отзыв" same as other nav links */
.nav__link--review{
  display:block;
  padding:14px 18px;
  font:inherit;
  line-height:1.3;
  text-align:left;
}
@media (max-width:900px){
  nav .nav__link{ display:block; padding:14px 18px; }
}