/* ============================================================
   LumosWS — shared stylesheet
   Tokens and components follow the Figma design (node 47-2)
   ============================================================ */

/* ============ Tokens ============ */
:root{
  --bg:#121317;
  --card:#1d1f22;
  --card-inner:#282b30;
  --faq:#181a1d;
  --text:#ffffff;
  --muted:#a1a1a1;
  --muted2:#8b9099;
  --blue:#005cff;
  --blue-hover:#1a6dff;
  --blue-soft:#4d8dff;
  --green:#1eff00;
  --reddit:#ff4500;
  --red:#ff2b2b;
  --track:#52575f;
  --hairline:rgba(255,255,255,.07);
  --r-card:30px;
  --r-widget:20px;
  --r-btn:12px;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --content:800px;
  --section-gap:100px;
  --header-h:64px;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:calc(var(--content) + 80px);margin-inline:auto;padding-inline:40px}
.section{margin-top:var(--section-gap);scroll-margin-top:calc(var(--header-h) + 24px)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ Header ============ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(18,19,23,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.site-header.scrolled{border-bottom-color:var(--hairline);background:rgba(18,19,23,.86)}
.header-inner{
  display:flex;align-items:center;gap:16px;
  height:var(--header-h);
  max-width:calc(var(--content) + 480px);
  margin-inline:auto;padding-inline:40px;
  position:relative;
}
.main-nav{
  display:flex;gap:40px;align-items:center;
  margin-inline:auto;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{
  color:var(--muted);font-size:16px;line-height:24px;white-space:nowrap;
  transition:color .2s ease;
  padding:4px 2px;
}
.main-nav a:hover{color:#fff}
.main-nav a.active{color:#fff;font-weight:700}
/* Subpages carry a breadcrumb in the header instead of the section menu: an internal page
   should say where it sits, not re-offer the home page's own anchors. */
.head-crumbs{
  display:flex;align-items:center;gap:10px;
  margin-right:auto;min-width:0;
  font-size:14px;color:var(--muted);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.head-crumbs::-webkit-scrollbar{display:none}
.head-crumbs a{color:var(--muted);white-space:nowrap;transition:color .2s ease}
.head-crumbs a:hover{color:#fff}
.head-crumbs .sep{opacity:.45}
.head-crumbs .here{color:#fff;font-weight:700;white-space:nowrap}
.lang{position:absolute;right:40px;top:50%;translate:0 -50%}
.lang-btn{
  color:var(--muted);font-size:16px;line-height:24px;
  display:flex;align-items:center;gap:6px;cursor:pointer;
  transition:color .2s ease;
}
.lang-btn .caret{font-size:10px;translate:0 1px;opacity:.7;transition:transform .2s ease}
.lang-btn:hover,.lang.open .lang-btn{color:#fff}
.lang.open .caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 12px);
  display:none;flex-direction:column;gap:2px;
  min-width:150px;padding:8px;
  background:var(--card);border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  z-index:70;
}
.lang.open .lang-menu{display:flex}
.lang-menu a{
  padding:9px 12px;border-radius:8px;
  color:var(--muted);font-size:14px;line-height:1.3;
  transition:background .15s ease,color .15s ease;
}
.lang-menu a:hover{background:#24262a;color:#fff}
.lang-menu a[aria-current]{color:#fff;font-weight:700}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:60px;padding-inline:20px;border-radius:var(--r-btn);
  font-weight:700;font-size:14px;line-height:normal;font-family:var(--mono);
  white-space:nowrap;user-select:none;
  transition:background .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease,border-color .2s ease;
  will-change:transform;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-hover);box-shadow:0 8px 28px rgba(0,92,255,.35);transform:translateY(-1px)}
.btn-ghost{background:var(--card);color:var(--muted)}
.btn-ghost:hover{background:#24262a;color:#fff;transform:translateY(-1px)}
.btn-outline{border:2px solid var(--blue);color:#fff;background:transparent}
.btn-outline:hover{background:rgba(0,92,255,.14);box-shadow:0 8px 28px rgba(0,92,255,.18);transform:translateY(-1px)}

/* ============ Hero (home) ============ */
.hero{padding-top:60px;position:relative}
.hero::before{
  content:"";position:absolute;inset:-140px 0 auto 0;height:560px;
  background:radial-gradient(560px 320px at 50% 0%,rgba(0,92,255,.14),transparent 70%);
  pointer-events:none;z-index:-1;
}
.hero-stack{display:flex;flex-direction:column;align-items:center;gap:40px}
.brand{display:flex;flex-direction:column;align-items:center;gap:32px}
.brand-icon{width:64px;height:64px;border-radius:14px}
.brand-word{height:30px;width:auto}
.word-fallback{font-weight:700;font-size:26px;letter-spacing:.14em}
.word-fallback b{color:var(--blue)}
.hero-copy{display:flex;flex-direction:column;gap:20px;text-align:center}
.hero-title{
  margin:0;font-weight:600;font-size:32px;line-height:1.3;letter-spacing:-.01em;
}
.hero-title .accent{color:var(--blue)}
.hero-sub{color:var(--muted);font-size:16px;line-height:24px;max-width:800px;margin-inline:auto}
.phone-wrap{position:relative;width:290px}
.phone-wrap::before{
  content:"";position:absolute;inset:8% -18%;
  background:radial-gradient(closest-side,rgba(0,92,255,.22),transparent 72%);
  filter:blur(6px);z-index:0;pointer-events:none;
}
.phone{
  position:relative;z-index:1;
  width:290px;height:516px;border-radius:var(--r-card);
  overflow:hidden;background:var(--card);
  box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone video{width:100%;height:100%;object-fit:cover}
.phone .phone-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#2c2f34;z-index:-1;
}
.hero-checks{display:flex;flex-direction:column;gap:14px;text-align:center;width:100%}
.hero-checks li{color:var(--muted);font-size:16px;line-height:24px}
.hero-cta{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
.hero-cta .btn{width:300px}

/* ============ Section headings ============ */
.h2{
  margin:0 0 40px;font-weight:600;font-size:24px;line-height:1.3;
  text-align:center;letter-spacing:-.01em;
}

/* ============ Marquee carousels ============ */
.marquee{
  position:relative;width:100%;overflow:hidden;
  touch-action:pan-y;                    /* vertical swipes stay with the page */
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee.is-grabbing{cursor:grabbing}
.marquee-track{display:flex;gap:20px;width:max-content;padding-block:4px;will-change:transform}
.marquee-set{display:flex;gap:20px}
/* No keyframe. main.js drives the transform on one rAF loop so the drift and the
   visitor's drag share a single offset - there is no mode to switch between, which is
   what used to make a wheel tick stutter and a drag stop the strip for good. */
.marquee.is-static{overflow-x:auto;cursor:default;-webkit-overflow-scrolling:touch}
.marquee.is-static .marquee-track{transform:none}
.marquee{scrollbar-width:none}
.marquee::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;cursor:default;-webkit-mask-image:none;mask-image:none}
  .marquee .marquee-track{transform:none}
}
.quote-card{
  flex:0 0 200px;width:200px;height:240px;
  background:var(--card);border-radius:var(--r-card);padding:20px;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid transparent;transition:border-color .25s ease;
  overflow:hidden;
}
.quote-card:hover{border-color:rgba(255,255,255,.08)}
.quote-head{display:flex;align-items:center;gap:4px;margin-bottom:10px}
.quote-head .sub{font-weight:500;font-size:12px;color:#fff}
.quote-text{color:var(--muted);font-size:14px;line-height:1.35}
.quote-user{color:var(--reddit);font-weight:700;font-size:12px}
.quote-card.voice .quote-text{color:#fff}
.quote-card.voice .quote-user{color:var(--muted)}
.feedback-link{
  display:block;width:fit-content;margin:40px auto 0;
  color:var(--muted);font-weight:700;font-size:14px;
  border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.feedback-link:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ============ Cards / grids ============ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{
  background:var(--card);border-radius:var(--r-card);padding:20px;
  display:flex;flex-direction:column;gap:20px;
  border:1px solid transparent;
  transition:transform .25s ease,border-color .25s ease;
}
/* No motion on hover for cards that are not active — a passive tile should not move
   under the cursor. The border tint stays so the surface still reads as interactive. */
@media (hover:hover){
  .card.lift:hover{border-color:rgba(255,255,255,.08)}
  .card.lift.is-active:hover{transform:translateY(-3px)}
}
.card .pix{width:40px;height:40px;flex:none}
.card-text{display:flex;flex-direction:column;gap:10px}
.card-title{font-weight:700;font-size:16px;line-height:1.3;color:#fff;margin:0}
.card-desc{color:var(--muted);font-size:14px;line-height:1.45}

/* ============ Inner widgets ============ */
.widget{
  margin-top:auto;
  background:var(--card-inner);border-radius:var(--r-widget);
  height:140px;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:var(--sans);
}
.widget .row{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 20px;min-height:0}
.widget .row + .row{border-top:1px solid var(--hairline)}
.slider-label{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:10px;color:#fff;margin-bottom:10px}
.slider-label .val{font-size:10px}
.slider-label .val.dim{color:var(--muted2)}
.slider-bar{display:flex;align-items:center;gap:4px;height:12px}
.slider-fill{height:12px;background:var(--blue);border-radius:12px 4px 4px 12px;flex:1}
.slider-knob{width:14px;height:14px;background:#fff;border-radius:50%;flex:none}
.slider-rest{height:12px;background:var(--track);border-radius:4px 12px 12px 4px}
.slider-rest.w45{flex:0 0 45px}
.slider-rest.grow{flex:1}
.offer-row{flex-direction:row!important;align-items:center;justify-content:space-between!important;gap:8px}
.offer-price{display:flex;align-items:baseline;gap:8px;font-weight:600}
.offer-price .sum{font-size:12px;color:#fff}
.offer-price .sum.good{color:var(--green)}
.offer-price .dist{font-size:10px;color:var(--muted2)}
.offer-emoji{font-size:20px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',var(--sans)}
.hist-row{flex-direction:row!important;align-items:center;justify-content:space-between!important;gap:8px}
.hist-meta{display:flex;flex-direction:column;gap:6px;font-weight:600;min-width:0}
.hist-meta .when,.hist-meta .why{font-size:8px;color:var(--muted2)}
.hist-meta .sum{font-size:10px;color:#fff}
.badge{
  font-family:var(--sans);font-weight:700;font-size:8px;
  padding:4px 8px;border-radius:6px;flex:none;
}
.badge.ok{color:var(--green);background:#274c29;border:1px solid var(--green)}
.badge.no{color:var(--red);background:#4c2727;border:1px solid var(--red)}

/* ============ Map ============ */
.map-wrap{position:relative;margin-top:40px}
.us-map{width:100%;height:auto;display:block}
/* The wave: every state carries its own --wd delay, set in main.js from its horizontal
   position, so the blue sweeps west to east once when the map scrolls into view and then
   settles, leaving only the states we actually cover lit in the brand colour. */
.us-map path{
  fill:#1a1c20;stroke:#26292e;stroke-width:1;
  transition:fill .55s ease;
  transition-delay:var(--wd,0s);
}
.us-map.wave path{fill:var(--blue)}
.us-map.settle path{fill:#1a1c20;transition-delay:calc(var(--wd,0s) * .6)}
.us-map.settle path.keep{fill:var(--blue)}
@media (hover:hover){
  .us-map.settle path.keep:hover{fill:#1a6dff;transition-delay:0s}
}

/* ============ Pricing ============ */
.price-card{justify-content:space-between}
.price-top{display:flex;flex-direction:column;gap:20px}
.price-tag{color:var(--green);font-weight:600;font-size:12px}
.price-sum{color:#fff;font-weight:700;font-size:20px}
.price-list{display:flex;flex-direction:column;gap:10px;font-weight:600;font-size:13px;color:var(--muted)}
.price-list li:first-child{color:#fff}
.price-card .btn{height:50px;width:100%;font-size:14px;margin-top:20px}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:20px}
.faq-item{background:var(--faq);border-radius:var(--r-widget);overflow:hidden}
.faq-q{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:26px 20px;text-align:left;
  font-weight:600;font-size:16px;line-height:1.3;color:#fff;
}
.faq-q .chev{
  margin-left:auto;flex:none;font-weight:600;font-size:16px;color:#fff;
  transform:rotate(90deg);transition:transform .3s ease;
  width:21px;text-align:center;
}
.faq-item.open .faq-q .chev{transform:rotate(-90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 20px 26px;color:var(--muted);font-weight:500;font-size:13px;line-height:1.55}
.faq-a-inner a{color:#fff;text-decoration:underline;text-underline-position:from-font}

/* ============ Subpages: breadcrumbs, hero, article ============ */
.crumbs{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:32px;font-size:13px;color:var(--muted);
}
.crumbs a{color:var(--muted);transition:color .2s ease}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.45}
.crumbs .here{color:#fff}
.page-hero{padding-top:44px;text-align:center;position:relative}
.page-hero::before{
  content:"";position:absolute;inset:-180px 0 auto 0;height:460px;
  background:radial-gradient(520px 300px at 50% 0%,rgba(0,92,255,.1),transparent 70%);
  pointer-events:none;z-index:-1;
}
.page-hero h1{margin:0 0 20px;font-weight:600;font-size:32px;line-height:1.3;letter-spacing:-.01em}
.page-hero .lede{color:var(--muted);font-size:16px;line-height:24px;max-width:720px;margin-inline:auto}
.page-hero .updated{margin-top:16px;color:var(--muted2);font-size:13px}

.article{margin-top:24px}
.article > section{margin-top:56px;scroll-margin-top:calc(var(--header-h) + 24px)}
.article h2{margin:0 0 16px;font-weight:600;font-size:24px;line-height:1.3;letter-spacing:-.01em}
.article h3{margin:24px 0 10px;font-weight:700;font-size:16px;line-height:1.35;color:#fff}
.article p{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 16px}
.article p:last-child{margin-bottom:0}
.article strong{color:#fff;font-weight:700}
.article a{color:#fff;text-decoration:underline;text-underline-position:from-font;transition:color .2s ease}
.article a:hover{color:var(--blue-soft)}

/* numbered step lists */
.steps{display:flex;flex-direction:column;gap:12px;margin:20px 0 0;counter-reset:step;padding:0;list-style:none}
.steps li{
  position:relative;counter-increment:step;
  background:var(--card);border-radius:var(--r-widget);
  padding:16px 20px 16px 62px;
  color:var(--muted);font-size:15px;line-height:1.55;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:20px;top:17px;
  color:var(--blue-soft);font-weight:700;font-size:14px;
}
.steps li strong{color:#fff}

/* plain bullet list */
.dots{display:flex;flex-direction:column;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.dots li{position:relative;padding-left:22px;color:var(--muted);font-size:15px;line-height:1.55}
.dots li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;background:var(--blue);border-radius:2px}
.dots li strong{color:#fff}

/* callout note */
.note{
  background:var(--faq);border-radius:var(--r-widget);
  padding:16px 20px;margin:20px 0 0;
  display:flex;flex-direction:column;gap:8px;
  color:var(--muted);font-size:14px;line-height:1.55;
}
.note p{font-size:14px;margin:0}
.note .tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.note-green .tag{color:var(--green)}
.note-blue .tag{color:var(--blue-soft)}
.note-red .tag{color:var(--red)}

/* step section (install page) */
.step-eyebrow{display:block;color:var(--green);font-weight:600;font-size:12px;margin-bottom:10px;letter-spacing:.04em}

/* bottom CTA */
.cta-row{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:72px}
.cta-row .btn{min-width:280px}

/* ============ Footer ============ */
.site-footer{margin-top:var(--section-gap);padding-bottom:60px}
.footer-brand{display:flex;align-items:center;justify-content:center;gap:20px}
.footer-brand .brand-icon{width:40px;height:40px;border-radius:9px}
.footer-brand .brand-word{height:30px}
.footer-grid{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.footer-row{display:flex;gap:20px}
.footer-row .btn{flex:1}
.footer-links{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:center;
  margin-top:36px;
}
.footer-links a{color:var(--muted);font-size:13px;line-height:1.4;transition:color .2s ease}
.footer-links a:hover{color:#fff}
.copyright{margin-top:36px;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.copyright a{text-decoration:underline;text-underline-position:from-font;transition:color .2s ease}
.copyright a:hover{color:#fff}

/* ============ Hero checklist scroll highlight ============ */
.hero-checks li{transition:color .3s ease,transform .3s ease}
.hero-checks li.active{color:#fff;font-weight:700;transform:scale(1.02)}

/* ============ Feature showcase (tabs + app mock) ============ */
/* ============ Telegram community ============ */
.tg-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid rgba(0,92,255,.35);border-radius:var(--r-card);
  padding:32px;
  display:flex;align-items:center;gap:28px;
}
.tg-card::before{
  content:"";position:absolute;inset:-60% auto auto -10%;width:60%;height:220%;
  background:radial-gradient(closest-side,rgba(0,92,255,.18),transparent 75%);
  pointer-events:none;
}
/* The mark carries its own brand circle, so no tile behind it - a blue disc on a blue
   square just reads as mud. No rotation either: an official logo should not tilt. */
.tg-icon{
  position:relative;flex:none;width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
  animation:tgbob 4s ease-in-out infinite;
}
.tg-icon svg{width:72px;height:72px;display:block;filter:drop-shadow(0 10px 24px rgba(42,171,238,.28))}
@keyframes tgbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tg-copy{position:relative;display:flex;flex-direction:column;gap:8px;flex:1}
.tg-copy h2{margin:0;font-weight:600;font-size:20px;line-height:1.3;letter-spacing:-.01em}
.tg-copy p{color:var(--muted);font-size:14px;line-height:1.55}
.tg-copy p b{color:#fff;font-weight:700}
.tg-card .btn{position:relative;flex:none}


/* ============ 404 ============ */
.nf-wrap{min-height:calc(100vh - var(--header-h));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:60px 20px}
.nf-code{font-size:72px;font-weight:700;letter-spacing:.08em;line-height:1}
.nf-code b{color:var(--blue)}

/* ============ Reveal on scroll ============ */
/* Fail-open: content is visible by default. Only a page that has proven JS is running
   (html.js, set inline in <head>) hides it for the reveal animation. Without this a
   blocked, slow or errored script leaves the page at opacity:0 - blank for the user
   and for any crawler that does not execute scripts. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.js .reveal{opacity:1;transform:none;transition:none}}

/* ============ Mobile ============ */
@media (max-width:860px){
  .lang{position:relative;right:auto;top:auto;translate:none;margin-left:auto;flex:none}
  .main-nav{margin-inline:0;gap:24px}
  .head-crumbs{font-size:13px;gap:8px;padding-right:16px}
  .header-inner{padding-inline:20px;gap:20px}
}
@media (max-width:760px){
  :root{--section-gap:72px}
  .container{padding-inline:20px}
  .grid3,.grid2{grid-template-columns:1fr}
  .hero{padding-top:40px}
  .hero-stack{gap:32px}
  .hero-title{font-size:24px}
  .hero-sub{font-size:15px;line-height:1.55}
  .h2{font-size:20px;margin-bottom:32px}
  .hero-cta{gap:12px;width:100%}
  .hero-cta .btn{width:100%}
  .footer-row{flex-direction:column}
  .footer-row .btn{flex:none;width:100%}
  .main-nav{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent);padding-right:24px}
  .brand-icon{width:56px;height:56px}
  .brand-word{height:26px}
  .price-card .btn{height:54px}
  .tg-card{flex-direction:column;text-align:center;padding:28px 20px;gap:20px}
  .tg-card .btn{width:100%}
    .page-hero h1{font-size:24px}
  .article h2{font-size:20px}
  .article p{font-size:15px}
  .steps li{padding:14px 16px 14px 54px;font-size:14px}
  .steps li::before{left:16px;top:15px;font-size:13px}
  .dots li{font-size:14px}
  .cta-row{margin-top:56px;width:100%}
  .cta-row .btn{min-width:0;width:100%}
}
@media (max-width:560px){
  br.lb{display:none}
  .main-nav a{font-size:14px}
  .head-crumbs{font-size:12px;gap:6px}
  .lang-btn{font-size:14px}
  .faq-q{padding:20px 16px;font-size:15px}
  .faq-a-inner{padding:0 16px 20px}
}