/* ========== KBS Transport – Premium Dark/Gold (maquette style) ========== */

:root{
  --bg0:#08090b;
  --bg1:#0b0c10;
  --panel:#111318;
  --panel2:#0f1116;
  --line:rgba(255,255,255,.12);

  --text:#f1f1f2;
  --muted:rgba(255,255,255,.72);

  --gold:#d6b46a;
  --gold2:#b88a2a;

  --shadow: 0 18px 60px rgba(0,0,0,.65);
  --shadow2: 0 12px 28px rgba(0,0,0,.55);

  --radius:18px;
  --radius-sm:12px;

  --serif: ui-serif, "Georgia", "Times New Roman", Times, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:var(--sans);
  background:
    radial-gradient(1000px 700px at 20% 10%, rgba(214,180,106,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 15%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit; text-decoration:none}
.container{width:min(1180px, 92vw); margin:0 auto}
.muted{color:var(--muted)}
.tiny{font-size:.86rem; line-height:1.35}

/* =================== Topbar =================== */

.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(8,9,11,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(214,180,106,.18);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

/* Brand like the mockup: "KBS | TRANSPORT" */
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand--link{cursor:pointer}
.brand__mark{
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:.06em;
  font-size:1.05rem;
  padding:10px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(214,180,106,.12);
}
.brand__text{display:flex; flex-direction:column; gap:2px}
.brand__name{
  font-weight:700;
  letter-spacing:.28em;
  font-size:.90rem;
  opacity:.95;
}
.brand__tag{
  font-size:.80rem;
  color:rgba(255,255,255,.62);
}

/* Phone pill (top right) */
.phone{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.14);
}
.phone__icon{color:rgba(214,180,106,.92)}
.phone__num{font-weight:800; letter-spacing:.02em}

/* =================== HERO (style image) =================== */

.hero{
  padding:28px 0 0;
}

/* The “photo-like” hero look */
.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:stretch;

  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 420px at 25% 35%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(700px 380px at 70% 25%, rgba(214,180,106,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(0,0,0,.35));
}

.hero__grid::before{
  content:"";
  position:absolute; inset:0;
  background:url("hero.png") center/cover no-repeat;
  filter:saturate(.95) contrast(1.05);
  opacity:.75;
}


.hero__grid::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25));
  pointer-events:none;
}

.hero__copy, .hero__visual{position:relative; z-index:2}

.hero__copy{
  padding:34px 32px;
}

.hero__copy h1{
  margin:0;
  font-family:var(--serif);
  font-weight:800;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  letter-spacing:.02em;
}
.hero__copy h2{
  margin:.25rem 0 0;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.2rem;
  color:rgba(255,255,255,.88);
}
.hero__copy p{
  margin:14px 0 18px;
  max-width:56ch;
  color:rgba(255,255,255,.78);
}

/* Buttons like mockup (gold + dark) */
.hero__actions{
  display:flex; gap:12px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px;
  border-radius: 8px; /* in the mockup buttons are more “rectangular” */
  border:1px solid transparent;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition: transform .08s ease, filter .12s ease, background .12s ease;
  text-transform:none;
}
.btn:active{transform:translateY(1px)}
.btn--gold{
  color:#1b1406;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 22px rgba(184,138,42,.28);
}
.btn--gold:hover{filter:brightness(1.05)}
.btn--ghost{
  color:rgba(255,255,255,.92);
  background: rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.btn--ghost:hover{filter:brightness(1.08)}
.btn--wide{min-width:220px}

/* Right “visual”: keep it subtle (since your mockup had a car photo) */
.hero__visual{
  padding:26px 24px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}
.visual-card{
  width:100%;
  min-height:220px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(500px 220px at 20% 20%, rgba(214,180,106,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: var(--shadow2);
  padding:16px;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative;
  overflow:hidden;
}
.visual-card::before{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(214,180,106,.10), transparent 55%);
  transform: rotate(10deg);
}
.visual-card__title{
  position:relative;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.06em;
}
.visual-card__sub{
  position:relative;
  color:rgba(255,255,255,.70);
  margin-top:6px;
}

/* =================== STRIP (icons row + big reserve) =================== */

.strip{
  padding:16px 0 26px;
}

/* mimic the “band” under hero */
.strip__grid{
  margin-top:-12px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(8,9,11,.55);
  box-shadow: var(--shadow2);
}

.chip{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  border-right:1px solid rgba(255,255,255,.10);
}
.chip:last-of-type{border-right:none}
.chip__icon{
  width:40px; height:40px;
  border-radius:999px;
  display:grid; place-items:center;
  background: rgba(214,180,106,.12);
  border:1px solid rgba(214,180,106,.25);
  color:rgba(214,180,106,.95);
  font-weight:900;
}
.chip__title{
  font-weight:800;
  letter-spacing:.01em;
}
.chip__desc{
  font-size:.88rem;
  color:rgba(255,255,255,.65);
}

.strip__cta{
  display:flex; align-items:center; justify-content:center;
  padding:14px 18px;
  background: rgba(0,0,0,.35);
}
.strip__cta .btn{
  border-radius: 6px;
  width: 190px;
}

/* =================== CARDS row (3 small blocks) =================== */

.cards{
  padding:6px 0 44px;
}

.cards__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(8,9,11,.55);
  box-shadow: var(--shadow2);
}

.card{
  padding:18px 18px 20px;
  border-right:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(400px 220px at 20% 20%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22));
}
.card:last-child{border-right:none}

.card__icon{
  width:46px; height:46px;
  border-radius:999px;
  display:grid; place-items:center;
  background: rgba(214,180,106,.10);
  border:1px solid rgba(214,180,106,.22);
  color:rgba(214,180,106,.95);
  margin-bottom:10px;
}
.card h3{
  margin:6px 0 8px;
  font-family:var(--serif);
  font-weight:700;
}
.card p{margin:0}

/* =================== Footer =================== */

.footer{
  margin-top:28px;
  border-top:1px solid rgba(214,180,106,.18);
  background: rgba(8,9,11,.72);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:18px 0;
}
.footer__brand{display:flex; align-items:center; gap:10px}
.footer__text{color:rgba(255,255,255,.62)}
.footer__phone{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

/* =================== Pages (form & thank you) =================== */

.page{padding:28px 0 56px}
.page__title{
  margin:0 0 6px;
  font-family:var(--serif);
  font-weight:800;
  letter-spacing:.02em;
}
.page__subtitle{margin:0 0 18px}

.card--pad{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(214,180,106,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.25));
  box-shadow: var(--shadow2);
  padding:18px;
}

.form{max-width: 900px}

/* Inputs: dark with gold focus */
.field{display:flex; flex-direction:column; gap:8px; margin:10px 0}
.field span{font-weight:800; color:rgba(255,255,255,.88)}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  color: var(--text);
  outline:none;
}
input:focus, textarea:focus{
  border-color: rgba(214,180,106,.55);
  box-shadow: 0 0 0 4px rgba(214,180,106,.12);
}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

.checks{
  display:flex; gap:12px; flex-wrap:wrap;
  margin:14px 0 6px;
}

.check{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.02);
}
.check input{accent-color: var(--gold)}

.block{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
}

.hidden{display:none !important}

.form__actions{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:16px;
}

.thanks{
  max-width: 760px;
}
.thanks h1{
  margin:0 0 10px;
  font-family:var(--serif);
  font-weight:800;
}
.thanks p{margin:0 0 16px}

/* =================== Responsive like your mockup =================== */

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__copy{padding:26px 18px}
  .hero__visual{padding:18px}
  .strip__grid{grid-template-columns:1fr}
  .chip{border-right:none; border-bottom:1px solid rgba(255,255,255,.10)}
  .strip__cta{padding:16px}
  .strip__cta .btn{width:100%}
  .cards__grid{grid-template-columns:1fr}
  .card{border-right:none; border-bottom:1px solid rgba(255,255,255,.10)}
  .card:last-child{border-bottom:none}
  .grid2{grid-template-columns:1fr}
}
/* Story / How / Final CTA (léger, pas surchargé) */
.story, .how, .final-cta{
  padding: 26px 0 34px;
}

.story__wrap, .final-cta__wrap{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: var(--shadow2);
  padding:18px;
}

.story__text{max-width: 60ch}
.story__text h3, .how__title, .final-cta h3{
  margin:0 0 10px;
  font-family: var(--serif);
}

.story__cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width: 260px;
}

.how__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}

.how__step{
  display:flex;
  gap:12px;
  padding:16px;
  border-radius: var(--radius-sm);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.how__num{
  width:40px; height:40px;
  border-radius:999px;
  display:grid; place-items:center;
  font-weight:900;
  color:#1b1406;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
}

.how__label{font-weight:900}

.final-cta__buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* Mobile */
@media (max-width: 980px){
  .story__wrap, .final-cta__wrap{flex-direction:column}
  .story__cta{min-width: 0; width:100%}
  .how__grid{grid-template-columns: 1fr}
  .final-cta__buttons .btn{width:100%}
}
.card__icon svg{
  width:22px;
  height:22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
}
.chip__icon svg{
  width:22px;
  height:22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.8;
}