:root {
  --brand-blue: #185FA5;
  --brand-blue-dark: #0F3D6E;
  --brand-gold: #EF9F27;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.hero-gradient {
  background:
    radial-gradient(60rem 30rem at 20% -10%, rgba(239, 159, 39, 0.18), transparent 60%),
    radial-gradient(50rem 40rem at 90% 10%, rgba(24, 95, 165, 0.35), transparent 60%),
    linear-gradient(180deg, #0B2540 0%, #0F3D6E 55%, #123E71 100%);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- App-window mockup chrome --- */
.app-window {
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(15, 61, 110, 0.45), 0 10px 20px -10px rgba(15, 61, 110, 0.25);
  border: 1px solid rgba(15, 61, 110, 0.08);
}

/* The fixed-width sidebar/cart panels inside each mockup shouldn't get squeezed on
   narrow screens - let the row keep its designed width and scroll horizontally
   inside the card instead, rather than blowing out the page layout. */
.app-window .app-titlebar + div {
  min-width: 640px;
}

.app-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #F4F6F9, #E9EDF3);
  border-bottom: 1px solid #DCE2EA;
}

.app-titlebar .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.mockup-scale {
  font-size: 12px;
  line-height: 1.35;
}

.mockup-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.mockup-scrollbar::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}

.tab-btn[aria-selected="true"] {
  background: #fff;
  color: var(--brand-blue-dark);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.tab-btn[aria-selected="false"] {
  color: #64748B;
}

/* --- Promo reel: a self-playing, timed scene sequence (see #reel below) ---
   Reuses .app-window/.app-titlebar/.dot and the brand tokens above for every mockup frame,
   so the reel and the static Screenshots tabs stay visually identical - only these
   scene-timing mechanics (crossfade, staggered reveals, the HUD scrubber) are new. */

.reel-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #060E18;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(6, 14, 24, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.reel-scene {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.reel-scene.is-active {
  opacity: 1;
  pointer-events: auto;
}

.reel-void { background: #060E18; }

.reel-eyebrow {
  position: absolute;
  top: 7%;
  left: 7%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  opacity: 0;
}

.reel-eyebrow .reel-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-gold);
}

.reel-scene.is-active .reel-eyebrow {
  animation: reelRiseIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.reel-mark {
  width: clamp(52px, 9vw, 84px);
  height: clamp(52px, 9vw, 84px);
  border-radius: 22%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.7);
  box-shadow: 0 20px 50px -12px rgba(24, 95, 165, 0.6);
}

.reel-mark img { width: 100%; height: 100%; display: block; }

.reel-scene.is-active .reel-mark {
  animation: reelMarkIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.reel-wordmark {
  font-size: clamp(20px, 3.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
}

.reel-wordmark .accent { color: var(--brand-gold); }

.reel-scene.is-active .reel-wordmark {
  animation: reelRiseIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.reel-thesis {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 8%;
  gap: clamp(8px, 1.4vw, 14px);
}

.reel-headline {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(22px, 5.2vw, 46px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

.reel-headline .reel-line { display: block; overflow: hidden; }
.reel-headline .reel-line span { display: block; transform: translateY(105%); }

.reel-scene.is-active .reel-headline .reel-line span {
  animation: reelLineUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reel-scene.is-active .reel-headline .reel-line:nth-child(1) span { animation-delay: 0.25s; }
.reel-scene.is-active .reel-headline .reel-line:nth-child(2) span { animation-delay: 0.38s; }
.reel-scene.is-active .reel-headline .reel-line:nth-child(3) span { animation-delay: 0.51s; }

.reel-subhead {
  margin: 0;
  max-width: 32ch;
  font-size: clamp(10px, 1.7vw, 14px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transform: translateY(8px);
}

.reel-scene.is-active .reel-subhead {
  animation: reelRiseIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}

.reel-window-wrap {
  width: 80%;
  max-width: 520px;
  opacity: 0;
  transform: translateY(20px) scale(0.96);
}

.reel-scene.is-active .reel-window-wrap {
  animation: reelWindowIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.reel-scene .app-window {
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* The site-wide .app-window rule forces a 640px min-width on the content below the titlebar
   (sized for the big Screenshots-tab mockups) - the reel's compact frame doesn't need that
   scroll affordance and would otherwise clip the totals/status columns off-screen. */
.reel-scene .app-window .app-titlebar + div {
  min-width: 0;
}

.reel-row {
  opacity: 0;
  transform: translateX(-6px);
}

.reel-scene.is-active tr:nth-child(1) .reel-row,
.reel-scene.is-active .reel-row-1 { animation: reelRowIn 0.5s ease 0.55s forwards; }
.reel-scene.is-active tr:nth-child(2) .reel-row,
.reel-scene.is-active .reel-row-2 { animation: reelRowIn 0.5s ease 0.68s forwards; }
.reel-scene.is-active tr:nth-child(3) .reel-row,
.reel-scene.is-active .reel-row-3 { animation: reelRowIn 0.5s ease 0.81s forwards; }
.reel-scene.is-active tr:nth-child(4) .reel-row,
.reel-scene.is-active .reel-row-4 { animation: reelRowIn 0.5s ease 0.94s forwards; }

/* A plain (non-!important) base color, with the final OK/Low Stock/Reorder color applied via
   keyframe - !important on the base would have blocked the animation from ever overriding it,
   since animations can never beat an !important declaration regardless of fill-mode. */
.reel-pill {
  background: #E2E8F0;
  color: #64748B;
  transition: background 0.4s ease, color 0.4s ease;
}

.reel-scene.is-active .reel-pill-ok { animation: reelPillOk 0.05s linear forwards; }
.reel-scene.is-active .reel-pill-warn { animation: reelPillWarn 0.05s linear forwards; }
.reel-scene.is-active .reel-pill-bad { animation: reelPillBad 0.05s linear forwards; }

.reel-scene.is-active tr:nth-child(1) .reel-pill { animation-delay: 0.85s; }
.reel-scene.is-active tr:nth-child(2) .reel-pill { animation-delay: 1.05s; }
.reel-scene.is-active tr:nth-child(3) .reel-pill { animation-delay: 1.25s; }
.reel-scene.is-active tr:nth-child(4) .reel-pill { animation-delay: 1.45s; }

@keyframes reelPillOk { to { background: #DCFCE7; color: #15803D; } }
@keyframes reelPillWarn { to { background: #FEF3C7; color: #B45309; } }
@keyframes reelPillBad { to { background: #FEE2E2; color: #B91C1C; } }

.reel-fade-up {
  opacity: 0;
  transform: translateY(6px);
}

.reel-scene.is-active .reel-fade-up { animation: reelRiseIn 0.6s ease 1.2s forwards; }
.reel-scene.is-active .reel-fade-up-1 { animation: reelRiseIn 0.5s ease 0.5s forwards; }
.reel-scene.is-active .reel-fade-up-2 { animation: reelRiseIn 0.5s ease 0.65s forwards; }
.reel-scene.is-active .reel-fade-up-3 { animation: reelRiseIn 0.6s ease 0.85s forwards; }

.reel-status-settle {
  transition: color 0.4s ease;
}

.reel-scene.is-active .reel-status-settle.reel-settle-trigger {
  animation: reelSettle 0.05s linear 1.35s forwards;
}

@keyframes reelSettle { to { color: #15803D; } }

.reel-roles-scene {
  flex-direction: column;
  gap: clamp(14px, 2.4vw, 24px);
  padding: 0 8%;
}

.reel-roles-scene h2 {
  margin: 0;
  font-size: clamp(16px, 3.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
}

.reel-scene.is-active.reel-roles-scene h2 {
  animation: reelRiseIn 0.6s ease 0.2s forwards;
}

.reel-role-row { display: flex; gap: clamp(8px, 1.8vw, 14px); flex-wrap: wrap; justify-content: center; }

.reel-role-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: clamp(9px, 1.6vw, 13px);
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transform: scale(0.85);
}

.reel-role-chip .reel-tick {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--brand-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
}

.reel-role-chip .reel-tick svg { width: 7px; height: 7px; }

.reel-scene.is-active .reel-role-chip { animation: reelChipIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.reel-scene.is-active .reel-role-chip:nth-child(1) { animation-delay: 0.4s; }
.reel-scene.is-active .reel-role-chip:nth-child(2) { animation-delay: 0.55s; }
.reel-scene.is-active .reel-role-chip:nth-child(3) { animation-delay: 0.7s; }
.reel-scene.is-active .reel-role-chip:nth-child(4) { animation-delay: 0.85s; }

.reel-scene.is-active .reel-role-chip:nth-child(1) .reel-tick { animation: reelTickIn 0.35s ease 0.75s forwards; }
.reel-scene.is-active .reel-role-chip:nth-child(2) .reel-tick { animation: reelTickIn 0.35s ease 0.9s forwards; }
.reel-scene.is-active .reel-role-chip:nth-child(3) .reel-tick { animation: reelTickIn 0.35s ease 1.05s forwards; }
.reel-scene.is-active .reel-role-chip:nth-child(4) .reel-tick { animation: reelTickIn 0.35s ease 1.2s forwards; }

.reel-outro { flex-direction: column; gap: clamp(8px, 1.6vw, 14px); text-align: center; }

.reel-outro .reel-tagline {
  max-width: 26ch;
  font-size: clamp(12px, 2.2vw, 18px);
  font-weight: 500;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
}

.reel-scene.is-active.reel-outro .reel-tagline {
  animation: reelRiseIn 0.6s ease 0.55s forwards;
}

.reel-cta-btn {
  margin-top: 2px;
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--brand-gold);
  color: #1A1206;
  font-weight: 700;
  font-size: clamp(10px, 1.8vw, 14px);
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  box-shadow: 0 0 0 0 rgba(239, 159, 39, 0.55);
}

.reel-scene.is-active .reel-cta-btn {
  animation: reelCtaIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards,
             reelCtaPulse 1.8s ease 1.5s infinite;
}

@keyframes reelRiseIn { to { opacity: 1; transform: none; } }
@keyframes reelMarkIn { to { opacity: 1; transform: scale(1); } }
@keyframes reelWindowIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reelLineUp { to { transform: translateY(0); } }
@keyframes reelRowIn { to { opacity: 1; transform: none; } }
@keyframes reelChipIn { to { opacity: 1; transform: scale(1); } }
@keyframes reelTickIn { to { opacity: 1; transform: scale(1); } }
@keyframes reelCtaIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes reelCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 159, 39, 0.45); }
  50% { box-shadow: 0 0 0 12px rgba(239, 159, 39, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .reel-scene { transition: opacity 0.4s ease; }
  .reel-mark, .reel-wordmark, .reel-headline .reel-line span, .reel-subhead, .reel-window-wrap,
  .reel-row, .reel-fade-up, .reel-fade-up-1, .reel-fade-up-2, .reel-fade-up-3,
  .reel-roles-scene h2, .reel-role-chip, .reel-role-chip .reel-tick,
  .reel-outro .reel-tagline, .reel-cta-btn, .reel-eyebrow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .reel-pill-ok { animation: none !important; background: #DCFCE7 !important; color: #15803D !important; }
  .reel-pill-warn { animation: none !important; background: #FEF3C7 !important; color: #B45309 !important; }
  .reel-pill-bad { animation: none !important; background: #FEE2E2 !important; color: #B91C1C !important; }
}

/* --- Reel HUD (play/pause, scrubber, chapter ticks) --- */

.reel-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.reel-hud button {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.reel-hud button:hover { background: rgba(255, 255, 255, 0.18); }
.reel-hud button:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.reel-hud button svg { width: 13px; height: 13px; }

.reel-hud .reel-time {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  min-width: 72px;
}

.reel-track {
  position: relative;
  flex: 1;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.reel-track .reel-rail {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.reel-track .reel-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: var(--brand-gold);
}

.reel-track .reel-tick-mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  transform: translate(-1px, -50%);
  background: rgba(6, 14, 24, 0.5);
  border-radius: 1px;
}

@media (max-width: 480px) {
  .reel-hud .reel-time { display: none; }
}

.role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-size: 13px;
}

/* --- Mobile app phone-frame mockup --- */
.phone-frame {
  width: 240px;
  margin: 0 auto;
  border-radius: 2.4rem;
  padding: 10px;
  background: linear-gradient(180deg, #1c2b3a, #0f1a24);
  box-shadow: 0 30px 60px -20px rgba(15, 61, 110, 0.45), 0 10px 20px -10px rgba(15, 61, 110, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame .phone-notch {
  width: 80px;
  height: 16px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: #0f1a24;
}

.phone-frame .phone-screen {
  border-radius: 1.7rem;
  overflow: hidden;
  background: #fff;
}