/* AGCR x Synergy Safety Group - telematics deck
   Palette sampled from the AGCR mark: charcoal #373535, gold #FECE2A. */
:root{
  --ink-0:#131212;
  --ink-1:#1e1d1d;
  --ink-2:#373535;
  --ink-3:#4a4747;
  --gold:#fece2a;
  --gold-deep:#c79c05;
  --gold-soft:#ffe796;
  --paper:#f4f2ef;
  --muted:#a9a3a0;
  --line:rgba(254,206,42,.28);
  --red:#ff7a6b;
  --green:#7fd48b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--ink-0);
  color:var(--paper);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0}
.slide{
  position:absolute;inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  padding:8vh 7vw 10vh;
  background:
    radial-gradient(120% 95% at 82% -12%, rgba(254,206,42,.13) 0%, rgba(254,206,42,0) 48%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink-1) 46%, var(--ink-0) 100%);
  animation:fade .4s ease;
}
.slide.on{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.slide.on h1,.slide.on h2,.slide.on h3,.slide.on p,.slide.on li,.slide.on .card,.slide.on .tier,.slide.on .stat,.slide.on .quote,.slide.on .bigfact{
  animation:rise .45s cubic-bezier(.2,.7,.3,1) backwards;
}
.slide.on h3{animation-delay:.02s}
.slide.on h1,.slide.on h2{animation-delay:.08s}
.slide.on .quote,.slide.on .bigfact{animation-delay:.14s}
.slide.on p{animation-delay:.16s}
.slide.on li:nth-child(1),.slide.on .card:nth-child(1),.slide.on .tier:nth-child(1),.slide.on .stat:nth-child(1){animation-delay:.22s}
.slide.on li:nth-child(2),.slide.on .card:nth-child(2),.slide.on .tier:nth-child(2),.slide.on .stat:nth-child(2){animation-delay:.30s}
.slide.on li:nth-child(3),.slide.on .card:nth-child(3),.slide.on .tier:nth-child(3),.slide.on .stat:nth-child(3){animation-delay:.38s}
.slide.on li:nth-child(4),.slide.on .card:nth-child(4),.slide.on .stat:nth-child(4){animation-delay:.46s}
.slide.on li:nth-child(5),.slide.on .card:nth-child(5){animation-delay:.54s}
.slide.on .rule{transform-origin:left center;animation:grow .5s cubic-bezier(.2,.7,.3,1) .26s backwards}
@media (prefers-reduced-motion:reduce){.slide.on *{animation:none !important}}

/* ---------- type ---------- */
h1{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:clamp(40px,7vw,96px);line-height:.98;margin:0 0 .3em;letter-spacing:-.005em;text-transform:uppercase}
h2{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:clamp(30px,5vw,68px);line-height:1.02;margin:0 0 .35em;text-transform:uppercase}
h3{font-weight:600;font-size:clamp(12px,1.25vw,16px);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 1.2em}
p{font-size:clamp(16px,1.8vw,26px);line-height:1.5;margin:0 0 .7em;max-width:30ch;font-weight:300;color:#e7e3df}
p.wide{max-width:44ch}
.lede{font-size:clamp(18px,2.2vw,32px);color:var(--gold-soft);font-weight:400;max-width:28ch}
.quote{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:600;font-size:clamp(26px,4.4vw,62px);line-height:1.08;max-width:18ch;margin:0 0 .4em;text-transform:none}
.bigfact{font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:clamp(60px,13vw,190px);line-height:.88;color:var(--gold);letter-spacing:-.02em}
.rule{height:4px;width:120px;background:var(--gold);margin:.2em 0 1.1em;border:0}
.small{font-size:clamp(12px,1.15vw,16px);color:var(--muted);max-width:52ch;line-height:1.5}
strong{font-weight:600;color:#fff}
em.g{font-style:normal;color:var(--gold)}

/* ---------- layout helpers ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,56px);align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
ul{margin:0;padding:0;list-style:none;max-width:46ch}
li{font-size:clamp(15px,1.6vw,24px);line-height:1.4;margin:0 0 .75em;padding-left:1.5em;position:relative;font-weight:300;color:#e7e3df}
li::before{content:"";position:absolute;left:0;top:.55em;width:.62em;height:.62em;background:var(--gold);clip-path:polygon(0 0,60% 50%,0 100%,32% 50%)}
.card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  border-left:3px solid var(--gold);
  border-radius:3px;
  padding:clamp(14px,1.6vw,24px) clamp(16px,1.8vw,28px);
}
.card h4{margin:0 0 .45em;font-size:clamp(14px,1.35vw,20px);font-weight:600;letter-spacing:.04em;color:#fff}
.card p{font-size:clamp(13px,1.25vw,18px);margin:0;max-width:none;color:#c9c4c0}
.cards{display:grid;gap:clamp(10px,1.2vw,18px)}

/* tier blocks */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}
.tier{border:1px solid rgba(255,255,255,.1);border-radius:3px;padding:clamp(14px,1.6vw,26px);background:rgba(255,255,255,.035);display:flex;flex-direction:column}
.tier .tag{font-size:clamp(11px,1vw,13px);letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:.7em}
.tier.low{border-top:4px solid var(--red)}.tier.low .tag{color:var(--red)}
.tier.mid{border-top:4px solid var(--gold)}.tier.mid .tag{color:var(--gold)}
.tier.high{border-top:4px solid var(--green)}.tier.high .tag{color:var(--green)}
.tier .names{font-family:'Barlow Condensed',sans-serif;font-size:clamp(20px,2.4vw,34px);font-weight:600;line-height:1.12;margin-bottom:.5em;color:#fff}
.tier .note{font-size:clamp(12px,1.15vw,17px);color:#b9b3af;line-height:1.42;font-weight:300}

/* stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,34px);margin-top:.4em}
.stat .n{font-family:'Barlow Condensed',sans-serif;font-size:clamp(40px,6.4vw,92px);font-weight:700;line-height:.92;color:var(--gold)}
.stat .l{font-size:clamp(12px,1.15vw,16px);color:var(--muted);letter-spacing:.06em;margin-top:.5em;line-height:1.35}

/* cover */
.cover{align-items:flex-start;justify-content:center}
.cover .marks{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);margin-bottom:clamp(24px,4vh,56px)}
.cover .marks img.agcr{height:clamp(40px,6vh,74px)}
.cover .marks .x{color:var(--muted);font-size:22px;font-weight:200}
.cover .marks img.ssg{height:clamp(26px,3.6vh,44px)}
.cover h1{max-width:16ch}
.presenter{margin-top:clamp(20px,4vh,52px);font-size:clamp(14px,1.4vw,20px);color:#cfcac6;line-height:1.6}
.presenter b{color:#fff;font-weight:600}

/* chrome */
.hud{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:10px 18px;font-size:12px;color:#7d7773;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;z-index:5}
.hud .brand{display:flex;align-items:center;gap:10px}
.hud img{height:15px;opacity:.65}
.hud .spacer{flex:1}
.bar{position:fixed;left:0;top:0;height:3px;background:var(--gold);width:0;transition:width .25s ease;z-index:6}
.corner{position:fixed;top:26px;right:34px;z-index:5;opacity:.9}
.corner img{height:clamp(20px,2.6vh,30px)}
.slide.cover ~ .corner{display:none}

/* notes */
.notes{
  position:fixed;inset:auto 0 0 0;max-height:46vh;overflow:auto;
  background:rgba(8,8,8,.97);border-top:2px solid var(--gold);
  padding:22px 30px 28px;display:none;z-index:20;
}
.notes.on{display:block}
.notes h5{margin:0 0 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.notes p{font-size:16px;line-height:1.5;max-width:100ch;color:#ddd8d4;margin:0 0 .6em;font-weight:300}
.notes .dir{color:var(--gold-soft);font-style:italic;font-size:14px}

@media (max-width:820px){
  .cols,.cols3,.tiers{grid-template-columns:1fr}
  .slide{padding:6vh 7vw 12vh}
}