/* ============================================================
   Rayzor Robotics — Colors & Type Tokens
   Industrial-tech minimalism. Three visual modes: Product, Brand, Dark.
   No gradients. No shadows. No rounded corners. No accent colors.
   The only "accent" is the contrast jump between modes.
   ============================================================ */

/* -------- Typography: Aeonik Pro (display) + Aeonik Mono (UI/body)
   Substituting with Inter (display) + JetBrains Mono (UI). FLAG for user. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Color tokens (raw) ---- */
  --rz-warm-grey:      #D5D7D8;   /* Product mode bg */
  --rz-powder-blue:    #B6C3D2;   /* Brand mode bg */
  --rz-charcoal:       #25282C;   /* Dark mode / footer / spec band */
  --rz-charcoal-soft:  #2F3338;   /* Hazard-stripe whisper companion */
  --rz-off-white:      #F9FAFB;   /* Text on dark, floating panels */
  --rz-ink:            #373C42;   /* Primary text on light */
  --rz-muted:          #5D656E;   /* Secondary/captions/spec values */
  --rz-rule-light:     rgba(55,60,66,0.15);
  --rz-rule-dark:      rgba(249,250,251,0.10);

  /* Render palette (machine materials, reference only) */
  --rz-shell-white:    #F2F3F4;
  --rz-armor-black:    #1A1B1D;
  --rz-logo-red:       #E63A2E;   /* Tiny rink-O accent in wordmark only */

  /* ---- Semantic, mode-driven (overridden by .mode-* classes) ---- */
  --bg:        var(--rz-warm-grey);
  --fg:        var(--rz-ink);
  --muted:     var(--rz-muted);
  --panel:     var(--rz-off-white);
  --rule:      var(--rz-rule-light);

  /* ---- Typography ---- */
  --rz-font-display: "Inter", "Aeonik Pro", system-ui, -apple-system, sans-serif;
  --rz-font-mono:    "JetBrains Mono", "Aeonik Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rz-display-hero: 700 64px/1.05 var(--rz-font-display);
  --rz-display-statement: 700 88px/1.05 var(--rz-font-display);
  --rz-display-section: 700 48px/1.10 var(--rz-font-display);
  --rz-mono-body: 400 16px/1.55 var(--rz-font-mono);
  --rz-mono-ui:   400 16px/1.0  var(--rz-font-mono);
  --rz-mono-caption: 400 12px/1.4 var(--rz-font-mono);

  /* ---- Layout ---- */
  --rz-max-width: 1312px;
  --rz-edge-pad: 56px;
  --rz-radius: 0;        /* never overridden */
  --rz-shadow: none;     /* never overridden */
  --rz-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rz-dur: 600ms;
}

/* ---- Mode swaps ---- */
.mode-product {
  --bg: var(--rz-warm-grey);
  --fg: var(--rz-ink);
  --muted: var(--rz-muted);
  --panel: var(--rz-off-white);
  --rule: var(--rz-rule-light);
}
.mode-brand {
  --bg: var(--rz-powder-blue);
  --fg: var(--rz-charcoal);
  --muted: var(--rz-muted);
  --panel: var(--rz-off-white);
  --rule: var(--rz-rule-light);
}
.mode-dark {
  --bg: var(--rz-charcoal);
  --fg: var(--rz-off-white);
  --muted: #9AA0A6;
  --panel: var(--rz-charcoal-soft);
  --rule: var(--rz-rule-dark);
}

/* ---- Element defaults ---- */
.rz-h1 { font: var(--rz-display-hero); color: var(--fg); letter-spacing: 0; }
.rz-h2 { font: var(--rz-display-section); color: var(--fg); letter-spacing: 0; }
.rz-statement { font: var(--rz-display-statement); color: var(--fg); letter-spacing: -0.01em; }
.rz-body { font: var(--rz-mono-body); color: var(--fg); }
.rz-ui   { font: var(--rz-mono-ui); color: var(--fg); }
.rz-muted { color: var(--muted); }
.rz-caption { font: var(--rz-mono-caption); color: var(--muted); letter-spacing: 0.02em; }

/* Hairline rule */
.rz-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Hazard-stripe band (texture, not signage) */
.rz-hazard {
  background-color: var(--rz-charcoal);
  background-image: repeating-linear-gradient(
    45deg,
    var(--rz-charcoal) 0 50px,
    var(--rz-charcoal-soft) 50px 100px
  );
  height: 96px;
}

/* Footer-style link card (replaces "buttons") */
.rz-linkcard {
  display: flex; align-items: center; justify-content: space-between;
  padding: 28px 0; border-top: 1px solid var(--rule);
  font: var(--rz-mono-ui); color: var(--fg);
  text-decoration: none; cursor: pointer;
  transition: color 200ms var(--rz-ease);
}
.rz-linkcard .arrow { transition: transform 240ms var(--rz-ease); }
.rz-linkcard:hover .arrow { transform: translateX(6px); }

/* Floating panel (off-white slab over a render) */
.rz-panel {
  background: var(--panel);
  color: var(--rz-ink);
  border: 1px solid var(--rule);
  padding: 40px;
  border-radius: 0;
  box-shadow: none;
}

/* Reset enforcers */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }

/* ---- Subtle perpetual motion: scroll arrow + accent dot ---- */
@keyframes rz-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(3px); opacity: 0.55; }
}
@keyframes rz-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rz-modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes rz-hero-reveal {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0);   opacity: 1; }
}
.rz-hero-reveal { animation: rz-hero-reveal 900ms cubic-bezier(.22,1,.36,1) both; }

@keyframes rz-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}
.rz-scroll-arrow { display:inline-block; animation: rz-scroll-bounce 1800ms ease-in-out infinite; }
.rz-accent-dot {
  display:inline-block; width:6px; height:6px;
  background:#f73f34; vertical-align:middle;
  margin-right:10px; margin-bottom:1px;
  animation: rz-pulse-dot 2400ms ease-in-out infinite;
}

/* ============================================================
   MOBILE — applies below 768px. Desktop is pixel-identical above.
   ============================================================ */
@media (max-width: 768px) {
  /* Prevent horizontal scroll site-wide */
  html, body { overflow-x: hidden; }

  /* Section/footer horizontal padding shrink (Hero exempted) */
  section:not(.rz-hero-section), footer { padding-left: 24px !important; padding-right: 24px !important; }
  nav { padding-left: 20px !important; padding-right: 20px !important; }

  /* Nav: hide desktop link row, show burger, swap logo to left */
  .rz-nav-links { display: none !important; }
  .rz-nav-burger { display: flex !important; }
  .rz-nav-logo-desktop { display: none !important; }
  .rz-nav-logo-mobile { display: flex !important; }

  /* Hero ---------------------------------------------------- */
  .rz-hero-wordmark { font-size: clamp(40px, 14vw, 64px) !important; }
  .rz-hero-wordmark-left { left: 12px !important; }
  .rz-hero-wordmark-right { right: 12px !important; }
  .rz-hero-img {
    width: 64% !important;
    transform: translateX(60px) translateY(-30px) !important;
  }
  .rz-hero-corner-left { top: 80px !important; left: 20px !important; font-size: 10px !important; }
  .rz-hero-corner-right { top: 80px !important; right: 20px !important; font-size: 10px !important; }
  .rz-hero-bottom { left: 20px !important; right: 20px !important; bottom: 24px !important; font-size: 10px !important; justify-content: flex-end !important; }
  .rz-hero-tagline { display: none !important; }

  /* StatementSection (When sports meets robotics) ----------- */
  .rz-statement-flex {
    flex-direction: column !important;
    min-height: 0 !important;
    align-items: flex-start !important;
  }
  .rz-statement-heading {
    font-size: 40px !important;
    line-height: 1.05 !important;
  }
  .rz-statement-image {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 32px !important;
  }
  .rz-statement-image img {
    transform: scale(1.1) !important;
  }
  .rz-stats-banner {
    grid-template-columns: 1fr !important;
    margin-top: 40px !important;
  }
  .rz-stat-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(127,127,127,0.18) !important;
    padding: 22px 0 !important;
  }
  .rz-stats-banner > .rz-stat-cell:last-child { border-bottom: none !important; }
  .rz-stat-cell > span:last-child {
    left: 0 !important;
    right: 0 !important;
  }

  /* The Rayzor approach (VariantBlock) --------------------- */
  .rz-variant-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .rz-variant-name { font-size: 32px !important; }

  /* Six units / One lap / Five minutes --------------------- */
  .rz-six-units-heading {
    font-size: 32px !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  /* Drivetrain (Two additional hours of ice) --------------- */
  .rz-drivetrain-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-top: 0 !important;
    padding-top: 24px !important;
  }
  /* Mobile: show payoff card BEFORE the render */
  .rz-drivetrain-section > :first-child { order: 2 !important; }
  .rz-drivetrain-section > :last-child { order: 1 !important; }
  .rz-payoff-card { padding: 32px 24px !important; }

  /* Spec table --------------------------------------------- */
  .rz-spec-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }
  .rz-spec-heading { font-size: 40px !important; }

  /* Mission ------------------------------------------------ */
  .rz-mission-section { padding: 100px 24px !important; }
  .rz-mission-heading { font-size: 40px !important; line-height: 1.08 !important; }

  /* Traction ----------------------------------------------- */
  .rz-traction-heading { font-size: 34px !important; line-height: 1.1 !important; }
  .rz-proof-heading { font-size: 28px !important; }
  .rz-proof-grid { grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .rz-traction-stats { grid-template-columns: 1fr !important; }
  .rz-traction-stat-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(55,60,66,0.20) !important;
    padding: 22px 0 !important;
  }
  .rz-traction-stats > .rz-traction-stat-cell:last-child { border-bottom: none !important; }
  .rz-traction-stat-cell > span:last-child {
    left: 0 !important;
    right: 0 !important;
  }

  /* Team --------------------------------------------------- */
  .rz-team-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .rz-team-heading { font-size: 36px !important; }

  /* Contact strip ----------------------------------------- */
  .rz-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .rz-contact-grid > div:last-child { text-align: left !important; }
  .rz-contact-heading { font-size: 28px !important; }

  /* Footer ------------------------------------------------- */
  .rz-footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Investors page ---------------------------------------- */
  .rz-investors-heading { font-size: 36px !important; line-height: 1.1 !important; }
  .rz-logos-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Contact modal ----------------------------------------- */
  .rz-contact-modal { padding: 32px 24px !important; }

  /* Reduce excessive vertical padding (Hero exempted) ------ */
  section:not(.rz-hero-section) { padding-top: 80px !important; padding-bottom: 60px !important; }
}