/* ----------------------------------------------------------
   CARBN • Modern UI (Light) - Expanded Base Styles
   - Tokens & theme
   - Typography & resets
   - Layout primitives (container/stack/rows)
   - Header + Nav (desktop/mobile)
   - Hero, Cards, Sections
   - Buttons, Forms, Tables
   - Modal / Popover / Toast-ish helper
   - Footer
   - Utilities (spacing, display, flex/grid, text, shadows, radius)
   - Accessibility & motion prefs
   ---------------------------------------------------------- */

/* =========================
   Tokens
   ========================= */
:root{
  /* Brand */
  --brand-carbn:#042B2F;
  --brand-zilch:#286DF6;
  --brand-sff:#10b981;

  /* Accents */
  --accent:#00c7b1;
  --accent-strong:#00b2a0;
  --accent-soft:#e6faf7;

  /* Ink & neutrals */
  --ink:#0b1220;
  --text:#1e293b;
  --muted:#475569;

  /* Lines & surfaces */
  --border:#e5e7eb;
  --line:#eef2f6;
  --bg:#ffffff;
  --bg-subtle:#f8fafc;

  /* Effects */
  --shadow:0 10px 30px rgba(2,8,23,.08);
  --shadow-lg:0 16px 36px rgba(2,8,23,.12);
  --ring:0 0 0 3px rgba(0,199,177,.25);

  /* Type scale */
  --fs-xs:.8125rem;
  --fs-sm:.9rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.25rem;
  --fs-2xl:clamp(1.5rem,3.6vw,2rem);
  --fs-3xl:clamp(2rem,4.5vw,3.2rem);

  /* Radius */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-pill:999px;

  /* Spacing scale */
  --s-1:.25rem;  /* 4px  */
  --s-2:.5rem;   /* 8px  */
  --s-3:.75rem;  /* 12px */
  --s-4:1rem;    /* 16px */
  --s-5:1.25rem; /* 20px */
  --s-6:1.5rem;  /* 24px */
  --s-8:2rem;    /* 32px */
  --s-10:2.5rem; /* 40px */
  --s-12:3rem;   /* 48px */
}

.whitetext {
  color: #ffffff !important;
}

html,body{height:100%}
*{box-sizing:border-box}
*,:before,:after{box-sizing:border-box}

body{
  min-height: 100vh;          /* fallback */
  min-height: 100svh;         /* modern browsers - respects safe UI */
  display: flex;
  flex-direction: column;
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

main{ flex: 1 0 auto; }       /* lets content take remaining space */
footer{ margin-top: auto; }   /* belt-and-braces if <main> is missing */

/* =========================
   Typography base
   ========================= */
h1,h2,h3,h4,h5,h6{color:var(--ink);margin:.2em 0 .4em;line-height:1.15}
h1{font-size:var(--fs-3xl);font-weight:900}
h2{font-size:var(--fs-2xl);font-weight:800}
h3{font-size:var(--fs-xl);font-weight:800}
p{margin:0 0 var(--s-4);color:var(--text)}
small{font-size:var(--fs-xs);color:var(--muted)}
.lede{color:var(--muted);font-size:clamp(1rem,1.6vw,1.1rem);max-width:60ch}
.kicker{
  color:var(--accent-strong);font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;font-size:.8rem
}
a{color:inherit}
a:where(:focus-visible){outline:none;box-shadow:var(--ring);border-radius:8px}

/* =========================
   Layout primitives
   ========================= */
.container{ width:min(1200px,92vw); margin:0 auto; }
.container.narrow{ width:min(880px,92vw); }
.stack{ display:flex; flex-direction:column; gap:var(--s-4); }
.row{ display:flex; gap:var(--s-5); flex-wrap:wrap; }
.center{ display:grid; place-items:center; }
.hidden{ display:none !important; }

/* Responsive switches */
@media (max-width:980px){ .row{ gap:var(--s-4); } }

/* =========================
   Header & Navigation
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.container.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0; position:relative;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--ink);
  font-weight:800; letter-spacing:.2px;
}
.brand .logo-img{ height:28px; width:auto; display:block; }

/* Desktop nav */
.site-nav ul{ list-style:none; display:flex; gap:.5rem; margin:0; padding:0; }
.site-nav a.link{
  text-decoration:none; color:var(--muted);
  font-weight:700; padding:.5rem .75rem; border-radius:10px;
}
.site-nav a.link:hover,
.site-nav a.link.active{ color:var(--ink); background:var(--accent-soft); }

/* CTA (header) */
.cta{
  background:var(--accent); color:#fff;
  padding:.55rem .9rem; border-radius:12px;
  font-weight:800; text-decoration:none;
  box-shadow:var(--shadow);
}
.cta:hover{ background:var(--accent-strong); }

/* Mobile dropdown nav */
.nav-toggle{
  display:none; appearance:none; border:0; background:transparent;
  padding:.4rem; border-radius:10px; cursor:pointer; color:var(--ink);
}
.nav-toggle .icon-close{ display:none; }

@media (max-width:880px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .site-nav{
    position:absolute; top:calc(100% + 6px); left:0; right:0;
    display:none;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-lg); z-index:1100; padding:.5rem .5rem;
  }
  .site-nav ul{ flex-direction:column; gap:.25rem; padding:0; }
  .site-nav a.link{
    display:block; color:var(--ink) !important;
    padding:.8rem 1rem; border-radius:10px; font-weight:700;
  }
  .site-nav a.link:hover{ background:var(--accent-soft); }
  .site-nav[data-open="true"]{ display:block; }

  body.nav-open #nav-toggle .icon-hamburger{ display:none; }
  body.nav-open #nav-toggle .icon-close{ display:block; }

  html.nav-open, body.nav-open{ overflow:auto; }
}

/* =========================
   Hero
   ========================= */
.hero{ position:relative; overflow:hidden; }
.hero-wrap{
  display:grid; grid-template-columns:1.05fr 1.4fr;
  gap:2rem; align-items:center;
  padding:clamp(2rem,6vw,5rem) 0;
}
.h1{
  font-size:var(--fs-3xl);
  line-height:1.1; color:var(--ink);
  margin:.4rem 0 .6rem; font-weight:900;
}
.actions{ display:flex; gap:.6rem; align-items:center; margin-top:1rem; }
.ghost{
  border:1px solid var(--border);
  padding:.55rem .9rem; border-radius:12px;
  text-decoration:none; color:var(--ink);
  font-weight:800;
}
.ghost:hover{ background:var(--line); }

@media (max-width:980px){ .hero-wrap{ grid-template-columns:1fr; } }

/* =========================
   Cards
   ========================= */
.tiles{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
@media (min-width:981px) and (max-width:1240px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px){ .tiles{ grid-template-columns:1fr; } }

.card{
  position:relative; isolation:isolate;
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1rem; background:#fff; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
  min-height:180px; display:flex; flex-direction:column; justify-content:space-between;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.chip{
  font-size:.72rem; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; padding:.35rem .55rem;
  border-radius:var(--r-pill); background:var(--accent-soft);
  color:var(--muted); width:max-content;
}
.card h3{ margin:.5rem 0 .35rem; font-size:1.15rem; color:var(--ink); }
.card p{ margin:0; color:var(--muted); font-size:.95rem; }
.card a{ margin-top:.8rem; text-decoration:none; font-weight:900; }
.carbn a{ color:var(--brand-carbn); }
.zilch a{ color:var(--brand-zilch); }
.sff a{ color:var(--brand-sff); }
.brand-mark{
  position:absolute; right:.9rem; top:.9rem;
  width:36px; height:36px; border-radius:10px; opacity:.9;
}
.carbn .brand-mark{ background:linear-gradient(135deg,var(--brand-carbn),#042B2F); }
.zilch .brand-mark{ background:linear-gradient(135deg,var(--brand-zilch),#75a0ff); }
.sff .brand-mark{ background:linear-gradient(135deg,var(--brand-sff),#6ee7b7); }

/* Persona strip */
.personas{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  border:1px dashed var(--border);
  padding:.5rem .75rem; border-radius:var(--r-pill);
  color:var(--muted); text-decoration:none; font-weight:800;
}
.pill:hover{ border-style:solid; color:var(--ink); background:var(--accent-soft); }

/* =========================
   Sections
   ========================= */
.section{ padding:3rem 0 1.5rem; }
.section h2{ margin:0 0 .25rem; }
.section p.lead{ margin:0; }

/* =========================
   Buttons (BEM-ready)
   ========================= */
.btn{
  --btn-bg:var(--accent);
  --btn-fg:#fff;
  --btn-bd:transparent;

  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; text-decoration:none; cursor:pointer;
  padding:.65rem 1rem; border-radius:var(--r-md);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  box-shadow:var(--shadow); transition:filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(0.98) }
.btn:active{ transform:translateY(1px) }
.btn:where(:focus-visible){ outline:none; box-shadow:var(--ring); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--border); box-shadow:none; }

.btn--light{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:var(--border); }
.btn--carbn{ --btn-bg:var(--brand-carbn); }
.btn--zilch{ --btn-bg:var(--brand-zilch); }
.btn--sff{   --btn-bg:var(--brand-sff); }
.btn--sm{ padding:.5rem .75rem; font-size:var(--fs-sm); }
.btn--lg{ padding:.85rem 1.25rem; font-size:var(--fs-lg); }

/* =========================
   Forms
   ========================= */
.input, input[type="text"], input[type="email"], input[type="search"], input[type="password"],
select, textarea{
  width:100%; padding:.65rem .8rem;
  border:1px solid var(--border); border-radius:var(--r-md);
  background:#fff; color:var(--ink); font-size:var(--fs-md);
  transition:box-shadow .15s ease,border-color .15s ease;
}
input::placeholder, textarea::placeholder{ color:#94a3b8; }
:where(.input, input, select, textarea):focus{
  outline:none; border-color:var(--accent-strong); box-shadow:var(--ring);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
@media (max-width:780px){ .form-row{ grid-template-columns:1fr; } }
.label{ display:block; font-weight:700; margin:0 0 .35rem; color:var(--ink) }
.help{ color:var(--muted); font-size:var(--fs-sm); margin-top:.25rem }

/* =========================
   Tables
   ========================= */
.table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;
}
.table th,.table td{ padding:.75rem 1rem; text-align:left; }
.table thead th{ background:var(--bg-subtle); color:var(--ink); font-weight:800; border-bottom:1px solid var(--border); }
.table tbody tr+tr td{ border-top:1px solid var(--line); }
.table tbody tr:hover{ background:#fcfdfd; }

/* =========================
   Modal (custom dialog)
   ========================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(2, 8, 23, 0.45);
  z-index: 1200;
}

.modal {
  width: min(640px, 92vw);
  background: #fff;
  border-radius: var(--r-lg, 1rem);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(2, 8, 23, 0.2));
  padding: var(--s-6, 2rem);
  border: 1px solid var(--border, #e5e7eb);
  position: relative;
}

.modal header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4, 1rem);
}

.modal h2 {
  margin: 0;
  font-size: var(--fs-xl, 1.5rem);
  font-weight: 800;
  color: var(--ink, #0b1220);
}

.modal .close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #475569);
}

.modal .content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.q-grid {
  display: grid;
  gap: 1rem;
}

.q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  background: var(--accent-soft, #e6faf7);
  padding: 1rem;
  border-radius: var(--r-md, 0.75rem);
  color: var(--text, #1e293b);
  transition: background 0.2s ease;
}

.q:hover {
  background: var(--accent, #00c7b1);
  color: #fff;
}

.q strong {
  font-size: 1.5rem;
}

/* Modal hidden by default */
.hidden {
  display: none !important;
}

/* =========================
   Popover / helper (Help choose)
   ========================= */
.help-choose-popup{
  display:none; position:fixed; bottom:20px; right:20px; z-index:1300;
}
.help-choose-popup.active{ display:block; }
.help-choose-popup .panel{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:var(--s-5); width:min(360px,90vw);
}
.help-choose-popup .close{
  position:absolute; top:.5rem; right:.5rem; border:0; background:transparent;
  cursor:pointer; padding:.4rem; border-radius:8px;
}
.help-choose-popup .close:where(:hover,:focus-visible){ background:var(--accent-soft); box-shadow:var(--ring); }

/* =========================
   Footer
   ========================= */
footer{ border-top:1px solid var(--border); padding:2rem 0; margin-top:2rem; color:var(--muted); font-size:.95rem; }
.site-footer{ background:var(--bg-subtle); border-top:1px solid #e5e7eb; padding:1.25rem 0; font-size:.9rem; color:var(--muted); }
.footer-layout{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-items:center; gap:.75rem 1.25rem; padding:.5rem 0;
  border-top:1px solid var(--line);
}
.footer-layout>:first-child{ justify-self:start; }
.footer-layout>.brand{ justify-self:center; }
.footer-layout>.footer-links{ justify-self:end; }
@media (max-width:720px){
  .footer-layout>*{ justify-self:center; text-align:center; }
}
footer .brand{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; font-weight:500; }
footer .brand .logo-img{ width:28px; height:28px; object-fit:contain; display:block; }
.footer-links{ display:inline-flex; gap:1rem; flex-wrap:wrap; }
.footer-links a{ color:var(--brand-zilch); text-decoration:none; font-weight:700; }
.footer-links a:hover{ text-decoration:underline; }

/* =========================
   Index page overrides (hero BG)
   ========================= */
.index-page::before{
  content:"";
  position:fixed; inset:0;
  background:
    linear-gradient(180deg, rgba(2,8,23,.35), rgba(2,8,23,.10) 40%, rgba(2,8,23,.25)),
    url("/assets/images/image_7.png") center/cover no-repeat;
  z-index:-1; pointer-events:none;
}
.hero, .container{ position:relative; z-index:1; }
body.index-page .site-header{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.25) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.index-page .hero .kicker{ /* teal text for Fleet • Mobility • Finance */ 
  color: var(--accent);
},
body.index-page .hero .h1,
body.index-page .hero .lede{
  /* Ensure hero headline and tagline are white on the home page */
  color:#ffffff !important;
}

/* Slightly dim the supporting text on the home page hero for better contrast */
body.index-page .hero .lede{
  opacity:0.92;
}
body.index-page .brand{ color:#fff !important; }
@media (min-width:881px){
  body.index-page .site-nav a.link{
    color:#fff !important; font-weight:700;
  }
  body.index-page .site-nav a.link:hover,
  body.index-page .site-nav a.link.active{
    color:#fff !important; background:rgba(255,255,255,.14);
  }
}
.index-page .nav-toggle{ color:#fff; }
.index-page .nav-toggle:hover{ background:rgba(255,255,255,.12); }

body.index-page .hero .ghost{
  background: rgba(255,255,255,.5);   /* 50% white */
}

/* =========================
   SFF one-off tweaks (kept)
   ========================= */
.logo-sff{ height:120px; width:auto; }
.brand-sff{ position:relative; top:20px; justify-content:center; }

/* =========================
   Defensive fixes
   ========================= */
.hero, .page-hero, .header-hero-wrap{ z-index:0; transform:none; }

/* =========================
   Homepage footer contrast over hero
   ========================= */
body.index-page footer,
body.index-page .site-footer{
  background: rgba(4,43,47,.65);
  color:#fff !important;
  border-top:1px solid rgba(255,255,255,.25) !important;
}
body.index-page footer .brand,
body.index-page .site-footer .brand{ color:#fff !important; }
body.index-page .footer-links a{
  color:#fff !important; opacity:.9; text-decoration:none;
}

body.index-page .footer-links a:hover{ opacity:1; text-decoration:underline; }

/* =========================
   Utilities (quick wins)
   ========================= */
/* Spacing (margin) */
.m-0{margin:0}.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}
.mb-1{margin-bottom:var(--s-1)}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}
.mx-auto{margin-inline:auto}

/* Spacing (padding) */
.p-0{padding:0}.p-2{padding:var(--s-2)}.p-3{padding:var(--s-3)}.p-4{padding:var(--s-4)}.p-6{padding:var(--s-6)}
.py-2{padding-block:var(--s-2)}.py-4{padding-block:var(--s-4)}.px-4{padding-inline:var(--s-4)}

/* Display */
.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}
.d-flex{display:flex}.d-grid{display:grid}

/* Flex helpers */
.flex-row{flex-direction:row}.flex-col{flex-direction:column}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-center{justify-content:center}.justify-between{justify-content:space-between}

/* Grid helpers */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:960px){ .grid-2,.grid-3{grid-template-columns:1fr} }

/* Width */
.w-full{width:100%}.w-auto{width:auto}.max-w-prose{max-width:72ch}

/* Text */
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}
.text-underline{text-decoration:underline}.text-muted{color:var(--muted)}
.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}
.fw-400{font-weight:400}.fw-600{font-weight:600}.fw-800{font-weight:800}
.fs-sm{font-size:var(--fs-sm)}.fs-lg{font-size:var(--fs-lg)}.fs-xl{font-size:var(--fs-xl)}

/* Border & radius & shadow */
.border{border:1px solid var(--border)}.border-0{border:0}
.rounded{border-radius:var(--r-sm)}.rounded-md{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}.rounded-full{border-radius:var(--r-pill)}
.shadow{box-shadow:var(--shadow)}.shadow-lg{box-shadow:var(--shadow-lg)}

/* Position & overflow & z */
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.z-10{z-index:10}.z-100{z-index:100}.z-1000{z-index:1000}

/* Brand tint utilities */
.bg-carbn{background:var(--brand-carbn);color:#fff}
.bg-zilch{background:var(--brand-zilch);color:#fff}
.bg-sff{background:var(--brand-sff);color:#fff}
.text-carbn{color:var(--brand-carbn)}.text-zilch{color:var(--brand-zilch)}.text-sff{color:var(--brand-sff)}

/* =========================
   Accessibility & Motion
   ========================= */
:where(a,button,.btn,.link):focus-visible{ outline:none; box-shadow:var(--ring); }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.subnav {
  margin: 1rem 0 2rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.subnav li {
  margin: 0;
}

.subnav a {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s ease;
}

.subnav a:hover,
.subnav a:focus {
  color: var(--ink);
  background: var(--accent-soft);
}

.subnav a.active {
  color: #fff;
  background: var(--accent);
}

.container-wide{ width:min(1200px, 92vw); margin-inline:auto; }