/* Exchange-terminal visual layer: reward monitor, not market-price simulation. */
:root {
  --terminal-bg: #07111f;
  --terminal-panel: #0a192a;
  --terminal-line: rgba(104, 223, 198, .22);
  --terminal-green: #2dd4a0;
  --terminal-blue: #4bb8ff;
  --terminal-text: #e8fbf7;
  --terminal-muted: #77a4ac;
  --terminal-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

body { background: radial-gradient(circle at 82% 14%, rgba(45,212,160,.08), transparent 23%), radial-gradient(circle at 8% 42%, rgba(75,184,255,.05), transparent 25%), var(--terminal-bg); }
.site-header { border-bottom-color: rgba(75,184,255,.24); background: linear-gradient(90deg, rgba(7,17,31,.98), rgba(7,24,39,.96) 52%, rgba(11,38,43,.96)); }
.site-header::after { height: 1px; background: linear-gradient(90deg, transparent, var(--terminal-blue) 18%, var(--terminal-green) 54%, var(--gold) 78%, transparent); opacity: .88; }
.main-nav a { font-family: var(--terminal-mono); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.main-nav a::before { color: var(--terminal-green); content: '/ '; opacity: 0; transition: opacity .2s ease; }
.main-nav a:hover::before { opacity: 1; }
.terminal-status { display: inline-flex; align-items: center; gap: 6px; color: #a7c9c4; font: 700 9px/1 var(--terminal-mono); letter-spacing: .7px; white-space: nowrap; }
.terminal-status i, .market-online { width: 6px; height: 6px; border-radius: 50%; background: var(--terminal-green); box-shadow: 0 0 11px var(--terminal-green); }

.market-strip { position: relative; z-index: 7; border-bottom: 1px solid rgba(104,223,198,.16); background: rgba(5,15,28,.88); }
.market-strip-inner { display: grid; grid-template-columns: 1fr 1fr 1.35fr; width: min(calc(100% - 80px), var(--page-width)); margin: 0 auto; }
.market-cell { display: grid; gap: 3px; min-height: 58px; align-content: center; padding: 8px 23px; border-right: 1px solid rgba(104,223,198,.15); }
.market-cell:first-child { padding-left: 0; }
.market-cell:last-child { border-right: 0; }
.market-cell span { color: var(--terminal-muted); font: 700 8px/1 var(--terminal-mono); letter-spacing: 1px; }
.market-cell strong { color: var(--terminal-text); font: 800 12px/1.15 var(--terminal-mono); letter-spacing: .3px; }
.market-cell:first-child strong { color: var(--gold); }
.market-cell em { display: inline-flex; align-items: center; gap: 5px; color: #85aab0; font: 500 9px/1.2 Inter, sans-serif; font-style: normal; }
.market-online { display: inline-block; }

.hero::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(75,184,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(75,184,255,.055) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000, transparent 68%); content: ''; }
.hero-backdrop { background: linear-gradient(90deg, rgba(5,15,28,.99) 0%, rgba(5,15,28,.93) 43%, rgba(5,15,28,.26) 73%, rgba(5,15,28,.58) 100%), linear-gradient(135deg, rgba(45,212,160,.1), transparent 40%, rgba(75,184,255,.1)), url('../images/hero-bg.webp') center right / cover no-repeat; }
.terminal-kicker { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 13px; color: var(--terminal-green); font: 700 10px/1 var(--terminal-mono); letter-spacing: 1.1px; }
.terminal-kicker b { padding-left: 8px; border-left: 1px solid rgba(104,223,198,.3); color: #93b3b7; font-weight: 600; }
.terminal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--terminal-green); box-shadow: 0 0 11px var(--terminal-green); animation: terminalBlink 1.4s ease-in-out infinite; }
.reward-block { padding: 11px 16px 12px; border: 1px solid rgba(255,212,79,.2); border-left: 2px solid var(--gold); border-radius: 0 11px 11px 0; background: linear-gradient(90deg, rgba(255,212,79,.1), transparent); }
.reward-tags { padding-top: 13px; }
.reward-tags::before { background: linear-gradient(90deg, var(--terminal-green), var(--terminal-blue), var(--gold)); }
.tag-icon { border-color: rgba(104,223,198,.46); color: var(--terminal-green); box-shadow: inset 0 0 11px rgba(45,212,160,.1); }

.terminal-card { position: absolute; z-index: 2; top: 13%; left: 2%; width: 172px; overflow: hidden; border: 1px solid rgba(104,223,198,.35); border-radius: 10px; background: linear-gradient(145deg, rgba(5,18,29,.86), rgba(7,30,38,.73)); box-shadow: 0 18px 35px rgba(0,0,0,.32), inset 0 0 28px rgba(45,212,160,.07); backdrop-filter: blur(7px); transform: rotate(-4deg); }
.terminal-card-head, .terminal-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font: 700 7px/1 var(--terminal-mono); letter-spacing: .7px; }
.terminal-card-head { border-bottom: 1px solid rgba(104,223,198,.18); color: #a7cac3; }
.terminal-card-head b { color: var(--terminal-green); font-weight: 700; }
.terminal-card-foot { border-top: 1px solid rgba(104,223,198,.14); color: var(--terminal-muted); }
.terminal-card-foot strong { color: var(--gold); font-weight: 700; }
.terminal-chart { position: relative; display: flex; height: 92px; align-items: center; justify-content: space-evenly; overflow: hidden; padding: 13px 11px; background-image: linear-gradient(rgba(75,184,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(75,184,255,.1) 1px, transparent 1px); background-size: 19px 19px; }
.candle { position: relative; z-index: 1; width: 6px; height: 27px; border-radius: 1px; background: var(--terminal-green); box-shadow: 0 0 9px rgba(45,212,160,.45); }
.candle::before, .candle::after { position: absolute; left: 2px; width: 2px; background: currentColor; content: ''; }
.candle::before { top: -10px; height: 10px; }
.candle::after { bottom: -9px; height: 9px; }
.candle.down { height: 18px; background: #ff8b70; color: #ff8b70; box-shadow: 0 0 8px rgba(255,139,112,.36); }
.candle.tall { height: 42px; }
.chart-line { position: absolute; z-index: 2; right: -12px; bottom: 25px; left: -12px; height: 1px; background: linear-gradient(95deg, transparent 0 6%, var(--terminal-blue) 7% 18%, transparent 19% 25%, var(--terminal-green) 26% 42%, transparent 43% 47%, var(--gold) 48% 65%, transparent 66%); transform: rotate(-8deg); opacity: .9; }

.reward-pulse, .exchange-board { border-color: rgba(104,223,198,.28); background: linear-gradient(105deg, rgba(75,184,255,.07), rgba(7,25,38,.98) 42%, rgba(45,212,160,.11)); }
.daily-window { border-right-color: rgba(104,223,198,.16); }
.diya { box-shadow: 0 5px 18px rgba(255,153,51,.32), inset 0 -4px 0 rgba(134,57,5,.35); }
.pulse-label, .ticker-heading strong { color: var(--terminal-text); }
.countdown b { color: var(--terminal-green); text-shadow: 0 0 14px rgba(45,212,160,.27); font-family: var(--terminal-mono); }
.countdown i { color: var(--terminal-blue); }
.live-dot, .ticker-item-dot { background: var(--terminal-green); box-shadow: 0 0 10px rgba(45,212,160,.7); }

.exchange-board { grid-column: 1 / -1; overflow: hidden; border: 1px solid rgba(104,223,198,.25); border-radius: 12px; background: linear-gradient(105deg, rgba(75,184,255,.06), rgba(7,25,38,.96) 45%, rgba(45,212,160,.08)); }
.exchange-board-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 17px; border-bottom: 1px solid rgba(104,223,198,.14); }
.exchange-board-head > span { display: inline-flex; align-items: center; gap: 7px; color: var(--terminal-text); font: 700 10px/1 var(--terminal-mono); letter-spacing: 1px; }
.exchange-board-head i { width: 7px; height: 7px; border-radius: 1px; background: var(--terminal-blue); box-shadow: 0 0 9px var(--terminal-blue); }
.exchange-board-head small { color: var(--terminal-muted); font: 500 9px/1 var(--terminal-mono); }
.exchange-board ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.exchange-board li { display: grid; gap: 5px; padding: 15px 17px; border-right: 1px solid rgba(104,223,198,.13); }
.exchange-board li:last-child { border: 0; }
.exchange-board li span { color: var(--terminal-muted); font: 700 8px/1 var(--terminal-mono); letter-spacing: .9px; }
.exchange-board li strong { color: var(--terminal-text); font: 800 14px/1 var(--terminal-mono); }
.exchange-board li:first-child strong { color: var(--gold); }
.exchange-board li em { color: #87abb0; font: 500 10px/1.3 Inter, sans-serif; font-style: normal; }

.benefit-card { border-radius: 10px; background: linear-gradient(145deg, rgba(10,29,47,.98), rgba(5,18,31,.99)) padding-box, linear-gradient(135deg, rgba(75,184,255,.48), rgba(45,212,160,.24), rgba(255,212,79,.38)) border-box; }
.benefit-card::before { border-radius: 6px; background: repeating-conic-gradient(rgba(75,184,255,.15) 0deg 8deg, transparent 8deg 16deg); }
.card-kicker { color: var(--terminal-green); font-family: var(--terminal-mono); }
.performance-note { color: var(--terminal-green); }
.claim-section { background: linear-gradient(120deg, #071321, #092330 55%, #061522); }
.step-icon { border-color: rgba(104,223,198,.45); color: var(--terminal-green); background: radial-gradient(circle at 35% 29%, rgba(45,212,160,.22), rgba(75,184,255,.08) 42%, transparent 66%); }
.step-number { color: var(--terminal-green); font-family: var(--terminal-mono); }
.step:not(:last-child)::after { background: linear-gradient(90deg, rgba(45,212,160,.7), rgba(75,184,255,.15)); }
.step:not(:last-child)::before { border-color: var(--terminal-green); }
.app-section { background: linear-gradient(#071927, #071927) padding-box, linear-gradient(135deg, rgba(75,184,255,.6), rgba(45,212,160,.38) 50%, rgba(255,212,79,.45)) border-box; }
.app-copy h2 span { color: var(--terminal-green); }
.app-subtitle { color: var(--terminal-blue); }

@keyframes terminalBlink { 0%, 100% { opacity: .55; transform: scale(.84); } 50% { opacity: 1; transform: scale(1); } }

@media (max-width: 1040px) {
  .terminal-status { display: none; }
  .market-strip-inner { width: min(calc(100% - 48px), var(--page-width)); }
  .terminal-card { left: -8%; width: 146px; }
}

@media (max-width: 760px) {
  .market-strip-inner { grid-template-columns: 1fr 1fr; width: min(calc(100% - 34px), var(--page-width)); }
  .market-cell { min-height: 50px; padding: 8px 11px; }
  .market-cell:first-child { padding-left: 0; }
  .market-cell:nth-child(2) { border-right: 0; }
  .market-cell-flow { display: none; }
  .market-cell strong { font-size: 10px; }
  .market-cell em { font-size: 8px; }
  .terminal-kicker { margin: -4px 0 9px; font-size: 8px; }
  .terminal-card { display: none; }
  .hero { min-height: 790px; }
  .hero-grid { min-height: 790px; }
  .reward-pulse { margin-top: 2px; }
  .exchange-board-head { padding: 10px 13px; }
  .exchange-board-head small { display: none; }
  .exchange-board ul { grid-template-columns: 1fr; }
  .exchange-board li { grid-template-columns: 1fr auto; align-items: center; gap: 3px; padding: 11px 13px; border-right: 0; border-bottom: 1px solid rgba(104,223,198,.11); }
  .exchange-board li:last-child { border-bottom: 0; }
  .exchange-board li em { grid-column: 1 / -1; font-size: 9px; }
  .exchange-board li strong { font-size: 12px; text-align: right; }
}

@media (max-width: 430px) {
  .market-strip-inner { width: min(calc(100% - 28px), var(--page-width)); }
  .market-cell { min-height: 47px; padding-inline: 7px; }
  .market-cell span { font-size: 7px; letter-spacing: .6px; }
  .market-cell strong { font-size: 9px; }
  .market-cell em { font-size: 7px; }
  .hero { min-height: 768px; }
  .hero-grid { min-height: 768px; }
  .terminal-kicker b { display: none; }
}

@media (prefers-reduced-motion: reduce) { .terminal-dot { animation: none; } }