/* ============================================================
   SMART-TIV — design system (LIGHT, brand yellow + blue)
   Brand: yellow #FDB913, blue #1B4FA0. WCAG-aware contrast.
   Motion uses transform/opacity only (GPU-friendly).
   ============================================================ */

:root {
  /* Surfaces — cool light */
  --bg:        #eef3fa;
  --bg-2:      #f6f9fd;
  --surface:   #ffffff;
  --surface-2: #f3f6fc;
  --line:      #dde6f1;
  --line-2:    #e9eff7;

  /* Text */
  --ink:    #14223c;
  --muted:  #56657f;
  --faint:  #8593a8;

  /* Brand */
  --blue:      #1b4fa0;
  --blue-600:  #173f80;
  --blue-700:  #123166;
  --blue-soft: #e7eefa;
  --yellow:    #fdb913;
  --yellow-600:#e9a800;
  --yellow-soft:#fff3d4;
  --green:     #1e9e63;
  --red:       #d8492f;

  /* Gradients */
  --grad-blue: linear-gradient(120deg, #2a64c4, #1b4fa0);

  /* Shadow / glow */
  --sh-sm: 0 2px 8px rgba(20,34,60,0.05);
  --sh:    0 14px 36px -18px rgba(20,34,60,0.28);
  --sh-lg: 0 28px 70px -30px rgba(20,34,60,0.4);
  --sh-blue: 0 16px 40px -16px rgba(27,79,160,0.5);
  --sh-yellow: 0 14px 34px -10px rgba(253,185,19,0.6);

  /* Radius / spacing */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --maxw: 1150px;
  --pad: clamp(18px, 5vw, 40px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  font-size: clamp(15px, 1.05vw, 17px);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--yellow); color: var(--blue-700); }

h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }

/* Accessibility: visible focus (typeui) */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

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

/* ---------- Section scaffolding ---------- */
section { position: relative; padding-block: clamp(56px, 8vw, 110px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue);
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--blue-soft);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(0.65); opacity:0.5; } }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 58px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-top: 18px; }
.section-head p { color: var(--muted); margin-top: 16px; font-size: 1.06rem; text-wrap: pretty; }

.txt-blue { color: var(--blue); }
.txt-hl { position: relative; white-space: nowrap; }
.txt-hl::after { content:""; position:absolute; left:-2px; right:-2px; bottom:0.06em; height:0.34em; background: var(--yellow); z-index:-1; border-radius:3px; opacity:0.85; }

/* ---------- Buttons (9-state aware) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 700; font-size: 0.98rem;
  padding: 14px 26px; min-height: 48px; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; line-height: 1;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn-primary:hover { background: var(--blue-600); transform: translateY(-3px); box-shadow: 0 20px 46px -16px rgba(27,79,160,0.65); }
.btn-primary:active { transform: translateY(-1px); }
.btn-accent { background: var(--yellow); color: var(--blue-700); box-shadow: var(--sh-yellow); }
.btn-accent:hover { background: var(--yellow-600); transform: translateY(-3px); }
.btn-accent:active { transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--blue); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--sh); }

/* ---------- Cards ---------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 32px); overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: var(--sh-lg); }

/* ---------- Reveal: visible by DEFAULT; only below-fold is hidden+animated ---------- */
.js .reveal { transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.js .reveal.pre { opacity: 0; transform: translateY(26px); }
.js .reveal.pre[data-delay="1"] { transition-delay: 0.06s; }
.js .reveal.pre[data-delay="2"] { transition-delay: 0.12s; }
.js .reveal.pre[data-delay="3"] { transition-delay: 0.18s; }
.js .reveal.pre[data-delay="4"] { transition-delay: 0.24s; }
.js .reveal.pre[data-delay="5"] { transition-delay: 0.30s; }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal.pre { opacity: 1; transform: none; transition: none; } }