/* =========================================================
   ZING — Landing Page Styles
   Design tokens + motion + components that go beyond
   utility classes. Tailwind handles layout/spacing; this
   file owns brand color, type rhythm, and animation.
   ========================================================= */

:root {
  /* --- Core palette (brief: white / very light gray / black / #2563EB) --- */
  --c-white: #ffffff;
  --c-gray-50: #f8f9fb;
  --c-gray-100: #f1f3f6;
  --c-gray-200: #e5e8ee;
  --c-gray-400: #9aa1ac;
  --c-gray-500: #717784;
  --c-gray-600: #565c67;
  --c-black: #0b0b0d;
  --c-ink: #14151a;

  --c-accent: #2563eb;
  --c-accent-600: #1d4ed8;
  --c-accent-50: #eef3ff;
  --c-success: #16a34a;
  --c-success-50: #ecfdf3;

  --bg: var(--c-white);
  --bg-subtle: var(--c-gray-50);
  --bg-surface: var(--c-white);
  --border: var(--c-gray-200);
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-gray-600);
  --text-muted: var(--c-gray-400);

  --shadow-sm: 0 1px 2px rgba(11, 11, 13, 0.04);
  --shadow-md: 0 4px 16px rgba(11, 11, 13, 0.06);
  --shadow-lg: 0 16px 48px rgba(11, 11, 13, 0.10);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] {
  --bg: #0a0a0c;
  --bg-subtle: #111114;
  --bg-surface: #131316;
  --border: #232328;
  --text-primary: #f2f3f5;
  --text-secondary: #a3a8b3;
  --text-muted: #6b7280;

  --c-accent-50: #101c39;
  --c-success-50: #0d1f16;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out);
}

::selection {
  background: var(--c-accent);
  color: #fff;
}

/* Tabular numbers for prices & live counters — keeps digits from jittering */
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Visible, deliberate focus ring (accessibility) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -----------------------------------------------------------
   Section reveal — a single, quiet fade+rise. No bounce,
   no stagger tricks. Respect reduced-motion above.
   ----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -----------------------------------------------------------
   Trust cards — restrained hover: a lift + border tint,
   nothing that feels like a toy.
   ----------------------------------------------------------- */
.trust-card {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent);
}

/* Deal cards */
.deal-card {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.deal-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* -----------------------------------------------------------
   Primary CTA — solid accent, subtle depth on hover only.
   ----------------------------------------------------------- */
.btn-primary {
  background: var(--c-accent);
  color: #fff;
  transition: background 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}
.btn-primary:hover {
  background: var(--c-accent-600);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.btn-secondary:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-50);
}

/* -----------------------------------------------------------
   Signature element: the phone mockup + live channel feed.
   This is the one place we spend visual "budget" — a
   believable, working preview of the actual product output,
   not a decorative illustration.
   ----------------------------------------------------------- */
.phone-frame {
  background: linear-gradient(180deg, #1a1b1e, #0b0b0d);
  border-radius: 44px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .phone-frame {
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.phone-screen {
  background: var(--bg-subtle);
  border-radius: 34px;
}

.feed-glass {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .feed-glass {
  background: rgba(19, 19, 22, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.feed-message {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: msg-in 0.6s var(--ease-out) forwards;
}
@keyframes msg-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid var(--c-success);
  opacity: 0.6;
  animation: pulse-ring 2.2s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Discount badge */
.badge-discount {
  background: var(--c-success-50);
  color: var(--c-success);
}

/* -----------------------------------------------------------
   Sticky mobile CTA — always-reachable single action.
   Sits above everything, glass backdrop so content scrolling
   underneath still reads, top hairline instead of a hard edge.
   ----------------------------------------------------------- */
.sticky-cta-bar {
  background: linear-gradient(180deg, transparent, var(--bg) 22%);
}
.sticky-cta-bar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--border);
}
.sticky-cta-bar .btn-primary {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.32);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 0;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* Theme toggle icons */
.theme-icon { transition: opacity 0.2s var(--ease-out), transform 0.3s var(--ease-out); }

/* Divider hairline */
.hairline { background: var(--border); height: 1px; }

/* Section eyebrow label */
.eyebrow {
  color: var(--c-accent);
  letter-spacing: 0.08em;
}