/* ==========================================================================
   FleetMind home page only (templates/marketing/home.html). Loaded after
   public.css, which holds everything the inner pages share.
   ========================================================================== */

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;padding:140px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.16),transparent 62%);top:-280px;left:-200px;pointer-events:none}
.hero::after{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,164,.12),transparent 62%);bottom:-300px;right:-180px;pointer-events:none}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-copy h1{font-size:clamp(34px,4.6vw,56px);font-weight:800;margin:18px 0 20px}
.hero-copy h1 .hl{color:var(--cyan)}
.hero-copy p{font-size:clamp(16px,1.6vw,19px);color:#c7d4e8;max-width:520px;margin-bottom:30px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;color:#9fb2cf;font-size:13.5px;font-weight:500}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust .dt{width:6px;height:6px;border-radius:50%;background:var(--emerald)}

/* ---------- hero product mock ---------- */
.hero-visual{position:relative;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.mock-inner{padding:18px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:14px}
.tile{background:rgba(21,49,90,.7);border:1px solid rgba(255,255,255,.05);border-radius:12px;padding:14px}
.tile .v{font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.tile .l{color:#9fb2cf;font-size:12px;margin-top:5px}
.tile.c1 .v{color:var(--cyan)} .tile.c2 .v{color:var(--amber)} .tile.c3 .v{color:var(--emerald)} .tile.c4 .v{color:var(--teal)}
.rows{display:flex;flex-direction:column;gap:9px}
.row{display:flex;align-items:center;gap:10px;background:rgba(17,42,78,.65);border-radius:10px;padding:10px 12px}
.row .pill{flex:1;height:9px;border-radius:6px;background:#27466e}
.row .pill.short{flex:.55}
.row .led{width:9px;height:9px;border-radius:50%}
.row .led.l1{background:#06B6D4}.row .led.l2{background:#F59E0B}.row .led.l3{background:#10B981}
.live{display:inline-flex;align-items:center;gap:6px;background:var(--emerald);color:#04231a;font-family:var(--display);font-weight:700;font-size:11px;padding:5px 12px;border-radius:999px;margin-bottom:14px;box-shadow:0 8px 18px -6px rgba(16,185,129,.6)}
.live .blink{width:7px;height:7px;border-radius:50%;background:#04231a;animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- ROI band ---------- */
.roi{background:var(--ink);color:#fff;overflow:hidden}
.roi::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.14),transparent 62%);top:-260px;right:-160px}
.roi .sec-head h2{color:#fff}
.roi .sec-head p{color:#c7d4e8}
.roi-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.stat{text-align:center;background:rgba(21,49,90,.5);border:1px solid rgba(255,255,255,.06);border-radius:var(--r);padding:32px 26px}
.stat-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin:0 auto 18px;background:rgba(6,182,212,.14);color:var(--cyan)}
.stat:nth-child(2) .stat-ic{background:rgba(16,185,129,.14);color:var(--emerald)}
.stat:nth-child(3) .stat-ic{background:rgba(14,165,164,.16);color:#2dd4bf}
.stat-ic svg{width:28px;height:28px}
.stat h3{font-size:21px;font-weight:700;color:#fff}
.stat .lbl{color:#c7d4e8;font-size:15.5px;margin-top:12px}

/* ---------- the "all features" card and the link under the questions ---------- */
.card-all{background:var(--ink);border-color:var(--ink);display:flex;flex-direction:column;justify-content:center}
.card-all h3{color:#fff}
.card-all p{color:#c7d4e8}
.card-all .more{color:var(--cyan)}
.faq-more{margin-top:22px;font-family:var(--display);font-weight:600}
.faq-more a{color:#0e7490;text-decoration:underline;text-underline-offset:4px}

/* ---------- screens gallery ---------- */
.gallery{background:var(--ink);color:#fff;overflow:hidden}
.gallery .sec-head h2{color:#fff}
.gallery .sec-head p{color:#c7d4e8}
.gallery::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(6,182,212,.12),transparent 62%);top:-260px;left:-160px;pointer-events:none}
.gallery-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.55fr .85fr;gap:36px;align-items:center}
.gallery .appframe{margin:0}
.cap{margin-top:16px;color:#c7d4e8;font-size:14.5px;text-align:center}
.phone{position:relative;width:248px;margin:0 auto;background:#0a1730;border:1px solid var(--line-navy);border-radius:38px;padding:26px 12px 14px;box-shadow:var(--shadow-lg)}
.phone::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:80px;height:6px;border-radius:6px;background:#22456e}
.phone img{display:block;width:100%;height:auto;border-radius:24px}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero{padding:120px 0 70px}
  .hero-visual{max-width:440px;margin:0 auto}
  .roi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){.gallery-grid{grid-template-columns:1fr;gap:44px}}
@media (max-width:560px){
  .roi-grid{grid-template-columns:1fr}
  .hero-copy h1{font-size:clamp(30px,7.5vw,42px)}
  .hero-copy p{font-size:16px}
}