/* ===== Design tokens (grey-first with red accents) ===== */
:root{
    --gray-900:#111214;
    --gray-800:#1f2124;
    --gray-700:#2a2d31;
    --gray-600:#3a3f44;
    --gray-500:#51565c;
    --gray-400:#6c737b;
    --gray-300:#9aa2ab;
    --gray-200:#c9ced4;
    --gray-100:#e9edf0;
    --gray-050:#f5f7f9;
    --text:#e9edf0;
    --text-muted:#c9ced4;
    --bg:#16181b;
    --panel:#202327;
    --panel-soft:#2a2d31;
    --white:#fff;
    --red:#a81c1d; /* brand accent */
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.25);
  }
  
  /* ===== Reset / base ===== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.55;
  }
  img{max-width:100%;display:block}
  a{color:var(--red);text-decoration:none}
  a:hover{text-decoration:underline}
  .container{width:min(1120px, 92vw);margin:0 auto}
  
  /* ===== Header ===== */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(22,24,27,.7);
    backdrop-filter:saturate(130%) blur(8px);
    border-bottom:1px solid rgba(255,255,255,.05);
  }
  .header-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 0}
  .brand{display:flex;align-items:center;gap:12px;color:var(--white)}
  .brand__logo{width:74px;height:49px}
  .brand__name{font-weight:800;letter-spacing:.3px}
  .nav__toggle{display:none;background:none;border:1px solid var(--gray-600);color:var(--text);padding:6px 10px;border-radius:10px}
  .nav__list{display:flex;gap:22px;list-style:none;margin:0;padding:0}
  .nav__list a{color:var(--text);opacity:.9}
  .header-call{margin-left:8px}
  
  @media (max-width: 860px){
    .nav__toggle{display:inline-block}
    .nav__list{position:absolute;inset:60px 4vw auto 4vw;background:var(--panel);border:1px solid var(--gray-600);border-radius:14px;padding:16px;display:none;flex-direction:column}
    .nav__list.is-open, .nav__list.is-open{display:flex}
  }
  
  /* ===== Buttons ===== */
  .btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:999px;padding:12px 18px;border:1px solid transparent;transition:.2s all}
  .btn--small{padding:8px 12px;font-weight:600}
  .btn--primary{background:var(--red);color:#fff}
  .btn--primary:hover{filter:brightness(.95)}
  .btn--ghost{background:transparent;border-color:var(--gray-600);color:var(--text)}
  .btn--ghost:hover{background:var(--panel)}
  .btn--outline{background:transparent;border-color:var(--red);color:var(--red)}
  .btn--outline:hover{background:rgba(168,28,29,.1)}
  
  /* ===== Hero ===== */
  .hero{position:relative;min-height:72vh;display:grid;place-items:center}
  .hero__media{position:absolute;inset:0;overflow:hidden}
  .hero__video{width:100%;height:100%;object-fit:cover;filter:grayscale(.4) brightness(.6)}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(22,24,27,.9))}
  .hero__content{position:relative;text-align:center;padding:80px 0}
  .hero__title{font-family:"Racing Sans One",cursive;font-size:clamp(36px,6vw,64px);margin:0 0 8px}
  .hero__subtitle{font-weight:800;letter-spacing:.4px;margin:0 0 10px}
  .hero__lead{max-width:780px;margin:0 auto 20px;color:var(--text-muted)}
  .hero__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  
  /* ===== Sections ===== */
  .section{padding:72px 0}
  .section.grey{background:var(--panel)}
  .section-title{
    font-family:"Racing Sans One",cursive;
    font-size:clamp(28px,4.6vw,42px);
    margin:0 0 10px;
  }
  .section-subtitle{margin:0 0 28px;color:var(--text-muted)}
  
  /* Split */
  .split__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
  @media (max-width: 900px){.split__inner{grid-template-columns:1fr}}
  .checklist{margin:16px 0 0 0;padding:0 0 0 20px}
  .checklist li{margin:10px 0}
  .muted{color:var(--text-muted)}
  .small{font-size:.925rem}
  
  /* Cards & grids */
  .grid{display:grid;gap:20px}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  @media (max-width: 900px){.cols-2,.cols-3{grid-template-columns:1fr}}
  .cards{grid-template-columns:repeat(4,1fr)}
  @media (max-width: 1024px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width: 600px){.cards{grid-template-columns:1fr}}
  .card{
    background:var(--panel);
    border:1px solid var(--gray-600);
    border-radius:var(--radius);
    padding:18px;
    box-shadow:var(--shadow);
  }
  .card img{border-radius:12px;margin-bottom:12px}
  .card h3{margin:8px 0 6px}
  .card--soft{background:var(--panel-soft)}
  .card--map{padding:0;overflow:hidden}
  
  /* KPIs */
  .kpis{display:flex;gap:10px;justify-content:space-between;align-items:stretch}
  .kpi{flex:1;background:var(--panel);border:1px solid var(--gray-600);border-radius:14px;padding:22px;text-align:center}
  .kpi__num{display:block;font-weight:800;font-size:36px;color:#fff}
  .kpi__label{display:block;color:var(--text-muted)}
  
  /* Stripe CTA */
  .stripe{background:linear-gradient(90deg, var(--gray-700), var(--gray-800));border-block:1px solid var(--gray-600)}
  .stripe__inner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px 0}
  @media (max-width: 700px){.stripe__inner{flex-direction:column;text-align:center}}
  
  /* Forms */
  .form{display:grid;gap:18px}
  .form .grid{gap:14px}
  .form__group{display:flex;flex-direction:column;gap:6px}
  label{font-weight:600}
  input,select,textarea{
    background:#121317;border:1px solid var(--gray-600);color:var(--text);
    border-radius:12px;padding:12px 14px;outline:none;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(168,28,29,.25)}
  .form__actions{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .checkbox{display:flex;gap:10px;align-items:center}
  
  /* Map */
  .map-embed{aspect-ratio:10/10}
  .map{width:100%;height:100%;border:0;filter:grayscale(.2)}
  
  /* Footer */
  .site-footer{border-top:1px solid var(--gray-600);background:var(--gray-900)}
  .footer-inner{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 0;flex-wrap:wrap}
  .footer-links{list-style:none;display:flex;gap:16px;margin:0;padding:0}
  .footer-links a{color:var(--text);opacity:.9}
  .footer-brand img{width:42px;height:auto}
  .footer-social a{margin-left:16px;color:var(--text-muted)}
  
  /* Ensure a clear stacking order in the hero */
.hero { position: relative; }

.hero__media {
  position: absolute; 
  inset: 0;
  z-index: 0;            /* video at the back */
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.22),         /* was .5 */
    rgba(22,24,27,.48)       /* was .9 */
  );
  z-index: 1;            /* overlay above video */
  pointer-events: none;  /* don't block clicks */
}

.hero__content {
  position: relative;
  z-index: 2;            /* buttons/text above overlay */
}

.badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem .75rem; border-radius:.5rem; font-weight:600;
  margin:.5rem 0 1rem; line-height:1.2;
}
.badge--success { background:#e8f7ec; color:#1a7f37; border:1px solid #c6e9cf; }
.badge--error   { background:#ffefef; color:#8a1f1f; border:1px solid #f2c6c6; }
.badge svg { width:1.1em; height:1.1em; }

.btn[disabled] { opacity:.7; cursor:not-allowed; }

.shake { animation:shake .35s linear; }
@keyframes shake {
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-4px) }
  40%{ transform:translateX(4px) }
  60%{ transform:translateX(-3px) }
  80%{ transform:translateX(3px) }
}