/* ════════════════════════════════════════════════════════════
   BUSINESS CONTROL · adapted from Querubim® Design System
   Palette: Black · White · Orange signal (#FF5A1F)
   Display: Barlow 900 (Power Grotesk substitute)
   Body: DM Sans
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700;800;900&family=DM+Sans:wght@300;400;500;700&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Power Grotesk — via onlinewebfonts CDN */
@font-face {
  font-family: 'Power Grotesk';
  src: url('https://db.onlinewebfonts.com/t/7bb5c8feb64e9d371178e66b1101775d.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/7bb5c8feb64e9d371178e66b1101775d.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/7bb5c8feb64e9d371178e66b1101775d.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── BASE ─── */
  --black: #000000;
  --white: #FFFFFF;

  /* Copper signal — refined, metallic, high-end.
     Main: C96A3B (copper). Light: E8A87C (rose gold). Deep: 8C3E1A (burnt copper). */
  --copper-50:  #F5E4D7;
  --copper-100: #EDC9AD;
  --copper-200: #E8A87C;  /* rose-gold highlight */
  --copper-300: #D98A5B;
  --copper-400: #C96A3B;  /* PRIMARY SIGNAL */
  --copper-500: #B3542A;
  --copper-600: #8C3E1A;  /* deep / shadow */
  --copper-700: #5E2910;

  --signal:   var(--copper-400);
  --signal-2: var(--copper-300);
  --signal-3: var(--copper-200);
  --signal-dim:  rgba(201,106,59,0.08);
  --signal-b:    rgba(201,106,59,0.28);
  --signal-glow: rgba(201,106,59,0.38);

  /* Gradients — copper gets used as decoration here */
  --grad-copper:        linear-gradient(135deg, #E8A87C 0%, #C96A3B 45%, #8C3E1A 100%);
  --grad-copper-soft:   linear-gradient(135deg, rgba(232,168,124,0.18) 0%, rgba(201,106,59,0.08) 50%, transparent 100%);
  --grad-copper-sheen:  linear-gradient(100deg, #F5E4D7 0%, #E8A87C 20%, #C96A3B 45%, #8C3E1A 70%, #C96A3B 90%, #E8A87C 100%);
  --grad-copper-radial: radial-gradient(ellipse at center, rgba(232,168,124,0.35) 0%, rgba(201,106,59,0.15) 40%, transparent 70%);
  --grad-dark-copper:   linear-gradient(180deg, #0A0906 0%, #120C08 40%, #1A0D05 100%);

  /* ─── SURFACES · warm dark scale (very slight copper undertone) ─── */
  --bg:  #0A0806;
  --bg2: #100C08;
  --bg3: #16110B;
  --bg4: #1E160E;
  --bg5: #281D12;

  /* ─── TEXT on dark ─── */
  --t1: rgba(255,255,255,1);
  --t2: rgba(255,255,255,0.65);
  --t3: rgba(255,255,255,0.40);
  --t4: rgba(255,255,255,0.18);
  --t5: rgba(255,255,255,0.08);

  /* ─── BORDERS ─── */
  --border:     rgba(255,255,255,0.08);
  --border2:    rgba(255,255,255,0.14);
  --border-sig: rgba(255,90,31,0.40);

  /* ─── TYPE ─── */
  --font-display: 'Power Grotesk', 'Barlow', 'Helvetica Neue', sans-serif;
  --font-body:    'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;
  --font-geo:     'Space Grotesk', 'DM Sans', system-ui, sans-serif;

  /* ─── RADII — sharp ─── */
  --r-0: 0px;  --r-1: 2px;  --r-2: 6px;  --r-3: 10px;  --r-4: 14px;
  --r-full: 999px;

  /* ─── SHADOWS — softer, more elegant ─── */
  --shadow-sig:    0 0 32px rgba(201,106,59,0.28), 0 8px 40px rgba(201,106,59,0.14);
  --shadow-sig-lg: 0 0 80px rgba(232,168,124,0.35), 0 16px 60px rgba(201,106,59,0.22);
  --shadow-soft:   0 8px 32px rgba(0,0,0,0.55);
  --shadow-card:   0 2px 10px rgba(0,0,0,0.4);

  /* ─── SPACING ─── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px;  --sp-4: 20px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 72px;  --sp-8: 96px;
  --sp-9: 128px;

  /* ─── MOTION ─── */
  --ease-std:    ease-in-out;
  --ease-spring: cubic-bezier(.34, 1.5, .64, 1);
  --ease-out:    ease-out;

  /* ─── TWEAK VARS (overridden live by panel) ─── */
  --display-stack: var(--font-display);
  --wrap-pad-y: 96px;
}

/* ════ RESET ════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--t1); }
html { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--t2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
a { color: inherit; text-decoration: none; }

/* ════ TYPE ════ */
h1, h2, h3, h4, h5, h6,
.q-h1, .q-h2, .q-h3, .q-h4 {
  font-family: var(--display-stack);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 0.95;
  margin: 0;
}
h1, .q-h1 { font-size: clamp(3rem, 8.5vw, 7.5rem); letter-spacing: -0.035em; line-height: 0.88; }
h2, .q-h2 { font-size: clamp(2rem, 5vw, 4rem); line-height: 0.95; letter-spacing: -0.025em; }
h3, .q-h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.05; letter-spacing: -0.01em; }
h4, .q-h4 { font-size: 1.05rem; letter-spacing: 0.04em; }

.q-sub {
  font-family: var(--display-stack);
  text-transform: none;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--t2);
  line-height: 1.3;
  margin: 0;
}
.q-sub-lg { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.q-sub-md { font-size: 1.3rem; }
.q-sub-sm { font-size: 1.1rem; }

.q-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--grad-copper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.q-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--grad-copper);
  border-radius: 1px;
  box-shadow: 0 0 12px var(--signal);
  -webkit-text-fill-color: initial;
}

p, .q-body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--t2);
  margin: 0;
}
.q-body strong { color: var(--white); font-weight: 500; }
.q-small { font-size: 0.85rem; color: var(--t2); line-height: 1.55; }
.q-micro { font-family: var(--font-mono); font-size: 0.68rem; color: var(--t3); letter-spacing: 0.14em; text-transform: uppercase; }

/* ════ LAYOUT ════ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .wrap { padding: 0 20px; } }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
section { position: relative; padding: var(--wrap-pad-y) 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }

/* ════ BUTTONS ════ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--r-1);
  transition: transform .2s var(--ease-std), background .2s, box-shadow .3s, color .2s;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad-copper);
  color: #FFF6EE;
  box-shadow: var(--shadow-sig);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,246,238,0.28) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-std);
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sig-lg);
}
.btn-white {
  background: var(--white);
  color: var(--black);
}
.btn-white:hover { background: #E8E8E8; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost {
  background: transparent;
  color: var(--t1);
  border: 1px solid var(--border2);
}
.btn-ghost:hover { border-color: var(--white); }
.btn-lg { padding: 20px 36px; font-size: 1rem; }

.arrow { display: inline-block; transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ════ CARD ════ */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  padding: 32px;
  position: relative;
  transition: transform .25s var(--ease-std), background .25s, border-color .25s;
  overflow: hidden;
}
.card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-std);
}
.card:hover { background: var(--bg3); border-color: var(--border2); transform: translateY(-2px); }
.card:hover::after { transform: scaleX(1); }

/* ════ BADGES ════ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t2);
  line-height: 1;
}
.badge-sig {
  background: var(--signal-dim);
  border-color: var(--border-sig);
  color: var(--signal-2);
}
.badge-dot::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px; background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* ════ NOISE TEXTURE ════ */
.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* ═══ scrollbar ═══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--signal); }

/* ═══ Density tweak ═══ */
body[data-density="tight"] {
  --wrap-pad-y: 64px;
}
body[data-density="airy"] {
  --wrap-pad-y: 140px;
}

/* ═══ focus ═══ */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* sheen keyframes (also vertical) */
@keyframes sheenV { 0%, 100% { background-position: 50% 0%; } 50% { background-position: 50% 100%; } }

/* gradient card variant */
.card-copper {
  background: var(--grad-copper-soft), var(--bg2);
  background-blend-mode: overlay;
  border: 1px solid var(--border-sig);
}
.card-copper:hover { border-color: var(--signal); }
.ticker-wrap { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; background: var(--bg); }
.ticker-track { display: inline-flex; gap: 56px; white-space: nowrap; animation: tick 42s linear infinite; }
.ticker-item { font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--t2); display: inline-flex; gap: 56px; align-items: center; }
.ticker-item span.diamond { color: var(--signal); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══ utility glow orb ═══ */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; z-index: 0;
}

/* ═══ gradient text helpers ═══ */
.grad-text {
  background: var(--grad-copper);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-text-sheen {
  background: var(--grad-copper-sheen);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* hairline copper rule */
.hr-copper {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  border: 0;
}
.orb-sig { background: var(--grad-copper-radial); }
.orb-deep { background: radial-gradient(circle at center, rgba(140,62,26,0.35), transparent 65%); }

/* ═══ data chart prim ═══ */
.bar { height: 8px; border-radius: var(--r-1); background: var(--bg4); overflow: hidden; position: relative; }
.bar-fill { height: 100%; background: var(--grad-copper); border-radius: var(--r-1); }

/* ═══ light chip used inline ═══ */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t2);
  background: var(--bg2);
}