:root {
  --ink: #0B1A2B;
  --muted: #5B6B7C;
  --bg: #FFFFFF;
  --bg-soft: #F3F6FA;
  --line: #E6ECF2;
  --orange: #F07808;
  --orange-2: #E05F00;
  --blue: #1068B8;
  --blue-2: #0B5AA3;
  --navy: #0A2744;
  --ok: #0F7A3F;
  --warn: #C2410C;
  --danger: #DC2626;
  --shadow: 0 28px 80px rgba(10, 39, 68, 0.22);
  --radius: 16px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Syne", "Plus Jakarta Sans", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --amber: var(--orange);
  --teal-950: #07111F;
  --teal-900: var(--navy);
  --teal-800: var(--navy);
  --teal-700: var(--blue);
  --teal-500: var(--blue);
  --mint: #7EC2FF;
  --sand: #F8FAFC;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(240,120,8,.28), transparent 58%),
    radial-gradient(900px 520px at 96% 0%, rgba(16,104,184,.26), transparent 52%),
    linear-gradient(165deg, #06101C 0%, #0A2744 48%, #0C3558 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; object-fit: cover; }

/* Loader */
.loader {
  position: fixed; inset: 0; z-index: 999; display: grid; place-content: center; justify-items: center; gap: 16px;
  background:
    radial-gradient(600px 320px at 50% 30%, rgba(16,104,184,.08), transparent),
    #fff;
  transition: .55s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  width: 92px; height: 92px; border-radius: 22px; padding: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(16,104,184,.1);
  animation: float 2.4s ease-in-out infinite;
}
.loader__mark img { width: 100%; height: 100%; object-fit: contain; }
.loader__bar { width: 160px; height: 3px; border-radius: 99px; background: #EEF2F7; overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--blue)); animation: load .75s var(--ease) forwards; }
.loader p { margin: 0; letter-spacing: .22em; font-size: .7rem; font-weight: 800; color: var(--blue); font-family: var(--display); }
@keyframes load { to { width: 100%; } }
@keyframes float { 50% { transform: translateY(-6px); } }

/* Studio */
.studio {
  position: sticky; top: 0; z-index: 80; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  padding: 11px 18px; background: rgba(6,16,28,.88); backdrop-filter: blur(18px); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.studio__brand { display: flex; gap: 10px; align-items: center; min-width: 170px; }
.studio__mark { width: 36px; height: 36px; border-radius: 11px; background: #fff; padding: 4px; overflow: hidden; }
.studio__mark img { width: 100%; height: 100%; object-fit: contain; }
.studio__brand strong { display: block; font-size: .88rem; font-family: var(--display); letter-spacing: -.01em; }
.studio__brand small { color: rgba(255,255,255,.48); font-size: .68rem; }
.studio__tabs, .studio__device { display: flex; flex-wrap: wrap; gap: 6px; }
.studio__device { margin-left: auto; }
.studio__tab, .studio__dev {
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: rgba(255,255,255,.72);
  border-radius: 10px; padding: 8px 13px; font-size: .76rem; font-weight: 650;
  transition: .2s var(--ease);
}
.studio__tab:hover, .studio__dev:hover { background: rgba(255,255,255,.08); color: #fff; }
.studio__tab.is-on, .studio__dev.is-on { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 800; }

.stage { padding: 22px 14px 52px; display: grid; place-items: start center; }
.frame {
  width: min(1280px, 100%); background: #0B1220; border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.06); transition: width .45s var(--ease);
}
.frame[data-device="mobile"] { width: min(402px, 100%); }
.frame__chrome {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #070E1A;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.frame__dots { display: flex; gap: 6px; }
.frame__dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.frame__dots i:nth-child(1){background:#E25B4A} .frame__dots i:nth-child(2){background:#E3B341} .frame__dots i:nth-child(3){background:#4CAF78}
.frame__url { flex: 1; text-align: center; font-size: .72rem; color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); border-radius: 8px; padding: 6px; letter-spacing: .02em; }
.frame__live { display: flex; align-items: center; gap: 6px; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #4ADE80; font-weight: 700; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; display: inline-block; box-shadow: 0 0 0 0 rgba(34,197,94,.45); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px transparent; } }

.viewport { background: var(--bg); min-height: 760px; max-height: min(88vh, 940px); overflow: auto; scroll-behavior: smooth; }
.frame[data-device="mobile"] .viewport { min-height: 780px; max-height: 860px; }
.view { display: none; animation: fade .45s var(--ease) both; }
.view.is-on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Brand / buttons */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; background: #fff; padding: 4px; box-shadow: 0 6px 18px rgba(16,104,184,.1); }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.brand__name .digi, .hero__brand .digi { color: var(--orange); }
.brand__name .trans, .hero__brand .trans { color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 11px 17px; font-weight: 700; transition: .22s var(--ease);
  letter-spacing: -.01em;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: 8px 13px; font-size: .84rem; }
.btn--xl { padding: 15px 22px; font-size: .98rem; border-radius: 14px; }
.btn--orange { background: linear-gradient(180deg, #FF8A1F, var(--orange)); color: #fff; box-shadow: 0 12px 28px rgba(240,120,8,.28); }
.btn--orange:hover { filter: brightness(1.05); }
.btn--blue { background: linear-gradient(180deg, #1A78C8, var(--blue)); color: #fff; box-shadow: 0 12px 28px rgba(16,104,184,.22); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--ghost-dark { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn--ghost-dark:hover { border-color: #CBD5E1; background: #F8FAFC; }
.btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.28); color: #fff; }
.btn--glass { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff; backdrop-filter: blur(12px); }
.btn--glass:hover { background: rgba(255,255,255,.16); }
.btn--amber { background: var(--orange); color: #fff; box-shadow: 0 10px 28px rgba(240,120,8,.28); }
.btn--solid { background: var(--blue); color: #fff; }

/* ========== VITRINE ========== */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 32px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid transparent;
  transition:
    transform .35s var(--ease),
    padding .3s var(--ease),
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease);
  will-change: transform;
}
.site-header.is-top {
  background: linear-gradient(180deg, rgba(6,16,28,.55), transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: transparent;
}
.site-header.is-top .brand__logo { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.site-header.is-top .site-nav { color: rgba(255,255,255,.82); }
.site-header.is-top .site-nav a:hover { color: #fff; }
.site-header.is-top .btn--ghost-dark {
  border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.08);
}
.site-header.is-top .burger {
  border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12);
}
.site-header.is-top .burger span { background: #fff; }
.site-header.is-solid {
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(230,236,242,.95);
  box-shadow: 0 10px 40px rgba(10, 39, 68, 0.07);
}
.site-header.is-compact { padding: 10px 28px; }
.site-header.is-compact .brand__logo { width: 34px; height: 34px; transition: .3s var(--ease); }
.site-header.is-compact .brand__name { font-size: .92rem; }
.site-header.is-hidden {
  transform: translateY(-110%);
  pointer-events: none;
}
.site-nav { display: flex; gap: 16px; font-size: .84rem; font-weight: 650; color: var(--muted); }
.site-nav a { position: relative; padding: 4px 0; transition: color .2s; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--orange); transition: right .25s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { right: 0; }
.site-nav a.is-active { color: var(--blue); }
.site-nav a.is-active::after { right: 0; }
.site-header.is-top .site-nav a.is-active { color: #fff; }
.site-header__actions { display: flex; gap: 8px; }
.burger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  transition: .25s var(--ease);
}
.burger span { width: 16px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hero {
  position: relative; min-height: min(78vh, 680px); display: grid; align-items: end;
  margin-top: -68px; padding: 120px 32px 64px; color: #fff; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  filter: contrast(1.06) saturate(1.04) brightness(.92);
  transform: scale(1.05);
  animation: ken 28s ease-in-out infinite alternate;
}
@keyframes ken { to { transform: scale(1.12) translate(-1.2%, .8%); } }
.hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(6,16,28,.92) 0%, rgba(10,39,68,.72) 38%, rgba(10,39,68,.28) 68%, rgba(6,16,28,.7) 100%),
    linear-gradient(180deg, rgba(6,16,28,.2) 0%, rgba(6,16,28,.55) 70%, rgba(6,16,28,.88) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 720px; animation: heroIn .9s var(--ease) both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
.hero__brand {
  margin: 0 0 8px; font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.4rem); letter-spacing: -.04em; line-height: 1;
}
.hero__tag {
  margin: 0 0 22px; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(154,208,255,.9);
}
.kicker {
  margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7EB8E8;
}
.kicker--dark { color: var(--blue); }
.hero h1 {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.35rem); line-height: 1.06; letter-spacing: -.035em;
}
.hero h1 span {
  background: linear-gradient(90deg, var(--orange), #FFB25A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin: 18px 0 0; max-width: 42ch; font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.82); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin: 0; position: relative; z-index: 2;
  background: #fff; border-bottom: 1px solid var(--line);
}
.stats > div {
  padding: 28px 18px; text-align: center;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(16,104,184,.03), transparent 60%),
    #fff;
}
.stats > div:last-child { border-right: 0; }
.stats b {
  display: block; font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  background: linear-gradient(120deg, var(--blue), var(--navy));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats span { display: block; margin-top: 6px; font-size: .8rem; color: var(--muted); font-weight: 600; }

.section { padding: 88px 32px 36px; }
.section--soft {
  background:
    radial-gradient(700px 280px at 100% 0%, rgba(16,104,184,.06), transparent 55%),
    var(--bg-soft);
}
.section--navy {
  background:
    radial-gradient(800px 360px at 0% 0%, rgba(240,120,8,.18), transparent 50%),
    linear-gradient(160deg, #081C33, #0A2744 50%, #0E3558);
  color: #fff; margin: 0;
}
.section__head { max-width: 640px; margin-bottom: 40px; }
.section__head h2, .section__head--light h2 {
  margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 3.2vw, 2.45rem); letter-spacing: -.03em; line-height: 1.12;
}
.section__head p { margin: 12px 0 0; color: var(--muted); line-height: 1.55; font-size: 1.02rem; }
.section__head--light p { color: rgba(255,255,255,.68); }
.section__head--light .kicker { color: #9AD0FF; }
.section__head--light h2 { color: #fff; }

.section__split {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start;
}
.prose { color: var(--muted); font-size: 1.02rem; line-height: 1.7; }
.prose p { margin: 0 0 16px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose .check-list { margin: 8px 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose .check-list li {
  position: relative; padding-left: 28px; color: var(--ink); font-weight: 550; line-height: 1.45;
}
.prose .check-list li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px;
  background: linear-gradient(135deg, var(--orange), var(--blue));
}

.solution-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.solution-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px;
  display: grid; gap: 12px; align-content: start;
  transition: .25s var(--ease);
}
.solution-card:hover { border-color: rgba(16,104,184,.28); transform: translateY(-3px); }
.solution-card h3 { margin: 0; font-family: var(--display); font-size: 1.28rem; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.solution-card > p { margin: 0; color: var(--muted); line-height: 1.6; }
.solution-card ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; line-height: 1.45; }
.solution-card .btn { justify-self: start; margin-top: 6px; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.services-grid article {
  padding: 22px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff;
  transition: .25s var(--ease);
}
.services-grid article:hover { border-color: rgba(240,120,8,.35); }
.services-grid h3 { margin: 0 0 10px; font-family: var(--display); font-size: 1.08rem; letter-spacing: -.01em; }
.services-grid p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .95rem; }

.steps-line--rich li { min-height: 100%; }
.corridor-intro { max-width: 820px; margin-bottom: 28px; }
.routes--text { grid-template-columns: repeat(2, 1fr); }
.routes--text article {
  display: block; padding: 20px 18px;
}
.routes--text h3 { margin: 6px 0 8px; }
.routes--text p { margin: 0; line-height: 1.55; }

.benefits--solo { margin-bottom: 0; }
.coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.coverage-grid article {
  padding: 22px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
}
.coverage-grid h3 { margin: 0 0 10px; font-family: var(--display); letter-spacing: -.01em; }
.coverage-grid p { margin: 0; color: var(--muted); line-height: 1.55; }

.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.testimonial {
  margin: 0; padding: 24px 22px; border-radius: 16px; background: #fff;
  border: 1px solid var(--line); display: grid; gap: 18px; align-content: space-between;
}
.testimonial > p {
  margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); font-weight: 500;
  quotes: "«" "»";
}
.testimonial footer { display: grid; gap: 2px; }
.testimonial strong { font-family: var(--display); letter-spacing: -.01em; }
.testimonial span { color: var(--muted); font-size: .86rem; }

.faq { display: grid; gap: 10px; max-width: 860px; }
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 4px;
}
.faq__item summary {
  cursor: pointer; list-style: none; padding: 14px 0; font-weight: 750; font-family: var(--display);
  letter-spacing: -.01em; color: var(--ink); position: relative; padding-right: 28px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 0; top: 14px; color: var(--orange); font-weight: 800; font-size: 1.2rem;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }

.cta-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
  padding: 36px 32px; border-radius: 22px; border: 1px solid var(--line);
  background:
    radial-gradient(500px 240px at 0% 0%, rgba(240,120,8,.08), transparent 55%),
    radial-gradient(420px 220px at 100% 100%, rgba(16,104,184,.08), transparent 50%),
    #fff;
}
.cta-panel__copy h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.02em; }
.cta-panel__copy > p { margin: 0 0 18px; color: var(--muted); line-height: 1.6; }
.contact-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact-points li { color: var(--ink); font-weight: 600; line-height: 1.4; }
.contact-points strong { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

.contact-form--light {
  margin: 0; max-width: none; background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px; gap: 12px;
}
.contact-form--light .field span { color: var(--muted); }
.contact-form--light input,
.contact-form--light textarea {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.contact-form--light input::placeholder,
.contact-form--light textarea::placeholder { color: #94A3B8; }
.form-note { margin: 0; grid-column: 1 / -1; font-size: .78rem; color: var(--muted); line-height: 1.45; }

.footer__brand p { max-width: 36ch; }
.footer__tag { margin-top: 14px !important; color: rgba(255,255,255,.45); font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.footer__address { margin-top: 14px; font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.55); }

.solutions { display: grid; gap: 36px; }
.solution {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; overflow: hidden;
  background: transparent;
}
.solution--reverse { grid-template-columns: 1fr 1.05fr; }
.solution--reverse .solution__photo { order: 2; }
.solution__photo { min-height: 340px; position: relative; overflow: hidden; }
.solution__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(255,255,255,.04));
  pointer-events: none;
}
.solution__photo img {
  width: 100%; height: 100%; min-height: 340px; filter: contrast(1.04);
  transition: transform .8s var(--ease);
}
.solution:hover .solution__photo img { transform: scale(1.04); }
.solution__body { padding: 40px 36px; display: grid; align-content: center; gap: 14px; background: #fff; }
.solution__body h3 { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.22; letter-spacing: -.02em; }
.solution__body ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; line-height: 1.45; }
.tag {
  display: inline-flex; width: fit-content; padding: 6px 11px; border-radius: 8px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tag--orange { background: rgba(240,120,8,.12); color: var(--orange-2); }
.tag--blue { background: rgba(16,104,184,.12); color: var(--blue); }
.tag--navy { background: rgba(10,39,68,.1); color: var(--navy); }

.steps-line {
  list-style: none; margin: 0 0 32px; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  counter-reset: none;
}
.steps-line li {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 16px;
  transition: .25s var(--ease);
}
.steps-line li:hover { border-color: rgba(16,104,184,.35); transform: translateY(-3px); }
.steps-line span { font-family: var(--display); color: var(--orange); font-weight: 800; font-size: 1.05rem; }
.steps-line h3 { margin: 10px 0 8px; font-size: 1.05rem; font-family: var(--display); letter-spacing: -.01em; }
.steps-line p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-strip figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; min-height: 200px; }
.feature-strip img { width: 100%; height: 100%; position: absolute; inset: 0; transition: transform .7s var(--ease); }
.feature-strip figure:hover img { transform: scale(1.06); }
.feature-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
  background: linear-gradient(transparent, rgba(6,16,28,.85)); color: #fff; font-weight: 700; font-size: .92rem;
  font-family: var(--display);
}

.mosaic {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 220px 180px; gap: 14px; margin-bottom: 20px;
}
.mosaic figure { margin: 0; position: relative; border-radius: 16px; overflow: hidden; }
.mosaic__lg { grid-row: span 2; }
.mosaic img { width: 100%; height: 100%; transition: transform .7s var(--ease); }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figcaption {
  position: absolute; inset: auto 0 0 0; padding: 16px;
  background: linear-gradient(transparent, rgba(6,16,28,.88)); color: #fff;
}
.mosaic strong { display: block; font-family: var(--display); letter-spacing: -.01em; }
.mosaic span { font-size: .8rem; opacity: .72; }

.routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.routes article {
  display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center;
  padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: #fff;
  transition: .25s var(--ease);
}
.routes article:hover { border-color: rgba(16,104,184,.3); transform: translateY(-2px); }
.routes img { width: 88px; height: 76px; border-radius: 12px; }
.routes__meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); margin-bottom: 4px; font-weight: 650; }
.routes__meta b { color: var(--orange); font-family: var(--display); }
.routes h3 { margin: 0; font-family: var(--display); font-size: 1.02rem; letter-spacing: -.01em; }
.routes p { margin: 5px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.4; }

.benefits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px;
}
.benefits > div {
  padding: 22px 20px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: .25s var(--ease);
}
.benefits > div:hover { background: rgba(255,255,255,.08); border-color: rgba(240,120,8,.35); }
.benefits h3 { margin: 0 0 8px; font-family: var(--display); letter-spacing: -.01em; }
.benefits p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.5; }
.benefits__visual { border-radius: 18px; overflow: hidden; min-height: 260px; }
.benefits__visual img { width: 100%; height: 260px; filter: contrast(1.05); }

.about-visual {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center;
}
.about-visual__copy h2 {
  margin: 0 0 14px; font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.02em; line-height: 1.15;
}
.about-visual__copy p:not(.kicker) { margin: 0; color: var(--muted); line-height: 1.6; max-width: 38ch; }
.about-visual__grid {
  display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 180px 200px; gap: 12px;
}
.about-visual__grid img {
  width: 100%; height: 100%; border-radius: 16px; object-fit: cover;
  transition: transform .7s var(--ease);
}
.about-visual__grid img:first-child { grid-row: span 2; }
.about-visual__grid img:hover { transform: scale(1.03); }

.cta-visual {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 380px; color: #fff;
}
.cta-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); }
.cta-visual__content {
  position: relative; z-index: 1; max-width: 640px; padding: 52px 36px;
  background: linear-gradient(105deg, rgba(6,16,28,.92), rgba(10,39,68,.5) 65%, transparent);
}
.cta-visual__content h2 {
  margin: 0 0 12px; font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.02em;
}
.cta-visual__content > p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.5; }
.cta-visual .hero__cta { margin-top: 22px; }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quotes article { position: relative; min-height: 380px; border-radius: 18px; overflow: hidden; color: #fff; }
.quotes__photo { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .8s var(--ease); }
.quotes article:hover .quotes__photo { transform: scale(1.05); }
.quotes__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; background: linear-gradient(180deg, transparent 15%, rgba(6,16,28,.94));
}
.quotes__avatar { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); margin-bottom: 14px; object-fit: cover; }
.quotes blockquote { margin: 0 0 14px; font-size: .98rem; line-height: 1.5; font-weight: 500; }
.quotes strong { font-family: var(--display); letter-spacing: -.01em; }
.quotes span { opacity: .68; font-size: .85rem; margin-top: 2px; }

.section--cta { padding-bottom: 48px; }
.cta-box {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 340px; color: #fff;
}
.cta-box > img { position: absolute; inset: 0; width: 100%; height: 100%; filter: contrast(1.05); }
.cta-box__content {
  position: relative; z-index: 1; max-width: 640px; padding: 52px 36px;
  background: linear-gradient(105deg, rgba(6,16,28,.92), rgba(10,39,68,.45) 70%, transparent);
}
.cta-box h2 { margin: 0 0 12px; font-family: var(--display); font-size: clamp(1.55rem, 3vw, 2.2rem); letter-spacing: -.02em; }
.cta-box p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.5; }
.cta-box__mail { margin-top: 18px !important; font-size: .9rem; font-weight: 600; }

.footer { background: #06101C; color: rgba(255,255,255,.7); padding: 48px 32px 22px; }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 32px; }
.footer h4 { margin: 0 0 14px; color: #fff; font-family: var(--display); letter-spacing: -.01em; }
.footer a, .footer button {
  display: block; border: 0; background: none; color: rgba(255,255,255,.62); text-align: left;
  padding: 0; margin: 0 0 9px; font-weight: 600; transition: color .2s;
}
.footer a:hover, .footer button:hover { color: #fff; }
.footer p { margin: 10px 0 0; line-height: 1.55; }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07); font-size: .8rem;
}

/* ========== APP SHELL (reuse) ========== */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 760px; background: var(--bg-soft); }
.sidenav {
  background:
    radial-gradient(320px 200px at 0% 0%, rgba(240,120,8,.16), transparent 55%),
    linear-gradient(185deg, #0A2744 0%, #0C3358 55%, #0A2744 100%);
  color: #fff; padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidenav--amber { background: linear-gradient(180deg, #1A1208, #2A1A0A 40%, #0A2744); }
.sidenav--bo { background: linear-gradient(180deg, #06101C, #0A2744); }
.sidenav .brand { padding: 4px 8px 8px; }
.sidenav__role {
  margin: 14px 10px 8px; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.42); font-weight: 800;
}
.sidenav__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sidenav__link {
  text-align: left; border: 0; background: transparent; color: rgba(255,255,255,.7);
  padding: 11px 12px; border-radius: 12px; font-weight: 650; font-size: .88rem;
  display: flex; justify-content: flex-start; align-items: center; gap: 8px;
  transition: .2s var(--ease);
}
.sidenav__link .nav-ico {
  width: 7px; height: 7px; border-radius: 2px; background: rgba(255,255,255,.28); flex-shrink: 0;
}
.sidenav__link em {
  font-style: normal; min-width: 22px; height: 22px; border-radius: 8px;
  display: grid; place-items: center; background: rgba(240,120,8,.22); color: #FFB26B;
  font-size: .7rem; font-weight: 800; margin-left: auto;
}
.sidenav__link.is-on, .sidenav__link:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidenav__link.is-on { box-shadow: inset 3px 0 0 var(--orange); }
.sidenav__link.is-on .nav-ico { background: var(--orange); }
.sidenav__switch {
  margin: 8px 4px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
}
.sidenav__switch span {
  display: block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); font-weight: 800; margin-bottom: 8px;
}
.sidenav__switch button {
  width: 100%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #fff; border-radius: 10px; padding: 9px 12px; font-weight: 700; font-size: .82rem;
  transition: .2s var(--ease);
}
.sidenav__switch button:hover { background: rgba(240,120,8,.25); border-color: rgba(240,120,8,.45); }
.sidenav__user {
  display: flex; gap: 10px; align-items: center; padding: 12px;
  border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
  margin-top: 6px;
}
.sidenav__user strong { display: block; font-size: .86rem; }
.sidenav__user small { color: rgba(255,255,255,.48); }
.avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar-img--sm { width: 28px; height: 28px; }
.shell__main { background: var(--bg-soft); min-width: 0; }
.view--internal { display: none !important; }

.appbar {
  display: flex; justify-content: space-between; gap: 12px; padding: 16px 22px;
  border-bottom: 1px solid transparent;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  position: sticky; top: 0; z-index: 8;
  transition: padding .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), transform .32s var(--ease);
  will-change: transform;
}
.appbar.is-solid {
  border-bottom-color: var(--line);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 28px rgba(10,39,68,.06);
}
.appbar.is-compact { padding: 10px 20px; }
.appbar.is-compact h1 { font-size: 1.1rem; }
.appbar.is-compact p { display: none; }
.appbar.is-hidden { transform: translateY(-110%); pointer-events: none; }
.appbar h1 { margin: 0; font-family: var(--display); font-size: 1.28rem; letter-spacing: -.02em; transition: font-size .28s; }
.appbar p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; }
.appbar__right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); display: grid; place-items: center;
}
.icon-btn .badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center;
}
.icon-btn .badge[hidden] { display: none; }

.tpanel, .cpanel, .bopanel { display: none; padding: 18px 22px 28px; }
/* Pas de fill-mode "both" ici : sur "fade", il fige un transform (matrix
   identité) sur ce conteneur bien après la fin de l'animation. Un transform
   figé - même identité - crée un bloc englobant CSS pour tout descendant en
   position:fixed (ex. .modal), qui se retrouve alors centré dans .tpanel
   au lieu du vrai viewport (décalage visible = moitié de la largeur de la
   sidenav). Sans "both", le rendu de l'animation est identique (elle
   démarre dès l'application de la classe, donc "backwards" n'apporte rien
   ici) mais le transform redevient "none" une fois l'animation terminée. */
.tpanel.is-on, .cpanel.is-on, .bopanel.is-on { display: block; animation: fade .35s var(--ease); }

.banner-photo { position: relative; border-radius: 16px; overflow: hidden; min-height: 110px; margin-bottom: 14px; color: #fff; }
.banner-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.banner-photo > div { position: relative; z-index: 1; padding: 18px; background: linear-gradient(90deg, rgba(10,39,68,.82), rgba(10,39,68,.2)); }
.banner-photo h3 { margin: 8px 0 4px; font-family: var(--display); }
.banner-photo p { margin: 0; opacity: .85; font-size: .88rem; }

.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.step { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; font-size: .8rem; font-weight: 700; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
.step span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #F1F5F9; font-size: .72rem; }
.step.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.step.is-on span { background: var(--orange); color: #fff; }
.step.is-done { background: rgba(21,128,61,.1); border-color: rgba(21,128,61,.2); color: var(--ok); }

.wizard__body { display: grid; grid-template-columns: 1.4fr .9fr; gap: 14px; }
.wizard__form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 8px 24px rgba(10,39,68,.03); }
.req-card { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); transition: .2s var(--ease); }
.req-card:hover { border-color: rgba(16,104,184,.28); box-shadow: 0 8px 22px rgba(10,39,68,.05); }
.mission-card--rich { display: grid; grid-template-columns: 200px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: .25s var(--ease); }
.mission-card--rich:hover { border-color: rgba(16,104,184,.3); box-shadow: 0 12px 32px rgba(10,39,68,.06); }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(10,39,68,.03); }
.frame[data-device="mobile"] .login-roles { grid-template-columns: 1fr; }
.frame[data-device="mobile"] .sidenav__switch { display: none; }
.step-pane { display: none; }
.step-pane.is-on { display: block; }
/* Traitement carte par défaut - chaque usage existant l'applique déjà via
   un style inline identique (qui continue de gagner sur cette règle),
   cette base ne fait qu'éviter de le répéter pour les nouveaux usages
   (voir profil.html). */
.form-section { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: #fff; }
.form-section h3 { margin: 0 0 12px; font-family: var(--display); }
.form-section__head { font-family: var(--display); font-weight: 700; margin-bottom: 2px; }
.form-section__lead { color: var(--muted); font-size: .85rem; margin: 0 0 14px; }
.profil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .profil-grid { grid-template-columns: 1fr; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Sans min-width:0, un enfant de grille garde son min-content (un <input
   type="file"> avec son texte "Aucun fichier choisi" + bouton peut dépasser
   150-250px) comme plancher de largeur, même dans une colonne 1fr trop
   étroite pour l'accueillir - la grille déborde alors du conteneur au lieu
   de rétrécir la colonne (cause du débordement horizontal sur mobile,
   voir les étapes véhicule/documents de l'inscription). */
.grid-2 > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 5px; }
/* Même bug que .icon-btn .badge[hidden]/.account-sheet[hidden] : sans cet
   override, .field { display:flex } (règle auteur) l'emporte sur la règle
   navigateur [hidden]{display:none}, et un champ censé être masqué (ex.
   "Précisez la marque" avant sélection de "Autre") reste visible. */
.field[hidden] { display: none !important; }
.field span { font-size: .72rem; font-weight: 700; color: var(--muted); }
.field input, .field select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; outline: none; width: 100%; min-width: 0; }
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(16,104,184,.15); }
/* Repris depuis digitrans-dashboard.css (déplacé ici : les pages d'auth,
   qui n'incluent pas cette feuille dashboard, en ont aussi besoin -
   sans cette règle le message d'erreur s'affichait en texte noir uniforme,
   indistinguable du reste du formulaire). */
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: .78rem; color: var(--danger); margin-top: 4px; font-weight: 700; }
.field:has(.field-error) input, .field:has(.field-error) select { border-color: var(--danger); }
.field-row { display: flex; gap: 8px; min-width: 0; }
.field-row select { flex: 0 0 auto; width: 128px; min-width: 0; }
.field-row input { flex: 1 1 auto; min-width: 0; }
.upload { margin-top: 12px; display: grid; gap: 8px; }
.upload__zone { border: 1.5px dashed #CBD5E1; border-radius: 14px; padding: 16px; text-align: center; background: #F8FAFC; }
.upload__zone p { margin: 6px 0 10px; color: var(--muted); font-size: .85rem; }
.files { display: grid; gap: 6px; }
.file { display: flex; justify-content: space-between; padding: 9px 11px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-size: .85rem; font-weight: 650; }
.file em { color: var(--ok); font-style: normal; font-size: .72rem; }
.recap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.recap > div { padding: 10px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--line); }
.recap span { display: block; font-size: .7rem; color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.recap .ok { color: var(--ok); }
.checkline { display: flex; gap: 8px; font-size: .85rem; font-weight: 600; }
.wizard__actions { display: flex; justify-content: space-between; margin-top: 14px; }

.live-summary { position: sticky; top: 80px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.live-summary__photo { position: relative; border-radius: 12px; overflow: hidden; height: 100px; margin-bottom: 10px; }
.live-summary__photo img { width: 100%; height: 100%; }
.live-summary__photo span { position: absolute; left: 8px; bottom: 8px; font-size: .72rem; font-weight: 700; color: #fff; background: rgba(7,17,31,.55); padding: 3px 7px; border-radius: 7px; }
.live-summary h3 { margin: 4px 0 10px; font-family: var(--display); }
.summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.summary-list li { display: flex; justify-content: space-between; font-size: .86rem; }
.summary-list span { color: var(--muted); font-weight: 600; }
.summary-price { margin-top: 12px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(240,120,8,.12), rgba(16,104,184,.08)); }
.summary-price span { display: block; font-size: .72rem; font-weight: 700; color: var(--muted); }
.summary-price strong { font-family: var(--display); font-size: 1.1rem; }

.request-cards { display: grid; gap: 10px; }
.req-card { display: grid; grid-template-columns: 90px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.req-card img { width: 90px; height: 68px; border-radius: 10px; }
.req-card__top { display: flex; gap: 8px; align-items: center; }
.req-card strong { display: block; font-family: var(--display); margin-top: 2px; }
.req-card p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }

.pill { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #F1F5F9; color: #475569; }
.pill--green { background: rgba(21,128,61,.12); color: var(--ok); }
.pill--orange, .pill--amber { background: rgba(240,120,8,.12); color: var(--orange-2); }
.pill--blue { background: rgba(16,104,184,.12); color: var(--blue); }
.pill--red { background: rgba(220,38,38,.12); color: var(--danger); }

.track-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
.track-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.track-card__head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-bottom: 12px; }
.track-card__head h3 { margin: 6px 0 0; font-family: var(--display); }
.timeline__item { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding-bottom: 14px; position: relative; }
.timeline__item span { width: 10px; height: 10px; border-radius: 50%; background: #CBD5E1; margin-top: 4px; }
.timeline__item::after { content: ""; position: absolute; left: 4px; top: 18px; bottom: 0; width: 2px; background: #E2E8F0; }
.timeline__item:last-child::after { display: none; }
.timeline__item.is-done span { background: var(--ok); }
.timeline__item.is-on span { background: var(--orange); }
.timeline__item strong { display: block; font-size: .9rem; }
.timeline__item small { color: var(--muted); }
.track-card__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.person { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; }
.track-map { position: relative; min-height: 300px; border-radius: 16px; overflow: hidden; }
.track-map__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.track-map__overlay { position: absolute; inset: 0; display: grid; place-content: end center; padding: 16px; text-align: center; background: linear-gradient(transparent 40%, rgba(7,17,31,.7)); color: #fff; }
.truck-pin { font-size: 1.8rem; justify-self: center; animation: bob 3s ease-in-out infinite; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(8px); } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 7px 12px; font-size: .78rem; font-weight: 700; color: var(--muted); transition: .2s; }
.chip:hover { border-color: #CBD5E1; }
.chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.toggle { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--muted); display: flex; gap: 8px; align-items: center; }

.mission-grid { display: grid; gap: 12px; }
.mission-card--rich { display: grid; grid-template-columns: 200px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mission-card__media { position: relative; min-height: 170px; }
.mission-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mission-card__media .pill { position: absolute; top: 10px; left: 10px; }
.mission-card__body { padding: 16px; }
.mission-card__pay { font-family: var(--display); font-weight: 800; color: var(--blue); font-size: 1.1rem; }
.mission-card h3 { margin: 6px 0 4px; font-family: var(--display); font-size: 1.1rem; }
.mission-card__dest { margin: 0 0 10px; color: var(--muted); font-weight: 600; }
.mission-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mission-card__meta span { font-size: .72rem; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(16,104,184,.08); color: var(--blue); }
.mission-card__bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.mission-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.score { text-align: right; padding: 8px 10px; border-radius: 12px; background: rgba(240,120,8,.12); }
.score b { display: block; font-family: var(--display); color: var(--orange-2); font-size: 1.2rem; }
.score span { font-size: .7rem; font-weight: 700; color: var(--muted); }

.mission-list { display: grid; gap: 8px; }
/* minmax(0, auto) (pas juste "auto") sur la 3e colonne : "auto" seul se
   dimensionne au max-content et empêche tout rétrécissement, ce qui rend
   flex-wrap inopérant sur son contenu (ex. 2 boutons "Modifier"/"Désactiver"
   - voir audit responsive, utilisateurs_list.html en débordement mobile). */
/* min-width: 0 : .mrow est lui-même un item de grille dans .mission-list -
   par défaut un item de grille a min-width:auto (pas 0), qui l'empêche de
   rétrécir sous la largeur min-content de son propre contenu (ex. un
   username long) et le fait déborder de .mission-list plutôt que de se
   contraindre à sa largeur (voir audit responsive). */
/* minmax(0, 1fr) (pas "1fr" seul) sur la 2e colonne : une piste "1fr" a un
   minimum implicite "auto" (= min-content), donc elle ne rétrécit jamais
   sous la largeur d'un mot non sécable (ex. username long) même avec
   overflow-wrap sur le texte à l'intérieur (voir audit responsive). */
.mrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, auto); gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.mrow img { width: 70px; height: 54px; border-radius: 10px; }
.mrow strong { display: block; margin-top: 4px; font-family: var(--display); overflow-wrap: break-word; }
.mrow small { color: var(--muted); overflow-wrap: break-word; }

.week { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.week__head, .week__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week__head { margin-bottom: 6px; font-size: .7rem; font-weight: 800; color: var(--muted); text-align: center; }
.day { min-height: 80px; border-radius: 12px; padding: 7px; background: var(--bg-soft); }
.day.is-today { border: 1px solid var(--orange); background: rgba(240,120,8,.08); }
.evt { font-size: .65rem; font-weight: 800; padding: 3px 5px; border-radius: 7px; background: rgba(16,104,184,.1); color: var(--blue); margin-top: 4px; }
.evt--g { background: rgba(21,128,61,.12); color: var(--ok); }
.evt--a { background: rgba(240,120,8,.14); color: var(--orange-2); }

.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi-row--4 { grid-template-columns: repeat(4, 1fr); }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.kpi span { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); }
.kpi b { display: block; margin-top: 5px; font-family: var(--display); font-size: 1.55rem; color: var(--navy); }
.kpi small { color: var(--muted); }
.kpi--warn b { color: var(--warn); }
.kpi--ok b { color: var(--ok); }
.docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doc { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.doc strong { font-family: var(--display); }

.mobnav {
  /* position: fixed (pas sticky) : la maquette utilise sticky dans un cadre
     de prévisualisation à hauteur contrainte (.frame[data-device="mobile"]),
     où ça "fait" fixe visuellement. Dans l'app réelle (page normale, pas de
     cadre), sticky ne reste épinglé qu'au sein de son bloc conteneur - il
     apparaissait au milieu du contenu au lieu de rester une barre de
     navigation persistante en bas de l'écran (voir audit responsive). */
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid rgba(15,23,42,.08);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(10,39,68,.06);
}
.mobnav__item {
  position: relative; border: 0; background: transparent;
  display: grid; justify-items: center; gap: 3px;
  min-height: 54px; padding: 6px 2px; border-radius: 14px;
  font-size: .68rem; font-weight: 750; color: #64748B;
  transition: .2s var(--ease);
}
.mobnav__ico {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 10px; color: inherit;
}
.mobnav__ico svg { width: 20px; height: 20px; }
.mobnav__item em {
  position: absolute; top: 4px; right: calc(50% - 18px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--orange); color: #fff; font-style: normal;
  font-size: .62rem; font-weight: 800; display: grid; place-items: center;
}
.mobnav__item.is-on {
  color: var(--blue);
  background: rgba(16,104,184,.08);
}
.mobnav__item.is-on .mobnav__ico { background: rgba(16,104,184,.12); }

.appbar__titles { min-width: 0; }
.appbar__avatar {
  width: 38px; height: 38px; border-radius: 50%; padding: 0; border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line); overflow: hidden; background: #fff; flex-shrink: 0;
}
.appbar__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-sheet {
  position: sticky; top: 64px; z-index: 9; padding: 0 14px 10px;
}
.account-sheet[hidden] { display: none !important; }
.account-sheet__card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 14px; box-shadow: 0 16px 40px rgba(10,39,68,.12);
  display: grid; gap: 8px; animation: fade .25s var(--ease);
}
.account-sheet__user { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.account-sheet__user strong { display: block; font-size: .92rem; }
.account-sheet__user small { color: var(--muted); }
.account-sheet__card > button, .account-sheet__card > a {
  border: 1px solid var(--line); background: var(--bg-soft); border-radius: 12px;
  padding: 11px 12px; text-align: left; font-weight: 700; font-size: .88rem; color: var(--ink);
  display: block; text-decoration: none; width: 100%; cursor: pointer;
}
.account-sheet__card > button:last-child { background: transparent; color: var(--muted); border-style: dashed; }
/* La déconnexion est un <form method="post"> (CSRF) - son bouton n'est pas un
   enfant direct de .account-sheet__card, donc les règles ci-dessus (sélecteur
   ">") ne l'atteignent pas. "display: contents" neutralise le <form> dans le
   layout en grille, et son bouton reprend le même style que "Fermer" côté
   maquette (dernier item, quiet/pointillé). */
.account-sheet__card form { display: contents; }
.account-sheet__card form > button {
  border: 1px solid var(--line); background: transparent; color: var(--muted); border-style: dashed;
  border-radius: 12px; padding: 11px 12px; text-align: left; font-weight: 700; font-size: .88rem;
  width: 100%; cursor: pointer;
}

.btn--block { width: 100%; justify-content: center; }
.login-back { margin-top: 10px; }
.invoice-cards { display: none; gap: 10px; }
.invoice-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: grid; gap: 6px;
}
.invoice-card > div:first-child { display: flex; justify-content: space-between; align-items: center; }
.invoice-card strong { font-family: var(--display); font-size: 1.15rem; color: var(--navy); }
.invoice-card p { margin: 0; color: var(--muted); font-size: .84rem; }
.invoice-card .btn { justify-self: start; margin-top: 4px; }

.plan-agenda { display: none; gap: 10px; }
.agenda-item {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: grid; gap: 4px; position: relative;
}
.agenda-item.is-today { border-color: rgba(240,120,8,.4); background: linear-gradient(180deg, rgba(240,120,8,.06), #fff); }
.agenda-item time { font-size: .72rem; font-weight: 800; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; }
.agenda-item strong { font-family: var(--display); font-size: 1.02rem; }
.agenda-item p { margin: 0; color: var(--muted); font-size: .86rem; }
.agenda-item .pill { justify-self: start; margin-top: 4px; }

.bo-hero { position: relative; border-radius: 16px; overflow: hidden; min-height: 130px; margin-bottom: 12px; color: #fff; }
.bo-hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bo-hero > div { position: relative; z-index: 1; padding: 18px; background: linear-gradient(90deg, rgba(10,39,68,.85), rgba(10,39,68,.2)); }
.bo-hero h2 { margin: 6px 0 4px; font-family: var(--display); font-size: 1.25rem; }
.bo-hero p { margin: 0; opacity: .8; }
.bo-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: 12px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel__head h2 { margin: 0; font-family: var(--display); font-size: 1rem; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot.g{background:#22C55E}.dot.y{background:#EAB308}.dot.b{background:#3B82F6}.dot.r{background:#EF4444}
.fleetmap { display: grid; grid-template-columns: 1.35fr .9fr; }
.fleetmap__photo { position: relative; min-height: 280px; }
.fleetmap__photo img { position: absolute; inset: 0; width: 100%; height: 100%; filter: contrast(1.05) saturate(1.05); }
.fleetmap__pins { position: absolute; inset: 0; }
.pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%); animation: pin 2s ease-out infinite; }
.pin--g{background:#22C55E}.pin--y{background:#EAB308}.pin--b{background:#3B82F6}.pin--r{background:#EF4444}
@keyframes pin { 70% { box-shadow: 0 0 0 12px transparent; } }
.fleetmap__list { padding: 8px; display: grid; gap: 6px; background: #F8FAFC; }
.asset { display: grid; grid-template-columns: auto 1fr auto; gap: 7px; align-items: center; padding: 8px; border-radius: 10px; background: #fff; font-size: .78rem; }
.asset b { display: block; }
.asset small { color: var(--muted); }
.asset span { font-weight: 800; color: var(--blue); font-size: .7rem; }
.queue { list-style: none; margin: 0; padding: 6px; }
.queue button { width: 100%; display: flex; justify-content: space-between; border: 0; background: transparent; text-align: left; padding: 12px; border-radius: 10px; font-weight: 700; color: var(--navy); }
.queue button:hover { background: #F1F5F9; }
.queue em { font-style: normal; min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; background: rgba(240,120,8,.14); color: var(--orange-2); font-size: .72rem; font-weight: 800; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: #F8FAFC; }
.dispute { display: grid; gap: 8px; }
.dispute__item { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.dispute__item h3 { margin: 6px 0; font-family: var(--display); font-size: .95rem; }
.dispute__item p { margin: 0; color: var(--muted); font-size: .86rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 24px; font-weight: 600; font-size: .88rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: inset 0 0 0 3px #BFDBFE; }

.modal[hidden] { display: none !important; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(7,17,31,.55); backdrop-filter: blur(6px); }
.modal__sheet { position: relative; width: min(720px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.3); background: rgba(7,17,31,.4); color: #fff; }
.modal__hero { position: relative; min-height: 160px; color: #fff; }
.modal__hero img { position: absolute; inset: 0; width: 100%; height: 100%; }
.modal__hero > div { position: relative; z-index: 1; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: linear-gradient(transparent, rgba(7,17,31,.85)); }
.modal__hero h2 { margin: 4px 0 0; font-family: var(--display); }
.modal__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; padding: 16px; }
.modal__side { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--bg-soft); }
.modal__side h3 { margin: 0 0 10px; font-family: var(--display); }
.modal__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(12px);
  background: var(--navy); color: #fff; padding: 11px 16px; border-radius: 12px; font-weight: 700; font-size: .88rem;
  opacity: 0; pointer-events: none; transition: .25s var(--ease); z-index: 120;
}
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

.mobile-drawer {
  display: none; flex-direction: column; gap: 2px; padding: 8px 16px 18px;
  background: rgba(255,255,255,.97); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  animation: drawerIn .28s var(--ease);
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.mobile-drawer:not([hidden]) { display: flex; }
.mobile-drawer a, .mobile-drawer button {
  text-align: left; font-weight: 700; color: var(--ink); text-decoration: none;
  border: 0; background: transparent; padding: 12px 4px; font: inherit; cursor: pointer;
}
.frame[data-device="mobile"] .mobile-drawer:not([hidden]) { display: flex; }
.frame[data-device="desktop"] .mobile-drawer { display: none !important; }

.contact-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 8px;
  max-width: 560px;
}
.contact-form .field--full { grid-column: 1 / -1; }
.contact-form textarea {
  width: 100%; border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  padding: 10px 12px; background: rgba(255,255,255,.12); color: #fff; resize: vertical;
}
.contact-form .field span { color: rgba(255,255,255,.75); }
.contact-form input {
  width: 100%; border: 1px solid rgba(255,255,255,.28); border-radius: 10px;
  padding: 10px 12px; background: rgba(255,255,255,.12); color: #fff;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,.45); }
.frame[data-device="mobile"] .contact-form { grid-template-columns: 1fr; }

/* Login */
.login-page {
  min-height: 760px; display: grid; grid-template-columns: 1fr 1.05fr; background: var(--bg-soft);
}
/* Étapes 2+ du parcours d'inscription (véhicule, documents) : plus de champs
   que la carte de connexion standard - la colonne image décorative cède la
   place à une carte plus large et centrée. */
.login-page--wide { grid-template-columns: 1fr; }
.login-page--wide .login-side { display: none; }
.login-card {
  padding: 52px 44px; display: grid; align-content: center; gap: 10px; background: #fff;
}
.login-card__logo { width: min(210px, 68%); height: auto; object-fit: contain; margin-bottom: 6px; }
.login-kicker {
  margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
}
.login-card h1 { margin: 0; font-family: var(--display); font-size: 1.85rem; letter-spacing: -.025em; }
.login-lead { margin: 0 0 10px; color: var(--muted); line-height: 1.5; }
.login-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.role-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 12px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); cursor: pointer;
  transition: .2s var(--ease);
}
.role-card:hover { border-color: #CBD5E1; }
.role-card:has(input:checked) {
  border-color: var(--blue); background: rgba(16,104,184,.07);
  box-shadow: 0 0 0 3px rgba(16,104,184,.1);
}
.role-card input { margin-top: 3px; accent-color: var(--blue); }
.role-card b { display: block; font-size: .92rem; color: var(--ink); }
.role-card small { display: block; margin-top: 3px; color: var(--muted); font-size: .78rem; line-height: 1.35; font-weight: 550; }
.login-help { margin: 8px 0 0; font-size: .8rem; color: var(--muted); text-align: center; }
.login-side { position: relative; min-height: 400px; }
.login-side img { position: absolute; inset: 0; width: 100%; height: 100%; filter: contrast(1.04); }
.login-side > div {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px;
  background: linear-gradient(transparent, rgba(6,16,28,.92)); color: #fff;
}
.login-side strong { font-family: var(--display); font-size: 1.2rem; letter-spacing: -.01em; }
.login-side p { margin: 8px 0 0; opacity: .78; line-height: 1.45; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.search { flex: 1; min-width: 160px; }
.search input, .select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff;
}
.search--sm { width: 200px; flex: initial; }
.chart-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.chart-card h3 { margin: 0 0 10px; font-family: var(--display); font-size: 1rem; }
.chart { width: 100%; height: 160px; display: block; }
.link { border: 0; background: none; color: var(--blue); font-weight: 800; text-decoration: underline; cursor: pointer; }

.frame[data-device="mobile"] .login-page { grid-template-columns: 1fr; min-height: 760px; }
.frame[data-device="mobile"] .login-side { display: none; }
.frame[data-device="mobile"] .login-card {
  padding: 36px 20px 48px; align-content: start; min-height: 760px;
  background:
    radial-gradient(420px 220px at 100% -10%, rgba(240,120,8,.1), transparent 55%),
    radial-gradient(360px 200px at 0% 100%, rgba(16,104,184,.08), transparent 50%),
    #fff;
}
.frame[data-device="mobile"] .login-card h1 { font-size: 1.7rem; }
.frame[data-device="mobile"] .login-roles { gap: 8px; }
.frame[data-device="mobile"] .role-card { padding: 14px; }
.frame[data-device="mobile"] .search--sm { display: none; }

/* Responsive inside frame */
.frame[data-device="mobile"] .shell { grid-template-columns: 1fr; min-height: 780px; }
.frame[data-device="mobile"] .sidenav { display: none; }
.frame[data-device="mobile"] .mobnav { display: grid; }
.frame[data-device="mobile"] .shell__main {
  padding-bottom: 8px;
  min-height: calc(780px - 66px);
}
.frame[data-device="mobile"] .site-nav,
.frame[data-device="mobile"] .site-header__actions { display: none; }
.frame[data-device="mobile"] .burger { display: inline-flex; }

/* ===== MOBILE APPS CHROME ===== */
.frame[data-device="mobile"] .appbar {
  padding: 12px 14px; gap: 10px; align-items: center;
  border-bottom-color: var(--line);
  background: rgba(255,255,255,.96);
}
.frame[data-device="mobile"] .appbar.is-hidden { transform: none; pointer-events: auto; }
.frame[data-device="mobile"] .appbar h1 {
  font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw;
}
.frame[data-device="mobile"] .appbar p { display: none; }
.frame[data-device="mobile"] .appbar__web { display: none; }
.frame[data-device="mobile"] .appbar__right { gap: 6px; }
.frame[data-device="mobile"] .score { padding: 6px 8px; }
.frame[data-device="mobile"] .score b { font-size: 1rem; }
.frame[data-device="mobile"] .score span { font-size: .62rem; }
.frame[data-device="mobile"] .tpanel,
.frame[data-device="mobile"] .cpanel { padding: 12px 14px 88px; }

.frame[data-device="mobile"] .banner-photo { min-height: 96px; border-radius: 14px; margin-bottom: 12px; }
.frame[data-device="mobile"] .banner-photo > div { padding: 14px; }
.frame[data-device="mobile"] .banner-photo h3 { font-size: 1rem; margin: 6px 0 2px; }
.frame[data-device="mobile"] .banner-photo p { font-size: .8rem; }

.frame[data-device="mobile"] .steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px;
}
.frame[data-device="mobile"] .step {
  justify-content: center; padding: 10px 6px; font-size: 0; gap: 0; border-radius: 12px;
}
.frame[data-device="mobile"] .step span {
  width: 28px; height: 28px; font-size: .82rem; font-weight: 800;
}
.frame[data-device="mobile"] .wizard__form { padding: 14px; border-radius: 14px; }
.frame[data-device="mobile"] .live-summary {
  position: static; display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; padding: 10px;
}
.frame[data-device="mobile"] .live-summary__photo { height: 72px; margin: 0; }
.frame[data-device="mobile"] .live-summary h3 { margin: 0 0 4px; font-size: .95rem; }
.frame[data-device="mobile"] .summary-list { display: none; }
.frame[data-device="mobile"] .summary-price { margin: 0; padding: 8px 10px; }
.frame[data-device="mobile"] .summary-price strong { font-size: .95rem; }
.frame[data-device="mobile"] .wizard__actions {
  position: sticky; bottom: 72px; z-index: 5; margin: 14px -14px -4px;
  padding: 10px 14px; background: rgba(248,250,252,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); gap: 8px;
}
.frame[data-device="mobile"] .wizard__actions .btn { flex: 1; justify-content: center; }

.frame[data-device="mobile"] .toolbar { flex-direction: column; gap: 8px; }
.frame[data-device="mobile"] .toolbar .select { width: 100%; }

.frame[data-device="mobile"] .req-card {
  grid-template-columns: 72px 1fr; gap: 10px; padding: 12px; border-radius: 16px;
}
.frame[data-device="mobile"] .req-card img { width: 72px; height: 72px; border-radius: 12px; }
.frame[data-device="mobile"] .req-card > .btn {
  grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: 2px;
}

.frame[data-device="mobile"] .filters {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin: 0 -14px 12px;
  padding-left: 14px; padding-right: 14px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.frame[data-device="mobile"] .filters::-webkit-scrollbar { display: none; }
.frame[data-device="mobile"] .filters .chip { flex: 0 0 auto; }
.frame[data-device="mobile"] .filters .toggle {
  margin-left: 0; flex: 0 0 auto; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
}

.frame[data-device="mobile"] .mission-card--rich {
  grid-template-columns: 1fr; border-radius: 18px;
}
.frame[data-device="mobile"] .mission-card__media { min-height: 140px; }
.frame[data-device="mobile"] .mission-card__body { padding: 14px; }
.frame[data-device="mobile"] .mission-card__bar { flex-direction: column; align-items: stretch; gap: 10px; }
.frame[data-device="mobile"] .mission-card__actions { display: grid; grid-template-columns: 1fr 1.2fr; }
.frame[data-device="mobile"] .mission-card__actions .btn { justify-content: center; width: 100%; }

.frame[data-device="mobile"] .mrow {
  grid-template-columns: 64px 1fr; gap: 10px; padding: 12px; border-radius: 16px;
}
.frame[data-device="mobile"] .mrow img { width: 64px; height: 64px; border-radius: 12px; }
.frame[data-device="mobile"] .mrow > .btn {
  grid-column: 1 / -1; width: 100%; justify-content: center;
}

.frame[data-device="mobile"] .week { display: none; }
.frame[data-device="mobile"] .plan-agenda { display: grid; }
.frame[data-device="mobile"] .table-wrap--desktop { display: none; }
.frame[data-device="mobile"] .invoice-cards { display: grid; }

.frame[data-device="mobile"] .kpi-row { grid-template-columns: 1fr 1fr; gap: 8px; }
.frame[data-device="mobile"] .kpi-row .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
.frame[data-device="mobile"] .kpi { padding: 12px; }
.frame[data-device="mobile"] .kpi b { font-size: 1.25rem; }

.frame[data-device="mobile"] .docs-grid { grid-template-columns: 1fr; }
.frame[data-device="mobile"] .doc {
  grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px;
}
.frame[data-device="mobile"] .doc strong { grid-column: 1; }
.frame[data-device="mobile"] .doc .pill { justify-self: end; }
.frame[data-device="mobile"] .doc small,
.frame[data-device="mobile"] .doc .link { grid-column: 1 / -1; }

.frame[data-device="mobile"] .track-map { min-height: 220px; border-radius: 16px; }
.frame[data-device="mobile"] .track-card { padding: 14px; }
.frame[data-device="mobile"] .truck-pin { color: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }

.frame[data-device="mobile"] .modal { align-items: end; padding: 0; }
.frame[data-device="mobile"] .modal__sheet {
  width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0;
  animation: sheetUp .32s var(--ease);
}
@keyframes sheetUp {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: none; opacity: 1; }
}
.frame[data-device="mobile"] .modal__hero { min-height: 140px; }
.frame[data-device="mobile"] .modal__grid { padding: 14px; gap: 12px; }
.frame[data-device="mobile"] .modal__actions {
  position: sticky; bottom: 0; background: #fff; padding-top: 10px; margin: 0;
}
.frame[data-device="mobile"] .modal__actions .btn { flex: 1; justify-content: center; }

.frame[data-device="mobile"] .hero,
.frame[data-device="mobile"] .section__split,
.frame[data-device="mobile"] .solution-cards,
.frame[data-device="mobile"] .services-grid,
.frame[data-device="mobile"] .steps-line,
.frame[data-device="mobile"] .routes,
.frame[data-device="mobile"] .routes--text,
.frame[data-device="mobile"] .benefits,
.frame[data-device="mobile"] .coverage-grid,
.frame[data-device="mobile"] .testimonials,
.frame[data-device="mobile"] .quotes,
.frame[data-device="mobile"] .cta-panel,
.frame[data-device="mobile"] .footer__grid,
.frame[data-device="mobile"] .stats,
.frame[data-device="mobile"] .solution,
.frame[data-device="mobile"] .solution--reverse,
.frame[data-device="mobile"] .about-visual,
.frame[data-device="mobile"] .feature-strip,
.frame[data-device="mobile"] .wizard__body,
.frame[data-device="mobile"] .grid-2,
.frame[data-device="mobile"] .track-grid,
.frame[data-device="mobile"] .bo-grid,
.frame[data-device="mobile"] .fleetmap,
.frame[data-device="mobile"] .kpi-row--4,
.frame[data-device="mobile"] .recap,
.frame[data-device="mobile"] .modal__grid,
.frame[data-device="mobile"] .contact-form--light { grid-template-columns: 1fr; }

.frame[data-device="mobile"] .hero {
  padding: 108px 18px 48px; min-height: 520px; align-items: end; margin-top: -60px;
}
.frame[data-device="mobile"] .hero__brand { font-size: 1.85rem; }
.frame[data-device="mobile"] .hero h1 { font-size: 1.75rem; }
.frame[data-device="mobile"] .lead { font-size: .98rem; }
.frame[data-device="mobile"] .hero__cta { flex-direction: column; align-items: stretch; }
.frame[data-device="mobile"] .hero__cta .btn { width: 100%; }

.frame[data-device="mobile"] .section { padding: 48px 18px 28px; }
.frame[data-device="mobile"] .section__head { margin-bottom: 28px; }
.frame[data-device="mobile"] .section__head h2 { font-size: 1.55rem; }
.frame[data-device="mobile"] .site-header { padding: 12px 16px; }

.frame[data-device="mobile"] .stats { grid-template-columns: 1fr 1fr; }
.frame[data-device="mobile"] .stats > div {
  padding: 18px 12px; border-bottom: 1px solid var(--line);
}
.frame[data-device="mobile"] .stats > div:nth-child(2n) { border-right: 0; }
.frame[data-device="mobile"] .stats b { font-size: 1.35rem; }

.frame[data-device="mobile"] .solution-card,
.frame[data-device="mobile"] .services-grid article,
.frame[data-device="mobile"] .coverage-grid article,
.frame[data-device="mobile"] .testimonial,
.frame[data-device="mobile"] .routes--text article {
  padding: 20px 18px;
}

.frame[data-device="mobile"] .cta-panel { padding: 24px 18px; gap: 22px; }
.frame[data-device="mobile"] .footer { padding: 40px 18px 22px; }
.frame[data-device="mobile"] .footer__grid { gap: 28px; }
.frame[data-device="mobile"] .footer__bottom { flex-direction: column; gap: 6px; }

.frame[data-device="mobile"] .mobile-drawer {
  padding: 8px 16px 20px; gap: 2px;
  background: linear-gradient(180deg, #fff, #F8FAFC);
}
.frame[data-device="mobile"] .mobile-drawer a {
  padding: 13px 4px; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.frame[data-device="mobile"] .mobile-drawer .btn {
  width: 100%; margin-top: 8px; justify-content: center;
}
.frame[data-device="mobile"] .mobile-drawer .btn + .btn { margin-top: 8px; }

.frame[data-device="mobile"] .week__head { display: none; }
.frame[data-device="mobile"] .toggle:not(.filters .toggle) { margin-left: 0; width: 100%; }
.frame[data-device="mobile"] .faq__item summary { font-size: .98rem; }
.frame[data-device="mobile"] .prose { font-size: .98rem; }

.frame[data-device="mobile"] .about-visual { gap: 22px; }
.frame[data-device="mobile"] .about-visual__copy p:not(.kicker) { max-width: none; }
.frame[data-device="mobile"] .about-visual__grid {
  grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px; gap: 8px;
}
.frame[data-device="mobile"] .about-visual__grid img:first-child { grid-row: auto; }

.frame[data-device="mobile"] .solution--reverse .solution__photo { order: 0; }
.frame[data-device="mobile"] .solution__photo { min-height: 220px; }
.frame[data-device="mobile"] .solution__body { padding: 22px 18px; gap: 10px; }
.frame[data-device="mobile"] .solution__body h3 { font-size: 1.2rem; }
.frame[data-device="mobile"] .solutions { gap: 22px; }

.frame[data-device="mobile"] .steps-line { gap: 10px; margin-bottom: 20px; }
.frame[data-device="mobile"] .steps-line li { padding: 16px 14px; }

.frame[data-device="mobile"] .feature-strip { gap: 10px; }
.frame[data-device="mobile"] .feature-strip figure { min-height: 160px; }

.frame[data-device="mobile"] .mosaic {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 180px 140px 140px;
  gap: 8px;
  margin-bottom: 14px;
}
.frame[data-device="mobile"] .mosaic__lg { grid-column: 1 / -1; grid-row: auto; }
.frame[data-device="mobile"] .mosaic figcaption { padding: 12px; }
.frame[data-device="mobile"] .mosaic strong { font-size: .95rem; }
.frame[data-device="mobile"] .mosaic span { font-size: .72rem; }

.frame[data-device="mobile"] .routes article {
  grid-template-columns: 72px 1fr; gap: 12px; padding: 12px;
}
.frame[data-device="mobile"] .routes img { width: 72px; height: 64px; }
.frame[data-device="mobile"] .routes h3 { font-size: .95rem; }

.frame[data-device="mobile"] .benefits { gap: 10px; margin-bottom: 16px; }
.frame[data-device="mobile"] .benefits > div { padding: 16px 14px; }
.frame[data-device="mobile"] .benefits__visual { min-height: 180px; }
.frame[data-device="mobile"] .benefits__visual img { height: 180px; }

.frame[data-device="mobile"] .quotes { gap: 12px; }
.frame[data-device="mobile"] .quotes article { min-height: 300px; }
.frame[data-device="mobile"] .quotes__body { padding: 18px; }
.frame[data-device="mobile"] .quotes blockquote { font-size: .95rem; }

.frame[data-device="mobile"] .cta-visual { min-height: 420px; border-radius: 16px; }
.frame[data-device="mobile"] .cta-visual__content {
  padding: 28px 18px 32px; max-width: none;
  background: linear-gradient(180deg, transparent 5%, rgba(6,16,28,.94) 42%);
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px;
}
.frame[data-device="mobile"] .cta-visual__content h2 { font-size: 1.45rem; }
.frame[data-device="mobile"] .cta-visual .hero__cta { flex-direction: column; align-items: stretch; }
.frame[data-device="mobile"] .cta-visual .hero__cta .btn { width: 100%; }

.frame[data-device="mobile"] .section--cta { padding-bottom: 28px; }
.frame[data-device="mobile"] .testimonial { padding: 18px 16px; }

@media (max-width: 900px) {
  .studio__device { margin-left: 0; }
  .section__split,
  .solution-cards,
  .services-grid,
  .steps-line,
  .routes,
  .routes--text,
  .benefits,
  .coverage-grid,
  .testimonials,
  .quotes,
  .about-visual,
  .feature-strip,
  .cta-panel,
  .footer__grid,
  .stats { grid-template-columns: 1fr; }
  .mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 140px 140px;
  }
  .mosaic__lg { grid-column: 1 / -1; grid-row: auto; }
}