:root{
  --bg: #0a0d13;
  --panel: #131a26;
  --panel-soft: #161d2a;
  --border: rgba(255,255,255,.08);
  --text: #f3f5f7;
  --muted: #9aa7b6;
  --accent: #ff5a1f;
  --accent-soft: rgba(255,90,31,.15);
  --teal: #33c2a3;
  --blue: #4f8cff;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* --- fixed 1920x1080 slide geometry --- */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --pad-x: 88px;      /* standard left/right safe margin */
  --pad-top: 64px;    /* standard top safe margin */
  --pad-bot: 96px;    /* bottom safe margin (clears the chrome bar) */
  --rail-w: 56px;     /* right-hand dot rail reserve */
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; background:#05070b; color:var(--text); font-family:var(--font);
  width:100%; height:100%; overflow:hidden;
}

/* ==================== 1920x1080 STAGE ==================== */
#stage{
  position:fixed; left:50%; top:50%;
  width:var(--slide-w); height:var(--slide-h);
  transform: translate(-50%,-50%) scale(var(--s,1));
  transform-origin: center center;
  background:var(--bg); overflow:hidden;
  box-shadow:0 0 90px rgba(0,0,0,.6);
}
#page{
  position:absolute; inset:0;
  width:var(--slide-w); height:var(--slide-h);
  overflow:hidden;
}
#track{
  display:flex; flex-direction:column;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform .58s cubic-bezier(.66,0,.24,1);
}
#track.no-anim{ transition:none; }

.sec{
  position:relative; flex:0 0 auto;
  width:var(--slide-w); height:var(--slide-h);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.sec-body{
  position:relative; flex:1; min-height:0; z-index:2;
  display:flex; flex-direction:column;
  padding: var(--pad-top) calc(var(--pad-x) + var(--rail-w)) var(--pad-bot) var(--pad-x);
}

.bg-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform-origin:center center; }
.bg-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,8,12,.55) 0%, rgba(6,8,12,.4) 45%, rgba(6,8,12,.9) 100%); }

.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.kicker::before{ content:""; width:20px; height:2px; background:var(--accent); display:inline-block; }

/* ---- section banner (header for carousel sections) ---- */
.sec-banner{
  flex:0 0 auto; padding:52px var(--pad-x) 26px; position:relative; z-index:2;
  background: linear-gradient(120deg, rgba(255,90,31,.16), rgba(255,90,31,.02));
  border-bottom:1px solid var(--border);
}
.sec-banner .badge{
  display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:15px;
  padding:7px 16px; border-radius:8px; margin-bottom:12px;
}
.sec-banner h2{ font-size:46px; font-weight:800; margin:0; letter-spacing:-.01em; line-height:1.1; }

/* ---- HERO ---- */
.hero .sec-body{ justify-content:flex-end; padding-bottom:150px; }
.hero h1{ font-size:84px; line-height:1.1; font-weight:800; margin:0 0 22px; max-width:1200px; letter-spacing:-.01em; }
.hero p{ font-size:24px; color:#e7ecf1; margin:0; max-width:900px; }

/* ---- PARTNERS ---- */
.partners .sec-body{ justify-content:flex-end; padding-bottom:140px; }
.partners .bg-overlay{ background:linear-gradient(180deg, rgba(6,8,12,.12) 0%, rgba(6,8,12,.18) 45%, rgba(6,8,12,.72) 100%); }
/* kept clear of the background clip's own text column, which starts at x≈1134 */
.logo-row{ display:flex; flex-wrap:nowrap; gap:15px; }
.logo-chip{ background:#fff; border-radius:13px; padding:15px 23px; display:flex; align-items:center; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.logo-chip.logo-chip-dark{ background:#12161f; box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset; }
.logo-chip img{ height:40px; width:auto; display:block; object-fit:contain; }

/* ---- QUOTES ---- */
.quotes .sec-body{ justify-content:center; }
.quotes .quotes-inner{ width:100%; max-width:1320px; margin:0 auto; }
.quote-card{ background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:14px; padding:30px 34px; margin-bottom:20px; font-size:24px; line-height:1.45; font-weight:600; }
.quote-card:last-child{ margin-bottom:0; }

/* ---- TIMELINE ---- */
.timeline h1{ font-size:40px; font-weight:800; margin:0 0 26px; flex:0 0 auto; }
.month-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:minmax(0,1fr); gap:18px; flex:1; min-height:0; }
.month-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 22px;
  border-top:3px solid var(--accent); display:flex; flex-direction:column; gap:10px; overflow:hidden; }
/* spread the entries over the card's full height instead of stacking them at the top */
.month-items{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly; gap:10px; }
.month-card:nth-child(2){ border-top-color:var(--teal); }
.month-card:nth-child(3){ border-top-color:var(--blue); }
.month-card:nth-child(4){ border-top-color:#c084fc; }
.month-card:nth-child(5){ border-top-color:#facc15; }
.month-card:nth-child(6){ border-top-color:#f472b6; }
.month-card .month-label{ font-weight:800; font-size:18px; color:#fff; }
.month-item{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.42; color:#dbe2ea; }
.month-item .ic{ flex:none; width:20px; height:20px; color:var(--accent); margin-top:1px; }
.month-item .ic svg{ width:20px; height:20px; display:block; }
.month-item b{ color:#fff; }

/* ---- ICON GRID ---- */
.icongrid .sec-body{ justify-content:center; }
.icongrid h1{ font-size:46px; font-weight:800; margin:0 0 14px; max-width:1100px; }
.icongrid .sub{ color:#e7ecf1; max-width:1000px; margin:0 0 34px; font-size:19px; }
.icon-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.icon-cell{ background:rgba(19,26,38,.72); backdrop-filter:blur(6px); border:1px solid var(--border);
  border-radius:16px; padding:24px 16px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.icon-cell .ic-circle{ width:54px; height:54px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.icon-cell .ic-circle svg{ width:26px; height:26px; }
.icon-cell span{ font-size:15px; font-weight:700; color:#fff; line-height:1.25; }

/* ---- DIVIDER / mid hero ---- */
.divider .sec-body{ justify-content:center; }
.divider .badge{ display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:16px; padding:9px 18px; border-radius:8px; margin-bottom:22px; }
.divider h1{ font-size:76px; font-weight:800; margin:0; }

/* ---- CHART (single) ---- */
.chart .sec-body{ justify-content:center; align-items:center; gap:16px; }
.chart .badge{ align-self:flex-start; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:8px 16px; border-radius:8px; }
.chart-frame{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; cursor:zoom-in; }
.chart-frame img{ max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.45); border:1px solid var(--border); }
.chart-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; }
.chart-note{ color:#c7d0da; font-size:15px; max-width:900px; background:var(--panel); border-radius:10px; padding:12px 16px; border:1px solid var(--border);}
.chart-cta{ background:var(--accent); color:#fff; font-weight:800; padding:12px 22px; border-radius:10px; font-size:15px; white-space:nowrap; }

/* ---- INSIGHT CARDS ---- */
.insight-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.insight-card{ background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:16px 20px; }
.insight-card:nth-child(2n){ border-left-color:var(--teal); }
.insight-card h3{ margin:0 0 6px; font-size:18px; font-weight:800; color:#fff; }
.insight-card p{ margin:0; font-size:15px; line-height:1.45; color:#d7dee6; }

/* ==================== CAROUSEL (horizontal slider) ==================== */
.carousel-wrap{
  flex:1; min-height:0; display:flex; flex-direction:column; position:relative;
  padding: 18px calc(var(--pad-x) + var(--rail-w)) var(--pad-bot) var(--pad-x);
}
.carousel-viewport{ flex:1; min-height:0; overflow:hidden; position:relative; }
/* explicit width so the items' `flex-basis:100%` resolves against the viewport
   instead of falling back to the videos' intrinsic width (that used to blow the
   slider — and section 13 in particular — far past the slide edge) */
.carousel-track{ display:flex; width:100%; height:100%; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.car-item{ flex:0 0 100%; width:100%; max-width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:0 92px; }
/* column stack: frame gets the leftover height, controls and note sit BELOW it —
   nothing is ever painted on top of the clip's own text */
.car-item .car-video-wrap{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; position:relative; }
.car-item .car-video-wrap::before{
  content:""; position:absolute; inset:6% 12%; z-index:0; border-radius:26px;
  background: radial-gradient(ellipse at center, rgba(255,90,31,.28) 0%, rgba(79,140,255,.14) 45%, transparent 72%);
  filter: blur(28px); pointer-events:none;
}
/* video frame keeps the clip's own aspect ratio -> never letterboxed, never overflowing */
.car-video-frame{
  position:relative; z-index:1;
  flex:0 1 auto; min-height:0;
  height:100%; width:auto; aspect-ratio: var(--ar, 16/9);
  max-width:100%;
  padding:3px; border-radius:20px;
  background: linear-gradient(135deg, var(--accent), rgba(79,140,255,.7) 55%, var(--teal));
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:flex; overflow:hidden;
}
.car-item video{
  display:block; width:100%; height:100%;
  border-radius:17px; background:#000; object-fit:cover; cursor:pointer;
}

/* --- compact player under the clip (replaces the native controls) --- */
.car-controls{
  flex:0 0 auto; z-index:2; display:flex; align-items:center; gap:14px;
  width:min(100%, 720px); padding:0 4px;
}
.cv-btn{
  width:36px; height:36px; flex:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.09); border:1px solid var(--border); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:background .18s ease;
}
.cv-btn:hover{ background:rgba(255,90,31,.55); }
.cv-btn svg{ width:17px; height:17px; }
.cv-bar{ flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.14); cursor:pointer; overflow:hidden; }
.cv-fill{ height:100%; width:0%; border-radius:999px; background:var(--accent); }
.cv-time{ flex:none; font-size:13px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; min-width:38px; }
.car-video-tag{
  position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(10,13,19,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px 6px 9px; border-radius:20px;
}
.car-video-tag .dot{ width:7px; height:7px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 0 0 rgba(255,77,77,.6); animation: liveDot 1.6s ease-in-out infinite; }
@keyframes liveDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,77,77,.55);} 50%{ box-shadow:0 0 0 5px rgba(255,77,77,0);} }
.car-item img{ max-width:100%; max-height:100%; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.45); border:1px solid var(--border); cursor:zoom-in; }
.car-note{
  flex:0 0 auto; z-index:3;
  color:#f0dccb; background:rgba(255,90,31,.16);
  border:1px solid rgba(255,90,31,.34); border-radius:10px; padding:11px 20px; font-size:15px;
  max-width:86%; text-align:center; line-height:1.35;
}

/* --- prominent arrows --- */
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:64px; height:64px; border-radius:50%;
  background:linear-gradient(145deg, rgba(255,90,31,.95), rgba(214,64,14,.95));
  border:2px solid rgba(255,255,255,.28); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:6;
  box-shadow:0 12px 34px rgba(0,0,0,.55), 0 0 0 6px rgba(255,90,31,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.car-arrow:hover{ transform:translateY(-50%) scale(1.09); box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 10px rgba(255,90,31,.18); }
.car-arrow:active{ transform:translateY(-50%) scale(.96); }
.car-arrow svg{ width:30px; height:30px; stroke-width:2.6; }
.car-arrow.prev{ left:6px; }
.car-arrow.next{ right:6px; }
.car-arrow.disabled{ opacity:.28; pointer-events:none; }

/* --- dot buttons + counter under the slider --- */
.car-nav{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:18px;
  padding:16px 0 0;
}
.car-dots{ display:flex; align-items:center; gap:10px; }
.car-dot{
  width:14px; height:14px; border-radius:999px; padding:0;
  background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.28);
  cursor:pointer; transition: background .24s ease, width .24s ease, border-color .24s ease;
}
.car-dot:hover{ background:rgba(255,255,255,.45); }
.car-dot.active{ background:var(--accent); border-color:var(--accent); width:42px; box-shadow:0 0 0 4px rgba(255,90,31,.18); }
.car-count{ color:var(--muted); font-size:14px; font-weight:800; letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.car-count b{ color:#fff; }

.sec-kicker-row{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:var(--pad-top) var(--pad-x) 0; }

/* ==================== CHROME (inside the stage) ==================== */
#progress-track{ position:absolute; top:0; left:0; right:0; height:4px; background:rgba(255,255,255,.08); z-index:60; }
#progress-fill{ height:100%; background:var(--accent); width:0%; transition:width .35s ease; }

#dot-rail{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:55; display:flex; flex-direction:column; gap:11px; }
.rail-dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.22); cursor:pointer; position:relative; transition: background .2s ease, transform .2s ease; }
.rail-dot.active{ background:var(--accent); transform:scale(1.5); }
.rail-dot .rail-label{ position:absolute; right:22px; top:50%; transform:translateY(-50%); background:rgba(10,13,19,.92); border:1px solid var(--border);
  color:#fff; font-size:14px; padding:7px 12px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; }
.rail-dot:hover .rail-label{ opacity:1; }

#bottom-bar{ position:absolute; left:var(--pad-x); bottom:26px; z-index:55; display:flex; align-items:center; gap:14px; }
.tool-btn{ width:46px; height:46px; border-radius:50%; border:1px solid var(--border); background:rgba(19,26,38,.75);
  backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.tool-btn:hover{ background:rgba(255,90,31,.5); }
.tool-btn svg{ width:21px; height:21px; }

#sec-label{ font-size:14px; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
#sec-label b{ color:#fff; }

/* return-to-origin button, only present after following a cross-slide link */
#back-btn{
  display:none; align-items:center; gap:9px; cursor:pointer; white-space:nowrap;
  height:46px; padding:0 18px 0 14px; border-radius:999px;
  background:var(--accent); border:1px solid rgba(255,255,255,.22); color:#fff;
  font-family:var(--font); font-size:14px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 10px 26px rgba(255,90,31,.35);
  transition: filter .18s ease, transform .18s ease;
}
#back-btn.show{ display:inline-flex; animation: revealUp .4s cubic-bezier(.16,1,.3,1) both; }
#back-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
#back-btn .bb-ic{ display:flex; }
#back-btn .bb-ic svg{ width:18px; height:18px; }

/* ---- MENU OVERLAY (viewport-level modal) ---- */
#menu-overlay{ position:fixed; inset:0; z-index:80; background:rgba(6,8,13,.92); backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center; }
#menu-overlay.open{ display:flex; }
#menu-panel{ width:min(940px,88vw); max-height:80vh; overflow:auto; }
#menu-panel h2{ font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 16px; }
.menu-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.menu-item{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:15px 17px; cursor:pointer; transition: transform .15s ease, background .15s ease; }
.menu-item:hover{ background:var(--panel-soft); transform:translateY(-2px); }
.menu-item .mi-num{ color:var(--accent); font-weight:800; font-size:12px; }
.menu-item .mi-title{ color:#fff; font-weight:700; font-size:14px; margin-top:4px; }
#menu-close{ position:fixed; top:28px; right:28px; }

/* ---- LIGHTBOX ---- */
#lightbox{ position:fixed; inset:0; z-index:90; background:rgba(4,5,8,.94); display:none; align-items:center; justify-content:center; cursor:zoom-out; padding:40px; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.6); }

/* ==================== MATRIX (interactive treemap) ==================== */
.matrix .sec-body{ gap:12px; }
.matrix .badge{ align-self:flex-start; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:8px 16px; border-radius:8px; }
.matrix h2{ font-size:34px; font-weight:800; margin:8px 0 2px; }
.mx-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; gap:12px; }
.mx-tabs-row{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mx-tabs{ display:flex; gap:9px; flex-wrap:wrap; }
.mx-tab{
  background:var(--panel); border:1px solid var(--border); color:#c9d2db; font-weight:700; font-size:15px;
  padding:9px 18px; border-radius:9px; cursor:pointer; transition: background .2s ease, color .2s ease;
}
.mx-tab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mx-tab:hover:not(.active){ background:var(--panel-soft); }
.mx-total{ color:var(--muted); font-size:15px; font-weight:700; }
.mx-canvas{ position:relative; flex:1; min-height:0; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:#0d1220; }
.mx-box{
  position:absolute; box-sizing:border-box; border:1.5px solid rgba(6,8,13,.55);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:6px; cursor:pointer; transition: left .55s cubic-bezier(.4,0,.2,1), top .55s cubic-bezier(.4,0,.2,1), width .55s cubic-bezier(.4,0,.2,1), height .55s cubic-bezier(.4,0,.2,1), filter .15s ease;
  color:#fff; overflow:hidden;
}
.mx-box:hover{ filter:brightness(1.14); z-index:3; }
.mx-box .mx-label{ font-weight:800; font-size:15px; line-height:1.2; text-shadow:0 1px 3px rgba(0,0,0,.4); overflow-wrap:anywhere; }
.mx-box .mx-value{ font-size:14px; font-weight:700; background:rgba(0,0,0,.28); padding:3px 9px; border-radius:6px; margin-top:5px; white-space:nowrap; }
.mx-box-small .mx-label{ display:none; }
/* progressive fallbacks applied by fitMxBoxes() so nothing is ever cut off */
.mx-box.mx-hide-value .mx-value{ display:none; }
.mx-box.mx-tight .mx-label{ font-size:12px; line-height:1.12; }
.mx-box.mx-tighter .mx-label{ font-size:10.5px; line-height:1.08; }
.ci-note{ color:#c7d0da; font-size:16px; max-width:1200px; }
.mx-tooltip{
  position:absolute; transform:translate(-50%,-100%); background:#12161f; border:1px solid var(--border);
  border-radius:10px; padding:9px 14px; font-size:14px; pointer-events:none; opacity:0; transition:opacity .15s ease;
  z-index:20; white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.mx-tooltip.show{ opacity:1; }
.mx-tooltip b{ display:block; color:#fff; font-size:14px; }
.mx-tooltip span{ color:var(--accent); font-weight:800; font-size:15px; }
.mx-cards{ flex:0 0 auto; margin-top:4px; }
.mx-cards .insight-card{ padding:13px 18px; }
.mx-cards .insight-card h3{ font-size:16px; }
.mx-cards .insight-card p{ font-size:14px; line-height:1.4; }

/* ==================== POP TABLE ==================== */
.poptable .sec-body{ gap:14px; }
.pt-title{ font-size:40px; font-weight:800; margin:0 0 4px; }
.pt-summary{ flex:0 0 auto; display:flex; gap:16px; flex-wrap:wrap; }
.pt-sum-box{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 22px; display:flex; flex-direction:column; gap:5px; }
.pt-sum-box span{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.pt-sum-box b{ font-size:24px; font-weight:800; }
.pt-sum-box b.big{ font-size:34px; color:var(--accent); }
.pt-table-wrap{ flex:1; min-height:0; overflow:hidden; border:1px solid var(--border); border-radius:14px; }
.pt-table{ width:100%; border-collapse:collapse; font-size:16px; }
.pt-table thead th{ text-align:left; padding:12px 22px; color:var(--muted); font-size:13px; text-transform:uppercase;
  letter-spacing:.06em; background:var(--panel-soft); }
.pt-table tbody td{ padding:11px 22px; border-top:1px solid var(--border); }
.pt-row{ cursor:pointer; transition: background .15s ease; }
.pt-row:hover{ background:rgba(255,90,31,.08); }
.pt-plat{ display:flex; align-items:center; gap:11px; font-weight:700; }
.pt-ic{ width:22px; height:22px; color:var(--accent); flex:none; }
.pt-ic svg{ width:22px; height:22px; display:block; }
.pt-strong{ font-weight:800; }
.pt-pct{ font-weight:800; padding:3px 11px; border-radius:7px; font-size:14px; }
.pt-pct.up{ color:#33c2a3; background:rgba(51,194,163,.14); }
.pt-pct.down{ color:#f87171; background:rgba(248,113,113,.14); }
.pt-hint{ flex:0 0 auto; color:var(--muted); font-size:14px; text-align:right; }

/* ---- month-grid variants ---- */
.month-grid-5{ grid-template-columns:repeat(5,1fr); }
.month-grid-6{ grid-template-columns:repeat(3,1fr); }

/* ==================== STORYBOARD ==================== */
.storyboard .sec-body{ gap:10px; }
.storyboard .badge{ align-self:flex-start; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:8px 16px; border-radius:8px; }
.storyboard h2{ font-size:34px; font-weight:800; margin:6px 0 10px; }
.sb-grid{ display:grid; gap:18px; flex:1; min-height:0; }
.sb-cols-2{ grid-template-columns:1fr 1fr; }
.sb-cols-3{ grid-template-columns:repeat(3,1fr); }
.sb-col{ display:flex; flex-direction:column; gap:11px; min-height:0; overflow:hidden; }
/* blocks share the column height equally rather than bunching under the heading;
   equal growth keeps the two columns aligned row-for-row */
.sb-blocks{ flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; }
.sb-blocks > .sb-block{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.sb-col-head{ flex:0 0 auto; display:flex; align-items:center; gap:11px; margin-bottom:2px; }
.sb-ic{ width:36px; height:36px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.sb-ic svg{ width:20px; height:20px; }
.sb-col-head h3{ font-size:17px; font-weight:800; margin:0; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.sb-block{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px 18px; }
.sb-block h4{ margin:0 0 6px; font-size:16px; font-weight:800; color:var(--accent); }
.sb-block p{ margin:0; font-size:14.5px; line-height:1.48; color:#d7dee6; }
.sb-block p b{ color:#fff; }
.sb-highlight{ background:linear-gradient(120deg, rgba(255,90,31,.16), rgba(255,90,31,.04)); border-color:rgba(255,90,31,.3); font-size:15px; font-weight:600; color:#f3d9ca; line-height:1.48; }
.sb-highlight b{ color:var(--accent); }
.sg-label{ font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.sg-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:6px 0; border-top:1px solid var(--border); flex-wrap:wrap; }
.sg-row:first-of-type{ border-top:none; }
.sg-name{ font-size:14px; color:#c9d2db; }
.sg-value{ font-size:17px; font-weight:800; color:var(--teal); }
.sg-detail{ width:100%; font-size:12.5px; color:var(--muted); }

/* ==================== ICONCARDS / CARDPAGE ==================== */
.iconcards .sec-body{ gap:8px; }
.iconcards .badge{ align-self:flex-start; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:8px 16px; border-radius:8px; }
.iconcards h2{ font-size:34px; font-weight:800; margin:8px 0 0; }
.ic-sub{ color:var(--muted); font-size:16px; font-weight:700; margin-bottom:8px; }
.ic-grid{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,1fr); gap:18px; flex:1; min-height:0; }
/* head + body share the card height instead of sitting in the top corner */
.ic-card{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px 26px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:14px; }
.ic-card-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ic-card-icon{ width:40px; height:40px; border-radius:10px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.ic-card-icon svg{ width:21px; height:21px; }
.ic-card-head h4{ font-size:18px; font-weight:800; margin:0; flex:1; }
.ic-card-badge{ background:rgba(51,194,163,.16); color:var(--teal); font-weight:800; font-size:14px; padding:4px 11px; border-radius:7px; }
.ic-card p{ margin:0; font-size:17px; line-height:1.62; color:#d7dee6; }
.ic-card p b{ color:#fff; }

/* ==================== SHIFT (before/after) ==================== */
.shift .sec-body{ gap:10px; }
.shift .badge{ align-self:flex-start; background:var(--accent); color:#fff; font-weight:700; font-size:15px; padding:8px 16px; border-radius:8px; }
.shift h2{ font-size:34px; font-weight:800; margin:6px 0 10px; }
.shift-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; flex:1; min-height:0; align-items:stretch; }
.shift-panel{ display:flex; flex-direction:column; gap:10px; min-height:0; }
.shift-panel-label{ flex:0 0 auto; font-weight:800; font-size:16px; color:#fff; background:rgba(255,255,255,.06); padding:10px 16px; border-radius:9px; border-left:3px solid var(--accent); }
.shift-panel-label.accent2{ border-left-color:var(--teal); }
.shift-note{ flex:0 0 auto; font-size:14.5px; color:#c7d0da; line-height:1.42; }
.shift-note b{ color:var(--accent); }
.shift-canvas{ flex:1; min-height:0; }
.shift-arrow{ align-self:center; width:48px; height:48px; border-radius:50%; background:var(--panel); border:1px solid var(--border); color:var(--accent); display:flex; align-items:center; justify-content:center; overflow:visible;
  box-shadow:0 0 0 0 rgba(255,90,31,.4); animation: arrowPulse 2.4s ease-in-out infinite; }
.shift-arrow-ic{ display:flex; animation: arrowNudge 1.6s ease-in-out infinite; }
.shift-arrow svg{ width:22px; height:22px; }
@keyframes arrowNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }
@keyframes arrowPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,90,31,.35); } 50%{ box-shadow:0 0 0 9px rgba(255,90,31,0); } }

/* ---- carousel rich (non-video) items ---- */
.car-item.car-item-scroll{ display:flex; flex-direction:column; gap:10px; overflow:hidden; align-items:stretch; justify-content:stretch; padding:0 92px; }
.car-item.cardpage{ align-items:stretch; }
.car-item.cardpage .ic-grid{ height:100%; }

/* ==================== MOTION LAYER ==================== */
.reveal{ opacity:0; transform:translateY(18px); }
.sec-active .reveal{ animation: revealUp .65s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d,0s); }
@keyframes revealUp{ to{ opacity:1; transform:translateY(0); } }

.sec-body, .sec-banner{ opacity:0; transform:translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.sec-active .sec-body, .sec-active .sec-banner{ opacity:1; transform:translateY(0); }

.mx-box{ opacity:0; transform:scale(.86); }
.sec-active .mx-box{ animation: mxIn .5s cubic-bezier(.16,1,.3,1) forwards; animation-delay: var(--d,0s); }
@keyframes mxIn{ to{ opacity:1; transform:scale(1); } }
.mx-box.mx-live{ opacity:1; transform:none; animation:none; }

/* progress bar shimmer */
#progress-fill{ position:relative; overflow:hidden; }
#progress-fill::after{
  content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  width:60px; animation: shimmerMove 2.2s ease-in-out infinite;
}
@keyframes shimmerMove{ 0%{ transform:translateX(-80px); } 100%{ transform:translateX(220px); } }

.rail-dot.active{ animation: railPulse 1.8s ease-in-out infinite; }
@keyframes railPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,90,31,.5); } 50%{ box-shadow:0 0 0 5px rgba(255,90,31,0); } }

/* banner sheen */
.sec-banner{ position:relative; overflow:hidden; }
.sec-banner::before{
  content:""; position:absolute; top:0; bottom:0; width:120px; left:-140px;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
  animation: sheenMove 5s ease-in-out infinite;
}
@keyframes sheenMove{ 0%{ left:-140px; } 45%{ left:110%; } 100%{ left:110%; } }

.count-num{ display:inline-block; font-variant-numeric:tabular-nums; }

.quote-card, .month-card, .icon-cell, .insight-card, .sb-block, .ic-card, .logo-chip{
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, background .2s ease;
}
.quote-card:hover, .month-card:hover, .icon-cell:hover, .insight-card:hover, .sb-block:hover, .ic-card:hover, .logo-chip:hover{
  transform:translateY(-4px); box-shadow:0 14px 34px rgba(0,0,0,.35);
}

.hero h1, .divider h1, .sec-banner h2{ opacity:0; transform:translateY(14px); }
.sec-active .hero h1, .sec-active .divider h1, .sec-active .sec-banner h2{
  animation: revealUp .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.08s;
}
.hero p{ opacity:0; transform:translateY(14px); }
.sec-active .hero p{ animation: revealUp .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay:.2s; }
.divider .badge, .sec-banner .badge{ opacity:0; transform:translateY(14px); }
.sec-active .divider .badge, .sec-active .sec-banner .badge{
  animation: revealUp .55s cubic-bezier(.16,1,.3,1) forwards;
}

@media (prefers-reduced-motion: reduce){
  .reveal, .sec-body, .sec-banner, .mx-box, .hero h1, .hero p, .divider h1, .divider .badge{ animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
  #track{ transition:none !important; }
}

/* ---- closing head (centered banner variant) ---- */
.sec-banner-center{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; padding:56px 40px 30px; }
.sec-banner-center h2{ font-size:46px; font-weight:800; margin:0; text-shadow:0 0 24px rgba(255,90,31,.25); }
.badge-pill{ background:var(--accent); color:#fff; font-weight:800; font-size:16px; padding:11px 24px; border-radius:999px; letter-spacing:.03em; box-shadow:0 8px 24px rgba(255,90,31,.35); }

/* ---- cardpage color variants ---- */
.ic-card.cc-teal{ border-top:3px solid var(--teal); }
.ic-card.cc-teal .ic-card-icon{ background:rgba(51,194,163,.16); color:var(--teal); }
.ic-card.cc-orange{ border-top:3px solid var(--accent); }
.ic-card.cc-orange .ic-card-icon{ background:var(--accent-soft); color:var(--accent); }
.ic-card.cc-blue{ border-top:3px solid var(--blue); }
.ic-card.cc-blue .ic-card-icon{ background:rgba(79,140,255,.16); color:var(--blue); }
.ic-card.cc-pink{ border-top:3px solid #f472b6; }
.ic-card.cc-pink .ic-card-icon{ background:rgba(244,114,182,.16); color:#f472b6; }
.ic-card.cc-purple{ border-top:3px solid #a78bfa; }
.ic-card.cc-purple .ic-card-icon{ background:rgba(167,139,250,.16); color:#a78bfa; }
.ic-card.cc-cyan{ border-top:3px solid #22d3ee; }
.ic-card.cc-cyan .ic-card-icon{ background:rgba(34,211,238,.16); color:#22d3ee; }
.ic-card.cc-red{ border-top:3px solid #f87171; }
.ic-card.cc-red .ic-card-icon{ background:rgba(248,113,113,.16); color:#f87171; }

/* ---- morph ghost (5 -> 6 transition) ---- */
.morph-ghost{
  pointer-events:none; display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; font-size:12px; font-weight:800; padding:4px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35); line-height:1.15;
}