/* ============================================================
   Rework — POLISH layer (loaded LAST, after rework-fix.css).
   Purely additive: removing this one <link> fully reverts.
   Goals: calmer vertical rhythm · balanced bento · richer depth
   & micro-interactions · legible dark-on-dark cards.
   ============================================================ */

/* ---------- 1. VERTICAL RHYTHM — less dead space ----------
   clean.css uses 148px (≈296px between sections) — cavernous on
   wide screens. Keep generous, make it intentional. */
section.block{padding:clamp(74px, 7.4vw, 108px) 0;}
.sec-head{margin-bottom:clamp(36px, 3.2vw, 52px);}
.cta-band{padding-top:clamp(96px, 10vw, 132px);}

/* ---------- 2. BENTO — balance the big hero card ----------
   Desktop: centre the copy block and vertically centre a larger
   phone so the empty mid-band disappears. */
@media(min-width:901px){
  .bcard.b-lg{justify-content:center;padding:40px 42px;}
  .bcard.b-lg .btop{margin-bottom:24px;}
  .bcard.b-lg h3,
  .bcard.b-lg p{max-width:54%;}
  .bcard.b-lg .phone-mini{width:158px;top:50%;right:34px;
    transform:translateY(-50%) rotate(6deg);}
  .bcard.b-lg:hover .phone-mini{transform:translateY(-50%) rotate(2deg) scale(1.03);}
}
/* Mobile/tablet: tighten the icon→label gap so short cards read
   full instead of hollow, and let rows hug their content. */
@media(max-width:900px){
  .bento{grid-auto-rows:auto;}
  .bento .bcard .btop{margin-bottom:16px;}
}

/* ---------- 3. DEPTH — dark cards get a real lift on hover ---------- */
.step,.city,.cat{
  transition:transform .26s var(--ease), border-color .25s, background .25s, box-shadow .3s;
}
.step:hover{box-shadow:0 28px 60px -34px rgba(0,0,0,.85);}
.city:hover{transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(0,0,0,.8);}
.fcard:hover{box-shadow:0 36px 72px -40px rgba(0,0,0,.85);}
.bcard:hover{box-shadow:0 30px 64px -36px rgba(0,0,0,.8);}
/* light-world cards already carry their own soft shadow — don't double up */
.light .bcard:hover,.light .story:hover{box-shadow:0 28px 60px -30px rgba(20,20,12,.30);}

/* primary button: resting depth + crisper hover glow */
.btn-primary{box-shadow:0 10px 28px -16px rgba(var(--glow-1),.45);}
.btn-primary:hover{box-shadow:0 18px 46px -12px rgba(var(--glow-1),.6);}

/* ---------- 4. BUSINESS BENEFITS — fix dark-on-dark legibility ----------
   Original cards sit at rgba(12,12,16,.6) inside a dark spotlight and
   nearly vanish. Lift the surface + body text. */
.benefit{background:rgba(255,255,255,.05);border-color:var(--line-2);
  transition:background .22s, border-color .22s, transform .26s var(--ease);}
.benefit:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px);}
.benefit h3{font-size:17px;}
.benefit p{color:var(--soft);}

/* ---------- 5. category chip — warmer hover accent ---------- */
.cat:hover .d{box-shadow:0 0 0 4px rgba(var(--glow-1),.2);}

/* ---------- 6. counters — keep tails clear, add weight ---------- */
.trust .stat b{padding-bottom:.08em;}

/* ---------- 7. footer contact — quieter, evenly spaced ---------- */
.foot-bottom .contact span{position:relative;}

/* ---------- 8. HEADINGS — kill mid-word breaks ----------
   #why sec-head is pinned to an inline max-width:24ch (≈249px). A 60px
   headline can't fit "работает" (~264px) on one line, so overflow-wrap:
   break-word shatters the word into an orphan "т". Give it a real measure
   and forbid mid-word breaks on every display heading. */
#why .sec-head{max-width:min(92vw, 560px) !important;}
.sec-head h2,.act-copy h1,.spot h2,.dl h2,.cta-title{
  overflow-wrap:normal;word-break:keep-all;
}

/* ---------- 9. PRE-LAUNCH HONESTY — no dead links, no fake data ----------
   App isn't live yet: store buttons read "Скоро в …" and don't pretend to
   navigate; future pages are quiet non-links instead of href="#". Real
   contact paths (email) stay live. */
.store--soon{cursor:default;position:relative;}
.store--soon:hover{transform:none;}
.store--soon small{color:#777;}

/* social icons now render as non-link placeholders until handles go live */
.foot-social .soon{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--faint);
  opacity:.55;cursor:default;transition:opacity .2s;}

/* future-page footer links: quiet, intentional, never broken */
.foot-col a.soon,.foot-col .soon{display:block;color:var(--faint);font-size:14.5px;padding:6px 0;
  cursor:default;}
.foot-col .soon::after{content:"скоро";margin-left:8px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:999px;padding:2px 7px;vertical-align:1px;opacity:.7;}

/* footer contact email is a real link now */
.foot-bottom .contact a{color:var(--muted);transition:color .15s;}
.foot-bottom .contact a:hover{color:#fff;}

/* ---------- 12. CATEGORIES — one confident message, no ragged chip rows ----------
   12 left-packed chips wrapped into a jagged right edge. Now: a centred
   statement + a curated, balanced set + a dashed "и ещё" pill. */
#categories .sec-head{text-align:center;max-width:none;margin-left:auto;margin-right:auto;}
#categories .sec-head p{max-width:46ch;margin-left:auto;margin-right:auto;color:var(--soft);font-size:18px;}
#categories .cats{justify-content:center;max-width:840px;margin:0 auto;}
.cat-more{background:transparent;border-style:dashed;color:var(--muted);}
.cat-more:hover{color:#fff;border-color:var(--line-2);}

/* ---------- 14. NOTIFY / WAITLIST FORM (pre-launch email capture) ---------- */
.notify{display:flex;gap:10px;margin-top:28px;max-width:460px;flex-wrap:wrap;}
.notify-in{flex:1 1 200px;min-width:0;height:54px;padding:0 20px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:#fff;
  font-family:var(--font-body);font-size:15.5px;outline:none;
  transition:border-color .2s, background .2s, box-shadow .2s;}
.notify-in::placeholder{color:var(--muted);}
.notify-in:focus{border-color:var(--accent);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(var(--glow-1),.14);}
.notify-in[aria-invalid="true"]{border-color:#FF7A6B;box-shadow:0 0 0 4px rgba(255,122,107,.16);}
.notify .btn{flex:0 0 auto;}
.notify-msg{margin:16px 0 0;color:var(--accent);font-weight:600;font-size:15.5px;}
.notify-msg:empty{display:none;}
@media(max-width:480px){.notify{flex-direction:column;}.notify .btn{width:100%;}}

/* ---------- 15. STANDALONE DOC PAGES (About / Privacy / Terms) ---------- */
.doc-nav{position:sticky;top:0;z-index:90;background:rgba(8,8,11,.78);
  backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid var(--line);}
.doc-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.doc-nav .back{font-size:15px;color:var(--soft);font-weight:500;}
.doc-nav .back:hover{color:#fff;}
.doc{max-width:760px;margin:0 auto;padding:72px 28px 110px;}
.doc h1{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:0 0 14px;}
.doc .lead{color:var(--soft);font-size:19px;line-height:1.6;margin:0 0 8px;max-width:60ch;}
.doc h2{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:44px 0 12px;}
.doc p,.doc li{color:var(--soft);font-size:16.5px;line-height:1.72;}
.doc ul{padding-left:22px;margin:12px 0;}
.doc li{margin:6px 0;}
.doc a:not(.btn){color:var(--accent);}
.doc a:hover{text-decoration:underline;}
.doc .updated{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--faint);font-size:13.5px;font-family:var(--font-mono);letter-spacing:.04em;}

/* ---------- 13. GEOGRAPHY — "whole country" accent tile closes the grid ---------- */
.city-all{border-color:rgba(254,214,10,.5);color:#fff;background:rgba(254,214,10,.07);font-weight:700;}
.city-all:hover{border-color:var(--accent);background:rgba(254,214,10,.12);}
.city-all .pin{color:var(--accent);}

/* ---------- 11. SKIP LINK — keyboard users jump past the header (a11y) ---------- */
.skip-link{position:fixed;top:14px;left:14px;z-index:400;transform:translateY(-160%);
  background:var(--accent);color:var(--on-accent);font-family:var(--font-display);font-weight:700;
  font-size:15px;padding:12px 22px;border-radius:999px;box-shadow:0 14px 40px -12px rgba(var(--glow-1),.6);
  transition:transform .22s var(--ease);}
.skip-link:focus-visible{transform:none;outline:2px solid #fff;outline-offset:2px;}

/* ---------- 10. FAQ — accordion is a real <button> now (keyboard a11y) ---------- */
button.faq-q{width:100%;border:0;background:transparent;-webkit-appearance:none;appearance:none;
  text-align:left;color:#fff;font-family:var(--font-display);}
button.faq-q:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:var(--r-md);}


/* ---------- 16. CROSS-DOC VIEW TRANSITIONS (smooth nav to О нас/Политика/Условия) ---------- */
@view-transition { navigation: auto; }

/* ---------- 17. COOKIE / PRIVACY CONSENT BAR ---------- */
.cookie-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:350;
  display:flex;align-items:center;gap:16px;max-width:min(92vw,640px);
  padding:13px 16px 13px 22px;border-radius:18px;
  background:rgba(20,20,26,.92);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  animation:cookieIn .4s var(--ease) both;}
@keyframes cookieIn{from{opacity:0;transform:translate(-50%,16px);}to{opacity:1;transform:translate(-50%,0);}}
.cookie-bar[hidden]{display:none;}
.cookie-bar p{margin:0;font-size:13.5px;line-height:1.5;color:var(--soft);}
.cookie-bar a{color:var(--accent);}
.cookie-bar .btn{flex:none;}
@media(prefers-reduced-motion:reduce){.cookie-bar{animation:none;}}
@media(max-width:560px){.cookie-bar{left:10px;right:10px;bottom:10px;transform:none;max-width:none;gap:12px;padding:10px 12px;border-radius:14px;}
  .cookie-bar p{font-size:12px;line-height:1.4;text-align:left;}
  .cookie-bar .btn{height:44px;padding:0 16px;font-size:13px;}
  @keyframes cookieIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}}
/* ---------- 18. REFINED DISPLAY SERIF — elegant, thin, high-craft headlines ----------
   Energetic grotesk stays for UI/body; the big display moments get Fraunces
   (variable, optical sizing) at a light, refined weight for an editorial,
   award-grade feel. */
.intro-title,.act-copy h1,.sec-head h2,.cta-title,.dl h2,.spot h2,.doc h1{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif !important;
  letter-spacing:-.005em;
}
.sec-head h2,.dl h2,.spot h2{font-weight:500;}
.act-copy h1,.cta-title{font-weight:600;}
.intro-title{font-weight:500 !important;}
/* gradient keyword: a touch heavier so the high-contrast serif keeps presence */
.act-copy h1 .hl,.cta-title .hl{font-weight:700;}

/* ---------- 19. SERIF HEADLINE REVEAL — elegant mask wipe-up ----------
   Section headings rise from under a mask as they enter — showcases the
   Playfair serif. Additive on top of .reveal block fade. Generous negative
   insets so the gradient keyword's glow is never clipped. Reduced-motion: off. */
@media (prefers-reduced-motion: no-preference){
  .sec-head.reveal h2{ clip-path: inset(-40% -25% 120% -25%); transition: clip-path .9s var(--ease) .1s; }
  .sec-head.reveal.in h2{ clip-path: inset(-40% -25% -40% -25%); }
}

/* ---------- 20. CINEMATIC LOADER — serif wordmark + soft glow ----------
   Title-card intro: elegant Playfair "Rework", a breathing warm glow,
   a hair-thin progress line. Shows once per session (award.js). */
#loader{z-index:500;gap:28px;background:radial-gradient(120% 95% at 50% 40%, #15140f 0%, var(--bg) 58%);}
#loader::before{content:"";position:absolute;left:50%;top:50%;width:58vmin;height:58vmin;
  margin:-29vmin 0 0 -29vmin;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(254,214,10,.13), transparent 62%);filter:blur(46px);
  animation:ld-glow 2.6s var(--ease) infinite alternate;}
@keyframes ld-glow{from{opacity:.45;transform:scale(.92);}to{opacity:1;transform:scale(1.06);}}
.ld-inner{position:relative;z-index:1;gap:16px;}
.ld-inner svg{width:40px;height:40px;}
.ld-word{font-family:'Playfair Display', Georgia, serif !important;font-weight:500;
  font-size:clamp(42px,7vw,60px);letter-spacing:.005em;}
.ld-bar{position:relative;z-index:1;width:148px;height:2px;background:rgba(255,255,255,.13);}
.ld-bar i{box-shadow:0 0 16px rgba(254,214,10,.55);}
@media (prefers-reduced-motion: reduce){ #loader::before{animation:none;} }

/* ---------- 21. GLOBAL CURSOR GLOW (desktop) ---------- */
.cursor-glow{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;pointer-events:none;z-index:55;mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(circle, rgba(254,214,10,.09), transparent 62%);transition:opacity .35s;}
@media (hover:none),(prefers-reduced-motion:reduce){.cursor-glow{display:none;}}

/* ---------- 22. CARD LIGHT-SWEEP — sheen glides across bento + feature cards on hover ---------- */
@media (prefers-reduced-motion: no-preference){
  .bcard::after,.fcard::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    border-radius:inherit;opacity:0;transform:translateX(-115%);
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.07) 50%,transparent 62%);
    transition:transform .75s var(--ease),opacity .4s;}
  .bcard:hover::after,.fcard:hover::before{opacity:1;transform:translateX(115%);}
}

/* ---------- 23. LIQUID GLASS — refined translucent material on floating UI ----------
   Apple-style "liquid glass": stronger blur + saturation, a bright top rim,
   a soft inner sheen and real depth. Applied to floating controls/overlays. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .aud-track,.seg-mini,.chip,.cookie-bar,header.site.solid,.doc-nav,.mobile-menu{
    -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  }
  /* floating pills · chips · bar: top sheen + bright rim + depth */
  .aud-track,.seg-mini,.chip,.cookie-bar{
    background-image:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 48%);
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -10px 26px -18px rgba(0,0,0,.5), 0 16px 46px -18px rgba(0,0,0,.6);
  }
  /* header glass catches light on its lower rim */
  header.site.solid{box-shadow:inset 0 -1px 0 rgba(255,255,255,.08), 0 14px 38px -22px rgba(0,0,0,.6);}
}

/* ---------- 24. LIQUID-GLASS GHOST BUTTONS + hover light-sweep ---------- */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-ghost{position:relative;overflow:hidden;
    -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
    background-image:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 52%);
    border-color:rgba(255,255,255,.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px -16px rgba(0,0,0,.5);}
}
@media (prefers-reduced-motion: no-preference){
  .btn-ghost::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.14) 50%,transparent 64%);
    transform:translateX(-130%);transition:transform .7s var(--ease);}
  .btn-ghost:hover::after{transform:translateX(130%);}
  .btn-ghost>*{position:relative;z-index:1;}
}

/* ---------- 25. LIQUID-GLASS SPECULAR — light follows the pointer inside ghost buttons ---------- */
@media (prefers-reduced-motion: no-preference){
  .btn-ghost::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
    opacity:0;transition:opacity .3s;
    background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.16), transparent 60%);}
  .btn-ghost:hover::before{opacity:1;}
}

/* ---------- 26. LIQUID-GLASS SPECULAR on primary buttons ----------
   Glossy highlight follows the pointer across the yellow CTA. z-index:-1
   paints above the button's fill but below its text (same layer as the
   sweep) — so the label is never covered. */
@media (prefers-reduced-motion: no-preference){
  .btn-primary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
    opacity:0;transition:opacity .3s;
    background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.4), transparent 58%);}
  .btn-primary:hover::before{opacity:1;}
}

/* ---------- 27. CINEMATIC BENTO ENTRANCE — cards rise & scale in, staggered ---------- */
@media (prefers-reduced-motion: no-preference){
  .bento .bcard.reveal{transform:translateY(40px) scale(.965);}
  .bento .bcard.reveal.in{transform:none;}
}

/* ---------- 28. HERO CHIPS — hug the phone's LEFT edge (right side = app action rail) ----------
   c2 used to sit bottom-right and collided with the phone's like/share rail.
   Both chips now float along the calmer left edge, staggered. */
.hero-visual .chip.c1{top:12%;left:-4%;right:auto;}
.hero-visual .chip.c2{top:auto;bottom:15%;left:-4%;right:auto;}
@media(max-width:760px){
  .hero-visual .chip.c1{left:-2%;top:6%;right:auto;}
  .hero-visual .chip.c2{left:-2%;bottom:10%;right:auto;}
}

/* ---------- 29. "КАК ЭТО РАБОТАЕТ" — step numbers light up as you scroll to them ---------- */
@media (prefers-reduced-motion: no-preference){
  #steps .step .num{transition:transform .5s var(--spring), box-shadow .45s var(--ease);}
  #steps .step.active{border-color:var(--line-2);}
  #steps .step.active .num{transform:scale(1.08);
    box-shadow:0 0 0 5px rgba(var(--glow-1),.16), 0 12px 28px -8px rgba(var(--glow-1),.55);}
}

/* ---------- 30. SEO prose — crawlable "About Rework" block at the top of the footer ---------- */
.foot-seo{max-width:780px;margin:0 0 44px;padding-bottom:36px;border-bottom:1px solid var(--line);}
.foot-seo h2{font-family:'Playfair Display',Georgia,serif !important;font-weight:600;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em;margin:0 0 14px;color:#fff;}
.foot-seo p{color:var(--muted);font-size:14.5px;line-height:1.75;margin:0;text-wrap:pretty;}
.foot-seo p b{color:var(--soft);font-weight:600;}
@media(max-width:600px){.foot-seo{margin-bottom:32px;padding-bottom:28px;}}

/* ---------- 31. Typography hero — editorial italic-serif accent on display headlines.
   The highlighted word switches to Playfair italic (ital,600 is loaded) for an
   editorial, award-grade contrast against the upright serif around it. ---------- */
.intro-title .hl,.act-copy h1 .hl,.cta-title .hl,.sec-head h2 .hl,.dl h2 .hl,.spot h2 .hl{
  font-style:italic; font-weight:600; letter-spacing:.004em; padding-right:.06em;
}

/* ===== AI section (мэтчинг · эмбеддинги · модерация) ===== */
#ai .ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
#ai .ai-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;transition:border-color .25s, transform .3s var(--ease), box-shadow .3s;}
#ai .ai-card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(0,0,0,.85);}
#ai .ai-ic{width:54px;height:54px;border-radius:15px;background:rgba(var(--glow-1),.14);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:20px;}
#ai .ai-ic svg{width:28px;height:28px;}
#ai .ai-card .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
#ai .ai-card h3{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;margin:11px 0 9px;}
#ai .ai-card p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0;}
#ai .ai-pipe{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--surface-2),var(--bg-2));border:1px solid var(--line-2);border-radius:22px;padding:24px 26px;margin-top:18px;}
#ai .ai-step{display:flex;flex-direction:column;align-items:center;gap:9px;flex:1;text-align:center;}
#ai .ai-step .b{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--accent);}
#ai .ai-step .b svg{width:22px;height:22px;}
#ai .ai-step span{font-family:var(--font-display);font-weight:700;font-size:14px;}
#ai .ai-step small{color:var(--muted);font-size:11.5px;}
#ai .ai-arr{color:var(--muted);flex:none;}
@media(max-width:900px){#ai .ai-grid{grid-template-columns:1fr;}#ai .ai-pipe{flex-wrap:wrap;justify-content:center;gap:16px;}#ai .ai-arr{display:none;}#ai .ai-step{flex:0 0 40%;}}

/* AI strengths */
#ai .ai-str-lead{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:36px 0 16px;text-align:center;}
#ai .ai-strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
#ai .ai-str{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;transition:border-color .2s, transform .25s var(--ease);}
#ai .ai-str:hover{border-color:var(--line-2);transform:translateY(-2px);}
#ai .ai-str .c{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(var(--glow-1),.14);color:var(--accent);display:flex;align-items:center;justify-content:center;}
#ai .ai-str .c svg{width:18px;height:18px;}
#ai .ai-str b{font-family:var(--font-display);font-weight:700;font-size:15.5px;display:block;margin-bottom:3px;letter-spacing:-.01em;}
#ai .ai-str span{color:var(--muted);font-size:13px;line-height:1.5;}
@media(max-width:900px){#ai .ai-strengths{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){#ai .ai-strengths{grid-template-columns:1fr;}}


/* live web badge in the store row (the app stores are still "Скоро") */
.store--web{border-color:var(--accent);}
.store--web:hover{border-color:var(--accent);transform:translateY(-2px);}

/* ---------- 21. OFFICIAL STORE BADGES (некликабельные до релиза приложений) ---------- */
.store-badges{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;}
.store-badges img{height:52px;width:auto;display:block;opacity:.92;}
.store-badges img.gp{height:80px;margin:-14px 0;} /* официальный бейдж GP несёт прозрачные поля */
@media(max-width:560px){.store-badges{gap:10px;}.store-badges img{height:44px;}.store-badges img.gp{height:68px;margin:-12px 0;}}