/* QuickOps theme — light + dark tokens derived from the official logo. */
:root, [data-theme="dark"] {
  --qo-bg:        #060B17;
  --qo-bg-2:      #0A1122;
  --qo-surface:   #0E162B;
  --qo-elevated:  #16203A;
  --qo-border:    #1F2A47;
  --qo-border-2:  #2C3A5E;
  --qo-text:      #EEF2FB;
  --qo-text-2:    #9AA8C5;
  --qo-text-3:    #5D6E92;
  --qo-text-inv:  #0B1220;

  --qo-accent:    #3B82F6;   /* royal blue from the wordmark */
  --qo-accent-2:  #1D4ED8;   /* deeper royal blue from Q-tile */
  --qo-accent-3:  #60A5FA;   /* light blue highlight */
  --qo-warm:      #F97316;   /* "Ops" orange */
  --qo-warm-2:    #FB923C;
  --qo-success:   #34D399;
  --qo-danger:    #F87171;

  --qo-grid-line: rgba(44, 58, 94, 0.22);
  --qo-card-fade-top:    rgba(14, 22, 43, 1);
  --qo-card-fade-bottom: rgba(14, 22, 43, 0.6);
  --qo-glow-blue:   rgba(59, 130, 246, 0.18);
  --qo-glow-orange: rgba(249, 115, 22, 0.10);
  --qo-hero-grad:   radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,0.14) 0%, transparent 60%), linear-gradient(180deg, #060B17 0%, #0A1428 100%);
  --qo-ticker-bg:   rgba(6, 11, 23, 0.55);
  --qo-noise-mix:   overlay;
}

[data-theme="light"] {
  --qo-bg:        #FFFFFF;
  --qo-bg-2:      #EEF3FB;
  --qo-surface:   #FFFFFF;
  --qo-elevated:  #E6EDF9;
  --qo-border:    #D6DEED;
  --qo-border-2:  #B8C5DE;
  --qo-text:      #0A1430;       /* logo tagline navy, deeper for contrast */
  --qo-text-2:    #2E3F66;
  --qo-text-3:    #6A7B9C;
  --qo-text-inv:  #FFFFFF;

  /* Vibrant brand accents in light mode — match the official logo punch */
  --qo-accent:    #1D4ED8;       /* the deep royal blue from the logo */
  --qo-accent-2:  #1E3AAE;
  --qo-accent-3:  #3B82F6;
  --qo-warm:      #F97316;
  --qo-warm-2:    #EA580C;
  --qo-success:   #059669;
  --qo-danger:    #DC2626;       /* punchier red so problem cards don't look pale */

  --qo-grid-line: rgba(29, 78, 216, 0.08);
  --qo-card-fade-top:    rgba(255, 255, 255, 1);
  --qo-card-fade-bottom: rgba(238, 243, 251, 0.85);
  --qo-glow-blue:   rgba(29, 78, 216, 0.16);
  --qo-glow-orange: rgba(249, 115, 22, 0.14);
  --qo-hero-grad:   radial-gradient(ellipse 80% 60% at 50% 0%, rgba(29, 78, 216, 0.16) 0%, transparent 65%), linear-gradient(180deg, #FFFFFF 0%, #EEF3FB 100%);
  --qo-ticker-bg:   rgba(255, 255, 255, 0.92);
  --qo-noise-mix:   multiply;
}

/* Light-mode specific punch-ups — danger/red cards stay vibrant, cards have
   a more substantial drop shadow so they don't look flat on white. */
[data-theme="light"] .qo-card {
  box-shadow: 0 1px 2px rgba(15, 27, 61, 0.04), 0 8px 24px -12px rgba(29, 78, 216, 0.14);
}
[data-theme="light"] .qo-card:hover {
  border-color: var(--qo-accent-3);
  box-shadow: 0 2px 4px rgba(15, 27, 61, 0.06), 0 16px 40px -16px rgba(29, 78, 216, 0.22);
}

/* Light-mode: strengthen tinted-accent surfaces so they don't look pale.
   The originals use color-mix at low percentages that read fine on dark
   surfaces but vanish on white. We override with explicit, vivid mixes. */
[data-theme="light"] .qo-problem-card {
  background: linear-gradient(180deg, #FEE7E2 0%, #FDF4F2 100%) !important;
  border: 1px solid #F1A99B !important;
}
[data-theme="light"] .qo-problem-icon {
  background: #FECACA !important;
  border: 1px solid #F87171 !important;
  color: #B91C1C !important;
}

/* Tinted chip backgrounds (accent pills with .qo-chip-tinted etc) read brighter */
[data-theme="light"] .qo-accent-surface {
  background: linear-gradient(180deg, #E5EDFE 0%, #EFF4FE 100%) !important;
  border: 1px solid #C7D7F5 !important;
}
[data-theme="light"] .qo-warm-surface {
  background: linear-gradient(180deg, #FFE9D6 0%, #FFF3E5 100%) !important;
  border: 1px solid #F5BB87 !important;
}

/* Bigger metric numbers, brand-tinted, so trust strip pops on white */
[data-theme="light"] .qo-card-elevated {
  background: linear-gradient(180deg, #FFFFFF 0%, #E6EDF9 100%) !important;
  border: 1px solid var(--qo-border-2) !important;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--qo-bg); color: var(--qo-text); }
body {
  font-family: var(--qo-sans, 'Geist', system-ui, -apple-system, Segoe UI, sans-serif);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
::selection { background: var(--qo-accent); color: var(--qo-text-inv); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--qo-bg); }
::-webkit-scrollbar-thumb { background: var(--qo-border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--qo-border-2); }

img { max-width: 100%; display: block; }

/* ── Utilities ─────────────────────────────────────────────────────── */
.qo-mono { font-family: var(--qo-mono, 'Geist Mono', ui-monospace, monospace); letter-spacing: 0.02em; }
.qo-eyebrow {
  font-family: var(--qo-mono, monospace);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--qo-accent);
}
.qo-grid-bg {
  background-image:
    linear-gradient(to right, var(--qo-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qo-grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
}
.qo-noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: var(--qo-noise-mix);
  opacity: 0.5;
}

/* Reveal — transform-only entrance (always visible for screenshots). */
@keyframes qo-rise-only-y { from { transform: translateY(16px); } to { transform: none; } }
.qo-reveal {
  animation: qo-rise-only-y 0.7s cubic-bezier(.22,1,.36,1) both;
}

/* Marquee */
@keyframes qo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qo-marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: qo-marquee 60s linear infinite;
}
.qo-marquee-track--slow {
  animation-duration: 360s;
}
.qo-marquee-track:hover { animation-play-state: paused; }

/* Country ticker pills */
.qo-country-pill {
  display: flex; align-items: center; gap: 28px; white-space: nowrap;
}
.qo-country-name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--qo-text);
}
[data-theme="light"] .qo-country-name { color: #0A1430; }
[data-theme="dark"]  .qo-country-name { color: #EEF2FB; }

@keyframes qo-pulse-yellow {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55), 0 0 10px rgba(249, 115, 22, 0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0),    0 0 14px rgba(249, 115, 22, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0),      0 0 10px rgba(249, 115, 22, 0.7); }
}
.qo-country-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--qo-warm);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.75), 0 0 2px rgba(249, 115, 22, 0.95);
  animation: qo-pulse-yellow 2.2s ease-out infinite;
}
[data-theme="light"] .qo-country-dot {
  background: var(--qo-warm);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.55), 0 0 2px rgba(249, 115, 22, 0.9);
}

/* Pulse dots */
@keyframes qo-pulse-warm {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
}
@keyframes qo-pulse-blue {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
  100% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
}
.qo-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--qo-warm);
  animation: qo-pulse-warm 1.6s ease-out infinite;
}
.qo-pulse-dot.is-blue { background: var(--qo-accent); animation-name: qo-pulse-blue; }

/* Buttons */
.qo-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-family: inherit; font-weight: 500; font-size: 14px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.qo-btn-primary {
  background: linear-gradient(180deg, var(--qo-accent) 0%, var(--qo-accent-2) 100%);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.35), 0 8px 28px -8px rgba(59,130,246,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
}
.qo-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(59,130,246,0.55), 0 14px 36px -10px rgba(59,130,246,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
}
.qo-btn-ghost {
  background: rgba(0,0,0,0); color: var(--qo-text);
  border-color: var(--qo-border-2);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .qo-btn-ghost { background: rgba(14, 22, 43, 0.6); }
.qo-btn-ghost:hover { border-color: var(--qo-accent); color: var(--qo-accent); }

.qo-btn-warm {
  background: linear-gradient(180deg, var(--qo-warm-2) 0%, var(--qo-warm) 100%);
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(249,115,22,0.35), 0 8px 28px -8px rgba(249,115,22,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.qo-btn-warm:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.55), 0 14px 36px -10px rgba(249,115,22,0.7);
}

/* Cards */
.qo-card {
  background: linear-gradient(180deg, var(--qo-card-fade-top) 0%, var(--qo-card-fade-bottom) 100%);
  border: 1px solid var(--qo-border);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease;
}
.qo-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 200px at var(--mx, 50%) var(--my, 0%), rgba(59, 130, 246, 0.10), transparent 60%);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.qo-card:hover::before { opacity: 1; }

/* Chip */
.qo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--qo-border);
  background: var(--qo-bg-2);
  font-family: var(--qo-mono, monospace);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--qo-text-2);
}

/* Gradient text */
.qo-gradient-text {
  background: linear-gradient(180deg, var(--qo-text) 0%, color-mix(in oklch, var(--qo-text) 50%, var(--qo-text-2)) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Extend the paint box (per line-fragment) so glyph ink is never clipped. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0.1em 0.06em;
  margin: -0.1em -0.06em;
}
.qo-brand-text {
  background: linear-gradient(120deg, var(--qo-accent) 0%, var(--qo-warm) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Italic ink overhangs its box on every line fragment — clone the paint box
     to each fragment and pad generously so no letter edge is cut. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0.12em 0.18em;
  margin: -0.12em -0.14em;
}

/* Divider */
.qo-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--qo-border-2), transparent);
}

@keyframes qo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.qo-float { animation: qo-float 8s ease-in-out infinite; }

/* Logo lockup tone — no glow. */
[data-theme="light"] .qo-logo--for-dark { display: none !important; }
[data-theme="dark"]  .qo-logo--for-light { display: none !important; }

/* Section base */
.qo-section { padding: 120px 24px; position: relative; }
.qo-wrap    { max-width: 1280px; margin: 0 auto; }
.qo-wrap-sm { max-width: 1100px; margin: 0 auto; }

/* Centered text + grid utilities */
.qo-center      { text-align: center; }
.qo-center > *  { margin-left: auto; margin-right: auto; }

/* Heading scale */
.qo-h1 { font-size: clamp(40px, 5.6vw, 80px); font-weight: 600; line-height: 1.12; letter-spacing: -0.035em; margin: 0; }
.qo-h2 { font-size: clamp(34px, 4vw, 56px);  font-weight: 600; line-height: 1.14; letter-spacing: -0.025em; margin: 0; }
.qo-h3 { font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
.qo-lede { font-size: 18px; line-height: 1.55; color: var(--qo-text-2); }
.qo-body { font-size: 15px; line-height: 1.6; color: var(--qo-text-2); }

a { color: inherit; }

/* Long-form legal / prose pages (Privacy, Cookies) */
.qo-prose { max-width: 820px; margin: 0 auto; color: var(--qo-text-2); font-size: 15.5px; line-height: 1.7; }
.qo-prose h2 { color: var(--qo-text); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 44px 0 14px; }
.qo-prose h3 { color: var(--qo-text); font-size: 18px; font-weight: 600; margin: 28px 0 10px; }
.qo-prose p { margin: 0 0 14px; }
.qo-prose ul { margin: 0 0 14px; padding-left: 22px; }
.qo-prose li { margin: 0 0 8px; }
.qo-prose a { color: var(--qo-accent); }
.qo-prose strong { color: var(--qo-text); font-weight: 600; }
.qo-prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 13.5px; }
.qo-prose th, .qo-prose td { text-align: left; padding: 10px 12px; border: 1px solid var(--qo-border); vertical-align: top; }
.qo-prose th { background: var(--qo-bg-2); color: var(--qo-text); font-weight: 600; }
.qo-legal-note {
  border: 1px solid color-mix(in oklch, var(--qo-warm) 45%, transparent);
  background: color-mix(in oklch, var(--qo-warm) 10%, transparent);
  color: var(--qo-text); border-radius: 12px; padding: 14px 18px;
  font-size: 13.5px; line-height: 1.6; margin: 0 auto 8px; max-width: 820px;
}

/* ── Responsive / mobile ──────────────────────────────────────────────
   Inline grid-template-columns are overridden here with !important at each
   breakpoint; desktop keeps the inline values. */

/* Two-column splits (image+text, footer, etc.) collapse to one column. */
@media (max-width: 920px) {
  .qo-stack-md { grid-template-columns: 1fr !important; }
  .qo-stack-md > * { width: 100% !important; }
}

/* Multi-column card grids: 3/4/5-up → 2-up on tablet, 1-up on phone. */
@media (max-width: 900px) {
  .qo-rgrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .qo-rgrid { grid-template-columns: 1fr !important; }

  /* Tighter section gutters + vertical rhythm on phones. */
  .qo-section { padding-left: 18px !important; padding-right: 18px !important; }
  .qo-section { padding-top: 64px; padding-bottom: 64px; }

  /* Heading sizes already use clamp(); nudge body paddings on phones. */
  .qo-cta-card { padding: 40px 22px !important; }

  /* Long legal tables scroll horizontally instead of overflowing. */
  .qo-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Globe is tall on desktop; shrink on phones. */
  .qo-globe-wrap { height: 420px !important; }
}

/* Mobile nav dropdown panel */
.qo-mobile-panel {
  position: absolute; top: calc(100% + 8px); left: 16px; right: 16px;
  background: var(--qo-bg-2); border: 1px solid var(--qo-border);
  border-radius: 16px; padding: 14px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.5);
  display: grid; gap: 6px; z-index: 60;
}
.qo-mobile-panel a.qo-navlink {
  display: block; padding: 12px 14px; border-radius: 10px;
  text-decoration: none; font-size: 15px; color: var(--qo-text);
}
.qo-mobile-panel a.qo-navlink:hover { background: var(--qo-bg); }