/* ═══════════════════════════════════════════════════════════════════════
   Custom AI · site design system v8 — 2026-10-11
   One light system for ccustom.ai (landing + /for/ pages), /nailclub, the
   NailClub guide, its deck and the login page.

   The idea: a white, spatial, product-first page. The product is shown real
   inside exact device frames (/devices.css — Custom AI View) and the UI
   floats around it as glass cards with depth. Black for words and primary
   actions, one mint accent for the living parts (voice, highlights, glow).
   Headlines in Unbounded, reading in Inter, small labels in JetBrains Mono.
   Motion only moves what is alive: cards float, screens change as you
   scroll, numbers count. No colour washes behind text, no letter tricks.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#ffffff; --bg-2:#f5f7f6; --bg-3:#eaeeec; --card:#ffffff;
  --ink:#0a0d0c; --ink-2:#2f3835; --muted:#606c67; --faint:#98a19d;
  --hair:rgba(10,13,12,.08); --hair-2:rgba(10,13,12,.14);
  --mint:#10b981; --mint-600:#059669; --mint-700:#047857; --mint-900:#064e3b;
  --mint-50:#ecfdf5; --mint-100:#d1fae5; --mint-200:#a7f3d0; --mint-300:#6ee7b7;
  --accent:#059669; --accent-2:#047857; --accent-soft:#ecfdf5; --accent-ring:#d1fae5; --accent-ink:#064e3b;
  --btn-bg:#0a0d0c; --btn-fg:#ffffff; --btn-bg-h:#1b2320;
  --inv-bg:#0a0d0c; --inv-fg:#ffffff;
  --night:#0a0d0c; --night-2:#131917; --night-3:#1b2320;
  --rose:#e11d48; --rose-50:#fff1f2;
  --ring:inset 0 0 0 1px var(--hair);
  --sh-1:0 1px 2px rgba(10,13,12,.04),0 10px 26px -16px rgba(10,13,12,.14);
  --sh-2:0 2px 6px rgba(10,13,12,.04),0 24px 48px -20px rgba(10,13,12,.2);
  --sh-3:0 10px 30px -12px rgba(10,13,12,.12),0 50px 100px -30px rgba(10,13,12,.3);
  --glass-bg:rgba(255,255,255,.66); --glass-line:rgba(255,255,255,.85);
  --glass-sh:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.95),0 1px 1px rgba(10,13,12,.03),0 24px 60px -28px rgba(10,13,12,.3);
  --overlay:rgba(10,13,12,.55);
  --r-s:16px; --r-m:22px; --r-l:28px; --r-xl:36px; --pill:999px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,.6); --spring:cubic-bezier(.34,1.56,.64,1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Unbounded',var(--font);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display-w:700; --display-ls:-.02em;
  --wrap:1200px; --gutter:clamp(16px,4vw,32px);
  --nav-h:76px;
}
/* Unbounded has Latin and Cyrillic only; these scripts get Inter at 800. */
html:lang(el),html:lang(ka),html:lang(hy){--display:var(--font);--display-w:800;--display-ls:-.035em}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);color-scheme:light}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01";overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:var(--display-w);letter-spacing:var(--display-ls);line-height:1.1;color:var(--ink);text-wrap:balance}
strong,b{font-weight:650}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--mint-600);outline-offset:3px;border-radius:6px}
::selection{background:var(--mint-100);color:var(--ink)}

/* ── Layout ─────────────────────────────────────────────────────────── */
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sec{position:relative;padding:clamp(72px,9vw,128px) 0}
.sec--tight{padding:clamp(48px,6vw,80px) 0}
.sec--soft{background:var(--bg-2)}
.sec--dark{background:var(--night);color:#fff}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark .t-lead,.sec--dark .t-body{color:rgba(255,255,255,.7)}
.sh{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.sh--c{margin-inline:auto;text-align:center}
.sh .t-lead{margin-top:18px;max-width:640px}
.sh--c .t-lead{margin-inline:auto}
.grid{display:grid;gap:clamp(14px,2vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* ── Type ───────────────────────────────────────────────────────────── */
.t-display{font-size:clamp(32px,4.1vw,58px);line-height:1.04}
.t-h2{font-size:clamp(26px,3.15vw,44px);line-height:1.08}
.t-h3{font-size:clamp(18px,1.55vw,22px);font-weight:600;letter-spacing:-.012em;line-height:1.25}
.t-h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.t-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);font-weight:450;text-wrap:pretty}
.t-body{font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.t-small{font-size:14px;line-height:1.5;color:var(--muted)}
.t-num{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.m{color:var(--accent)}
.sec--dark .m,.card-dark .m{color:var(--mint-300)}
.kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-family:var(--mono);font-size:12px;font-weight:500;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--accent-ring)}
.sec--dark .kicker,.card-dark .kicker{color:var(--mint-300)}
.sec--dark .kicker::before,.card-dark .kicker::before{box-shadow:0 0 0 4px rgba(16,185,129,.22)}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:var(--pill);font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .2s,color .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 14px 30px -14px rgba(10,13,12,.6)}
.btn-primary:hover{background:var(--btn-bg-h);transform:translateY(-1px);box-shadow:0 18px 34px -14px rgba(10,13,12,.6),0 0 0 4px var(--mint-100)}
.btn-mint{background:var(--mint-600);color:#fff;box-shadow:0 14px 30px -14px rgba(5,150,105,.7)}
.btn-mint:hover{background:var(--mint-700);transform:translateY(-1px)}
.btn-secondary{background:var(--glass-bg);color:var(--ink);box-shadow:var(--glass-sh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn-secondary:hover{background:#fff;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--sh-1),var(--ring)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--sh-2),var(--ring)}
.btn-ink{background:var(--inv-bg);color:var(--inv-fg)}
.btn-ink:hover{background:var(--btn-bg-h);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.btn-lg{height:58px;padding:0 32px;font-size:17px}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-2);transition:gap .25s var(--ease)}
.link:hover{gap:10px}
.link svg{width:16px;height:16px}
.sec--dark .link{color:var(--mint-300)}

/* App Store badge: the official black badge drawn in CSS, so it scales crisp. */
.appstore{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 16px 0 13px;border-radius:12px;background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:transform .35s var(--ease),opacity .2s}
.appstore:hover{transform:translateY(-1px)}
.appstore svg{width:24px;height:24px}
.appstore span{display:flex;flex-direction:column;line-height:1.05;font-size:10.5px;font-weight:500;letter-spacing:.01em}
.appstore b{font-size:18px;font-weight:600;letter-spacing:-.02em}

/* ── Surfaces ───────────────────────────────────────────────────────── */
.card{background:var(--card);border-radius:var(--r-l);padding:clamp(22px,2.4vw,32px);box-shadow:var(--sh-2),var(--ring)}
.card-soft{background:var(--bg-2);border-radius:var(--r-l);padding:clamp(22px,2.4vw,32px)}
.sec--soft .card-soft{background:var(--card);box-shadow:var(--sh-1),var(--ring)}
.card-dark{position:relative;background:var(--night);color:#fff;border-radius:var(--r-l);padding:clamp(22px,2.4vw,32px)}
.card-dark h1,.card-dark h2,.card-dark h3{color:#fff}
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);box-shadow:var(--glass-sh);border-radius:var(--r-m)}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--pill);background:#fff;font-size:14.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1),var(--ring);white-space:nowrap}
.chip svg{width:16px;height:16px;color:var(--accent)}
.chip--soft{background:var(--bg-3);box-shadow:none}
.ic-box{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accent-soft);color:var(--accent)}
.ic-box svg{width:21px;height:21px}
.ic-box--dark{background:rgba(110,231,183,.14);color:var(--mint-300)}

/* ── Backgrounds that belong to the system ──────────────────────────────
   .field — the interactive dot grid behind a hero (motion.js dotgrid),
   masked so it lives around the product and dies before the text edge. */
.field{position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(70% 80% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 80% at 70% 45%,#000 20%,transparent 75%)}
.field.m-bg{position:absolute}
.glow{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(16,185,129,.3),rgba(16,185,129,.08) 50%,rgba(16,185,129,0) 72%);filter:blur(10px)}
@media (max-width:1000px){.field{-webkit-mask-image:radial-gradient(90% 60% at 50% 70%,#000 20%,transparent 75%);mask-image:radial-gradient(90% 60% at 50% 70%,#000 20%,transparent 75%)}}

/* ── Navigation: a glass capsule floating over the page ───────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding-top:10px;pointer-events:none}
.nav__in{pointer-events:auto;display:flex;align-items:center;gap:8px;height:58px;padding:0 9px 0 16px;border-radius:var(--pill);background:var(--glass-bg);-webkit-backdrop-filter:saturate(1.6) blur(22px);backdrop-filter:saturate(1.6) blur(22px);box-shadow:var(--glass-sh);transition:background-color .35s,box-shadow .35s}
.nav.scrolled .nav__in{background:rgba(255,255,255,.86)}
.nav__logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.nav__logo img{width:30px;height:30px}
.nav__logo b{color:var(--accent);font-weight:700}
.nav__logo span.tag{margin-left:2px;padding:4px 10px;border-radius:var(--pill);background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:650}
.nav__links{display:flex;gap:2px;margin:0 auto}
.nav__links a{padding:8px 13px;border-radius:var(--pill);font-size:14.5px;font-weight:550;color:var(--ink-2);transition:background-color .25s,color .25s}
.nav__links a:hover{background:rgba(10,13,12,.06);color:var(--ink)}
.nav__acts{display:flex;align-items:center;gap:6px;margin-left:auto}
@media (max-width:1000px){.nav__links{display:none}}
@media (max-width:600px){.nav__in{height:54px;padding:0 7px 0 11px}.nav__logo{font-size:0;gap:0}.nav__logo img{width:32px;height:32px}.nav__logo .tag,.nav__logo .x,.nav__logo .nc{display:none}.nav__acts{gap:2px}.nav__acts .btn-sm{height:38px;padding:0 14px;font-size:13.5px}}

/* Language button + picker (shared by the landing and /nailclub). */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 12px 0 8px;border-radius:var(--pill);color:var(--ink-2);font-size:14px;font-weight:600;transition:background-color .25s,color .25s}
.lang-btn:hover{background:rgba(10,13,12,.06);color:var(--ink)}
.lang-btn img{width:20px;height:20px;border-radius:50%;object-fit:cover}
#lang-pop{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;background:var(--overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#lang-pop.show{display:grid}
.lang-box{width:min(680px,100%);max-height:84vh;display:flex;flex-direction:column;border-radius:var(--r-l);background:#fff;box-shadow:var(--sh-3);overflow:hidden}
.lang-box h3{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px;font-size:19px}
.lang-box h3 button{width:36px;height:36px;border-radius:50%;background:var(--bg-3);font-size:22px;line-height:1}
#lang-list{overflow:auto;padding:6px 10px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px}
.lang-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;cursor:pointer}
.lang-row:hover{background:var(--bg-2)}
.lang-row.active{background:var(--accent-soft)}
.lang-row img,.lang-row .flag img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.lang-row .name{font-size:14.5px;font-weight:600}
.lang-row .code{margin-left:auto;font-size:12px;color:var(--faint);text-transform:uppercase}

/* ── Devices (Custom AI View frames, /devices.css + /devices.js) ─────────
   <div class="dev-slot" data-dev="iphone-16-pro" style="--w:300px">media</div>
   The slot sets the width; the builder scales the real-size device into it.
   Media is produced at the page size (402×812 / 1512×952), so it fits exactly. */
.dev-slot{position:relative;width:var(--w,320px);max-width:100%}
.dev-slot:not(.dev-mounted){aspect-ratio:414/886}
.dev-slot[data-dev="macbook-pro-14"]:not(.dev-mounted){aspect-ratio:1546/1084}
.dev-slot:not(.dev-mounted)>*{visibility:hidden}
.dev-slot .dev-shell{margin:0 auto}

/* ── Floating glass cards around a device ("spatial" UI) ──────────────── */
.fl{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:18px;font-size:14px;line-height:1.3;color:var(--ink);white-space:nowrap;will-change:transform;animation:flFloat 7s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.fl b{display:block;font-size:13px;font-weight:650;letter-spacing:-.01em}
.fl small{display:block;font-size:12px;color:var(--muted)}
.fl .ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.fl .ic svg{width:18px;height:18px}
.fl .ic--ink{background:var(--ink);color:#fff}
.fl .ic--mint{background:var(--mint-600);color:#fff}
.fl .av{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--mint-100);color:var(--mint-700);font-weight:700;font-size:14px}
.fl .ok{color:var(--accent)}
.wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.wave i{width:3px;height:30%;border-radius:2px;background:currentColor;animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--i,0)*.12s)}
@keyframes wave{0%,100%{height:30%}50%{height:100%}}
@keyframes flFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-10px,0)}}

/* ── Device: macOS window (for web-app screens inside cards) ────────── */
.win{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-3),var(--ring)}
.win__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--bg-2)}
.win__bar i{width:11px;height:11px;border-radius:50%;background:var(--bg-3)}
.win__bar i:nth-child(1){background:#ff5f57}.win__bar i:nth-child(2){background:#febc2e}.win__bar i:nth-child(3){background:#28c840}
.win__bar span{margin:0 auto;padding:4px 14px;border-radius:8px;background:#fff;font-size:12px;font-weight:500;color:var(--muted)}
.win>img{width:100%}

/* ── Reveal on scroll (opacity + rise, staggered by --i) ─────────────── */
/* JS adds .pre only to elements below the fold, then .in when they scroll in —
   without JS (or when it fails) nothing is ever hidden. */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.rv.pre{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none}

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot{padding:56px 0 calc(40px + env(safe-area-inset-bottom));background:var(--bg-2)}
.foot__top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px}
.foot__nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-left:auto}
.foot__nav a{font-size:14.5px;font-weight:550;color:var(--ink-2)}
.foot__nav a:hover{color:var(--accent)}
.foot__tag{margin-top:22px;font-size:14px;color:var(--muted);max-width:720px}
.foot__bottom{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13px;color:var(--faint)}

/* ── School sections (2026-10-12): money + access, shared by the landing and
   /nailclub. One Mac with a phone at its corner, a question chip, tiles. ── */
.duo{position:relative;max-width:1040px;margin-inline:auto;padding:0 0 7%}
.duo .glow{left:50%;top:50%;width:min(100%,80vw);aspect-ratio:1;transform:translate(-50%,-50%)}
.duo__mac{position:relative;--w:100%}
.duo .duo__phone{position:absolute;left:-2%;bottom:0;--w:27%;z-index:2}  /* .duo — сильніше за .dev-slot{position:relative}: телефон лягає на кут Mac, а не висить під ним */
.duo--r .duo__phone{left:auto;right:-2%}
.duo--solo{padding-bottom:0}
.duo__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:18px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.duo:not(.duo--r):not(.duo--solo) + .duo__cap{flex-direction:row-reverse}  /* телефон ліворуч — його підпис теж ліворуч */
.duo__cap span{display:inline-flex;align-items:center;gap:8px}
.duo__cap span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint)}
.ask{display:inline-flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:var(--pill);background:var(--ink);color:#fff;font-size:14.5px;font-weight:500;max-width:100%;text-align:left}
.ask i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--mint-600);color:#fff}
.ask svg{width:14px;height:14px}
.ask span{white-space:normal}
.ask-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}
.ask-row small{font-size:14px;color:var(--muted);text-align:center;max-width:520px}
.sm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,64px)}
.sm__it{display:flex;gap:14px;padding:22px;border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-1),var(--ring)}
.sm__it .ic-box{flex:none}
.sm__it b{display:block;font-size:16.5px;letter-spacing:-.01em;font-weight:650}
.sm__it small{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.ax{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(36px,5vw,64px)}
.ax__it{padding:24px;border-radius:var(--r-l);background:var(--bg-2)}
.sec--soft .ax__it{background:#fff;box-shadow:var(--sh-1),var(--ring)}
.ax__it b{display:block;margin-top:16px;font-size:17px;letter-spacing:-.012em;font-weight:650}
.ax__it p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--muted)}
.ax__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.ax__strip > div{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:var(--r-m);background:var(--ink);color:#fff}  /* > — внутрішній блок (заголовок над поясненням) лишається звичайним */
.ax__strip .ic-box{flex:none;width:36px;height:36px;border-radius:11px;background:rgba(110,231,183,.14);color:var(--mint-300)}
.ax__strip .ic-box svg{width:18px;height:18px}
.ax__strip b{display:block;font-size:14.5px;font-weight:650}
.ax__strip small{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.68)}
@media (max-width:1000px){.sm,.ax,.ax__strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.duo .duo__phone{left:-6%;--w:24%}}  /* широкий екран: телефон на бічне меню, не на «Борг перед школою» */
@media (max-width:900px){.duo__phone{--w:32%}}
@media (max-width:640px){.sm,.ax,.ax__strip{grid-template-columns:minmax(0,1fr)}.duo .duo__phone{--w:36%;left:0}.duo.duo--r .duo__phone{left:auto;right:0}}  /* телефон: без виносу за край — інакше сторінка їде вбік */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn,.link,.appstore{transition:none}
  .fl,.wave i{animation:none}
}