.landing-page { background: radial-gradient(circle at 78% 8%, rgba(24,197,138,.09), transparent 30%), radial-gradient(circle at 15% 42%, rgba(76,141,255,.06), transparent 28%), var(--bg); }
.hero { min-height: calc(100vh - var(--header)); display: grid; grid-template-columns: minmax(350px, .82fr) minmax(560px, 1.18fr); align-items: center; gap: clamp(40px, 7vw, 110px); padding: 72px clamp(22px, 6vw, 92px) 82px; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; max-width: 650px; }
.hero-copy h1 { margin: 20px 0 22px; font-size: clamp(44px, 5.1vw, 76px); line-height: .99; letter-spacing: -.062em; }
.hero-copy > p { max-width: 600px; color: #a7b1c0; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: var(--muted); font-size: 12px; font-weight: 650; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--green); }

.hero-terminal { position: relative; min-width: 0; border: 1px solid var(--line-strong); border-radius: 20px; background: #111725; box-shadow: 0 40px 100px rgba(0,0,0,.42), 0 0 0 8px rgba(255,255,255,.015); transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); }
.hero-terminal::before { content: ""; position: absolute; z-index: -1; width: 65%; height: 60%; right: -10%; top: -12%; border-radius: 50%; background: rgba(24,197,138,.16); filter: blur(80px); }
.terminal-bar { height: 62px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); }
.terminal-brand { display: flex; align-items: center; gap: 9px; font-weight: 800; }
.terminal-brand .brand-mark { width: 30px; height: 30px; }
.terminal-balance { margin-left: auto; display: flex; flex-direction: column; text-align: right; }
.terminal-balance small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.terminal-balance strong { font-size: 15px; }
.terminal-body { min-height: 420px; display: grid; grid-template-columns: 140px minmax(0,1fr) 154px; }
.terminal-body aside { display: flex; flex-direction: column; gap: 3px; padding: 12px 8px; border-right: 1px solid var(--line); }
.terminal-body aside button { display: flex; justify-content: space-between; padding: 10px 9px; border-radius: 7px; color: var(--muted); background: transparent; font-size: 10px; text-align: left; }
.terminal-body aside button b { color: var(--green); }
.terminal-body aside button.active { color: #fff; background: rgba(255,255,255,.055); }
.preview-chart { position: relative; min-width: 0; overflow: hidden; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 20% 20%; }
.preview-chart svg { position: absolute; inset: 70px 10px 28px; width: calc(100% - 20px); height: calc(100% - 98px); overflow: visible; }
.preview-chart .grid { fill: none; stroke: rgba(255,255,255,.025); stroke-width: 1; }
.preview-chart .area { fill: url(#area); }
.preview-chart .line { fill: none; stroke: var(--green-bright); stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 5px rgba(24,197,138,.35)); }
.chart-meta { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 18px; }
.chart-meta span { color: var(--muted); font-size: 11px; }
.chart-meta strong { font-size: 22px; }
.price-tag { position: absolute; right: 7px; top: 38%; padding: 4px 6px; border-radius: 4px; background: var(--green); color: #062217; font-size: 9px; font-weight: 850; }
.preview-order { display: flex; flex-direction: column; gap: 10px; padding: 14px 11px; border-left: 1px solid var(--line); background: #141b29; }
.preview-order label { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 9px; }
.preview-order label strong { color: #fff; font-size: 13px; }
.preview-return { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.preview-return b { color: #fff; }
.preview-order button { min-height: 44px; border-radius: 8px; color: #fff; font-weight: 850; }
.preview-order button svg { display: inline; vertical-align: middle; }
.preview-order .up { margin-top: auto; background: var(--green); }
.preview-order .down { background: var(--red); }
.terminal-foot { height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-top: 1px solid var(--line); color: var(--muted-2); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }

.feature-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 clamp(22px, 6vw, 92px); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.feature-strip article { display: flex; gap: 16px; padding: 28px; background: var(--panel); }
.feature-icon { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; color: var(--green-bright); background: var(--green-soft); }
.feature-strip h3 { margin: 1px 0 7px; font-size: 16px; }
.feature-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.explain { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: clamp(50px, 9vw, 140px); padding: 130px clamp(22px, 9vw, 150px); }
.explain-copy { max-width: 650px; }
.explain-copy h2 { margin: 15px 0 20px; font-size: clamp(36px, 4vw, 58px); line-height: 1.08; }
.explain-copy > p { color: var(--muted); font-size: 17px; line-height: 1.75; }
.explain-copy ul { display: grid; gap: 13px; margin: 28px 0 0; padding: 0; list-style: none; color: #c5cedb; }
.explain-copy li { display: flex; align-items: center; gap: 10px; }
.explain-copy li svg { color: var(--green); }
.engine-card { border: 1px solid var(--line-strong); border-radius: 18px; padding: 22px; background: linear-gradient(145deg, rgba(30,41,57,.92), rgba(19,26,39,.96)); box-shadow: var(--shadow); }
.engine-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-weight: 800; }
.engine-card-head > span:first-child { display: flex; align-items: center; gap: 9px; }
.engine-card-head svg { color: var(--green); }
.live-chip { padding: 4px 7px; border-radius: 5px; color: var(--green-bright); background: var(--green-soft); font-size: 9px; letter-spacing: .09em; }
.engine-row { display: flex; justify-content: space-between; gap: 20px; padding: 16px 2px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.engine-row strong { color: var(--text); text-align: right; }
.engine-row .safe-text { color: var(--green-bright); }
.engine-note { display: flex; gap: 9px; margin-top: 18px; padding: 12px; border-radius: 9px; color: #aeb9c9; background: rgba(76,141,255,.08); font-size: 12px; }
.engine-note svg { flex: 0 0 auto; color: #7aa9ff; }

.cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin: 0 clamp(22px, 6vw, 92px) 110px; padding: clamp(30px, 4vw, 56px); border: 1px solid rgba(24,197,138,.22); border-radius: 22px; background: radial-gradient(circle at 80% 40%, rgba(24,197,138,.13), transparent 35%), var(--panel); }
.cta h2 { margin: 12px 0 8px; font-size: clamp(28px, 3vw, 42px); }
.cta p { margin: 0; color: var(--muted); }

@media (max-width: 1180px) {
  .hero { grid-template-columns: 1fr; padding-top: 80px; }
  .hero-copy { max-width: 780px; }
  .hero-terminal { max-width: 900px; transform: none; }
  .explain { gap: 50px; padding-inline: 7vw; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; padding: 58px 18px 60px; }
  .hero-copy h1 { font-size: 44px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { display: grid; }
  .hero-terminal { overflow: hidden; border-radius: 14px; }
  .terminal-body { grid-template-columns: 1fr 112px; min-height: 350px; }
  .terminal-body aside { display: none; }
  .terminal-bar { height: 54px; }
  .preview-order { padding: 10px 8px; }
  .preview-order label { padding: 8px; }
  .terminal-foot span:last-child { display: none; }
  .feature-strip { grid-template-columns: 1fr; margin-inline: 18px; }
  .feature-strip article { padding: 22px; }
  .explain { grid-template-columns: 1fr; padding: 80px 18px; }
  .explain-copy h2 { font-size: 38px; }
  .cta { align-items: flex-start; flex-direction: column; margin: 0 18px 70px; padding: 28px 22px; }
  .cta .button { width: 100%; }
}