/*
 * Wordcab Navy Theme — base layer
 * --------------------------------
 * CSS custom properties, font imports, base reset, layout utilities,
 * button atoms, and animations. Link this on every navy-theme page.
 *
 * Companion file: navy-components.css (section and UI components)
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Backgrounds */
  --bg: #f4f6fa;           /* page background — cool off-white */
  --bg-soft: #edf1f8;      /* input fields, icon backgrounds */
  --panel: rgba(255,255,255,0.58);
  --white-panel: rgba(255,255,255,0.72);  /* card surface */

  /* Borders */
  --line: rgba(20, 40, 80, 0.08);

  /* Text */
  --text: #0e1a2e;         /* primary — near-black navy */
  --muted: #5a6a82;        /* secondary — muted steel blue */

  /* Accent */
  --accent: #1a3a6e;       /* deep navy — headings, logo, active states */
  --accent-bright: #2e6bdb; /* mid blue — CTAs, links, highlights */
  --accent-glow: #4d8af0;  /* light blue — glow effects, gradients */

  /* Shadows */
  --shadow: 0 24px 60px rgba(14, 26, 46, 0.07);
  --shadow-sm: 0 8px 24px rgba(14, 26, 46, 0.05);
  --hover-glow: 0 14px 34px rgba(14, 26, 46, 0.06), 0 0 0 1px rgba(46, 107, 219, 0.13), 0 0 22px rgba(46, 107, 219, 0.14), 0 0 54px rgba(46, 107, 219, 0.16);
  --hover-glow-soft: 0 10px 24px rgba(14, 26, 46, 0.05), 0 0 0 1px rgba(46, 107, 219, 0.1), 0 0 18px rgba(46, 107, 219, 0.11), 0 0 38px rgba(46, 107, 219, 0.12);
  --hover-glow-strong: 0 12px 30px rgba(26, 58, 110, 0.2), 0 0 0 1px rgba(77, 138, 240, 0.28), 0 0 22px rgba(77, 138, 240, 0.3), 0 0 64px rgba(46, 107, 219, 0.34);
  --hover-transition: box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1), background 420ms ease, border-color 420ms ease;

  /* Radii */
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;

  /* Layout */
  --container: 1140px;
}

/* ── RESETS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* ── TYPOGRAPHY ── */
/*
 * Serif headings: Playfair Display for editorial weight.
 * All h1–h3 use it by default; override with DM Sans for
 * label-style headings (footer cols, badge text, etc.).
 */
.serif,
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── LAYOUT ── */
.container {
  width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
}

/* Standard section vertical rhythm */
.section { padding: 96px 0; position: relative; }

/* Off-white alternating band (apply to every other section) */
.band {
  background: rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* ── BUTTONS ── */
.pill-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: var(--hover-transition);
  cursor: pointer;
  white-space: nowrap;
  border: none;
}

/* Primary — filled navy-to-blue gradient */
.pill-btn {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-bright) 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(26, 58, 110, 0.18);
}

.pill-btn:hover {
  box-shadow: var(--hover-glow-strong);
}

/* Secondary — frosted glass */
.ghost-btn {
  background: rgba(255,255,255,0.56);
  border: 1px solid var(--line);
  color: var(--accent);
}

.ghost-btn:hover {
  background: rgba(255,255,255,0.72);
  border-color: rgba(46, 107, 219, 0.22);
  box-shadow: var(--hover-glow-soft);
}

/* ── ANIMATED DARK GRADIENT ── */
/*
 * Shared keyframe used by .product-platform, .product-solutions,
 * .why-poster, and any full-bleed dark hero card.
 * Apply via: animation: gradientShift Xs ease infinite;
 *            background-size: 300% 300%;
 */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── SCROLL REVEAL ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Attach to elements that animate on page load (above the fold) */
.fade-up            { opacity: 0; animation: fadeUp 0.7s ease forwards; }
.fade-up-d1         { animation-delay: 0.1s; }
.fade-up-d2         { animation-delay: 0.2s; }
.fade-up-d3         { animation-delay: 0.3s; }

/*
 * For below-fold elements use JS IntersectionObserver — set
 * opacity:0 / transform:translateY(24px) / transition via JS,
 * then clear both on intersect. See home.html <script> block.
 */

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 900px) {
  .section { padding: 80px 0; }
}

@media (max-width: 580px) {
  .section { padding: 64px 0; }
}