/* ============================================================
   Algo Trade — shared design system tokens & components
   Used by: products/*.html
   Index.html keeps its own inline styles (kept stable on purpose).
   ============================================================ */

:root{
  --bg: #06090F;
  --bg-2: #080C13;
  --panel: #0C1118;
  --panel-2: #0F1521;
  --panel-3: #131B2A;
  --hair: #19212F;
  --hair-2: #232D3F;
  --ink: #E8ECF2;
  --ink-2: #B6C0D0;
  --mute: #6F7B8E;
  --mute-2: #4A5567;
  --cyan: #5EEAD4;
  --cyan-2: #22D3EE;
  --violet: #8B5CF6;
  --violet-2: #A78BFA;
  --bull: #34D399;
  --bear: #F87171;
  --amber: #FBBF24;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  background:var(--bg); color:var(--ink);
  font-family:'Geist',sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body{
  overflow-x:hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(94,234,212,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(139,92,246,.05), transparent 60%),
    var(--bg);
}
::selection{background:rgba(94,234,212,.25); color:#fff}
a{color:inherit; text-decoration:none}

/* ---------- layout ---------- */
.wrap{max-width:1280px; margin:0 auto; padding:0 28px}
@media (max-width:720px){ .wrap{padding:0 18px} }

/* ---------- type ---------- */
.h-display{
  font:700 clamp(40px, 6vw, 80px)/0.98 'Geist'; letter-spacing:-0.035em; color:var(--ink); margin:0;
}
.h-display em{
  font-style:normal;
  background:linear-gradient(180deg,#CFF8EE 0%, #5EEAD4 55%, #22D3EE 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.h-section{font:600 clamp(28px, 3.6vw, 44px)/1.05 'Geist'; letter-spacing:-0.028em; margin:0}
.h-sub{color:var(--mute); font:400 17px/1.55 'Geist'; max-width:62ch; margin:0}
.mono{font-family:'Geist Mono', ui-monospace, monospace; font-feature-settings:"tnum","ss01"}

/* ---------- pills + eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 11px 6px 9px; border:1px solid var(--hair-2);
  border-radius:999px; background:rgba(255,255,255,.02);
  font:500 11.5px/1 'Geist Mono'; letter-spacing:.06em; color:var(--ink-2); text-transform:uppercase;
}
.eyebrow .dot{width:6px;height:6px;border-radius:99px;background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
.eyebrow.violet .dot{background:var(--violet); box-shadow:0 0 10px var(--violet)}
.eyebrow.amber .dot{background:var(--amber); box-shadow:0 0 10px var(--amber)}

.pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px 5px 8px; border-radius:999px;
  border:1px solid var(--hair-2); background:rgba(255,255,255,.02);
  font:500 11.5px/1 'Geist Mono'; letter-spacing:.04em; color:var(--ink-2);
}
.pill .swatch{width:7px;height:7px;border-radius:99px}
.swatch.cyan{background:var(--cyan)} .swatch.violet{background:var(--violet)}
.swatch.bull{background:var(--bull)} .swatch.bear{background:var(--bear)} .swatch.amber{background:var(--amber)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 17px; border-radius:12px; font:600 14.5px/1 'Geist';
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,#7DF7E4 0%, #22D3EE 100%);
  box-shadow:0 12px 40px -10px rgba(34,211,238,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-primary, .btn-primary:visited,
html.tg-webapp .btn-primary, body.tg-webapp .btn-primary,
html.tg-webapp .btn-primary:visited, body.tg-webapp .btn-primary:visited{
  color:#06090F !important;
}
.btn-primary svg,
html.tg-webapp .btn-primary svg, body.tg-webapp .btn-primary svg{
  color:#06090F !important; stroke:currentColor; fill:currentColor;
}
.btn-primary svg[fill="none"],
html.tg-webapp .btn-primary svg[fill="none"], body.tg-webapp .btn-primary svg[fill="none"]{
  fill:none !important;
}
.btn-primary:hover{box-shadow:0 18px 50px -10px rgba(34,211,238,.7)}
.btn-ghost{
  color:var(--ink); border-color:var(--hair-2); background:rgba(255,255,255,.015);
}
.btn-ghost:hover{border-color:#39455A; background:rgba(255,255,255,.04)}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background:rgba(6,9,15,.7);
  border-bottom:1px solid var(--hair);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font:600 16px 'Geist'; letter-spacing:-0.01em}
.brand .mark{
  width:28px; height:28px; border-radius:8px;
  background:conic-gradient(from 220deg at 60% 60%, #5EEAD4, #22D3EE, #8B5CF6, #5EEAD4);
  position:relative; overflow:hidden;
}
.brand .mark::after{content:""; position:absolute; inset:1px; border-radius:7px; background:linear-gradient(180deg, #0B0F16, #0E1320)}
.brand .mark svg{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.brand small{color:var(--ink-2); font-family:'Geist'; font-size:16px; font-weight:600; letter-spacing:-0.01em; margin-left:4px}

nav.primary{display:flex; gap:6px}
nav.primary a{
  color:var(--ink-2); padding:8px 12px; border-radius:8px;
  font:500 14px 'Geist'; letter-spacing:-0.005em;
}
nav.primary a:hover{color:var(--ink); background:rgba(255,255,255,.03)}
nav.primary a.on{color:var(--cyan); background:rgba(94,234,212,.06)}

.nav-right{display:flex; align-items:center; gap:10px}
.lang{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid var(--hair-2); border-radius:8px;
  font:500 12px 'Geist Mono'; color:var(--ink-2); letter-spacing:.05em; cursor:pointer; background:transparent;
}
@media (max-width:900px){ nav.primary{display:none} .lang{display:none} }

/* ---------- crumbs ---------- */
.crumbs{display:flex; align-items:center; gap:6px; font:500 12px 'Geist Mono'; letter-spacing:.05em; color:var(--mute); margin:30px 0 0; text-transform:uppercase}
.crumbs a{color:var(--mute)}
.crumbs a:hover{color:var(--ink-2)}
.crumbs .sep{color:var(--mute-2)}
.crumbs .cur{color:var(--ink-2)}

/* ---------- product hero ---------- */
.prod-hero{padding: 0 0 clamp(60px, 8vw, 100px)}
.prod-grid{
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px); align-items:center;
  padding-top: clamp(30px, 5vw, 60px);
}
@media (max-width: 980px){ .prod-grid{grid-template-columns:1fr; gap:36px} }

.prod-name-row{
  display:flex; align-items:center; gap:12px; margin: 18px 0 16px;
}
.prod-name-row .num{
  font:500 12px 'Geist Mono'; letter-spacing:.08em; color:var(--mute); text-transform:uppercase;
  padding:5px 9px; border:1px solid var(--hair-2); border-radius:6px; background:rgba(0,0,0,.2);
}
.prod-info h1{margin:0 0 18px}
.prod-info .h-sub{margin-bottom:24px}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px}

/* ---------- product visual stage ---------- */
.prod-stage{
  position:relative;
}
.prod-stage::before{
  content:""; position:absolute; inset:-40px; z-index:-1;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(94,234,212,.15), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(139,92,246,.14), transparent 60%);
  filter:blur(20px);
}
.chart-panel{
  position:relative; width:100%; aspect-ratio: 5/4;
  background:linear-gradient(180deg, #0B1120 0%, #0A0E18 100%);
  border:1px solid var(--hair-2); border-radius:18px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.chart-svg{display:block; width:100%; height:100%}

.float-card{
  position:absolute; border-radius:14px;
  background:linear-gradient(180deg, rgba(15,21,33,.92), rgba(11,16,26,.92));
  border:1px solid var(--hair-2);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  padding:12px 14px;
}

/* ---------- section ---------- */
section.gap{padding: clamp(60px, 8vw, 110px) 0}
section.gap-sm{padding: clamp(40px, 5vw, 70px) 0}
.section-head{ max-width:760px; margin-bottom: 44px }
.section-head .eyebrow{margin-bottom:18px}
.section-head .h-section{margin:0 0 14px}

/* ---------- features grid ---------- */
.feat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px }
@media (max-width: 880px){ .feat-grid{grid-template-columns: 1fr} }
.feat-card{
  padding: 22px;
  border:1px solid var(--hair); border-radius:14px;
  background: linear-gradient(180deg, rgba(15,21,33,.6), rgba(10,14,22,.6));
  transition: border-color .2s ease, transform .2s ease;
  position:relative; overflow:hidden;
  min-height: 220px;
  display:flex; flex-direction:column;
}
.feat-card:hover{ border-color: var(--hair-2); transform: translateY(-2px) }
.feat-card .ico{
  width:36px; height:36px; border-radius:10px; border:1px solid var(--hair-2);
  background:#0B1018; display:grid; place-items:center; margin-bottom: 16px;
}
.feat-card h3{ font:600 17px/1.2 'Geist'; letter-spacing:-0.01em; margin: 0 0 8px; color: var(--ink) }
.feat-card p{ font:400 13.5px/1.55 'Geist'; color: var(--mute); margin:0 }

/* ---------- how it works (step row) ---------- */
.step-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; position:relative;
}
@media (max-width:980px){ .step-row{grid-template-columns: 1fr 1fr} }
@media (max-width:560px){ .step-row{grid-template-columns: 1fr} }
.step{
  padding: 20px;
  border:1px solid var(--hair); border-radius:14px;
  background: linear-gradient(180deg, rgba(15,21,33,.65), rgba(10,14,22,.65));
}
.step .num{ font:500 11px/1 'Geist Mono'; letter-spacing:.1em; color: var(--mute-2); text-transform:uppercase; margin-bottom: 14px }
.step h4{ font:600 16px/1.2 'Geist'; letter-spacing:-0.01em; margin: 8px 0 6px }
.step p{ font:400 13px/1.5 'Geist'; color: var(--mute); margin: 0 }
.step .viz{ height: 60px; margin-top: 12px }

/* ---------- specs table ---------- */
.specs{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border:1px solid var(--hair); border-radius:14px; overflow:hidden;
}
@media (max-width:680px){ .specs{grid-template-columns: 1fr} }
.specs .row{
  padding: 16px 20px;
  border-bottom: 1px solid var(--hair);
  display:flex; justify-content:space-between; align-items:center; gap:14px;
}
.specs .row:nth-child(odd){ border-right: 1px solid var(--hair) }
@media (max-width: 680px){ .specs .row{ border-right: none } }
.specs .row .k{ font:500 12px 'Geist Mono'; color: var(--mute); letter-spacing:.06em; text-transform:uppercase }
.specs .row .v{ font:500 14px 'Geist'; color: var(--ink) }

/* ---------- related modules ---------- */
.rel-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px }
@media (max-width: 880px){ .rel-grid{grid-template-columns: 1fr} }
.rel-card{
  display:flex; flex-direction:column; gap:8px;
  padding: 22px; border:1px solid var(--hair); border-radius:14px;
  background: linear-gradient(180deg, rgba(15,21,33,.55), rgba(10,14,22,.55));
  transition: border-color .2s, transform .2s;
}
.rel-card:hover{ border-color: rgba(94,234,212,.3); transform: translateY(-2px) }
.rel-card .num{ font:500 11px 'Geist Mono'; color: var(--mute-2); letter-spacing:.1em; text-transform:uppercase }
.rel-card h4{ font:600 16px/1.2 'Geist'; letter-spacing:-0.01em; margin: 4px 0 0 }
.rel-card p{ font:400 13px/1.5 'Geist'; color: var(--mute); margin: 6px 0 8px }
.rel-card .more{ display:inline-flex; gap:6px; align-items:center; color: var(--cyan); font:500 12.5px 'Geist Mono'; letter-spacing:.05em }

/* ---------- cta band ---------- */
.cta-band{
  padding: clamp(56px, 8vw, 100px) 0;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(94,234,212,.1), transparent 60%),
    linear-gradient(180deg, transparent, rgba(139,92,246,.03), transparent);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.cta-band .inner{ max-width: 760px; margin: 0 auto; text-align:center }
.cta-band h2{ font:600 clamp(28px, 4vw, 44px)/1.05 'Geist'; letter-spacing:-0.028em; margin: 0 0 14px }
.cta-band p{ color: var(--mute); font: 400 16px/1.55 'Geist'; max-width: 56ch; margin: 0 auto 28px }
.cta-band .cta-row{ justify-content: center }

/* ---------- footer ---------- */
footer.site{padding:60px 0 40px; border-top:1px solid var(--hair); background:#06090F}
.foot-grid{display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap:30px}
@media (max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr; gap:30px} }
.foot-col h5{font:500 11px 'Geist Mono'; letter-spacing:.1em; color:var(--mute); text-transform:uppercase; margin:0 0 14px}
.foot-col a{display:block; padding:5px 0; color:var(--ink-2); font:500 13.5px 'Geist'}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:48px; padding-top:24px; border-top:1px solid var(--hair); color:var(--mute); font:500 12px 'Geist Mono'; letter-spacing:.04em}
@media (max-width:680px){ .foot-bottom{flex-direction:column; align-items:flex-start} }

/* ---------- product overview page ---------- */
.over-hero{padding: 50px 0 30px}
.over-hero h1{font:700 clamp(40px, 5.5vw, 76px)/0.98 'Geist'; letter-spacing:-0.035em; margin: 16px 0 18px}
.over-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; gap:14px;
  padding: 20px 0 100px;
}
.over-card{
  grid-column: span 4; grid-row: span 1;
  position:relative; overflow:hidden;
  padding: 22px; border:1px solid var(--hair); border-radius:16px;
  background: linear-gradient(180deg, rgba(15,21,33,.7), rgba(10,14,22,.7));
  transition: border-color .2s, transform .2s;
  display:flex; flex-direction:column;
}
.over-card:hover{ border-color: rgba(94,234,212,.3); transform: translateY(-2px) }
.over-card.span6{ grid-column: span 6 }
.over-card.span8{ grid-column: span 8 }
.over-card.row2{ grid-row: span 2 }
.over-card .num{font:500 11px 'Geist Mono'; color: var(--mute-2); letter-spacing:.1em; text-transform:uppercase}
.over-card h3{font:600 19px/1.2 'Geist'; letter-spacing:-0.015em; margin: 14px 0 8px}
.over-card p{font:400 13.5px/1.5 'Geist'; color: var(--mute); margin: 0; max-width: 36ch}
.over-card .more{margin-top:auto; padding-top:14px; display:inline-flex; gap:6px; align-items:center; color: var(--cyan); font:500 12.5px 'Geist Mono'; letter-spacing:.05em}
.over-card .viz{position:absolute; right:0; bottom:0; width: 60%; height: 60%; opacity:.7; pointer-events:none}
@media (max-width: 980px){
  .over-grid{grid-template-columns: repeat(6, 1fr)}
  .over-card, .over-card.span6, .over-card.span8{grid-column: span 6}
}

/* ============================================================
   Tight mobile + Telegram WebApp adapter (product pages)
   ============================================================ */

@media (max-width: 480px){
  .wrap{ padding: 0 14px }
  .nav{ height: 56px }
  .brand small{ font-size: 14px }
  .nav-right .btn{ padding: 8px 11px; font-size: 12.5px }

  .prod-hero{ padding: 0 0 40px }
  .prod-grid{ gap: 24px; padding-top: 18px }
  .prod-info h1.h-display{ font-size: clamp(24px, 7vw, 34px); line-height: 1.1 }
  .h-sub{ font-size: 14px; line-height: 1.55 }
  .cta-row{ flex-direction: column; align-items: stretch }
  .cta-row .btn{ justify-content: center }
  .chart-panel{ aspect-ratio: 4/3 }

  section.gap{ padding: 40px 0 }
  .h-section{ font-size: clamp(22px, 6vw, 30px); line-height: 1.15 }
  .section-head{ margin-bottom: 26px }

  .step{ padding: 16px }
  .specs .row{ padding: 13px 16px }

  .rel-card{ padding: 18px }
  .feat-card{ padding: 18px; min-height: auto }

  .cta-band{ padding: 50px 0 }
  .cta-band h2{ font-size: clamp(22px, 6vw, 30px) }

  footer.site{ padding: 40px 0 24px }
  .foot-grid{ grid-template-columns: 1fr; gap: 22px }
  .foot-bottom{ flex-direction: column; align-items: flex-start; gap: 6px }
}

html.tg-webapp, body.tg-webapp{
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html.tg-webapp a, body.tg-webapp a,
html.tg-webapp a:visited, body.tg-webapp a:visited{
  color: inherit !important;
  text-decoration: none !important;
}
body.tg-webapp header.site{
  padding-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 600px){
  body.tg-webapp nav.primary{ display: none }
  body.tg-webapp .lang{ display: none }
}