/* Shared styles for the roitrack landing page.
   Used by / (index.html) and /ru/ — edit once, both pick it up. */
:root{
  --bg:#0f1117; --surface:#181c26; --raised:#1c212e; --border:#262a36; --border-2:#3a4150;
  --text:#f1f5f9; --text-2:#8b93a7; --text-3:#5b6478;
  --brand:#16a34a; --brand-text:#22c55e; --loss:#ef4444; --warn:#f59e0b;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px;
  --display:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--pad)}
.narrow{max-width:660px}

/* ---------- signature device: mono column label + hairline claim rows ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); display:flex; align-items:center; gap:14px; margin:0 0 18px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--border)}
.rows{border-top:1px solid var(--border); margin:28px 0 0}
.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 2px; border-bottom:1px solid var(--border);
}
.row .k{color:var(--text-2); font-size:14.5px}
.row .v{font-family:var(--mono); font-size:15px; font-weight:500; color:var(--text); white-space:nowrap}
.row .v.pos{color:var(--brand-text)}
.row .v.neg{color:var(--loss)}

/* ---------- nav ---------- */
/* Fixed (not sticky) so in-app browsers like Telegram render the nav pinned
   to viewport top with no gap between URL bar chrome and nav. body gets the
   nav height as padding-top so page content doesn't slide under. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; background:#0f1117;
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:58px}
body{padding-top:calc(58px + env(safe-area-inset-top))}
.mark{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none}
.mark i{color:var(--brand-text); font-style:normal}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav ul a{color:var(--text-2); text-decoration:none; font-size:14px}
.nav ul a:hover{color:var(--text)}
.nav-r{display:flex; align-items:center; gap:22px}
/* Sign-in text link — muted so the primary CTA still owns the eye. */
.nav-signin{color:var(--text-2); text-decoration:none; font-size:14px}
.nav-signin:hover{color:var(--text)}
/* Language selector — text only. A flag names a country, not a language. */
.lang{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.06em}
.lang a{color:var(--text-3); text-decoration:none}
.lang a:hover{color:var(--text-2)}
.lang a[aria-current]{color:var(--text)}
.lang s{color:var(--border-2); text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-size:14.5px; font-weight:500;
  padding:10px 18px; border-radius:var(--r-md); text-decoration:none; border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:#15903f}
.btn-ghost{border-color:var(--border-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--text-3); background:var(--surface)}
.btn-lg{font-size:16px; padding:13px 24px}

/* ---------- sections ---------- */
section{padding:88px 0}
section + section{border-top:1px solid var(--border)}
h1{
  font-family:var(--display); font-weight:700; font-size:clamp(38px,6vw,60px);
  line-height:1.04; letter-spacing:-.035em; margin:0 0 20px;
}
h2{
  font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,34px);
  line-height:1.16; letter-spacing:-.025em; margin:0 0 16px;
}
h3{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.015em; margin:0 0 10px}
p{margin:0 0 16px; color:var(--text-2)}
p.lead{font-size:18px; color:var(--text-2); line-height:1.62}
strong{color:var(--text); font-weight:500}

/* ---------- hero ---------- */
.hero{padding:76px 0 0}
.hero .tag{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  border:1px solid var(--border); border-radius:100px; padding:6px 14px; margin-bottom:26px;
}
.hero .tag b{color:var(--brand-text); font-weight:500}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.hero .note{font-size:13px; color:var(--text-3); margin:14px 0 0}
.shot{
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg); box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.shot-cap{font-family:var(--mono); font-size:11.5px; color:var(--text-3); margin:12px 2px 0; letter-spacing:.04em}
.hero-shot{margin-top:56px}

/* ---------- problem ---------- */
.pain{list-style:none; padding:0; margin:26px 0 0; border-top:1px solid var(--border)}
.pain li{
  padding:13px 2px 13px 26px; border-bottom:1px solid var(--border); color:var(--text-2);
  font-size:15px; position:relative;
}
.pain li::before{
  content:"—"; position:absolute; left:2px; color:var(--loss); font-family:var(--mono); font-size:13px;
}

/* ---------- features ---------- */
.feat{margin:0 0 76px}
.feat:last-child{margin-bottom:0}
.feat .shot{margin-top:30px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:44px 56px; margin-top:8px}

/* ---------- comparison slider ---------- */
.compare{
  position:relative; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  user-select:none; touch-action:pan-y; cursor:ew-resize; margin-top:30px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.compare img{width:100%; pointer-events:none}
.compare .layer{position:absolute; inset:0}
.compare .layer img{position:absolute; inset:0; width:100%}
.divider{position:absolute; top:0; bottom:0; width:2px; background:var(--brand); z-index:5; pointer-events:none}
.handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px;
  border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center;
  gap:4px; box-shadow:0 3px 14px rgba(0,0,0,.6);
}
.handle s{display:block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent}
.handle .a{border-right:6px solid #fff} .handle .b{border-left:6px solid #fff}
.compare:focus-visible{outline:2px solid var(--brand-text); outline-offset:3px}
.cmp-hint{font-family:var(--mono); font-size:11.5px; color:var(--text-3); margin:12px 2px 0; letter-spacing:.04em}

/* ---------- "what we don't have" ---------- */
.absent{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:30px 32px; margin-top:28px;
}
.absent ul{list-style:none; margin:0 0 20px; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:9px 30px}
.absent li{font-family:var(--mono); font-size:13.5px; color:var(--text-3); display:flex; gap:11px; align-items:baseline}
.absent li::before{content:"\00d7"; color:var(--border-2); font-size:14px}
.absent .kick{margin:0; padding-top:20px; border-top:1px solid var(--border); color:var(--text-2); font-size:15px}

/* ---------- setup steps ---------- */
.steps{counter-reset:s; margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--border)}
.steps li{
  counter-increment:s; display:flex; gap:20px; padding:18px 2px; border-bottom:1px solid var(--border);
  align-items:baseline;
}
.steps li::before{
  content:"0" counter(s); font-family:var(--mono); font-size:12px; color:var(--text-3);
  letter-spacing:.06em; flex:0 0 auto;
}
.steps .t{color:var(--text); font-size:15.5px}
.steps code{
  font-family:var(--mono); font-size:13px; background:var(--raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:2px 7px; color:var(--brand-text);
}

/* ---------- pricing ---------- */
.price{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:38px 36px; margin-top:32px; max-width:520px;
}
.price .amt{font-family:var(--mono); font-weight:500; font-size:46px; letter-spacing:-.03em; color:var(--text); line-height:1}
.price .per{font-family:var(--mono); font-size:15px; color:var(--text-2); margin-left:6px}
.price ul{list-style:none; margin:26px 0 28px; padding:0}
.price li{padding:9px 0 9px 26px; position:relative; color:var(--text-2); font-size:15px; border-bottom:1px solid var(--border)}
.price li:last-child{border-bottom:0}
.price li::before{content:"✓"; position:absolute; left:2px; color:var(--brand-text); font-size:13px}
.fine{font-size:13px; color:var(--text-3); margin:18px 0 0; line-height:1.55}

/* ---------- faq ---------- */
.faq{margin-top:30px; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 2px; font-size:16px; color:var(--text);
  display:flex; justify-content:space-between; gap:20px; align-items:center; font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--text-3); font-size:17px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px; max-width:640px; font-size:15px}

/* ---------- closing ---------- */
.close{text-align:center; padding:100px 0}
.close h2{margin-bottom:14px}
.close p{max-width:520px; margin-left:auto; margin-right:auto}
footer{border-top:1px solid var(--border); padding:34px 0; color:var(--text-3); font-size:13.5px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}

/* ---------- motion + responsive ---------- */
.rise{opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; transition:none}
}
@media (max-width:760px){
  section{padding:64px 0}
  .nav ul{display:none}
  .nav-r{gap:14px}
  .grid2,.absent ul{grid-template-columns:1fr}
  .price{padding:30px 24px}
  .hero{padding-top:52px}
}
/* On the narrowest phones the language selector and the CTA won't both fit
   alongside "Sign in". Sign-in is still reachable from the portal, so it goes. */
@media (max-width:420px){
  .nav-signin{display:none}
}