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

:root{
  /* Night palette, ported from algotradebot.ai so both properties read as one
     company. The old names are kept and REMAPPED rather than replaced, because
     every page and the legal documents style off them — renaming would have
     meant editing files whose text must not be touched. */
  --bg: #080808;
  --bg-2: #0A0A0A;
  --panel: #0C0C0C;
  --panel-2: #0F0F0F;
  --panel-3: #0F0F0F;
  --hair: #1D1D1D;
  --hair-2: #2A2A2A;
  --ink: #F7F7F7;
  --ink-2: #B3B3B3;
  --mute: #999999;
  --mute-2: #777777;
  /* the accent is one purple-to-amber sweep; cyan/violet names stay so existing
     rules keep resolving, they now point into that sweep */
  --cyan: #B639FF;
  --cyan-2: #C76BFF;
  --violet: #B639FF;
  --violet-2: #FFAA18;
  --accent: #B639FF;
  --accent-2: #FFAA18;
  --bull: #2FD27A;
  --bear: #F04B5B;
  --amber: #FFAA18;
}

*{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(182,57,255,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(182,57,255,.05), transparent 60%),
    var(--bg);
}
::selection{background:rgba(182,57,255,.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%, #B639FF 55%, #C76BFF 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:var(--panel);
}
.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(199,107,255,.7)}
.btn-ghost{
  color:var(--ink); border-color:var(--hair-2); background:rgba(255,255,255,.015);
}
.btn-ghost:hover{border-color:#2A2A2A; 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%, #B639FF, #C76BFF, #B639FF, #B639FF);
  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(182,57,255,.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}

/* A grid item defaults to min-width:auto, so it refuses to shrink below its
   longest unbreakable word. On a 320px phone that pushed the hero text wider
   than its column and took the page with it. min-width:0 lets the column win;
   overflow-wrap:anywhere lets a long word break instead of forcing the width
   (break-word would not — it does not affect min-content sizing). */
.prod-grid > *{ min-width: 0 }
.prod-info h1, .prod-info .h-sub, .prod-info .eyebrow{ overflow-wrap: anywhere }

/* ---------- product visual stage ---------- */
.prod-stage{
  position:relative;
}
.prod-stage::before{
  content:""; position:absolute; top:-40px; bottom:-40px; left:0; right:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(182,57,255,.15), transparent 60%),
    radial-gradient(60% 60% at 80% 80%, rgba(182,57,255,.14), transparent 60%);
  filter:blur(20px);
}
/* The Mini App stage used to carry its grid as an inline style, which no media
   query could reach, so the 280px phone column never collapsed and dragged the
   page 99px wide on a real phone. It lives here now so it can stack. */
.mini-stage{ padding:30px; display:grid; grid-template-columns:280px 1fr; gap:24px; align-items:center }
@media (max-width: 760px){
  .mini-stage{ grid-template-columns:1fr; gap:20px; padding:20px; justify-items:center }
}
.chart-panel{
  position:relative; width:100%; aspect-ratio: 5/4;
  background:linear-gradient(180deg, #0C0C0C 0%, #0A0A0A 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(12,12,12,.92), rgba(10,10,10,.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(12,12,12,.6), rgba(10,10,10,.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(12,12,12,.65), rgba(10,10,10,.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(12,12,12,.55), rgba(10,10,10,.55));
  transition: border-color .2s, transform .2s;
}
.rel-card:hover{ border-color: rgba(182,57,255,.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(182,57,255,.1), transparent 60%),
    linear-gradient(180deg, transparent, rgba(182,57,255,.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(12,12,12,.7), rgba(10,10,10,.7));
  transition: border-color .2s, transform .2s;
  display:flex; flex-direction:column;
}
.over-card:hover{ border-color: rgba(182,57,255,.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 }
}

/* ---------- fine print ----------
   Legal and caveat lines that sit under a claim. Deliberately quiet but not
   grey-on-grey: on this site the caveats are part of the product, not a
   disclaimer to be buried, so they stay readable. */
.h-sub.small{
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 62ch;
}
/* a step row rendered as an ordered list keeps its numbering visible */
ol.step-row{ counter-reset: none; list-style: decimal; padding-left: 1.25rem; }
ol.step-row > li{ margin: .55rem 0; color: var(--ink-2); line-height: 1.6; }

/* ---------- primary action — ported from algotradebot.ai ----------
   Gradient BORDER on the night card, not a gradient fill. The accent is spent
   on the edge, the eyebrow and the check mark; everything else stays ink on
   near-black. That restraint is the whole look. */
.btn-primary{
  position: relative;
  background: var(--panel) !important;
  box-shadow: none !important;
  border: 0 !important;
  isolation: isolate;
}
.btn-primary::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, #B639FF 0%, #FFAA18 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.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: var(--ink) !important;
}
.btn-primary svg,
html.tg-webapp .btn-primary svg, body.tg-webapp .btn-primary svg{
  color: var(--ink) !important;
}
.btn-primary:hover{ background: var(--panel-2) !important; box-shadow: none !important; }

/* eyebrows carry the gradient as TEXT, which is where the accent belongs */
.eyebrow{
  background: linear-gradient(90deg, #B639FF 0%, #FFAA18 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 700; letter-spacing: .18em;
}
.eyebrow .dot{ background: #B639FF !important; }

/* On algotradebot.ai a heading is one block of white. The emphasised span is
   not coloured — the accent lives on edges and eyebrows, never inside running
   headline text. Keeping the gradient here was what made the two sites read as
   different products at a glance. */
.h-display em, .h-section em{
  font-style: normal;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--ink) !important;
}

/* ---------- mobile: the page must not pan ----------
   On phones .bento turns into a swipeable card rail with its own overflow-x,
   which is intended. What was not intended is that the rail also dragged the
   PAGE sideways — measured 406px of scroll width against a 390px viewport, so
   every touch drifted the whole layout left and right.

   `clip` rather than `hidden`: hidden on the root turns the element into a
   scroll container, which silently breaks position:sticky on the header. clip
   stops the panning and leaves descendants with their own overflow-x — the card
   rail included — scrolling normally.

   `overscroll-behavior-x: none` covers the other half: clip stops layout
   overflow, but it does nothing about the horizontal rubber-band a touch
   browser plays when a swipe runs past the edge, and to the eye that reads as
   the same sideways drift. none also stops a sideways swipe from being handed
   to the browser as a back/forward gesture. */
html{ overflow-x: clip; overscroll-behavior-x: none; }
body{ overflow-x: clip; max-width: 100%; overscroll-behavior-x: none; }