/* ============================================================
   TCY Algo Trade — Design System (Turkish, BIST focus)
   ============================================================ */
:root{
  /* Night palette — same remap as shared.css. Names kept so every existing
     rule on this page keeps resolving; only the values move. --tr-red is the
     Turkish flag red used in the entity badge and is NOT part of the sweep. */
  --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;
  --cyan:#B639FF; --cyan-2:#C76BFF;
  --violet:#B639FF; --violet-2:#FFAA18;
  --accent:#B639FF; --accent-2:#FFAA18;
  --bull:#2FD27A; --bear:#F04B5B; --amber:#FFAA18;
  --tr-red:#E63946;
}
*{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","tnum"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body{
  overflow-x:hidden;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(182,57,255,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 22%, rgba(182,57,255,.05), transparent 60%),
    radial-gradient(700px 400px at 50% 110%, rgba(230,57,70,.04), transparent 60%),
    var(--bg);
}
::selection{background:rgba(182,57,255,.25); color:#fff}
a{color:inherit; text-decoration:none}

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

.h-display{font:600 clamp(32px, 4.2vw, 56px)/1.08 'Geist'; letter-spacing:-0.028em; margin:0; color:var(--ink); max-width:18ch}
.h-display em{font-style:normal; background:linear-gradient(180deg,#CFF8EE,#B639FF 55%,#C76BFF); -webkit-background-clip:text; background-clip:text; color:transparent}
.h-section{font:600 clamp(28px, 3.6vw, 46px)/1.05 'Geist'; letter-spacing:-0.028em; margin:0}
.h-sub{color:var(--mute); font:400 17px/1.6 'Geist'; max-width:62ch; margin:0}
.mono{font-family:'Geist Mono', ui-monospace, monospace; font-feature-settings:"tnum","ss01"}

.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.red .dot{background:var(--tr-red); box-shadow:0 0 10px var(--tr-red)}
.eyebrow.violet .dot{background:var(--violet); box-shadow:0 0 10px var(--violet)}

.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 .sw{width:7px;height:7px;border-radius:99px}
.sw.cyan{background:var(--cyan)} .sw.violet{background:var(--violet)} .sw.bull{background:var(--bull)} .sw.bear{background:var(--bear)} .sw.amber{background:var(--amber)} .sw.red{background:var(--tr-red)}

.btn{display:inline-flex; align-items:center; gap:10px; padding:13px 17px; border-radius:12px; font:600 14.5px/1 'Geist'; border:1px solid transparent; cursor:pointer; transition:transform .12s, box-shadow .25s, background .25s}
.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:11px; color:var(--ink); letter-spacing:-0.01em}
.brand .mark{width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,#E63946,#C1121F); display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(230,57,70,.5), inset 0 1px 0 rgba(255,255,255,.15); font:700 11px/1 'Geist Mono'; color:#fff; letter-spacing:.04em}
.brand .word{display:flex; flex-direction:column; line-height:1.1}
.brand .word .top{font:500 9.5px 'Geist Mono'; color:var(--mute); letter-spacing:.14em; margin-bottom:3px}
.brand .word .name{font:600 16px 'Geist'; color:var(--ink)}
nav.primary{display:flex; gap:4px}
nav.primary a{color:var(--ink-2); padding:8px 11px; border-radius:8px; font:500 13.5px 'Geist'}
nav.primary a:hover{color:var(--ink); background:rgba(255,255,255,.03)}
.nav-right{display:flex; align-items:center; gap:10px}
.lang-switch{display:inline-flex; padding:3px; border:1px solid var(--hair-2); border-radius:99px; background:rgba(0,0,0,.2)}
.lang-switch button{padding:5px 11px; border-radius:99px; border:none; background:transparent; color:var(--mute); font:500 11.5px 'Geist Mono'; letter-spacing:.06em; cursor:pointer}
.lang-switch button.on{background:rgba(182,57,255,.1); color:var(--cyan)}
@media (max-width:1080px){ nav.primary{display:none} }
@media (max-width:900px){ .lang-switch, .brand .word .top{display:none} }

/* ---- hero ---- */
section.hero{padding:clamp(40px,5.5vw,80px) 0 clamp(60px,8vw,100px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px); align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:40px} }
.hero-left .h-display{margin:18px 0; max-width:20ch}
@media (max-width:980px){ .hero-left .h-display{max-width:22ch} }
@media (max-width:560px){ .hero-left .h-display{font-size:clamp(28px, 8vw, 38px); max-width:none} }
.hero-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.hero-trust{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; color:var(--mute); font:500 12.5px/1.5 'Geist Mono'; letter-spacing:.04em}
.hero-trust span{display:inline-flex; align-items:center; gap:6px}
.hero-trust .tick{width:14px; height:14px; flex-shrink:0; color:var(--cyan)}

.chart-stage{position:relative; isolation:isolate}
/* The glow bled 30px past its box on every side, and the horizontal half of
   that bleed was the page's only overflow — 392px of content in a 362px
   column, 16px past the viewport. Vertical bleed is free; horizontal is not. */
.chart-stage::before{content:""; position:absolute; top:-30px; bottom:-30px; 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)}
.chart-panel{position:relative; width:100%; aspect-ratio:5/4; background:linear-gradient(180deg,#0C0C0C,#0A0A0A); 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,.94),rgba(10,10,10,.94)); border:1px solid var(--hair-2); backdrop-filter:blur(8px); box-shadow:0 24px 60px -20px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04); padding:14px}
.fc-bist{top:18px; right:-28px; width:226px; box-shadow:0 0 0 1px rgba(182,57,255,.18), 0 18px 60px -16px rgba(199,107,255,.3)}
.fc-watch{bottom:-32px; left:-28px; width:260px}
@media (max-width:980px){ .fc-bist{right:8px} .fc-watch{left:8px; width:230px} }
@media (max-width:520px){ .fc-bist{width:180px} .fc-watch{width:200px} }

/* ---- generic section ---- */
section.gap{padding:clamp(64px,8vw,110px) 0}
.section-head{max-width:760px; margin-bottom:46px}
.section-head .eyebrow{margin-bottom:18px}
.section-head .h-section{margin:0 0 14px}

/* ---- trust strip ---- */
section.trust{padding:6px 0 12px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:#0A0A0A}
.trust-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 26px}
.trust-item{display:flex; align-items:center; gap:10px; color:var(--ink-2); font:500 13px/1.4 'Geist'; padding:14px 0}
.trust-item .ico{width:30px; height:30px; border-radius:8px; flex:0 0 30px; border:1px solid var(--hair-2); background:#0B1119; display:grid; place-items:center}
.trust-item small{display:block; color:var(--mute); font:400 11.5px/1.3 'Geist Mono'; letter-spacing:.04em; margin-top:2px; text-transform:uppercase}

/* ---- bento ---- */
.bento{display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:132px; gap:14px}
.b{grid-column:span 4; grid-row:span 2; background:linear-gradient(180deg,rgba(12,12,12,.7),rgba(10,10,10,.7)); border:1px solid var(--hair); border-radius:16px; padding:20px; position:relative; overflow:hidden; transition:border-color .2s, transform .2s; color:inherit}
.b:hover{border-color:var(--hair-2); transform:translateY(-2px)}
.b h3{font:600 17px/1.2 'Geist'; letter-spacing:-0.01em; margin:14px 0 8px; color:var(--ink)}
.b p{font:400 13.5px/1.5 'Geist'; color:var(--mute); margin:0; max-width:34ch}
.b .ico{width:34px; height:34px; border-radius:9px; border:1px solid var(--hair-2); background:#0B1018; display:grid; place-items:center}
.b .tag{position:absolute; top:18px; right:18px; font:500 10.5px/1 'Geist Mono'; letter-spacing:.08em; color:var(--mute-2); text-transform:uppercase}
.b.big{grid-column:span 8; grid-row:span 3}
.b.tall{grid-column:span 4; grid-row:span 3}
.b.wide{grid-column:span 6; grid-row:span 2}
.b.sm{grid-column:span 3; grid-row:span 2}
/* ---- platform card neon accents (P22B) ---- */
.b{--neon-rgb: 182,57,255}
.b[data-card="1"]{--neon-rgb: 182,57,255}     /* cyan / turquoise */
.b[data-card="2"]{--neon-rgb: 47,210,122}     /* green */
.b[data-card="3"]{--neon-rgb: 199,107,255}    /* purple */
.b[data-card="4"]{--neon-rgb: 255,170,24}     /* gold */
.b[data-card="5"]{--neon-rgb: 96, 165, 250}     /* blue */
.b[data-card="6"]{--neon-rgb: 251, 146, 60}     /* orange */
.b[data-card="7"]{--neon-rgb: 45, 212, 191}     /* teal-gold */
.b[data-card="8"]{--neon-rgb: 192, 132, 252}    /* violet */
.b[data-card="9"]{--neon-rgb: 240,75,91}    /* risk red */
.b[data-card="10"]{--neon-rgb: 199,107,255}    /* alarm cyan */
.b{border:1px solid rgba(var(--neon-rgb), .14)}
.b:hover{border-color:rgba(var(--neon-rgb), .38)}

@media (max-width:980px){
  .bento{
    display:flex;
    grid-template-columns:none;
    grid-auto-rows:auto;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-snap-stop:always;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
    padding:0;
    margin:0;
  }
  .bento::-webkit-scrollbar{display:none}
  .b,.b.big,.b.tall,.b.wide,.b.sm{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    min-width:0;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    grid-column:auto;
    grid-row:auto;
    height:auto;
    min-height:420px;
    padding:18px;
    border:1px solid rgba(var(--neon-rgb), .32);
    box-shadow:
      0 0 0 1px rgba(var(--neon-rgb), .08) inset,
      0 26px 60px -22px rgba(var(--neon-rgb), .3);
  }
  .b h3{font-size:15.5px; line-height:1.22; margin:10px 0 6px}
  .b p{font-size:12px; line-height:1.45; max-width:none}
  .b .tag{font-size:9.5px; top:12px; right:12px}
  .b .ico{width:30px; height:30px; border-radius:8px}

  /* Enlarged visuals — full-width bottom panel on mobile */
  .b .b-viz.b-viz-corner{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    aspect-ratio: 5 / 3;
    opacity:1;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(var(--neon-rgb), .25));
  }
  .b[data-card="5"] .b-viz.b-viz-corner{aspect-ratio: 13 / 7}
  .b[data-card="6"] .b-viz.b-viz-corner{aspect-ratio: 2 / 1}
  .frag-mini-chart{
    position:absolute !important;
    left:18px !important;
    right:18px !important;
    bottom:18px !important;
    top:auto !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    aspect-ratio: 17 / 10;
    opacity:1;
    filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(182,57,255,.28));
  }
  /* Card 02 strategy stack — keep at bottom, slightly taller tiles */
  .b.tall .strat-stack{left:18px; right:18px; bottom:18px; gap:7px}
  .b .strat-tile{padding:10px 12px}
  .b .strat-tile .st-label{font-size:12.5px}
  .b .strat-tile .st-tag{font-size:10.5px}
}
@media (max-width:520px){
  .b,.b.big,.b.tall,.b.wide,.b.sm{min-height:400px; padding:16px}
  .b h3{font-size:14.5px}
  .b p{font-size:11.5px}
  .b .b-viz.b-viz-corner, .frag-mini-chart{left:14px !important; right:14px !important; bottom:14px !important}
}
.bento-dots{display:none}
@media (max-width:980px){
  .bento-dots{display:flex; gap:7px; justify-content:center; margin-top:16px; padding-bottom:2px}
  .bento-dots span{width:6px; height:6px; border-radius:99px; background:var(--hair-2); transition:background .25s ease, transform .2s ease, box-shadow .25s ease, width .25s ease; flex-shrink:0}
  .bento-dots span.on{background:var(--cyan); transform:scale(1.4); width:18px; box-shadow:0 0 10px rgba(182,57,255,.6)}
}
.frag-mini-chart{position:absolute; right:-10px; bottom:-10px; width:60%; height:60%; opacity:.9; pointer-events:none; filter:drop-shadow(0 14px 28px rgba(0,0,0,.45))}

/* ---- platform module visuals (P19) ---- */
.b-viz{position:absolute; pointer-events:none; opacity:.94; filter:drop-shadow(0 12px 24px rgba(0,0,0,.4))}
.b-viz.b-viz-corner{right:10px; bottom:10px; width:58%; max-width:220px}
.b-viz.b-viz-bottom{left:14px; right:14px; bottom:14px; width:auto}
.b-viz.b-viz-full{left:0; right:0; bottom:0; width:100%; opacity:.88}
@media (max-width:980px){
  .b-viz.b-viz-corner{width:72%; max-width:170px; right:8px; bottom:8px}
  .b-viz.b-viz-bottom{left:10px; right:10px; bottom:10px}
}
.b .strat-tile{position:relative; padding:8px 10px; border:1px solid var(--hair); border-radius:8px; background:rgba(12,12,12,.6); display:flex; justify-content:space-between; align-items:center; gap:8px; overflow:hidden}
.b .strat-tile::before{content:""; position:absolute; inset:-1px; border-radius:9px; padding:1px; background:linear-gradient(135deg, transparent 55%, var(--st-glow, transparent) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; pointer-events:none}
.b .strat-tile .st-label{font:500 11px 'Geist'; color:var(--ink-2); position:relative; z-index:1}
.b .strat-tile .st-tag{font:500 9.5px 'Geist Mono'; letter-spacing:.06em; position:relative; z-index:1}
.b .strat-tile .st-spark{position:absolute; right:62px; top:50%; transform:translateY(-50%); width:46px; height:18px; opacity:.85; pointer-events:none}
@media (max-width:980px){ .b .strat-tile .st-spark{right:54px; width:36px; height:16px} }
@media (max-width:520px){ .b .strat-tile .st-spark{display:none} }
.b.tall .strat-stack{position:absolute; left:14px; right:14px; bottom:14px; display:flex; flex-direction:column; gap:6px}

/* ---- suite ---- */
.suite-grid{display:grid; grid-template-columns:1fr 320px; gap:24px}
@media (max-width:980px){ .suite-grid{grid-template-columns:1fr} }
.suite-chart{position:relative; background:linear-gradient(180deg,#0C0C0C,#0A0A0A); border:1px solid var(--hair-2); border-radius:16px; aspect-ratio:760/480; overflow:hidden; box-shadow:0 30px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04)}
.suite-chart .ov{opacity:0; transition:opacity .28s ease}
.suite-chart[data-active~="ms"] .ov-ms,
.suite-chart[data-active~="sr"] .ov-sr,
.suite-chart[data-active~="liq"] .ov-liq,
.suite-chart[data-active~="ob"] .ov-ob,
.suite-chart[data-active~="vol"] .ov-vol,
.suite-chart[data-active~="ma"] .ov-ma,
.suite-chart[data-active~="rsi"] .ov-rsi,
.suite-chart[data-active~="tpsl"] .ov-tpsl,
.suite-chart[data-active~="alarm"] .ov-alarm{opacity:1}
.layer-list{display:flex; flex-direction:column; gap:8px}
.layer{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1px solid var(--hair); border-radius:12px; background:linear-gradient(180deg,rgba(12,12,12,.6),rgba(10,10,10,.6))}
.layer .l-name{font:600 13.5px/1.2 'Geist'; color:var(--ink)}
.layer .l-meta{font:500 11px/1 'Geist Mono'; letter-spacing:.06em; color:var(--mute); text-transform:uppercase; margin-top:4px}
.layer .toggle{width:34px; height:20px; border-radius:99px; background:#1A2436; position:relative; flex:0 0 34px}
.layer .toggle::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:99px; background:#384458; transition:.2s}
.layer.on .toggle{background:rgba(182,57,255,.2); border:1px solid rgba(182,57,255,.4)}
.layer.on .toggle::after{left:15px; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
/* ---- platform interactive demo (P20) ---- */
.layer{cursor:pointer; user-select:none; transition:border-color .2s, background .2s, box-shadow .2s, transform .12s}
.layer:hover{border-color:var(--hair-2); background:linear-gradient(180deg,rgba(12,12,12,.85),rgba(10,10,10,.85))}
.layer:active{transform:translateY(1px)}
.layer:focus-visible{outline:1px solid rgba(182,57,255,.55); outline-offset:2px}
.layer.on{border-color:rgba(182,57,255,.35); background:linear-gradient(180deg,rgba(12,12,12,.85),rgba(10,10,10,.7)); box-shadow:inset 0 0 0 1px rgba(182,57,255,.08), 0 0 22px -10px rgba(182,57,255,.35)}
.layer.on .l-name{color:#A7F3D0}
.layer .toggle{transition:background .2s, border-color .2s, box-shadow .2s}
@media (max-width:980px){
  .suite-grid{gap:14px}
  .layer-list{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
  .layer{padding:12px; min-height:60px; gap:10px}
  .layer .l-name{font-size:12.5px}
  .layer .l-meta{font-size:10px}
}
@media (max-width:520px){
  .layer-list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px}
  .layer{padding:10px; min-height:56px; gap:8px}
  .layer .l-name{font-size:12px}
  .layer .l-meta{font-size:9.5px}
  .layer .toggle{width:30px; height:18px; flex:0 0 30px}
  .layer .toggle::after{width:14px; height:14px}
  .layer.on .toggle::after{left:14px}
}

/* ---- strategy library ---- */
.strat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:980px){ .strat-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .strat-grid{grid-template-columns:1fr} }
.strat{position:relative; padding:20px; border:1px solid var(--hair); border-radius:14px; background:linear-gradient(180deg,rgba(12,12,12,.7),rgba(10,10,10,.7)); overflow:hidden; min-height:240px; display:flex; flex-direction:column}
.strat .badge{font:500 10.5px 'Geist Mono'; letter-spacing:.08em; color:var(--cyan); text-transform:uppercase; margin-bottom:8px}
.strat.violet .badge{color:var(--violet-2)}
.strat.bull .badge{color:var(--bull)}
.strat.amber .badge{color:var(--amber)}
.strat h3{font:600 17px/1.2 'Geist'; letter-spacing:-0.01em; margin:0 0 8px}
.strat p{font:400 13px/1.5 'Geist'; color:var(--mute); margin:0 0 14px; flex:1}
.strat .meta{display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid var(--hair); font:500 11px 'Geist Mono'; color:var(--mute); letter-spacing:.06em; text-transform:uppercase}
.strat .meta .rr{color:var(--bull)}
.strat .viz{height:70px; margin:0 -20px 14px; opacity:.85}

/* ---- BIST scanner ---- */
.scan-shell{border:1px solid var(--hair-2); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#0C0C0C,#080C14); box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.scan-head{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 20px; border-bottom:1px solid var(--hair); background:linear-gradient(180deg,#0C1322,#080C14); flex-wrap:wrap}
.scan-tabs{display:flex; gap:6px; flex-wrap:wrap}
.scan-tab{padding:7px 12px; border:1px solid var(--hair-2); border-radius:8px; background:rgba(0,0,0,.2); font:500 12px 'Geist Mono'; color:var(--mute); letter-spacing:.06em; text-transform:uppercase; cursor:pointer}
.scan-tab.on{background:rgba(182,57,255,.08); border-color:rgba(182,57,255,.4); color:var(--cyan)}
.scan-body{display:grid; grid-template-columns:1.4fr 1fr; gap:0}
@media (max-width:980px){ .scan-body{grid-template-columns:1fr} }
.scan-table{padding:8px 0; overflow-x:auto}
.scan-row{display:grid; grid-template-columns:84px 1fr 90px 80px 90px 80px; align-items:center; gap:14px; padding:11px 20px; border-top:1px solid var(--hair); font-family:'Geist'; font-size:13px}
.scan-row:first-child{border-top:none; padding-top:14px; padding-bottom:10px}
.scan-row.h{color:var(--mute); font:500 10.5px 'Geist Mono'; letter-spacing:.08em; text-transform:uppercase}
.scan-row:hover:not(.h){background:rgba(182,57,255,.02)}
.scan-row .tk{display:flex; align-items:center; gap:8px; font:600 13px 'Geist Mono'; color:var(--ink)}
.scan-row .tk .pin{width:18px; height:18px; border-radius:5px; background:linear-gradient(135deg,#E63946,#C1121F); display:grid; place-items:center; font:700 8px 'Geist Mono'; color:#fff}
.scan-row .nm{color:var(--ink-2); font:500 13px 'Geist'}
.scan-row .pr{font-family:'Geist Mono'; color:var(--ink); text-align:right; font-weight:500}
.scan-row .ch{font-family:'Geist Mono'; text-align:right; font-weight:500}
.scan-row .ch.up{color:var(--bull)} .scan-row .ch.dn{color:var(--bear)}
.scan-row .sg{font:500 10.5px 'Geist Mono'; letter-spacing:.06em; text-align:right; text-transform:uppercase}
.scan-row .sg.bos{color:var(--cyan)} .scan-row .sg.brk{color:var(--bull)} .scan-row .sg.dn{color:var(--bear)} .scan-row .sg.rng{color:var(--mute)} .scan-row .sg.alert{color:var(--amber)}
.scan-row .vol{display:flex; align-items:center; gap:6px}
.scan-row .vol .bar{flex:1; height:4px; border-radius:99px; background:#11192A; overflow:hidden}
.scan-row .vol .bar span{display:block; height:100%; background:linear-gradient(90deg,#C76BFF,#B639FF)}
.scan-aside{border-left:1px solid var(--hair); padding:18px 20px; display:flex; flex-direction:column; gap:14px}
@media (max-width:980px){ .scan-aside{border-left:none; border-top:1px solid var(--hair)} }
.heat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.heat{padding:10px; border-radius:8px; border:1px solid var(--hair); display:flex; flex-direction:column; gap:4px}
.heat .n{font:600 10.5px 'Geist Mono'; color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase}
.heat .v{font:500 11px 'Geist Mono'}
.heat.u{background:rgba(47,210,122,.08); border-color:rgba(47,210,122,.25)} .heat.u .v{color:var(--bull)}
.heat.d{background:rgba(240,75,91,.08); border-color:rgba(240,75,91,.25)} .heat.d .v{color:var(--bear)}
.heat.f{background:rgba(12,12,12,.6); border-color:var(--hair-2)} .heat.f .v{color:var(--mute)}

/* ---- scanner interactive layer ---- */
.scan-tab{transition:background .18s, border-color .18s, color .18s}
.scan-tab:hover{border-color:var(--hair-2); color:var(--ink-2)}
.scan-tab.on:hover{color:var(--cyan)}
.scan-tab:focus-visible{outline:1px solid rgba(182,57,255,.55); outline-offset:2px}
.scan-row{transition:opacity .18s, filter .18s}
.scan-row.dim{opacity:.32; filter:grayscale(.4)}
.scan-row.hide{display:none}
.scan-row.sector{grid-template-columns:120px 1fr 90px 80px 90px 80px}
.scan-row.alert-row .sg.alert{color:var(--amber)}
.scan-aside-eyebrow{font-size:10.5px; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px}
.scan-filters{display:flex; flex-direction:column; gap:8px}
.scan-summary{margin:4px 0 2px; padding:10px 12px; border:1px solid var(--hair); border-radius:10px; background:linear-gradient(180deg,rgba(12,12,12,.55),rgba(10,10,10,.55)); display:flex; flex-direction:column; gap:6px}
.scan-summary-row{display:flex; align-items:center; justify-content:space-between; font:500 11.5px 'Geist Mono'; letter-spacing:.04em; color:var(--mute)}
.scan-summary-row strong{font:600 12px 'Geist Mono'; color:var(--cyan)}
.scan-summary-help{font:400 11px 'Geist'; color:var(--ink-2); line-height:1.45; padding-top:6px; border-top:1px dashed var(--hair)}
.scan-empty{padding:28px 20px; text-align:center}
.scan-empty-title{font:600 13.5px 'Geist'; color:var(--ink-2); margin-bottom:4px}
.scan-empty-sub{font:400 12px 'Geist'; color:var(--mute)}
.scan-watch{display:flex; flex-direction:column; gap:8px}
.scan-watch-card{padding:10px 12px; border:1px solid var(--hair); border-radius:10px; background:linear-gradient(180deg,rgba(12,12,12,.6),rgba(10,10,10,.6)); display:flex; align-items:center; justify-content:space-between; gap:10px}
.scan-watch-card .nm{font:600 12px 'Geist Mono'; color:var(--ink); letter-spacing:.04em}
.scan-watch-card .st{font:500 10.5px 'Geist Mono'; color:var(--cyan); letter-spacing:.06em; text-transform:uppercase}
.scan-alert-list{display:flex; flex-direction:column; gap:8px}
.scan-alert-card{padding:10px 12px; border:1px solid var(--hair); border-radius:10px; background:linear-gradient(180deg,rgba(12,12,12,.6),rgba(10,10,10,.6))}
.scan-alert-card .top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.scan-alert-card .tk{font:600 12px 'Geist Mono'; color:var(--ink); letter-spacing:.04em}
.scan-alert-card .state{font:500 10px 'Geist Mono'; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:99px; border:1px solid rgba(255,170,24,.4); color:var(--amber); background:rgba(255,170,24,.08)}
.scan-alert-card .rule{margin-top:4px; font:400 11px 'Geist'; color:var(--mute)}
.scan-tabs::-webkit-scrollbar{display:none}
@media (max-width:720px){
  .scan-tabs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .scan-tab{flex:0 0 auto; white-space:nowrap}
  .scan-summary{padding:9px 11px}
  .scan-row.sector{grid-template-columns:90px 1fr 70px 60px}
}

/* ---- mobile carousel ---- */
section.mobile-show{padding:clamp(72px,9vw,130px) 0; background:radial-gradient(800px 500px at 50% 0%, rgba(182,57,255,.06), transparent 60%), linear-gradient(180deg, transparent, rgba(182,57,255,.03), transparent); position:relative; overflow:hidden}
.mobile-show .section-head{margin:0 auto 48px; text-align:center}
.mobile-show .section-head .h-sub{margin:0 auto}
.ms-stage{position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center; max-width:1100px; margin:0 auto}
.ms-side{display:flex; flex-direction:column; gap:14px}
.ms-side.right{align-items:flex-start} .ms-side.left{align-items:flex-end}
@media (max-width:880px){
  .ms-stage{grid-template-columns:1fr; gap:24px; justify-items:center}
  .ms-side, .ms-side.left, .ms-side.right{display:none !important}
  .mobile-show .ms-stage > .ms-side, .mobile-show .ms-slidecard{display:none !important}
}
.ms-slidecard{width:100%; max-width:280px; padding:14px 16px; border:1px solid var(--hair); border-radius:14px; background:linear-gradient(180deg,rgba(12,12,12,.65),rgba(10,10,10,.65)); transition:opacity .35s, border-color .35s; cursor:pointer; opacity:.55}
.ms-slidecard:hover{opacity:.85}
.ms-slidecard.active{opacity:1; border-color:rgba(182,57,255,.35); box-shadow:0 0 0 1px rgba(182,57,255,.12), 0 20px 40px -20px rgba(199,107,255,.25)}
.ms-slidecard .idx{font:500 10.5px 'Geist Mono'; letter-spacing:.1em; color:var(--mute-2); text-transform:uppercase}
.ms-slidecard h4{font:600 14px/1.2 'Geist'; margin:6px 0 4px; letter-spacing:-0.01em}
.ms-slidecard p{font:400 12px/1.45 'Geist'; color:var(--mute); margin:0}
.ms-phone-wrap{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px}
.ms-phone-glow{position:absolute; inset:-50px; z-index:0; pointer-events:none; background:radial-gradient(60% 60% at 30% 20%, rgba(182,57,255,.18), transparent 60%), radial-gradient(60% 60% at 70% 80%, rgba(182,57,255,.16), transparent 60%); filter:blur(20px)}
.ms-phone{position:relative; z-index:1; width:320px; height:640px; border-radius:44px; border:1px solid #20283A; background:linear-gradient(180deg,#0E1320,#070B12); padding:10px; box-shadow:0 60px 100px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05)}
.ms-phone::before{content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:104px; height:26px; border-radius:99px; background:#06090F; border:1px solid #131C2C; z-index:3}
.ms-phone-screen{position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden; background:#06090F; border:1px solid #131C2C}
.ms-statusbar{position:absolute; top:0; left:0; right:0; height:48px; z-index:2; display:flex; align-items:flex-end; padding:0 28px 6px; justify-content:space-between; pointer-events:none; font:600 12px 'Geist Mono'; color:var(--ink)}
.ms-statusbar .right{display:flex; gap:6px; align-items:center}
.ms-statusbar .batt{width:20px; height:10px; border:1px solid rgba(245,245,247,.65); border-radius:3px; position:relative}
.ms-statusbar .batt::after{content:""; position:absolute; right:-3px; top:2px; width:2px; height:6px; background:rgba(245,245,247,.65); border-radius:0 1px 1px 0}
.ms-statusbar .batt span{position:absolute; inset:1.5px 3px 1.5px 1.5px; background:#B639FF; border-radius:1px}
.ms-app-header{position:absolute; top:48px; left:0; right:0; padding:8px 18px 10px; z-index:2; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(6,9,15,.95), rgba(6,9,15,.7) 70%, transparent); backdrop-filter:blur(8px)}
.ms-app-title{font:600 13px 'Geist'; color:var(--ink); letter-spacing:-0.01em}
.ms-app-title small{display:block; font:500 9.5px 'Geist Mono'; color:var(--mute); letter-spacing:.08em; margin-top:2px; text-transform:uppercase}
.ms-app-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid var(--hair-2); border-radius:99px; font:500 10px 'Geist Mono'; color:var(--cyan); letter-spacing:.06em; background:rgba(182,57,255,.06)}
.ms-app-pill .liv{width:5px; height:5px; border-radius:99px; background:var(--cyan); box-shadow:0 0 8px var(--cyan)}
.ms-track-wrap{position:absolute; top:104px; left:0; right:0; bottom:96px; overflow:hidden}
.ms-track{display:flex; width:600%; height:100%; transition:transform .55s cubic-bezier(.22,.8,.2,1); will-change:transform}
.ms-slide{width:calc(100%/6); height:100%; padding:6px 16px 14px; box-sizing:border-box; display:flex; flex-direction:column}
.ms-slide .sl-eyebrow{font:500 10px 'Geist Mono'; letter-spacing:.1em; color:var(--cyan); text-transform:uppercase; margin-bottom:4px}
.ms-slide h5{font:600 16px/1.15 'Geist'; margin:0 0 6px; letter-spacing:-0.02em}
.ms-slide .sl-desc{font:400 11.5px/1.45 'Geist'; color:var(--mute); margin:0 0 10px}
.ms-chart-box{flex:1; border:1px solid var(--hair); border-radius:12px; background:linear-gradient(180deg,#0C0C0C,#080C14); overflow:hidden}
.ms-stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:10px}
.ms-stats .s{padding:7px 9px; border:1px solid var(--hair); border-radius:8px; background:rgba(12,12,12,.5)}
.ms-stats .lbl{font:500 8.5px 'Geist Mono'; color:var(--mute); letter-spacing:.06em; text-transform:uppercase}
.ms-stats .val{font:500 11.5px 'Geist Mono'; color:var(--ink); margin-top:2px}
.ms-stats .val.bull{color:var(--bull)} .ms-stats .val.bear{color:var(--bear)} .ms-stats .val.cyan{color:var(--cyan)} .ms-stats .val.violet{color:var(--violet-2)} .ms-stats .val.amber{color:var(--amber)}
.ms-tabbar{position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-around; padding:10px 6px; border:1px solid var(--hair); border-radius:14px; background:rgba(8,12,18,.78); backdrop-filter:blur(8px)}
.ms-tabbar span{display:inline-flex; flex-direction:column; align-items:center; gap:3px; font:500 9.5px 'Geist Mono'; color:var(--mute); letter-spacing:.06em}
.ms-tabbar span.on{color:var(--cyan)}
.ms-tabbar svg{width:16px; height:16px; opacity:.85}
.ms-controls{display:flex; align-items:center; gap:12px; justify-content:center}
.ms-arrow{width:44px; height:44px; border-radius:99px; border:1px solid var(--hair-2); background:rgba(12,12,12,.6); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:border-color .2s, background .2s, transform .12s}
.ms-arrow:hover{border-color:rgba(182,57,255,.4); background:rgba(182,57,255,.06); transform:translateY(-1px)}
.ms-dots{display:flex; gap:8px; padding:0 4px}
.ms-dot{width:8px; height:8px; border-radius:99px; background:#1F2A3D; cursor:pointer; transition:.2s; border:none}
.ms-dot.on{width:24px; background:linear-gradient(90deg,#C76BFF,#B639FF); box-shadow:0 0 10px rgba(182,57,255,.55)}
.ms-progress{width:min(440px,80%); height:2px; background:#10182A; border-radius:99px; overflow:hidden; margin:0 auto}
.ms-progress .bar{display:block; height:100%; width:0%; background:linear-gradient(90deg,#C76BFF,#B639FF); transition:width .15s linear}
.ms-hint{font:500 10.5px 'Geist Mono'; letter-spacing:.08em; color:var(--mute-2); text-transform:uppercase; text-align:center; margin-top:18px}

/* ---- pipeline ---- */
.pipeline{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
@media (max-width:980px){ .pipeline{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .pipeline{grid-template-columns:1fr} }
.stage{background:linear-gradient(180deg,rgba(12,12,12,.7),rgba(10,10,10,.7)); border:1px solid var(--hair); border-radius:14px; padding:18px}
.stage .num{font:500 11px/1 'Geist Mono'; letter-spacing:.1em; color:var(--mute-2); margin-bottom:12px; text-transform:uppercase}
.stage h4{font:600 16px/1.2 'Geist'; letter-spacing:-0.01em; margin:6px 0; color:var(--ink)}
.stage p{font:400 12.5px/1.5 'Geist'; color:var(--mute); margin:0}
.stage .viz{height:56px; margin-top:12px; opacity:.9}
.stage.final{border-color:rgba(182,57,255,.35); box-shadow:0 0 0 1px rgba(182,57,255,.12) inset}
.stage.final .num{color:var(--cyan)}

/* ---- pricing ---- */
.price-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:880px){ .price-row{grid-template-columns:1fr} }
.price{padding:24px; border:1px solid var(--hair); border-radius:16px; background:linear-gradient(180deg,rgba(12,12,12,.7),rgba(10,10,10,.7)); display:flex; flex-direction:column; gap:14px; position:relative}
.price.feat{border-color:rgba(182,57,255,.3); background:radial-gradient(60% 50% at 50% 0%, rgba(182,57,255,.1), transparent 70%), linear-gradient(180deg,rgba(15,25,35,.85),rgba(10,16,24,.85)); box-shadow:0 0 0 1px rgba(182,57,255,.12), 0 30px 60px -30px rgba(199,107,255,.4)}
.price h3{font:600 18px/1.2 'Geist'; margin:0}
.price .ps{font:500 11px 'Geist Mono'; color:var(--mute); letter-spacing:.08em; text-transform:uppercase; margin:4px 0 0}
.price .num{font:600 32px/1 'Geist'; letter-spacing:-0.025em; margin-top:4px}
.price .num.soon{color:var(--cyan); font-size:22px}
.price ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.price li{font:500 13.5px/1.45 'Geist'; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start}
.price li svg{flex:0 0 14px; margin-top:3px; color:var(--cyan)}
.price .cta{margin-top:auto}
.price .badge{position:absolute; top:18px; right:18px; padding:4px 9px; border-radius:99px; font:500 10.5px 'Geist Mono'; letter-spacing:.06em; border:1px solid var(--hair-2); color:var(--mute)}
.price.feat .badge{border-color:rgba(182,57,255,.4); color:var(--cyan); background:rgba(182,57,255,.06)}

/* ---- mini app ---- */
.mini-shell{display:grid; grid-template-columns:1fr 240px; gap:32px; align-items:center; padding:30px; border:1px solid var(--hair); border-radius:16px; background:linear-gradient(180deg,rgba(12,12,12,.55),rgba(10,10,10,.55))}
@media (max-width:780px){ .mini-shell{grid-template-columns:1fr; padding:22px} }
.mini-shell h3{font:600 22px/1.15 'Geist'; letter-spacing:-0.02em; margin:12px 0 8px}
.mini-shell p{font:400 14px/1.55 'Geist'; color:var(--mute); margin:0 0 14px}
.mini-feats{display:flex; flex-wrap:wrap; gap:8px}
.mini-phone-sm{width:220px; height:380px; margin:0 auto; border-radius:30px; border:1px solid #20283A; background:#06090F; padding:8px; position:relative; box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.mini-phone-sm::before{content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:80px; height:18px; border-radius:99px; background:#06090F; border:1px solid #131C2C; z-index:2}
.mini-phone-sm-screen{width:100%; height:100%; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#0A0F1A,#070B12); border:1px solid #131C2C; position:relative; padding-top:36px}

/* ---- risk ---- */
section.risk{padding:clamp(40px,5vw,70px) 0; border-top:1px solid var(--hair); background:#070B12}
.risk-box{border:1px solid rgba(255,170,24,.25); border-radius:14px; padding:22px; background:repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,170,24,.022) 18px 19px), rgba(8,12,18,.6); display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:flex-start}
.risk-box .ico{width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,170,24,.35); background:rgba(255,170,24,.06); display:grid; place-items:center}
.risk-box h4{font:600 15px/1.2 'Geist'; margin:0 0 10px; color:var(--ink)}
.risk-list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.risk-list li{font:400 13px/1.55 'Geist'; color:var(--ink-2); padding-left:18px; position:relative}
.risk-list li::before{content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:99px; background:rgba(255,170,24,.6)}

/* ---- 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} }

/* ============================================================
   Tight mobile + Telegram WebApp adapter
   ============================================================ */

/* Tight mobile (< 480px) — covers Telegram WebApp viewport */
@media (max-width: 480px){
  .wrap{ padding: 0 14px }
  header.site{ position: sticky }
  .nav{ height: 56px }
  .brand .word .top{ display: none }
  .brand .word .name{ font-size: 14px }
  .brand .mark{ width: 28px; height: 28px }
  .nav-right .btn{ padding: 8px 11px; font-size: 12.5px }

  section.hero{ padding: 24px 0 36px }
  .hero-grid{ gap: 24px }
  .hero-left .h-display{ font-size: clamp(22px, 7vw, 32px); line-height: 1.1; max-width: none }
  .h-sub{ font-size: 14px; line-height: 1.55 }
  .hero-ctas{ flex-direction: column; align-items: stretch; gap: 8px }
  .hero-ctas .btn{ justify-content: center }
  .hero-trust{ font-size: 11px; gap: 6px 14px; margin-top: 16px }
  .chart-stage{ margin-top: 8px }
  .chart-panel{ aspect-ratio: 4/3 }
  .float-card{ display: none }

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

  .scan-shell{ border-radius: 12px }
  .scan-head{ padding: 12px 14px; gap: 10px }
  .scan-tab{ padding: 5px 8px; font-size: 10.5px }
  .scan-row{ grid-template-columns: 70px 1fr 70px 60px; padding: 8px 14px; font-size: 11px; gap: 8px }
  .scan-row .pr{ font-size: 11px }
  .scan-row .ch{ font-size: 11px }
  .scan-row .vol{ display: none }
  .scan-row .sg{ font-size: 9.5px }
  .scan-aside{ padding: 14px }

  .price{ padding: 18px }
  .price .num{ font-size: 26px }

  .mini-shell{ padding: 18px }
  .mini-phone-sm{ width: 180px; height: 320px }

  .ms-phone{ width: 260px; height: 540px }
  section.mobile-show{ padding: 50px 0 }

  .strat{ padding: 16px; min-height: auto }
  .strat .viz{ height: 56px }

  .pipeline{ gap: 10px }
  .stage{ padding: 14px }

  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 }
}

/* Telegram WebApp adapter — lock our theme even when Telegram injects its own */
html.tg-webapp, body.tg-webapp{
  background: var(--bg) !important;
  color: var(--ink) !important;
}
html.tg-webapp a, body.tg-webapp a{
  color: inherit !important;
  text-decoration: none !important;
}
html.tg-webapp a:visited, body.tg-webapp a:visited{
  color: inherit !important;
}
body.tg-webapp button{
  color: inherit;
}
/* Telegram WebApp adds a top safe area — push header down */
body.tg-webapp header.site{
  padding-top: env(safe-area-inset-top, 0px);
}
/* When inside Telegram + narrow viewport, simplify header further */
@media (max-width: 600px){
  body.tg-webapp nav.primary{ display: none }
  body.tg-webapp .lang-switch{ display: none }
}

/* ---------- 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;
}

/* ---------- hero, centred — ported from algotradebot.ai ----------
   The reference stacks the hero: one centred column of headline, sub and a
   single pill, then the chart full width beneath it. The two-column split was
   the last structural thing making the two properties read as different sites,
   so the grid collapses to one column and the copy centres. The chart keeps its
   own alignment because a chart centred on its own axis reads as decoration;
   full width it reads as the product. */
.hero-grid{
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  justify-items: center;
}
.hero-left{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
}
.hero-left .h-display{
  max-width: 20ch;
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: 1.06;
}
.hero-left .h-sub{ max-width: 58ch; }
.hero-ctas{ justify-content: center; }
.hero-left .eyebrow{ align-self: center; }
/* the assurance row under the CTA sits as one centred line rather than a
   left-hugging two-column list */
.hero-left .hero-assure,
.hero-left ul{ justify-content: center; }
.chart-stage{ width: 100%; }
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr }
}

/* the chart was drawn for a narrow right-hand column; centred and full width it
   needs a landscape frame, and the floating cards have to sit INSIDE it rather
   than hanging off edges that no longer exist */
.hero-grid > .chart-stage{ width: 100%; max-width: 1180px; }
.chart-stage .chart-panel{ aspect-ratio: 16 / 9; }
/* the cards used negative offsets to hang off a narrow column; centred and
   full width there is no edge to hang from, so they sit inside the frame */
.chart-stage .fc-bist{ top: 20px; right: 20px; }
.chart-stage .fc-watch{ bottom: 20px; left: 20px; }
@media (max-width: 980px){
  .chart-stage .chart-panel{ aspect-ratio: 4 / 3 }
  .chart-stage .fc-bist, .chart-stage .fc-watch{ display: none }
}

/* ---------- 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; }