:root {
  color-scheme: dark;
  --ink: #edf9f5;
  --muted: #8ba49c;
  --line: rgba(164, 211, 195, 0.13);
  --green: #2be4a7;
  --green-soft: #8cf8d2;
  --blue: #31aef4;
  --surface: rgba(7, 22, 19, 0.72);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #030b09;
  font-family: Bahnschrift, "Segoe UI", Tahoma, sans-serif;
}

body::after {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 110%, rgba(43, 228, 167, .12), transparent 38%);
}

.market-grid {
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.aurora {
  position: fixed;
  z-index: -2;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .12;
  pointer-events: none;
}

.aurora-one { top: -240px; right: -130px; background: var(--green); }
.aurora-two { bottom: -320px; left: -180px; background: var(--blue); }

.site-header,
main,
footer {
  width: min(1340px, calc(100% - 64px));
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 700;
}

.brand img { width: 78px; height: 40px; object-fit: contain; }

.language-toggle {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .025);
  font: 600 12px Tahoma, "Segoe UI", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

.language-toggle:hover { border-color: rgba(43, 228, 167, .48); background: rgba(43, 228, 167, .07); }
.language-toggle i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }

main { min-height: calc(100vh - 181px); display: grid; align-items: center; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .85fr);
  gap: clamp(52px, 7vw, 112px);
  align-items: center;
  padding: 74px 0 82px;
}

.hero-copy { animation: reveal .8s cubic-bezier(.2,.8,.2,1) both; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 42px;
  border: 1px solid rgba(43, 228, 167, .24);
  border-radius: 999px;
  color: #bcebdc;
  background: rgba(43, 228, 167, .06);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 2s ease infinite; }
.eyebrow { margin: 0 0 20px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .24em; }

h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(48px, 5.4vw, 86px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 500;
}

h1 span, h1 strong { display: block; }
h1 strong { color: var(--green-soft); font-weight: 600; }

.hero-description {
  max-width: 640px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.8;
}

.launch-row {
  display: flex;
  align-items: center;
  gap: 38px;
  margin-top: 50px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.launch-mark { display: flex; align-items: center; gap: 15px; }
.launch-mark > span { color: var(--green); font-size: 25px; font-weight: 500; }
.launch-mark small, .launch-mark b { display: block; }
.launch-mark small { margin-bottom: 4px; color: #637c74; font-size: 8px; letter-spacing: .16em; }
.launch-mark b { font-size: 13px; font-weight: 600; }
.platforms { display: flex; gap: 8px; flex-wrap: wrap; }
.platforms span { padding: 7px 10px; border: 1px solid var(--line); color: #8da59d; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.market-visual {
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(158, 221, 199, .17);
  border-radius: 2px;
  background: linear-gradient(155deg, rgba(12, 34, 29, .92), rgba(3, 13, 11, .82));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .04);
  animation: reveal .9s .15s cubic-bezier(.2,.8,.2,1) both;
}

.market-visual::before { position: absolute; inset: 0; content: ""; background: linear-gradient(115deg, transparent 42%, rgba(43,228,167,.06), transparent 64%); transform: translateX(-100%); animation: scan 7s 1.2s ease-in-out infinite; }
.visual-topline, .quote-row, .visual-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.visual-topline { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.visual-topline small, .visual-topline strong { display: block; }
.visual-topline small { margin-bottom: 5px; color: #617b72; font-size: 8px; letter-spacing: .18em; }
.visual-topline strong { font-size: 11px; letter-spacing: .12em; }
.visual-topline > span { color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.visual-topline > span::before { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); content: ""; }
.quote-row { padding: 26px 0 5px; }
.quote-row small, .quote-row b { display: block; }
.quote-row small { margin-bottom: 6px; color: #648078; font-size: 8px; letter-spacing: .14em; }
.quote-row b { font-size: clamp(25px, 3vw, 39px); letter-spacing: -.04em; }
.quote-row > span { color: var(--green); font-size: 12px; font-weight: 700; }
.chart-stage { position: relative; height: 300px; margin: 8px -24px 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; }
.chart-stage svg { position: absolute; inset: 28px 0 0; width: 100%; height: calc(100% - 28px); overflow: visible; }
.area { fill: url(#area); }
.line, .line-shadow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.line-shadow { stroke: rgba(43,228,167,.24); stroke-width: 10; filter: blur(8px); }
.line { stroke: var(--green); stroke-width: 2.4; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 2.2s .5s ease forwards; }
.candles { position: absolute; inset: 0; }
.candles i { position: absolute; left: var(--x); top: var(--y); width: 7px; height: var(--h); background: var(--green); box-shadow: 0 0 12px rgba(43,228,167,.3); opacity: 0; animation: candleIn .45s var(--d) ease forwards; }
.candles i::before { position: absolute; left: 3px; top: -9px; width: 1px; height: calc(100% + 18px); background: inherit; content: ""; }
.candles i.down { background: #f06168; box-shadow: 0 0 12px rgba(240,97,104,.2); }
.visual-footer { padding-top: 18px; border-top: 1px solid var(--line); color: #607970; font-size: 7px; letter-spacing: .13em; }
.visual-footer i { display: inline-block; width: 16px; height: 2px; margin: 0 7px 2px 0; background: var(--green); }

footer { display: flex; align-items: center; justify-content: space-between; min-height: 73px; border-top: 1px solid var(--line); color: #526961; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.legal-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.legal-links a { color: #789087; text-decoration: none; transition: color .2s ease; }
.legal-links a:hover { color: var(--green); }

html[dir="rtl"] body { font-family: Tahoma, "Segoe UI", sans-serif; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .status-pill, html[dir="rtl"] footer { letter-spacing: .06em; }
html[dir="rtl"] h1 { letter-spacing: -.035em; line-height: 1.12; }
html[dir="rtl"] .hero-description { line-height: 2; }
html[dir="rtl"] .visual-topline > span::before { margin-right: 0; margin-left: 7px; }
html[dir="rtl"] .visual-footer i { margin-right: 0; margin-left: 7px; }

@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.72); } }
@keyframes scan { 0%, 55% { transform: translateX(-100%); } 80%, 100% { transform: translateX(100%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes candleIn { from { opacity: 0; transform: scaleY(.25); } to { opacity: .75; transform: scaleY(1); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .market-visual { max-width: 680px; }
  main { min-height: auto; }
}

@media (max-width: 620px) {
  .site-header, main, footer { width: min(100% - 36px, 1340px); }
  .site-header { height: 82px; }
  .brand img { width: 64px; }
  .brand span { display: none; }
  .hero { gap: 48px; padding: 56px 0; }
  .status-pill { margin-bottom: 30px; }
  h1 { font-size: clamp(42px, 14vw, 62px); }
  .launch-row { align-items: flex-start; flex-direction: column; gap: 20px; }
  .market-visual { padding: 18px; }
  .chart-stage { height: 230px; margin-inline: -18px; }
  .visual-footer span:last-child { display: none; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding-block: 18px; }
  .legal-links { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}