/* ============================================================
   SPECTRA INSIGHTS — Market Intelligence Newsroom
   Editorial · premium · alive
   ============================================================ */

:root, [data-theme="dark"] {
  /* Surfaces */
  --bg:        #0B0A09;
  --bg-2:      #131210;
  --surface:   #1A1714;
  --surface-2: #211E1A;
  --surface-3: #29251F;
  /* Lines */
  --rule:      #28241F;
  --rule-2:    #3A352F;
  --rule-gold: rgba(201,169,97,0.28);
  /* Text */
  --fg:        #F4EFE5;
  --fg-2:      #EAE3D5;
  --mute:      #8A847A;
  --mute-2:    #5E5953;
  --faint:     #45413A;
  /* Accents */
  --gold:      #C9A961;
  --gold-2:    #E0C690;
  --gold-soft: rgba(201,169,97,0.12);
  --gold-glow: rgba(201,169,97,0.16);
  --green:     #82C18A;
  --green-soft:rgba(130,193,138,0.12);
  --red:       #D08A7E;
  --red-soft:  rgba(208,138,126,0.12);
  --ember:     #D9663F;
  --ember-soft:rgba(217,102,63,0.12);
  --blue:      #86A9CC;
  --blue-soft: rgba(134,169,204,0.10);
  --grain-op:  0.55;
  --aurora-op: 0.7;
  /* legacy aliases for ported shell CSS */
  --ink: var(--bg); --ink-2: var(--bg-2); --bone: var(--fg); --bone-2: var(--fg-2); --stone: var(--surface);

  /* Type */
  --display: 'Fraunces', Georgia, serif;
  --sans:    'Inter Tight', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --norm: 280ms;
  --slow: 520ms;

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 56px);
}
[data-theme="light"] {
  --bg:        #F4EFE5;
  --bg-2:      #EEE7D8;
  --surface:   #EAE3D5;
  --surface-2: #E2DAC9;
  --surface-3: #DAD0BD;
  --rule:      rgba(11,10,9,0.12);
  --rule-2:    rgba(11,10,9,0.20);
  --rule-gold: rgba(156,123,54,0.30);
  --fg:        #1A1714;
  --fg-2:      #2A2520;
  --mute:      #6B655B;
  --mute-2:    #8A8479;
  --faint:     #9A9488;
  --gold:      #9C7B36;
  --gold-2:    #B69149;
  --gold-soft: rgba(156,123,54,0.10);
  --gold-glow: rgba(156,123,54,0.18);
  --green:     #3E8F58;
  --green-soft:rgba(62,143,88,0.12);
  --red:       #B0503F;
  --red-soft:  rgba(176,80,63,0.12);
  --ember:     #B23B1F;
  --ember-soft:rgba(178,59,31,0.12);
  --blue:      #4E7BA6;
  --blue-soft: rgba(78,123,166,0.10);
  --grain-op:  0.16;
  --aurora-op: 0.5;
}
html { transition: background-color .4s ease, color .4s ease; }

* , *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: "ss01" 1, "cv11" 1, "tnum" 1;
}
::selection { background: var(--gold); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg, canvas { display:block; }

/* Film grain — premium texture, very subtle */
body::after {
  content:''; 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='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:var(--grain-op); mix-blend-mode:overlay;
}

.wrap { max-width: var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.relz { position:relative; z-index:2; }

/* utility type */
.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.kicker-mute { color: var(--mute-2); }
.serif-i { font-family: var(--display); font-style: italic; font-weight: 400; }

/* ============================================================
   MASTHEAD / NAV
   ============================================================ */
.mast {
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--rule);
}
.mast-row { display:flex; align-items:center; justify-content:space-between; height: 62px; gap: 24px; }
.brand { display:flex; align-items:center; gap: 11px; }
.brand-dot { width:8px; height:8px; border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold-glow); animation: pulse 3s ease-in-out infinite; }
.brand-name { font-family: var(--display); font-size: 19px; font-weight:500; letter-spacing:.04em; }
.brand-name b { color: var(--gold); font-weight:500; }
.mast-links { display:none; align-items:center; gap: 30px; }
.mast-links a { font-size:13px; color: var(--mute); transition: color var(--fast); }
.mast-links a:hover { color: var(--fg); }
.mast-right { display:flex; align-items:center; gap: 14px; }
.mast-clock { font-family: var(--mono); font-size: 12px; color: var(--mute-2); letter-spacing:.04em; display:none; }
.mast-clock b { color: var(--green); font-weight:500; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.82);} }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 9px 18px; border-radius: 999px; font-size:13px; font-weight:600;
  border:1px solid transparent; transition: all var(--fast) var(--ease); white-space:nowrap;
}
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-1px); box-shadow:0 6px 22px var(--gold-glow); }
.btn-ghost { color: var(--fg-2); border-color: var(--rule-2); }
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }
.btn-sm { padding: 7px 14px; font-size:12px; }

/* ============================================================
   MARKET PULSE HERO
   ============================================================ */
.pulse {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--rule);
  min-height: clamp(560px, 74vh, 760px);
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(104px,13vh,150px) 0 clamp(36px,6vh,64px);
  animation: pulse-hero-bg 8s ease-in-out infinite;
}
@keyframes pulse-hero-bg { 0%,100%{background-color:transparent;} 50%{background-color:rgba(201,169,97,0.015);} }
/* living aurora */
.pulse-aurora { position:absolute; inset:-20% -10%; z-index:0; pointer-events:none; filter: blur(60px); opacity:var(--aurora-op); }
.pulse-aurora span { position:absolute; border-radius:50%; mix-blend-mode:screen; will-change: transform; }
.aur-1 { width:46vw; height:46vw; left:48%; top:-8%; background: radial-gradient(circle, rgba(201,169,97,0.20), transparent 65%); animation: drift1 26s ease-in-out infinite; }
.aur-2 { width:40vw; height:40vw; left:-6%; top:30%; background: radial-gradient(circle, rgba(130,193,138,0.13), transparent 64%); animation: drift2 32s ease-in-out infinite; }
.aur-3 { width:34vw; height:34vw; left:62%; top:48%; background: radial-gradient(circle, rgba(134,169,204,0.10), transparent 64%); animation: drift3 38s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6%,8%) scale(1.12);} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%,-6%) scale(1.08);} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-5%,-7%) scale(1.14);} }
.pulse-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}

.pulse-head { display:flex; align-items:center; gap:14px; margin-bottom: clamp(24px,4vh,40px); flex-wrap:wrap; }
.pulse-live {
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
}
.pulse-live .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation: pulse 1.8s ease-in-out infinite; }
.pulse-sep { width:1px; height:14px; background:var(--rule-2); }

.regime-row { display:flex; align-items:center; gap: clamp(16px,3vw,28px); flex-wrap:wrap; margin-bottom: clamp(20px,3vh,28px); }
.regime-orb { position:relative; width: clamp(54px,8vw,76px); height: clamp(54px,8vw,76px); flex-shrink:0; }
.regime-orb .core { position:absolute; inset: 26%; border-radius:50%; background: var(--green); box-shadow: 0 0 28px var(--green); }
.regime-orb .ring { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--green); opacity:.5; animation: orbring 2.6s ease-out infinite; }
.regime-orb .ring.r2 { animation-delay: 1.3s; }
@keyframes orbring { 0%{transform:scale(.5);opacity:.7;} 100%{transform:scale(1.15);opacity:0;} }
.regime-orb.off .core { background: var(--ember); box-shadow:0 0 28px var(--ember); }
.regime-orb.off .ring { border-color: var(--ember); }

.regime-label { font-family: var(--display); font-weight:500; font-size: clamp(46px, 9vw, 104px); line-height:.9; letter-spacing:-.03em; color:var(--green); white-space:nowrap; }
.regime-label.off { color: var(--ember); }
.regime-meta { display:flex; flex-direction:column; gap:6px; }
.regime-conf { font-family: var(--mono); font-size: clamp(28px,4vw,46px); font-weight:500; color: var(--fg); line-height:1; animation: breathe-number 4s ease-in-out infinite; }
.regime-conf small { font-size: .42em; color: var(--mute); letter-spacing:.08em; vertical-align: middle; margin-left:4px; animation: breathe-small 4s ease-in-out infinite; }
.regime-conftag { font-size:12px; color:var(--mute-2); text-transform:uppercase; letter-spacing:.14em; }
@keyframes breathe-number { 0%,100%{opacity:1;} 50%{opacity:.72;} }
@keyframes breathe-small { 0%,100%{opacity:.6;} 50%{opacity:.3;} }

.pulse-headline { font-family: var(--display); font-weight:400; font-size: clamp(26px,3.6vw,44px); line-height:1.12; letter-spacing:-.01em; max-width: 18ch; margin-bottom: 14px; }
.pulse-headline em { font-style:italic; color: var(--gold); }
.pulse-detail { font-size: clamp(16px,1.5vw,19px); line-height:1.6; color: var(--mute); max-width: 56ch; }

.pulse-foot { display:flex; align-items:center; gap: clamp(20px,4vw,44px); margin-top: clamp(28px,5vh,48px); flex-wrap:wrap; }
.pulse-stat .v { font-family: var(--display); font-weight:500; font-size: 28px; line-height:1; }
.pulse-stat .l { font-family: var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-top:7px; }
.pulse-updated { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-left:auto; }
.pulse-updated b { color: var(--mute); font-weight:400; }

/* live tape */
.tape { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background: var(--bg-2); overflow:hidden; position:relative; z-index:2; }
.tape-track { display:flex; gap: 0; width:max-content; animation: tape 60s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.tape-item { display:inline-flex; align-items:center; gap:9px; padding: 12px 22px; border-right:1px solid var(--rule); font-family: var(--mono); font-size:12.5px; white-space:nowrap; }
.tape-item .s { color: var(--fg); font-weight:500; }
.tape-item .p { color: var(--mute); }
.tape-item .c { font-weight:500; }
.tape-item .c.up { color: var(--green); }
.tape-item .c.dn { color: var(--red); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section { padding: clamp(56px,9vh,104px) 0; position:relative; z-index:2; }
.section + .section { border-top: 1px solid var(--rule); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: clamp(28px,4vh,44px); flex-wrap:wrap; }
.sec-title { font-family: var(--display); font-weight:400; font-size: clamp(28px,3.4vw,42px); line-height:1.04; letter-spacing:-.02em; }
.sec-title em { font-style:italic; color: var(--gold); }
.sec-sub { font-size: 15px; color: var(--mute); max-width: 46ch; margin-top: 10px; }
.sec-aside { font-family: var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); white-space:nowrap; }

/* ============================================================
   MARKET WEATHER
   ============================================================ */
.weather { display:grid; grid-template-columns: 1fr; gap: 18px; }
.wx-glyph canvas { animation: wx-float 5s ease-in-out infinite; }
@keyframes wx-float { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-5px) scale(1.02);} }

.wx-now {
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--rule); border-radius: 18px; padding: clamp(28px,4vw,44px);
  display:flex; align-items:center; gap: clamp(24px,4vw,48px); position:relative; overflow:hidden;
}
.wx-now::before { content:''; position:absolute; inset:0; background: radial-gradient(circle at 18% 30%, var(--gold-soft), transparent 55%); pointer-events:none; }
.wx-glyph { flex-shrink:0; position:relative; z-index:1; }
.wx-now-text { position:relative; z-index:1; }
.wx-now-label { font-family: var(--display); font-weight:500; font-size: clamp(30px,4vw,52px); line-height:1; letter-spacing:-.02em; margin-bottom:10px; }
.wx-now-sum { font-size: clamp(16px,1.6vw,20px); color: var(--fg-2); margin-bottom:12px; }
.wx-now-read { font-family: var(--mono); font-size:12px; letter-spacing:.06em; color: var(--mute); }
.wx-forecast { display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.wx-cell { background: var(--surface); border:1px solid var(--rule); border-radius: 14px; padding: 20px 12px; text-align:center; transition: border-color var(--fast), background var(--fast); }
.wx-cell:hover { border-color: var(--rule-2); background: var(--surface-2); }
.wx-cell .when { font-family: var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2); margin-bottom:14px; }
.wx-cell .ic { display:flex; justify-content:center; margin-bottom:14px; height:38px; align-items:center; }
.wx-cell .lab { font-size:13px; color: var(--fg-2); font-weight:500; }

/* weather glyphs (pure CSS, simple shapes only) */
.glyph { position:relative; }
.glyph-sun { width:100%; height:100%; }
.sun-disc { border-radius:50%; background: radial-gradient(circle at 35% 35%, var(--gold-2), var(--gold)); box-shadow:0 0 28px var(--gold-glow); }
.cloud { background: linear-gradient(180deg, #6f6a61, #4c4842); border-radius: 999px; position:relative; }
.cloud::before, .cloud::after { content:''; position:absolute; background: inherit; border-radius:50%; }
.bolt { width:0;height:0; }
.rain-line { background: var(--blue); border-radius:2px; }

/* ============================================================
   TODAY'S STORY (editorial)
   ============================================================ */
.story { display:grid; grid-template-columns: 1fr; gap: clamp(28px,4vw,56px); }
.story-lead { }
.story-kicker { margin-bottom: 18px; }
.story-headline { font-family: var(--display); font-weight:400; font-size: clamp(34px,5vw,68px); line-height:1.02; letter-spacing:-.025em; margin-bottom: 6px; }
.story-headline em { font-style:italic; }
.story-meta-row { display:flex; align-items:center; gap:18px; padding: 16px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin: 22px 0 30px; flex-wrap:wrap; }
.story-meta { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color: var(--mute); }
.story-meta b { color: var(--fg-2); font-weight:500; }
.story-meta .pip { width:5px; height:5px; border-radius:50%; background: var(--gold); }
.story-body { columns: 2; column-gap: clamp(28px,4vw,52px); }
.story-body p { font-size: 17px; line-height: 1.72; color: var(--fg-2); margin-bottom: 18px; break-inside: avoid; }
.story-body p:first-child::first-letter {
  font-family: var(--display); font-weight:500; float:left; font-size: 76px; line-height:.74;
  padding: 6px 12px 0 0; color: var(--gold);
}
.story-body p:last-child { margin-bottom:0; }

/* ============================================================
   LIVE MARKET RADAR
   ============================================================ */
.radar-shell { display:grid; grid-template-columns: 1fr; gap: 22px; align-items:start; }
.radar-stage {
  position:relative; background: radial-gradient(circle at 50% 50%, var(--surface-2), var(--bg) 78%);
  border:1px solid var(--rule); border-radius: 20px; overflow:hidden; aspect-ratio: 1 / 1; max-height: 560px;
}
.radar-stage canvas { width:100%; height:100%; }
.radar-tip {
  position:absolute; pointer-events:none; z-index:5; background: var(--surface-3); border:1px solid var(--rule-2);
  border-radius: 10px; padding: 10px 13px; font-family:var(--mono); font-size:12px; color:var(--fg);
  opacity:0; transform: translateY(4px); transition: opacity var(--fast), transform var(--fast); white-space:nowrap;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.radar-tip.show { opacity:1; transform: translateY(0); }
.radar-tip .t-sym { color: var(--gold); font-weight:500; }
.radar-tip .t-act { display:block; margin-top:3px; color: var(--mute); font-size:11px; }
.radar-side { display:flex; flex-direction:column; gap: 16px; }
.radar-legend { display:flex; flex-direction:column; gap: 12px; background: var(--surface); border:1px solid var(--rule); border-radius:14px; padding: 20px; }
.leg-row { display:flex; align-items:center; gap: 11px; font-size:13px; color: var(--fg-2); }
.leg-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.leg-dot.buy { background: var(--green); box-shadow:0 0 10px var(--green-soft); }
.leg-dot.sell { background: var(--red); }
.leg-dot.caution { background: var(--ember); }
.leg-dot.neutral { background: var(--mute-2); }
.leg-note { font-size:12px; color: var(--mute-2); line-height:1.5; }
.radar-hint { font-family:var(--mono); font-size:11px; color: var(--faint); letter-spacing:.04em; }

/* ============================================================
   CONVICTION (Tier 1)
   ============================================================ */
.conv-grid { display:grid; grid-template-columns: 1fr; gap: 18px; }
.conv {
  position:relative; background: var(--surface); border:1px solid var(--rule); border-radius: 18px;
  padding: clamp(24px,3vw,34px); overflow:hidden; transition: border-color var(--norm), transform var(--norm), box-shadow var(--norm);
}
.conv::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--accent, var(--gold)); }
.conv.buy { --accent: var(--green); }
.conv.caution { --accent: var(--ember); }
.conv.sell { --accent: var(--red); }
.conv:hover { border-color: var(--rule-2); transform: translateY(-3px); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.conv-top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom: 22px; flex-wrap:wrap; }
.conv-sym { font-family: var(--mono); font-size: clamp(20px,2.4vw,26px); font-weight:500; color: var(--fg); margin-bottom:8px; letter-spacing:.01em; }
.conv-type { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color: var(--accent, var(--gold)); }
.conv-type::before { content:''; width:7px; height:7px; border-radius:50%; background: currentColor; }
.conv-conf { text-align:right; flex-shrink:0; }
.conv-conf .n { font-family: var(--display); font-weight:500; font-size: clamp(40px,5vw,60px); line-height:.85; color: var(--accent, var(--gold)); }
.conv-conf .n small { font-size:.4em; opacity:.6; margin-left:2px; }
.conv-conf .tier { font-family: var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); margin-top:8px; }

.conv-spark { height: 46px; margin: 4px 0 22px; }
.conv-block { margin-bottom: 18px; }
.conv-block:last-of-type { margin-bottom:0; }
.conv-block .h { font-family: var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); margin-bottom: 8px; }
.conv-block .p { font-size:15.5px; line-height:1.62; color: var(--fg-2); }
.conv-stats { display:grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border:1px solid var(--rule); border-radius: 12px; overflow:hidden; margin-top: 22px; }
.conv-stat { background: var(--bg-2); padding: 16px 14px; text-align:center; }
.conv-stat .v { font-family: var(--mono); font-size: 18px; font-weight:500; color: var(--fg); }
.conv-stat .v.green { color: var(--green); }
.conv-stat .v.gold { color: var(--gold); }
.conv-stat .l { font-size: 10.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--mute-2); margin-top:6px; }

/* ============================================================
   GLOBAL MARKET MAP
   ============================================================ */
.map { border:1px solid var(--rule); border-radius: 16px; overflow:hidden; }
.map-row {
  display:grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 0.8fr; align-items:center; gap: 18px;
  padding: clamp(18px,2.4vw,26px) clamp(18px,3vw,30px); border-bottom:1px solid var(--rule);
  transition: background var(--fast); position:relative;
}
.map-row:last-child { border-bottom:none; }
.map-row:hover { background: var(--surface); }
.map-name { display:flex; align-items:center; gap: 14px; }
.map-dir { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--mono); font-size:15px; }
.map-dir.up { background: var(--green-soft); color: var(--green); }
.map-dir.down { background: var(--red-soft); color: var(--red); }
.map-dir.flat { background: rgba(148,141,128,.12); color: var(--mute); }
.map-name .nm { font-family: var(--display); font-size: 21px; font-weight:500; }
.map-name .nt { font-size:12.5px; color: var(--mute-2); margin-top:2px; }
.map-strength { display:flex; flex-direction:column; gap:7px; }
.map-strength .bar { height:6px; background: var(--bg-2); border-radius:999px; overflow:hidden; }
.map-strength .fill { height:100%; border-radius:999px; transition: width var(--slow) var(--ease); }
.map-strength .fill.up { background: linear-gradient(90deg, var(--green), #a8d4ad); }
.map-strength .fill.down { background: linear-gradient(90deg, var(--red), #e0a89f); }
.map-strength .fill.flat { background: linear-gradient(90deg, var(--mute-2), var(--mute)); }
.map-strength .cap { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute-2); }
.map-num { font-family: var(--mono); font-size: 16px; color: var(--fg); }
.map-num small { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute-2); margin-top:5px; font-family:var(--mono); }
.map-flow { font-family:var(--mono); font-size:13px; font-weight:500; }
.map-flow.Inflow { color: var(--green); }
.map-flow.Outflow { color: var(--red); }
.map-flow.Neutral { color: var(--mute); }
.map-head { display:grid; grid-template-columns: 1.1fr 1.4fr 0.8fr 0.8fr; gap:18px; padding: 14px clamp(18px,3vw,30px); background: var(--bg-2); border-bottom:1px solid var(--rule); }
.map-head span { font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); }

/* ============================================================
   DEVELOPING (Tier 2)
   ============================================================ */
.dev-grid { display:grid; grid-template-columns: 1fr; gap: 14px; }
.dev {
  display:grid; grid-template-columns: auto 1fr auto; gap: clamp(16px,3vw,28px); align-items:center;
  background: var(--surface); border:1px solid var(--rule); border-radius: 14px; padding: 22px clamp(18px,3vw,26px);
  transition: border-color var(--fast), background var(--fast);
}
.dev:hover { border-color: var(--rule-2); background: var(--surface-2); }
.dev-left { min-width: 0; }
.dev-sym { font-family: var(--mono); font-size:17px; font-weight:500; color: var(--fg); margin-bottom:7px; }
.dev-type { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; }
.dev-type.buy { color: var(--green); }
.dev-type.sell { color: var(--red); }
.dev-type.neutral { color: var(--mute); }
.dev-type::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.dev-why { font-size:14.5px; line-height:1.55; color: var(--mute); }
.dev-conf { text-align:right; flex-shrink:0; }
.dev-conf .n { font-family: var(--display); font-size: 30px; font-weight:500; color: var(--fg); line-height:1; }
.dev-conf .n small { font-size:.45em; opacity:.55; }
.dev-conf .l { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--mute-2); margin-top:5px; }

/* ============================================================
   THE FEED (Tier 3 — collapsed)
   ============================================================ */
.feed-wrap { border:1px solid var(--rule); border-radius: 14px; overflow:hidden; background: var(--surface); }
.feed-toggle {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding: 18px clamp(18px,3vw,26px); background: var(--bg-2); border:none; color: var(--fg); text-align:left;
  border-bottom:1px solid transparent; transition: border-color var(--fast);
}
.feed-toggle .ft-l { display:flex; align-items:center; gap:12px; }
.feed-toggle .ft-title { font-family: var(--display); font-size:19px; font-weight:500; }
.feed-toggle .ft-count { font-family:var(--mono); font-size:11px; color: var(--mute-2); background: var(--surface-2); border:1px solid var(--rule); border-radius:999px; padding:3px 9px; }
.feed-toggle .chev { font-family:var(--mono); color: var(--mute); transition: transform var(--norm); }
.feed-toggle[aria-expanded="true"] { border-bottom-color: var(--rule); }
.feed-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.feed-list { max-height:0; overflow:hidden; transition: max-height var(--slow) var(--ease); }
.feed-list.open { max-height: 900px; }
.feed-item { display:grid; grid-template-columns: auto 1fr auto auto; gap: clamp(12px,2.5vw,22px); align-items:center; padding: 15px clamp(18px,3vw,26px); border-bottom:1px solid var(--rule); transition: background var(--fast); }
.feed-item:last-child { border-bottom:none; }
.feed-item:hover { background: var(--surface-2); }
.feed-sym { font-family:var(--mono); font-size:14px; font-weight:500; color: var(--fg); min-width: 52px; }
.feed-type { font-size:14px; color: var(--fg-2); }
.feed-act { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; }
.feed-act.buy { color: var(--green); } .feed-act.sell { color: var(--red); } .feed-act.neutral { color: var(--mute); }
.feed-act::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.feed-conf { font-family:var(--mono); font-size:13px; color: var(--mute); }
.feed-time { font-family:var(--mono); font-size:12px; color: var(--faint); text-align:right; min-width: 48px; }

/* ============================================================
   MOOD STRIP
   ============================================================ */
.mood {
  display:grid; grid-template-columns:1fr; gap: clamp(22px,4vw,40px); align-items:center;
  background: linear-gradient(150deg, var(--surface-2), var(--surface)); border:1px solid var(--rule);
  border-radius:18px; padding: clamp(26px,4vw,40px);
}
.mood-label { }
.mood-label .k { margin-bottom:12px; }
.mood-state { font-family: var(--display); font-weight:500; font-size: clamp(36px,5vw,58px); line-height:1; letter-spacing:-.02em; color: var(--green); }
.mood-note { font-size:15px; color: var(--mute); margin-top:14px; max-width: 40ch; }
.mood-gauge { width:100%; }
.gauge-track { position:relative; height:10px; border-radius:999px; background: linear-gradient(90deg, var(--red), var(--mute-2) 50%, var(--green)); opacity:.55; }
.gauge-needle { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background: var(--fg); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--rule-2), 0 4px 14px rgba(0,0,0,.5); transform: translate(-50%,-50%); transition: left var(--slow) var(--ease); }
.gauge-scale { display:flex; justify-content:space-between; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--mute-2); }

/* ============================================================
   WHY IT MATTERS
   ============================================================ */
.why-card { background: linear-gradient(150deg, var(--surface-2), var(--surface)); border:1px solid var(--rule-gold); border-radius: 18px; padding: clamp(32px,5vw,52px); position:relative; overflow:hidden; }
.why-card::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 70% 50% at 20% 30%, var(--gold-soft), transparent 60%); pointer-events:none; }
.why-body { position:relative; z-index:1; }
.why-body .why-line { font-size: clamp(17px,2vw,22px); line-height:1.7; color: var(--fg-2); margin-bottom:18px; }
.why-body .why-line:last-child { margin-bottom:0; }
.why-body .why-line strong { color: var(--fg); font-weight:600; }
.why-body .why-line .gold { color: var(--gold); }

/* ============================================================
   LIVE METRICS
   ============================================================ */
.metrics-grid { display:grid; grid-template-columns: 1fr; gap:14px; }
.metric-row { display:flex; align-items:center; gap: clamp(16px,3vw,28px); background: var(--surface); border:1px solid var(--rule); border-radius:14px; padding: clamp(18px,2.5vw,26px) clamp(18px,3vw,28px); }
.metric-label { flex-shrink:0; min-width: 120px; }
.metric-label .ml { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); }
.metric-label .mv { font-family:var(--display); font-size: clamp(22px,3vw,34px); font-weight:500; line-height:1; margin-top:8px; letter-spacing:-.02em; }
.metric-label .mv.green { color: var(--green); }
.metric-label .mv.red { color: var(--red); }
.metric-label .mv.gold { color: var(--gold); }
.metric-label .mv.mute { color: var(--mute); }
.metric-bar-wrap { flex:1; min-width:0; }
.metric-bar { height:8px; background: var(--bg-2); border-radius:999px; overflow:hidden; position:relative; }
.metric-bar .fill { height:100%; border-radius:999px; transition: width 1.2s var(--ease); }
.metric-bar .fill.green { background: linear-gradient(90deg, #3E8F58, var(--green)); }
.metric-bar .fill.red { background: linear-gradient(90deg, #B0503F, var(--red)); }
.metric-bar .fill.gold { background: linear-gradient(90deg, #7A6230, var(--gold)); }
.metric-bar .fill.blue { background: linear-gradient(90deg, #3A5F8A, var(--blue)); }
.metric-note { font-size:12px; color: var(--mute-2); text-align:right; flex-shrink:0; min-width:80px; }
.metric-note .mn { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color: var(--mute); }

@media (min-width: 880px) {
  .metrics-grid { gap:12px; }
}

/* ============================================================
   PULSE CTA
   ============================================================ */
.pulse-cta { margin-top: clamp(32px,6vh,56px); }
.pulse-explore { font-size:15px; padding: 16px 32px; animation: breathe-cta 3s ease-in-out infinite; }
@keyframes breathe-cta { 0%,100%{box-shadow:0 0 0 rgba(201,169,97,0);transform:translateY(0);} 50%{box-shadow:0 0 30px rgba(201,169,97,0.25);transform:translateY(-2px);} }

/* ============================================================
   SHARE BUTTONS — brand icons, larger targets
   ============================================================ */
.share-row { display:flex; align-items:center; justify-content:center; gap: clamp(16px,3vw,28px); margin-top: 40px; flex-wrap:wrap; }
.share-label { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--mute-2); }
.share-btns { display:flex; gap: 14px; align-items:center; }
.btn-share-icon { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--rule-2); background:var(--surface); color:var(--mute); transition: all .2s; cursor:pointer; position:relative; }
.btn-share-icon svg { width:18px; height:18px; display:block; }
.btn-share-icon:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); transform:translateY(-2px); }
.btn-share-icon.btn-copy-link.copied { color:var(--green); border-color:var(--green); background:var(--green-soft); }
.btn-share-icon.btn-copy-link.copied svg { stroke:var(--green); }
.btn-share-icon[data-tip]::after { content:attr(data-tip); position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); background:var(--fg); color:var(--bg); font-family:var(--mono); font-size:9px; letter-spacing:.06em; padding:3px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; }

@media (max-width: 560px) {
  .btn-share-icon { width:40px; height:40px; }
  .btn-share-icon svg { width:16px; height:16px; }
  .share-row { gap:12px; }
  .share-btns { gap:10px; }
  .metric-row { flex-wrap:wrap; gap:12px; }
  .metric-label { min-width:100px; }
  .metric-note { text-align:left; }
}

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-card { background: linear-gradient(135deg, var(--surface-2), var(--surface)); border:1px solid var(--rule); border-radius: 20px; padding: clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden; }
.cta-card::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse 60% 80% at 50% 0%, var(--gold-soft), transparent 60%); pointer-events:none; }
.cta-card .relz { position:relative; z-index:1; }
.cta-title { font-family: var(--display); font-weight:400; font-size: clamp(28px,4vw,46px); line-height:1.05; letter-spacing:-.02em; margin-bottom:16px; }
.cta-title em { font-style:italic; color: var(--gold); }
.cta-text { font-size:16px; color: var(--mute); max-width: 48ch; margin: 0 auto 30px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn.lg { padding: 14px 26px; font-size:14px; }

.foot { border-top:1px solid var(--rule); padding: clamp(44px,6vw,64px) 0 36px; position:relative; z-index:2; }
.foot-grid { display:grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 40px; }
.foot-brand { font-family: var(--display); font-size: 22px; font-weight:500; margin-bottom:12px; }
.foot-brand b { color: var(--gold); }
.foot-tag { font-size:13.5px; color: var(--mute-2); line-height:1.6; max-width: 30ch; }
.foot-col h4 { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute-2); margin-bottom:14px; }
.foot-col a { display:block; font-size:14px; color: var(--mute); padding:6px 0; transition: color var(--fast); }
.foot-col a:hover { color: var(--gold); }
.foot-legal { display:flex; flex-direction:column; gap:8px; padding-top: 28px; border-top:1px solid var(--rule); font-size:12.5px; color: var(--faint); }
.foot-legal b { color: var(--mute-2); font-weight:400; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity:0; transform: translateY(26px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity:1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 720px) {
  .mast-clock { display:block; }
  .story-meta-row { gap: 28px; }
  .mood { grid-template-columns: 1fr 1.3fr; }
}
@media (min-width: 880px) {
  .conv-grid { grid-template-columns: repeat(3, 1fr); }
  .dev-grid { grid-template-columns: repeat(2, 1fr); }
  .radar-shell { grid-template-columns: 1.5fr 1fr; }
  .foot-grid { grid-template-columns: 1.6fr repeat(3,1fr); }
}
@media (min-width: 1024px) {
  .mast-links { display:flex; }
  .story { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .story-body { columns: 1; }
  .conv-conf .n { font-size: 48px; }
  .map-row { grid-template-columns: 1fr auto; row-gap:14px; }
  .map-strength { grid-column: 1 / -1; order: 3; }
  .map-num.col-conf { display:none; }
  .map-head { display:none; }
  .dev { grid-template-columns: 1fr auto; }
  .dev-why { grid-column:1 / -1; order:3; }
  .feed-item { grid-template-columns: auto 1fr auto; }
  .feed-conf { display:none; }
}

/* ============================================================
   INTEGRATION SHELL — matches Spectra landing page
   ============================================================ */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; backdrop-filter:blur(20px) saturate(140%); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid transparent; transition:border-color .3s, background .3s; }
.nav.scrolled { border-color:var(--rule); }
.nav-row { display:flex; align-items:center; justify-content:space-between; height:72px; position:relative; }
.mark { display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:0.22em; color:var(--fg); }
.mark .dot { width:6px; height:6px; border-radius:3px; background:var(--gold); box-shadow:0 0 12px var(--gold); }
.nav-links { display:flex; gap:30px; font-size:13px; color:var(--mute); font-weight:400; }
.nav-links a { transition:color .2s; }
.nav-links a:hover { color:var(--fg); }
.nav-links a.active { color:var(--gold); }
.nav-cta { display:flex; gap:14px; align-items:center; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:19px; border:1px solid var(--rule-2); background:transparent; color:var(--mute); cursor:pointer; transition:all .2s; flex-shrink:0; }
.icon-btn:hover { color:var(--gold); border-color:var(--gold); }
.icon-btn svg { width:16px; height:16px; }
.theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; }
[data-theme="light"] .theme-toggle .sun { display:block; } [data-theme="light"] .theme-toggle .moon { display:none; }
.menu-btn { display:none; }
.arrow { transition:transform .2s; display:inline-block; }
.btn:hover .arrow { transform:translateX(3px); }
.scroll-bar { position:absolute; bottom:0; left:0; height:1px; width:0; background:var(--gold); transition:width .1s linear; }
.mobile-menu { position:fixed; inset:0; background:var(--bg); z-index:60; display:flex; flex-direction:column; padding:100px 32px 48px; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.mobile-menu.open { opacity:1; pointer-events:auto; }
.mobile-menu a.mlink { font-family:var(--display); font-style:italic; font-weight:400; font-size:36px; color:var(--fg); padding:18px 0; border-bottom:1px solid var(--rule); letter-spacing:-0.02em; transition:color .2s; }
.mobile-menu a.mlink:hover, .mobile-menu a.mlink:active { color:var(--gold); }
.mobile-menu .mctas { margin-top:40px; display:flex; flex-direction:column; gap:12px; }
.mobile-menu .mclose { position:absolute; top:24px; right:24px; }

.site-foot { padding:80px 0 48px; border-top:1px solid var(--rule); background:var(--bg); position:relative; z-index:2; }
.foot-row { display:flex; align-items:flex-start; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.foot-row .br { font-family:var(--display); font-style:italic; font-weight:400; font-size:36px; letter-spacing:-0.02em; color:var(--fg); }
.foot-row .br .gold { color:var(--gold); }
.foot-row .br .tag { display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--mute); margin-top:14px; font-style:normal; font-weight:400; text-transform:uppercase; }
.foot-cols { display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:48px; flex:1; max-width:640px; }
.foot-cols h5 { font-family:var(--mono); font-size:10px; color:var(--mute); letter-spacing:0.22em; margin:0 0 18px; text-transform:uppercase; font-weight:500; }
.foot-cols a { display:block; color:var(--fg-2); font-size:14px; line-height:2; font-weight:400; }
.foot-cols a:hover { color:var(--gold); }
.foot-legal { margin-top:64px; padding-top:24px; border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; color:var(--mute-2); letter-spacing:0.16em; text-transform:uppercase; }
.foot-legal b { color:var(--mute); font-weight:400; }

@media (max-width: 900px) {
  .nav-links { display:none; }
  .desk-only { display:none; }
  .menu-btn { display:inline-flex; }
  .foot-row { flex-direction:column; gap:32px; }
  .foot-cols { grid-template-columns:repeat(2,1fr); gap:32px; max-width:none; width:100%; }
  .foot-legal { flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
  .tape-track { animation:none; }
}