/* ===========================================================
   Up Sign Down — modern redesign
   Design tokens + components
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand */
  --ink:        #0B1533;   /* deep navy — text & dark sections */
  --ink-2:      #111F47;   /* slightly lighter navy */
  --blue:       #2F6BFF;   /* primary electric blue */
  --blue-deep:  #1B49C4;
  --blue-soft:  #E8EFFF;   /* tints */
  --accent:     #16C2A3;   /* fresh teal — checks / highlights */
  --accent-soft:#DFF7F2;

  /* Neutrals */
  --bg:         #FFFFFF;
  --bg-tint:    #F4F7FE;   /* light section bg */
  --card:       #FFFFFF;
  --line:       #E4EAF6;
  --line-dark:  rgba(255,255,255,.10);
  --text:       #0C1733;
  --muted:      #5C6B8A;
  --muted-2:    #8794AE;
  --on-dark:    #EAF0FF;
  --on-dark-mut:#9FB0D6;

  /* Effects */
  --shadow-sm:  0 2px 10px rgba(13,28,66,.06);
  --shadow-md:  0 16px 40px rgba(13,28,66,.10);
  --shadow-lg:  0 40px 90px rgba(11,21,51,.28);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --ease: cubic-bezier(.22,1,.36,1);
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--blue);
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 16px/1 'Plus Jakarta Sans', sans-serif;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(47,107,255,.32); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 16px 30px rgba(47,107,255,.40); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--on-dark); border-color: rgba(255,255,255,.18); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--blue); border-color: var(--line); }
.btn-outline:hover { border-color: var(--blue); background: var(--blue-soft); }
.btn-lg { padding: 18px 34px; font-size: 17px; }

/* ---------- Section scaffolding ---------- */
section { position: relative; }
.section { padding: 96px 0; }
.section-tint { background: var(--bg-tint); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--blue); border-radius: 2px; }
.eyebrow.on-dark { color: var(--accent); }
.eyebrow.on-dark::before { background: var(--accent); }
.h-display { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.03em; }
.h-section { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.center { text-align: center; }
.center .eyebrow::before { display: none; }
.center .eyebrow { gap: 0; }
.measure { max-width: 640px; }
.measure-c { max-width: 680px; margin-inline: auto; }

/* ---------- Reveal animation (pure CSS load-in; always resolves visible) ---------- */
.reveal { opacity: 1; }
@keyframes revealIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { animation: revealIn .7s var(--ease) both; }
  .js .reveal.d1 { animation-delay: .09s; }
  .js .reveal.d2 { animation-delay: .18s; }
  .js .reveal.d3 { animation-delay: .27s; }
  /* Where supported, drive it by scroll position instead of load */
  @supports (animation-timeline: view()) {
    .js .reveal { animation-timeline: view(); animation-range: entry 0% cover 16%; animation-delay: 0s; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}