/* GritCargo Fuel-Theft Prevention — shares the design system + chrome of the
   GritCargo mining/investor decks so the decks look and behave as one product.
   Fonts loaded via <link> in HTML. */

/* ── DESIGN TOKENS ── */
:root {
  --deep-navy:      #253045;
  --signal-green:   #B4EE2B;
  --cargo-black:    #0A0A0A;
  --white:          #FFFFFF;
  --off-white:      #F1F1F1;
  --mist-blue:      #E7F0FF;
  --ink-text:       #212121;
  --slate-grey:     #636363;
  --navy-tint:      #37526E;
  --hairline:       #E4E6EA;
  --alert-amber:    #D96908;
  --fg-on-dark:     var(--white);
  --fg2-on-dark:    #AEB6C2;
  --border-on-dark: rgba(255,255,255,.14);

  --font-display: 'Open Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --radius-chip:  10px;
  --radius-card:  14px;
  --radius-panel: 18px;
  --radius-pill:  999px;

  --shadow-sm:   0 1px 2px rgba(10,10,10,.06), 0 1px 3px rgba(10,10,10,.08);
  --shadow-md:   0 4px 12px rgba(10,10,10,.08), 0 2px 4px rgba(10,10,10,.05);
  --shadow-lg:   0 18px 48px rgba(10,10,10,.14), 0 6px 16px rgba(10,10,10,.08);
  --shadow-navy: 0 18px 48px rgba(37,48,69,.28);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 60px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--deep-navy);
  color: var(--ink-text);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

/* ── SKIP LINK ── */
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  background: var(--signal-green); color: var(--cargo-black);
  font-weight: 700; padding: 0.6rem 1.2rem; border-radius: var(--radius-pill);
  font-size: 0.9rem; transition: top 0.15s;
}
.skip-link:focus { top: 1rem; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate-grey);
}
.bg-navy .eyebrow, .slide--hero .eyebrow { color: var(--signal-green); }

.hero {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.04; letter-spacing: -0.02em;
}
.title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -0.015em;
}
.body {
  font-family: var(--font-body); font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.6; color: var(--ink-text);
}
.small { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5; color: var(--slate-grey); }
.card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.accent { color: var(--signal-green); }

/* ── WORDMARK ── */
.gc-wordmark {
  font-family: var(--font-display); font-weight: 700; text-transform: lowercase;
  letter-spacing: -0.01em; white-space: nowrap; color: var(--signal-green);
}

/* ── GRULE ── */
.grule { width: 88px; height: 5px; background: var(--signal-green); border-radius: 999px; flex: none; }

/* ── CHIP ── */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; flex: none; background: var(--signal-green); border-radius: var(--radius-chip);
}
.chip img { width: 58%; height: 58%; object-fit: contain; }
.chip.sm { width: 40px; height: 40px; }

/* ── CARD / PANEL ── */
.card {
  background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ── FOCUS RINGS ── */
:focus-visible { outline: 2px solid var(--signal-green); outline-offset: 3px; border-radius: 4px; }

/* ── PILLS ── */
.pill-tag {
  display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); background: var(--signal-green); color: var(--cargo-black);
}

/* ── NAV ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; padding: 0 2rem; gap: 2rem;
  background: rgba(10, 12, 18, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07); transition: background 0.3s;
}
.nav-logo { font-size: 1.3rem; flex: none; }
.nav-links { display: flex; align-items: center; gap: 0; flex: 1; overflow: hidden; }
.nav-links a {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg2-on-dark); padding: 0.4rem 0.6rem; border-radius: 6px;
  white-space: nowrap; transition: color 0.15s, background 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(255,255,255,.07); }
.nav-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto; }
.nav-menu-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-progress { position: fixed; top: var(--nav-h); left: 0; height: 2px; background: var(--signal-green); z-index: 101; width: 0%; transition: width 0.1s linear; }

/* ── MOBILE NAV ── */
.mobile-nav {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
  background: rgba(10, 12, 18, 0.97); display: flex; flex-direction: column; padding: 1rem 2rem 2rem; gap: 0.25rem;
  transform: translateY(-110%); visibility: hidden; transition: transform 0.28s var(--ease), visibility 0.28s;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav.open { transform: translateY(0); visibility: visible; }
.mobile-nav-link {
  font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg2-on-dark); padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06); transition: color 0.15s;
}
.mobile-nav-link:hover { color: #fff; }

/* ── SLIDE LAYOUT ── */
.slide {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  position: relative; padding: calc(var(--nav-h) + 3rem) 6vw 4rem;
}
.bg-light { background: var(--off-white); }
.bg-navy  { background: var(--deep-navy); }
.bg-mist  { background: var(--mist-blue); }
.bg-navy .body { color: #C7CFDC; }
.bg-navy .small { color: var(--fg2-on-dark); }
.bg-navy .title { color: var(--fg-on-dark); }

.slide-inner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.75rem; flex: 1; justify-content: center; }
.slide-num {
  position: absolute; bottom: 2rem; right: 6vw; font-family: var(--font-mono); font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.12em; color: var(--slate-grey);
}
.bg-navy .slide-num, .slide--hero .slide-num { color: var(--fg2-on-dark); }
.col { display: flex; flex-direction: column; gap: 1.5rem; }

/* ── ENTRANCE ANIMATIONS ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-product, .split-media .shot { will-change: transform; transition: transform 0.1s linear; }
  .hero-product.reveal { transform: none !important; transition: opacity 0.55s var(--ease), transform 0.1s linear !important; }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: 0.07s; }
  .reveal.d2 { transition-delay: 0.15s; }
  .reveal.d3 { transition-delay: 0.23s; }
  .reveal.d4 { transition-delay: 0.31s; }
  .reveal.d5 { transition-delay: 0.39s; }
}

/* ── PARTNER BADGE (cover + outcome heroes) ── */
.partner-badge {
  position: absolute; top: calc(var(--nav-h) + 1.5rem); right: 6vw; z-index: 3;
  display: flex; align-items: center; gap: 0.9rem;
  color: var(--fg2-on-dark); font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.partner-lab { line-height: 1.5; text-align: right; }
.partner-lab b { color: #fff; font-weight: 700; display: block; font-size: 0.82rem; letter-spacing: 0.08em; }
.partner-badge img { height: 46px; width: auto; background: #fff; border-radius: 9px; padding: 6px; }

/* ── PRODUCT GRID (solution) ── */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; flex: 1; }
.product-grid--two { grid-template-columns: repeat(2, 1fr); }
.product-card { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.product-img-wrap { height: 240px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.product-img-wrap img { max-height: 100%; object-fit: contain; }
.render { filter: drop-shadow(0 16px 22px rgba(10,10,10,.18)); }
.product-type { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-grey); margin-bottom: 0.25rem; }

/* ── MODEL STEPS (how it works) ── */
.model-steps { display: flex; align-items: stretch; gap: 1rem; margin-top: 1rem; }
.model-card { flex: 1; padding: 2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.model-card--accent { border: 1.5px solid var(--signal-green); box-shadow: var(--shadow-lg); }
.model-card-top { display: flex; align-items: center; justify-content: space-between; }
.step-num { font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--slate-grey); }
.model-step-title { font-size: 1.6rem; margin-top: 0.4rem; }
.model-arrow { font-size: 1.5rem; color: var(--fg2-on-dark); flex: none; align-self: center; }
/* how-it-works sits on navy, so cards stay white but card text reverts to ink */
.bg-navy .model-card .body { color: var(--slate-grey); }
.bg-navy .model-card .card-title { color: var(--cargo-black); }

/* ── SPLIT (problem + gain) ── */
.split-inner { flex-direction: row !important; align-items: center; gap: 4rem; flex: 1; }
.split-inner > .col { flex: 1; }
.split-media { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.shot { border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--hairline); width: 100%; position: relative; }
.shot.photo { aspect-ratio: 4 / 5; }
.shot.photo img { width: 100%; height: 100%; object-fit: cover; }
.dash-badge {
  position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(37,48,69,.92); border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem 0.45rem 0.7rem; color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.82rem;
}
.live-indicator { display: flex; align-items: center; gap: 0.6rem; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal-green); flex: none; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── FEATURES list (gain bullets) ── */
.features { display: flex; flex-direction: column; gap: 1.25rem; }
.feat { display: flex; gap: 0.9rem; align-items: flex-start; }
.feat-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.feat-body { font-size: 0.9rem; color: var(--slate-grey); margin-top: 0.2rem; }

/* ── PROBLEM bullet list (text side) ── */
.blist { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.5rem; }
.blist .feat-title { font-size: 1.1rem; }
.blist .feat-body { font-size: 0.92rem; }

/* ── USP STRIP (solution) ── */
.usp {
  display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem;
  background: var(--signal-green); border-radius: var(--radius-panel); padding: 1.1rem 1.5rem;
}
.usp .chip.sm { background: rgba(10,10,10,.12); }
.usp .ut { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--cargo-black); line-height: 1.35; }
.usp .ut span { font-family: var(--font-body); font-weight: 500; color: rgba(10,10,10,.7); }

/* ── PILLS row ── */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ── THE AGENT (GritClaw) ── */
.agent-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3.5rem; margin-top: 1.5rem; align-items: stretch; }
.agent-col { display: flex; flex-direction: column; justify-content: center; gap: 2rem; min-width: 0; }
.agent-lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.4; color: var(--ink-text); max-width: 26ch; }
.claw {
  background: var(--deep-navy); border-radius: var(--radius-panel); box-shadow: var(--shadow-navy);
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
}
.claw-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--border-on-dark); }
.claw-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.claw-sub { font-family: var(--font-mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg2-on-dark); margin-top: 0.25rem; }
.claw-live { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg2-on-dark); white-space: nowrap; }
.claw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.7rem; padding: 1.4rem 1.6rem; }
.msg { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.45; padding: 0.7rem 1.1rem; border-radius: 16px; max-width: 82%; }
.msg.user { background: var(--signal-green); color: var(--cargo-black); font-weight: 600; align-self: flex-end; border-bottom-right-radius: 5px; }
.msg.agent { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.09); color: #e6ecf4; align-self: flex-start; border-bottom-left-radius: 5px; }
.claw-alert { display: flex; align-items: center; gap: 0.85rem; background: rgba(217,105,8,.14); border: 1px solid rgba(217,105,8,.4); border-radius: 12px; padding: 0.7rem 1rem; margin-right: 18%; align-self: stretch; }
.claw-alert .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--alert-amber); display: flex; align-items: center; justify-content: center; flex: none; }
.claw-alert .ic img { width: 58%; height: 58%; object-fit: contain; }
.claw-alert .at { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.claw-alert .at b { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: #fff; }
.claw-alert .at span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #f0a05a; }
.claw-input { flex: none; margin: 0 1.6rem 1.4rem; border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 0.7rem 1.3rem; font-family: var(--font-body); font-size: 0.9rem; color: var(--fg2-on-dark); }

/* ── FULL-BLEED HERO (cover + outcome) ── */
.slide--hero { padding: 0; justify-content: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15,20,30,.92) 0%, rgba(15,20,30,.62) 42%, rgba(15,20,30,.12) 74%, rgba(15,20,30,.34) 100%),
    linear-gradient(0deg, rgba(15,20,30,.82) 0%, rgba(15,20,30,0) 52%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: calc(var(--nav-h) + 3rem) 6vw 5vw; display: flex; align-items: flex-end; gap: 3rem;
}
.hero-content { flex: 1; display: flex; flex-direction: column; gap: 1.3rem; max-width: 760px; }
.hero-content .hero { color: var(--fg-on-dark); }
.hero-content .body { color: rgba(255,255,255,.86); }
.hero-product { flex: none; width: clamp(360px, 45vw, 750px); align-self: center; position: relative; top: -48px; }
.hero-product img { width: 100%; filter: drop-shadow(0 30px 44px rgba(0,0,0,.5)); }
.hero-foot { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.5rem; }
.brandline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.4rem); color: var(--signal-green); }
.hero-sign { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.hero-sign .gc-wordmark { font-size: 1.3rem; }
.hero-sign .sep { width: 1px; height: 1.3rem; background: rgba(255,255,255,.3); }
.hero-sign .small { color: rgba(255,255,255,.7); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 600; }

/* ── SLIDE COUNTER ── */
.slide-counter {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90; display: flex; align-items: center; gap: 0.5rem;
  background: rgba(10,12,18,.85); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill); padding: 0.35rem 0.75rem;
}
.slide-counter button { background: none; border: none; color: var(--fg2-on-dark); cursor: pointer; font-size: 0.95rem; padding: 0.2rem 0.4rem; border-radius: 6px; transition: color 0.15s, background 0.15s, opacity 0.15s; }
.slide-counter button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.12); }
.slide-counter button:disabled { opacity: 0.25; cursor: default; }
#slideNum { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; color: var(--fg2-on-dark); white-space: nowrap; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .product-grid, .product-grid--two { grid-template-columns: 1fr; gap: 1.25rem; }
  .product-img-wrap { height: 200px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }

  .split-inner { flex-direction: column !important; align-items: stretch; gap: 2rem; }
  .split-inner > .col, .split-media { flex: none; width: 100%; }
  .split-media { order: -1; }
  /* The gain slide reads heading + bullets first, then the dashboard map. */
  #gain .split-media { order: 0; }
  .shot.photo { aspect-ratio: 16 / 10; }

  .model-steps { flex-direction: column; }
  .model-arrow { transform: rotate(90deg); }

  .agent-grid { grid-template-columns: 1fr; gap: 2rem; }
  .claw { min-height: 420px; }

  .hero-product { display: block; order: -1; width: clamp(225px, 63vw, 345px); top: 0; align-self: flex-start; margin-bottom: 0.25rem; }
  .hero-inner { flex-direction: column; align-items: flex-start; gap: 1.4rem; min-height: calc(100svh - var(--nav-h)); justify-content: flex-end; }

  .partner-badge { font-size: 0.62rem; gap: 0.6rem; }
  .partner-badge img { height: 38px; }
}
@media (max-width: 600px) {
  .slide { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 4rem; }
  #nav { padding: 0 1.25rem; }
  .hero-inner { padding: calc(var(--nav-h) + 1.5rem) 1.25rem 4rem; }
  .product-img-wrap { height: 180px; }
  .model-card { padding: 1.5rem; }
  .partner-badge { display: none; }
}

/* ── PRINT — one slide per page ── */
@media print {
  #nav, .nav-progress, .mobile-nav, .slide-counter, .skip-link { display: none !important; }
  body { background: #fff; }
  .slide { min-height: auto; page-break-after: always; break-after: page; padding: 4vw 6vw; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-bg { position: absolute; }
}