/* LT Plate — цифри номерних знаків (гліфи: tools/plate_glyphs/*.svg, збірка: tools/make_plate_font.py).
   Лише 0-9, «-» і N; решта символів (N тощо) падає на наступний шрифт у стеку. */
@font-face{font-family:'LT Plate';src:url('lt-plate.woff2') format('woff2');font-weight:100 900;font-display:swap;}
/* Little Tsu — лендінг-хаб. Та сама мова, що й застосунок (необруталізм: 2px контур, жорстка тінь,
   Unbounded/Manrope, кольори рівнів N5–N1), але виразніше: велика типографіка, «японська вулиця»
   (номерний знак, лінія метро, табло відправлень, квитки). Лише цей файл + hub.js, без inline-стилів
   (CSP без 'unsafe-inline'). */
:root{
  --bg:#F4F4F0; --surface:#FFFFFF; --paper:#EAEAE3; --ink:#000; --muted:#4A4A4A; --line:#000;
  --accent:#FFDE25; --accent-wide:#E6B422; --accent-hover:#1E3A8A; --accent-text:#0F7A33; --why-kicker:#FFF; --hero-em:#007A8A; --hero-line:#FFDE25; --hero-edge:#000; --on-accent:#000; --shadow:#000;
  --lv5:#2563EB; --lv4:#B45309; --lv3:#7C3AED; --lv2:#047857; --lv1:#B91C1C;
  --board:#111; --board-ink:#FFC940; --board-dim:#8A8A8A;
  --r:6px; --gut:16px; --max:1180px;
  --sh:none; --sh-lg:none;
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-display:'Unbounded','Manrope',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
  --f-jp:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --f-flap:'Big Shoulders Display','Oswald',sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B0B0B; --surface:#1A1A1A; --paper:#141414; --ink:#FFF; --muted:#B5B5B5; --line:#FFF;
    --accent-hover:#3B5BDB; --accent-text:#FFF; --why-kicker:#0F7A33; --hero-em:#00B2CB; --hero-line:#FFDE25; --hero-edge:transparent; --shadow:#FFF;
    --lv5:#6EA0FF; --lv4:#F59E0B; --lv3:#A78BFA; --lv2:#34D399; --lv1:#F87171;
    --board:#050505;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.6 var(--f-body);overflow-x:hidden}
[lang="ja"]{font-family:var(--f-jp)}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
@media (min-width:720px){:root{--gut:32px}}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;font-weight:700}
.skip:focus{left:8px}

/* ── Кнопки (як у застосунку: 2px, тінь 3px, натиск = зсув 2px) ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:0 18px;
  font:700 14px/1 var(--f-display);letter-spacing:.01em;text-decoration:none;color:var(--ink);background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r);box-shadow:3px 3px 0 var(--shadow);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .2s}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--shadow)}
@media (hover:hover){.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--shadow)}}
.btn-accent{background:var(--accent);color:var(--on-accent);border-color:#000}
@media (hover:hover){.btn-accent:hover{background:var(--accent-hover);color:#fff;border-color:var(--line)}}
.btn-ghost{background:var(--bg)}
.btn-ink,.btn-ink:active{background:#000;color:#fff;border-color:#000;box-shadow:none;transform:none}
@media (hover:hover){.btn-ink:hover{background:#fff;color:#000;border-color:#000;box-shadow:none;transform:none}}
.btn-ink:focus-visible{background:#fff;color:#000}
.btn-lg{min-height:56px;padding:0 26px;font-size:16px}
.btn-sm{min-height:40px;padding:0 14px;font-size:13px}

/* ── Шапка ── */
.lang-pick{position:relative;margin-left:auto}
.lang-pick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;
  border:2px solid var(--line);border-radius:var(--r);font:700 13px/1 var(--f-display)}
.lang-pick summary::-webkit-details-marker{display:none}
.lang-pick[open] summary{background:var(--ink);color:var(--bg)}
.lp-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:200px;display:flex;flex-direction:column;padding:6px;
  background:var(--surface);border:2px solid var(--line);border-radius:var(--r);box-shadow:none}
.lp-menu a{padding:10px 12px;font:700 15px/1.3 var(--f-body);text-decoration:none;border-radius:4px}
.lp-menu a[aria-current]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.lp-menu a:hover{background:var(--paper)}.lp-menu a[aria-current]:hover{background:var(--ink)}}

.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-bottom:2px solid var(--line);backdrop-filter:saturate(1.2) blur(6px);-webkit-backdrop-filter:saturate(1.2) blur(6px)}
.top-in{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:36px;height:36px}
.brand-word{display:flex}.brand-word img{height:22px;width:auto;display:block}
.top-nav{display:none;gap:4px;margin-left:auto}
@media (min-width:900px){.top-nav + .lang-pick{margin-left:0}}
.top-nav a{font:700 13px/1 var(--f-display);text-decoration:none;padding:12px 12px;border-radius:4px}
@media (hover:hover){.top-nav a:hover{background:var(--paper)}}
.top .btn{margin-left:0}
@media (min-width:900px){.top-nav{display:flex}.top .btn{margin-left:8px}}

/* ── Hero ── */
.hero{position:relative;padding:48px 0 28px;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.hero-grid{display:grid;gap:40px;align-items:center}
@media (min-width:980px){.hero{padding:80px 0 36px}.hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px}}
/* minmax(0,…): довге нерозривне слово заголовка (укр. «Українською.» ≈ 9.8em) більше не розпирає колонку тексту
   й не стискає ілюстрацію до мініатюри. Сам укр. заголовок масштабується від ширини колонки тексту (cqi). */
.hero-copy{container-type:inline-size;min-width:0}
:lang(uk) .hero-title{font-size:clamp(30px,10cqi,92px)}
@media (min-width:980px){:lang(uk) .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:8px 14px;background:var(--surface);
  border:2px solid var(--line);border-radius:999px;font:700 13px/1.2 var(--f-display);box-shadow:none}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid #000;animation:pulse 2s infinite}
@keyframes pulse{50%{transform:scale(1.35)}}
.hero-title{margin:0;font:900 clamp(40px,8.4vw,92px)/1.08 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.hero-title em{font-style:normal;color:var(--bg);-webkit-text-stroke:.06em var(--ink);paint-order:stroke fill;letter-spacing:.065em;
  text-decoration:underline var(--hero-line);text-decoration-thickness:.12em;text-underline-offset:.1em;
  text-decoration-skip-ink:all;animation:swipe .7s .55s var(--ease) both;
  /* тонка чорна обводка жовтого підкреслення: text-shadow малюється і під лінією підкреслення */
  text-shadow:0 1.5px var(--hero-edge),0 -1.5px var(--hero-edge)}
@keyframes swipe{from{text-decoration-color:transparent;text-shadow:none}}
.hero-sub{max-width:34em;margin:24px 0 0;font-size:clamp(17px,2vw,19px);color:var(--muted)}
.hero-sub b{color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-ticks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;font:600 14px/1.4 var(--f-body)}
.hero-ticks li::before{content:'✓';display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;
  background:var(--lv2);color:#fff;border-radius:50%;font-size:12px;font-weight:800}
@media (prefers-color-scheme:dark){.hero-ticks li::before{color:#000}}

.hero-art{position:relative;display:flex;flex-direction:column;align-items:center;container-type:inline-size;width:100%;max-width:560px;justify-self:center;padding-bottom:12px}
.flip-word{position:relative;display:flex;justify-content:center;margin:0 0 -9cqw;
  font:900 25cqw/1 var(--f-jp);letter-spacing:-.06em;color:var(--bg);
  -webkit-text-stroke:4px var(--ink);paint-order:stroke fill;letter-spacing:.03em;perspective:600px;user-select:none}
.fw{display:inline-block;transform-origin:50% 0;animation:page 1s var(--ease) both}
.fw:nth-child(1){animation-delay:.1s}.fw:nth-child(2){animation-delay:.22s}.fw:nth-child(3){animation-delay:.34s}.fw:nth-child(4){animation-delay:.46s}
.fw:nth-child(odd){color:var(--accent);-webkit-text-stroke:4px #000}
@keyframes page{from{transform:rotateX(-100deg);opacity:0}}
.card-stack{position:relative;width:min(290px,54cqw);z-index:2;margin-right:-4%;animation:rise .9s .35s var(--ease) both}
@keyframes rise{from{transform:translateY(40px) rotate(4deg);opacity:0}}
.fcard{position:absolute;inset:0;background:var(--surface);border:2px solid var(--line);border-radius:14px;box-shadow:none}
.fcard-back2{transform:rotate(-11deg) translate(-18px,8px);background:#0F7A33}
.fcard-back1{transform:rotate(-5deg) translate(-8px,2px);background:var(--paper)}
.fcard-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:rotate(4deg);
  box-shadow:none;transition:transform .4s var(--ease);
  /* Передня картка — у потоці, пропорція 3:4. Увесь вміст розмірено в cqw САМОЇ КАРТКИ: на будь-якій ширині
     (вузька колонка героя на десктопі, телефон) ієрогліф/кана/бейдж масштабуються разом із карткою і 3:4 тримається.
     3:4 — мінімум: якщо ОС/браузер збільшить текст, картка підросте, а не вилізе вміст. Задні картки тягнуться за нею. */
  position:relative;inset:auto;aspect-ratio:3/4;box-sizing:border-box;container-type:inline-size;
  padding:15% 6% 8%;gap:2.6cqw}   /* % відступів — від ширини картки; cqw нижче — від ширини вмісту картки (≈0.88 ширини) */
.fcard-front .fc-kana{font-size:9.5cqw}
.fcard-front .fc-kanji{font-size:64cqw}
.fcard-front .fc-tr{font-size:8.2cqw}
.fcard-front .lvl{top:5.5cqw;left:5.5cqw;padding:1.8cqw 3.8cqw;font-size:5.4cqw}
@media (hover:hover){.hero-art:hover .fcard-front{transform:rotate(0) translateY(-6px)}}
.fc-kana{font-size:18px;font-weight:700;color:var(--muted)}
.fc-kanji{font-size:clamp(80px,22cqw,130px);font-weight:900;line-height:1}
.fc-tr{font:700 16px/1 var(--f-display)}
.lvl{position:absolute;top:12px;left:12px;padding:4px 9px;border-radius:999px;color:#fff;font:700 12px/1 var(--f-display);border:2px solid #000}
.lvl.lv5{background:#2563EB}
.plate{position:absolute;z-index:3;right:2%;bottom:2%;width:min(210px,38cqw);aspect-ratio:2/1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:2%;background:linear-gradient(165deg,#fff,#EDEDE6);color:#0B6E2E;
  border:2px solid #000;border-radius:9%/18%;box-shadow:none;transform:rotate(-6deg);container-type:inline-size;
  animation:rise .9s .6s var(--ease) both}
/* Отвори під болти — овально-прямокутні (як на справжніх номерах), не круглі */
.plate::before,.plate::after{content:'';position:absolute;top:13%;width:9%;aspect-ratio:2.2/1;border-radius:999px;background:#C8C8C0;border:1px solid #888}
.plate::before{left:7%}.plate::after{right:7%}
/* Виміряно canvas'ом: «日本語» (Noto 700) — чорнило від -.09 до .85em (висота .94, центр .38);
   «300» (LT Plate) — від -.02 до .76em. Тож цифрам 1.21em (однакова висота) і опускаємо на .06em,
   щоб центри збіглися. */
.plate-top{font:700 11cqw/1 var(--f-jp);white-space:nowrap}
.plate-top b{font-family:'LT Plate',var(--f-jp);font-size:1.21em;font-weight:400;vertical-align:-.06em}
/* Рядок «ッ N5-N1» центрується цілим, як і «日本語 300». ッ піднято так, щоб її центр
   збігся з центром N: чорнило ッ має центр .25 її em, N — .37em рядка → vertical-align .63em. */
/* «1» моноширинна: праворуч від її штриха ~.2em порожнечі → margin-right:-.2em, щоб по центру було чорнило, а не бокс */
.plate-bot{font:900 25cqw/1 'LT Plate',var(--f-display);letter-spacing:0;white-space:nowrap;margin-right:.1em}
/* margin-right від'ємний: з'їдає пробіл у розмітці (у LT Plate він .26em), щоб ッ стояла впритул до N */
.plate-bot span{font-family:var(--f-jp);font-size:.42em;margin-right:-.4em;vertical-align:.63em}
.hero-note{margin-top:30px;font-size:14px;color:var(--muted)}
.hero-note span{font-weight:900;color:var(--ink)}

/* ── Бігучий рядок ── */
.marquee{overflow:hidden;background:var(--accent-wide);border-block:2px solid #000;color:#000}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq-track span{padding:14px 26px;font:900 clamp(22px,3.4vw,34px)/1 var(--f-jp);white-space:nowrap}
.mq-track .o{color:var(--accent);-webkit-text-stroke:3px #000;paint-order:stroke fill}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── Цифри ── */
.stats-sec{margin-top:56px;margin-bottom:24px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:2px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:none}
.stat{padding:22px 18px;display:flex;flex-direction:column;gap:4px}
.stat:nth-child(odd){border-right:2px solid var(--line)}
.stat:nth-child(-n+2){border-bottom:2px solid var(--line)}
.num{font:900 clamp(28px,8.5vw,56px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font-weight:600;color:var(--muted);font-size:15px}
@media (min-width:820px){.stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:28px 26px}.stat:nth-child(-n+2){border-bottom:0}.stat:not(:last-child){border-right:2px solid var(--line)}}

/* ── Заголовки секцій ── */
section{scroll-margin-top:72px}
.kicker{margin:0 0 10px;font:900 15px/1 var(--f-jp);letter-spacing:.3em;color:var(--accent-text)}
.h2{margin:0;font:900 clamp(30px,5vw,56px)/1.02 var(--f-display);letter-spacing:-.03em;max-width:16em;text-wrap:balance}
.lead{max-width:40em;margin:18px 0 0;color:var(--muted);font-size:18px}

/* ── Лінія метро ── */
.route{padding:88px 0 40px}
.line{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;position:relative}
.st{--c:var(--ink);position:relative;display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto auto;column-gap:18px;
  padding:0 0 30px}
.st-a{--c:var(--ink)}.st-5{--c:var(--lv5)}.st-4{--c:var(--lv4)}.st-3{--c:var(--lv3)}.st-2{--c:var(--lv2)}.st-1{--c:var(--lv1)}
.st::before{content:'';position:absolute;left:27px;top:12px;bottom:-12px;width:10px;background:var(--c);border:2px solid #000;border-block:0}
.st:last-child::before{display:none}
.st-dot{grid-row:1/4;position:relative;z-index:1;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface);border:7px solid var(--c);box-shadow:0 0 0 2px #000;
  font:900 18px/1 var(--f-display);color:var(--ink)}
.st-dot [lang]{font-size:24px}
.st-code{grid-column:2;font:800 12px/1 var(--f-display);letter-spacing:.12em;color:var(--c);margin-top:6px}
.st b{grid-column:2;font:900 21px/1.2 var(--f-display);margin-top:6px}
.st>span:not(.st-dot):not(.st-code){grid-column:2;color:var(--muted);font-size:15px;margin-top:4px;max-width:34em}
.st-tag{grid-column:2;justify-self:start;align-self:flex-start;margin-top:10px;padding:4px 10px;font:700 12px/1.2 var(--f-display);font-style:normal;
  border:2px solid var(--line);border-radius:999px;background:var(--paper)}
.st-tag.free{background:var(--lv2);color:#fff;border-color:#000}
@media (prefers-color-scheme:dark){.st-tag.free{color:#000}}
@media (min-width:1000px){
  .line{grid-template-columns:repeat(6,1fr);gap:0 14px;margin-top:60px}
  .line::before{content:'';position:absolute;left:calc((100% - 70px)/12);right:calc((100% - 70px)/12);top:27px;height:10px;
    background:linear-gradient(90deg,var(--ink) 0 10%,var(--lv5) 10% 30%,var(--lv4) 30% 50%,var(--lv3) 50% 70%,var(--lv2) 70% 90%,var(--lv1) 90%);
    border-block:2px solid #000}
  .st{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0}
  .st-tag{align-self:center}
  .st>span:not(.st-dot):not(.st-code){flex:1}
  .st b{min-height:2.4em}
  .st::before{display:none}
  .st-dot{order:0}.st-code{order:1;margin-top:18px}.st b{order:2}.st>span:not(.st-dot):not(.st-code){order:3}.st-tag{order:4}
}

/* ── Можливості (бенто) ── */
.features{padding:80px 0}
.bento{display:grid;gap:18px;margin-top:40px;grid-template-columns:1fr}
@media (min-width:700px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.bento{grid-template-columns:repeat(6,1fr);gap:22px}
  .t-vocab,.t-kanji,.t-grammar{grid-column:span 2}.t-listen,.t-mock{grid-column:span 3}
  .t-progress{grid-column:span 4}.t-offline{grid-column:span 2}}
.tile{background:var(--surface);border:2px solid var(--line);border-radius:12px;box-shadow:none;padding:18px;
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
@media (hover:hover){.tile:hover{transform:translate(-2px,-2px);box-shadow:none}}
.tile h3{margin:18px 0 6px;font:900 20px/1.2 var(--f-display)}
.tile p{margin:0;color:var(--muted);font-size:15px}
.demo{position:relative;height:170px;border:2px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden;
  display:grid;place-items:center}
.t-vocab .demo{background:color-mix(in srgb,var(--lv5) 16%,var(--paper))}
.t-kanji .demo{background:color-mix(in srgb,var(--lv1) 12%,var(--paper))}
.t-grammar .demo{background:color-mix(in srgb,var(--lv3) 14%,var(--paper))}
.t-listen .demo{background:color-mix(in srgb,var(--lv2) 14%,var(--paper))}
.t-mock .demo{background:color-mix(in srgb,var(--lv4) 16%,var(--paper))}
.t-offline .demo{background:var(--accent-wide)}

.demo-flip{perspective:700px}
.flip-inner{position:relative;width:150px;height:110px;transform-style:preserve-3d;animation:flip 5s var(--ease) infinite}
.flip-a,.flip-b{position:absolute;inset:0;display:grid;place-items:center;align-content:center;background:var(--surface);
  border:2px solid var(--line);border-radius:10px;box-shadow:none;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-a{font:900 44px/1 var(--f-jp)}
.flip-b{transform:rotateY(180deg);font:700 17px/1.3 var(--f-display);gap:4px}
.flip-b [lang]{font:700 15px/1 var(--f-jp);color:var(--muted)}
@keyframes flip{0%,38%{transform:rotateY(0)}50%,88%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

.strokes{width:118px;height:118px;fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.strokes path{stroke-dasharray:1;stroke-dashoffset:1}
.demo-kanji.on .strokes path{animation:draw .55s var(--ease) forwards}
.demo-kanji.on .strokes path:nth-child(2){animation-delay:.6s}
.demo-kanji.on .strokes path:nth-child(3){animation-delay:1.2s}
.demo-kanji.on .strokes path:nth-child(4){animation-delay:1.8s}
@keyframes draw{to{stroke-dashoffset:0}}
.demo-kanji{grid-template-rows:1fr auto;padding:10px}
.k-meta{font:700 13px/1 var(--f-display);color:var(--muted)}

.demo-build{grid-template-rows:auto auto auto;align-content:center;gap:12px;padding:10px}
.slots,.bank{display:flex;gap:6px;justify-content:center;min-height:38px;flex-wrap:wrap}
.slots{border-bottom:2px dashed var(--line);padding-bottom:10px;min-width:220px}
.tl{padding:7px 10px;background:var(--surface);border:2px solid var(--line);border-radius:6px;box-shadow:none;
  font:700 16px/1 var(--f-jp);animation:pop .3s var(--ease)}
.slots .tl{background:var(--lv3);color:#fff;border-color:#000}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.b-tr{text-align:center;font:700 13px/1 var(--f-display);color:var(--muted);opacity:0;transition:opacity .3s}
.demo-build.done .b-tr{opacity:1}

.demo-chat{align-content:center;justify-items:stretch;gap:8px;padding:14px}
.bub{margin:0;max-width:85%;padding:8px 12px;font:700 14px/1.35 var(--f-jp);background:var(--surface);border:2px solid var(--line);border-radius:12px}
.bub.l{justify-self:start;border-bottom-left-radius:2px}
.bub.r{justify-self:end;background:var(--lv2);color:#fff;border-color:#000;border-bottom-right-radius:2px}
.wave{display:flex;gap:4px;align-items:center;justify-content:center;height:26px}
.wave i{width:5px;height:100%;background:var(--ink);border-radius:3px;animation:wv 1s ease-in-out infinite;transform-origin:center}
.wave i:nth-child(3n){animation-delay:-.3s}.wave i:nth-child(3n+1){animation-delay:-.6s}.wave i:nth-child(4n){animation-duration:.8s}
@keyframes wv{50%{transform:scaleY(.25)}}

.demo-mock{align-content:center;justify-items:center;gap:12px}
.clock{font:800 64px/1 var(--f-flap);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding:6px 16px;background:#111;color:var(--board-ink);
  border:2px solid #000;border-radius:6px;box-shadow:none}
.mock-bar{width:70%;height:12px;border:2px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden}
.mock-bar i{display:block;height:100%;width:62%;background:var(--lv4);border-right:2px solid #000}
.mock-lbl{font:700 12px/1 var(--f-display);letter-spacing:.06em}

.demo-heat{padding:14px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:4px;height:100%;width:100%}
.heat i{border-radius:3px;background:color-mix(in srgb,#FF5C00 calc(var(--v,0) * 25%),var(--surface));border:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
.heat i.v0{--v:0}.heat i.v1{--v:1}.heat i.v2{--v:2}.heat i.v3{--v:3}.heat i.v4{--v:4}

.demo-off{align-content:center;justify-items:center;gap:6px;color:#000}
.plane{font-size:64px;line-height:1;animation:fly 4s ease-in-out infinite}
@keyframes fly{50%{transform:translate(8px,-8px) rotate(-6deg)}}
.off-lbl{font:900 14px/1 var(--f-display);letter-spacing:.08em;padding:5px 10px;background:#000;color:#fff;border-radius:4px}
.also{margin:22px 0 0;padding:18px 22px;font-size:17px;line-height:1.6;color:var(--ink);border:2px dashed color-mix(in srgb,var(--line) 35%,transparent);border-radius:var(--r);text-wrap:pretty}

/* ── Рідна мова / транслітерація ── */
.why{padding:80px 0;background:var(--ink);color:var(--bg)}
.why .kicker{color:var(--why-kicker)}  /* блок інвертований: підпис протилежний до звичайних */
.why .lead{color:color-mix(in srgb,var(--bg) 75%,var(--ink))}
.why-grid{display:grid;gap:40px;align-items:center}
.why-grid>*{min-width:0}
@media (min-width:960px){.why-grid{grid-template-columns:1fr 1fr;gap:56px}}
.translit{display:grid;grid-template-columns:auto 1fr 1fr;background:var(--bg);color:var(--ink);border:2px solid var(--bg);border-radius:12px;box-shadow:none;overflow:hidden}
.tr-head,.tr-row{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:16px 18px;column-gap:18px}
.tr-head{background:var(--paper);font:700 12px/1.2 var(--f-display);letter-spacing:.05em;text-transform:uppercase;border-bottom:2px solid var(--line)}
/* «Коваленко» + «(Little Tsu)» під ним, відцентровано по слову; «Поліванов» — на рівні першого рядка */
.tr-head{align-items:start}
.tr-head>span:has(.tr-sub){display:inline-flex;flex-direction:column;align-items:center;justify-self:start}
.tr-head .tr-sub{display:block;margin-top:4px;font-size:10px;letter-spacing:.06em;color:var(--muted,inherit);opacity:.75}
.tr-row{border-bottom:2px solid var(--line)}
.tr-row [lang="ja"]{font:900 clamp(18px,5vw,22px)/1 var(--f-jp);white-space:nowrap}
.tr-row b{font:900 clamp(16px,4.4vw,20px)/1.2 var(--f-display);color:var(--lv2)}
.tr-row s{font:600 clamp(15px,4vw,18px)/1.2 var(--f-body);color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--lv1)}
@media (max-width:519px){
  .translit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tr-head>span:first-child{display:none}
  .tr-row{row-gap:6px}
  .tr-row [lang="ja"]{grid-column:1/-1}
}
.tr-row b,.tr-row s{min-width:0;overflow-wrap:break-word;hyphens:auto}
.tr-note{grid-column:1/-1;margin:0;padding:16px 18px 18px;font-size:14px;color:var(--muted)}

/* ── Табло відправлень ── */
.board-sec{padding:88px 0}
.board{margin-top:36px;background:var(--board);border:2px solid #000;border-radius:12px;box-shadow:none;padding:10px;color:var(--board-ink)}
.brd-head,.brd-row{display:grid;grid-template-columns:1fr 56px auto;align-items:center;gap:12px;padding:12px 14px}
@media (min-width:760px){.brd-head,.brd-row{grid-template-columns:1.4fr 80px 1.3fr 150px}}
.brd-head{font:800 12px/1 var(--f-display);letter-spacing:.12em;color:var(--board-dim);text-transform:uppercase;border-bottom:1px dashed #333}
.brd-host{display:none}
@media (min-width:760px){.brd-host{display:block}}
.brd-row{text-decoration:none;border-bottom:1px solid #222;border-radius:6px;min-height:60px;transition:background-color .15s}
.brd-row:last-child{border-bottom:0}
@media (hover:hover){.brd-row:hover{background:#1f1f1f}.brd-row:hover .brd-go{background:var(--board-ink);color:var(--board)}}
.brd-row:focus-visible{outline-color:var(--board-ink)}
.flap{font:800 clamp(22px,3vw,30px)/1.1 var(--f-flap);letter-spacing:.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flap.my{font-family:'Noto Sans Myanmar','Big Shoulders Display',sans-serif;font-size:clamp(17px,2.4vw,22px)}
.brd-code{font:800 20px/1 var(--f-flap);padding:6px 0;text-align:center;background:#222;color:#fff;border-radius:4px;letter-spacing:.08em}
.brd-url{font:600 14px/1.2 ui-monospace,Menlo,monospace;color:var(--board-dim);display:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:760px){.brd-url{display:block}}
.brd-go{justify-self:end;font:800 13px/1 var(--f-display);letter-spacing:.06em;padding:8px 12px;border:2px solid var(--board-ink);border-radius:4px;
  color:var(--board-ink);white-space:nowrap;transition:background-color .15s,color .15s}
.brd-go::after{content:'→';font-size:18px}
.go-t{display:none}
@media (min-width:760px){.go-t{display:inline}.brd-go::after{content:none}}
.brd-row.here .brd-go{background:var(--board-ink);color:#000}
.brd-row.here .flap{font:900 clamp(22px,2.8vw,30px)/1.15 var(--f-display);letter-spacing:-.02em;color:#fff}
.brd-row.here .flap.my{font-family:'Noto Sans Myanmar',var(--f-body);font-size:clamp(20px,2.8vw,26px)}
.brd-row.here .flap::after{content:' ●';color:var(--accent);font-size:.6em;vertical-align:.3em}

/* ── Квитки ── */
.tickets-sec{padding:40px 0 88px}
.tickets{display:grid;gap:26px;margin-top:40px}
@media (min-width:900px){.tickets{grid-template-columns:1fr 1fr;gap:32px}}
.ticket{display:grid;grid-template-columns:1fr 76px;background:var(--surface);border:2px solid var(--line);border-radius:14px;box-shadow:none;
  position:relative;overflow:hidden}
.ticket::before{content:'';position:absolute;right:76px;top:0;bottom:0;border-left:2px dashed var(--line)}
.tk-main{padding:26px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.tk-class{font:800 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:2px solid var(--line);border-radius:4px}
.tk-price{font:900 clamp(34px,4.6vw,48px)/1 var(--f-display);letter-spacing:-.03em}
.ticket ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:16px}
.ticket li{padding-left:28px;position:relative}
.ticket li::before{content:'→';position:absolute;left:0;font-weight:800;color:var(--accent-text)}
.tk-note{margin:0;font-size:14px;color:var(--muted)}
/* корінець: обидва квитки — смуги свого кольору; назва (вертикально) і маршрут — на білих «штампах» по центру */
.tk-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;padding:30px 0;
  background:repeating-linear-gradient(45deg,var(--lv2) 0 12px,color-mix(in srgb,var(--lv2) 72%,#000) 12px 24px)}
/* експрес — жовтий фірмовий (червоний читався як «заборона») */
.ticket-soon .tk-stub{background:repeating-linear-gradient(45deg,var(--accent) 0 12px,var(--accent-wide) 12px 24px)}
.tk-name,.tk-route{background:var(--surface);color:var(--ink);border:2px solid var(--line);border-radius:6px;box-sizing:border-box;width:46px;text-align:center}
.tk-name{writing-mode:vertical-rl;text-orientation:upright;display:grid;place-items:center;font:900 20px/1 var(--f-jp);letter-spacing:.1em;padding:10px 0 8px}
.tk-route{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;font:900 15px/1 var(--f-display)}
.tk-route b[lang]{font-family:var(--f-jp)}
.tk-route i{font-style:normal;font-size:12px;opacity:.6}
/* ── «квиткові» деталі: вирізи на лінії відриву, перфорація, пробитий отвір, рядок із номером, захисний фон ── */
.ticket::before{border-left:none;width:0;right:76px;top:14px;bottom:14px;
  background:radial-gradient(circle,var(--line) 1.6px,transparent 2px) 0 0/4px 9px repeat-y;width:4px;margin-right:-2px}
.tk-stub::before,.tk-stub::after{content:'';position:absolute;left:-16px;width:28px;height:28px;border-radius:50%;
  background:var(--bg);border:2px solid var(--line);z-index:2}
.tk-stub::before{top:-16px}
.tk-stub::after{bottom:-16px}
.tk-punch{width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);flex:none}
.tk-main{position:relative;background:
  repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--lv2) 5%,transparent) 10px 11px),
  repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--lv2) 5%,transparent) 10px 11px)}
.ticket-soon .tk-main{background:
  repeating-linear-gradient(135deg,transparent 0 10px,color-mix(in srgb,var(--accent-wide) 12%,transparent) 10px 11px),
  repeating-linear-gradient(45deg,transparent 0 10px,color-mix(in srgb,var(--accent-wide) 12%,transparent) 10px 11px)}
.tk-meta{align-self:stretch;display:flex;justify-content:space-between;gap:12px;margin:-6px 0 2px;padding-bottom:10px;
  border-bottom:1.5px dashed color-mix(in srgb,var(--line) 35%,transparent);
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--muted)}

/* ── FAQ ── */
.faq{padding:80px 0;border-top:2px solid var(--line)}
.faq-grid{display:grid;gap:36px}
@media (min-width:960px){.faq-grid{grid-template-columns:.8fr 1.2fr}}
.faq-list{display:grid;gap:12px}
details{background:var(--surface);border:2px solid var(--line);border-radius:10px;box-shadow:none}
details:not(.lang-pick) summary{cursor:pointer;list-style:none;padding:18px 56px 18px 18px;font:700 16px/1.35 var(--f-display);position:relative;min-height:44px}
summary::-webkit-details-marker{display:none}
details:not(.lang-pick) summary::after{content:'+';position:absolute;right:16px;top:50%;translate:0 -50%;width:28px;height:28px;display:grid;place-items:center;
  border:2px solid var(--line);border-radius:50%;font:900 18px/1 var(--f-display);transition:rotate .2s var(--ease)}
details:not(.lang-pick)[open] summary::after{rotate:45deg;background:var(--accent);color:#000;border-color:#000}
details p{margin:0;padding:0 18px 18px;color:var(--muted)}

/* ── Фінал ── */
.final{background:var(--accent-wide);color:#000;padding:88px 0;overflow:hidden;position:relative}
.final-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.final-jp{margin:0;font:900 clamp(20px,3vw,28px)/1 var(--f-jp)}
.final-title{margin:0;font:900 clamp(36px,7vw,84px)/1 var(--f-display);letter-spacing:-.04em;max-width:12em;text-wrap:balance}
.final::after{content:'話';position:absolute;right:-2%;bottom:-18%;font:900 clamp(220px,34vw,460px)/1 var(--f-jp);color:color-mix(in srgb,#000 14%,transparent);pointer-events:none}

/* ── Футер ── */
.foot{padding:40px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-in{display:grid;gap:18px}
.foot-brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-word{display:flex}.foot-word img{height:18px;width:auto;display:block}
.foot-brand span{color:var(--muted);font-size:14px}
.foot-langs{display:flex;flex-wrap:wrap;gap:4px 6px}
.foot-langs a{padding:10px 8px;font:700 13px/1 var(--f-display);text-decoration:none;border-radius:4px}
.foot-langs a[aria-current]{background:var(--ink);color:var(--bg)}
@media (hover:hover){.foot-langs a:hover{text-decoration:underline}}
.foot-copy{margin:0;font-size:13px;color:var(--muted)}

/* ── Поява при скролі ── */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  .mq-track{animation:none}
  .flip-inner{animation:none}
  .strokes path{stroke-dashoffset:0}
  .js .reveal{opacity:1;transform:none}
}

/* ── Бірманська: інша висота рядка, без трекінгу; шрифт підвантажується лише для my ── */
:root:lang(my){--f-display:'Noto Sans Myanmar','Unbounded',sans-serif;--f-body:'Noto Sans Myanmar','Manrope',sans-serif}
:lang(my) :is(.hero-title,.h2,.final-title,.tile h3,.st b,.tk-price){line-height:1.45;letter-spacing:0}
:lang(my) :is(.hero-title){font-size:clamp(34px,7vw,72px)}
:lang(my) :is(.h2){font-size:clamp(26px,4.2vw,46px)}
:lang(my) :is(.final-title){font-size:clamp(30px,6vw,68px)}
:lang(my) body{line-height:1.8}
:lang(my) :is(.btn,.top-nav a,.eyebrow,.tk-class,summary){line-height:1.5}
/* В'єтнамська: подвійна діакритика (ầ, ỗ) — трохи більший інтерліньяж у великих заголовках */
:lang(vi) :is(.hero-title,.h2,.final-title){line-height:1.12}

/* ── Станції: вертикальний скрол → горизонтальний рух (лише з JS, без reduced-motion) ── */
.route.pin{padding:0;position:relative}
.route.pin .route-stick{position:sticky;top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.route.pin .line{--w:clamp(240px,34vw,340px);display:flex;width:calc(var(--w) * 6);gap:0;margin-top:40px;will-change:transform}
.route.pin .st{flex:0 0 var(--w);display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 14px}
.route.pin .st::before{display:none}
.route.pin .st-dot{order:0}.route.pin .st-code{order:1;margin-top:18px}.route.pin .st b{order:2;min-height:2.4em}
.route.pin .st>span:not(.st-dot):not(.st-code){order:3;flex:1}.route.pin .st-tag{order:4;align-self:center}
.route.pin .line::before{content:'';position:absolute;left:calc(var(--w)/2);right:calc(var(--w)/2);top:27px;height:10px;
  background:linear-gradient(90deg,var(--ink) 0 10%,var(--lv5) 10% 30%,var(--lv4) 30% 50%,var(--lv3) 50% 70%,var(--lv2) 70% 90%,var(--lv1) 90%);
  border-block:2px solid #000}
.brand-word{white-space:nowrap}
.lang-pick summary{white-space:nowrap}.lang-pick summary svg{flex:none}
.top .btn{white-space:nowrap}
@media (max-width:420px){.top-in{gap:8px}.brand{gap:8px}.brand-mark{width:32px;height:32px}.brand-word img{height:17px}.lp-code{display:none}
  .lang-pick summary{padding:0 8px}.top .btn-sm{padding:0 10px;font-size:12px}}
/* Латинські елементи (логотип, числа, коди) — завжди Unbounded, навіть коли --f-display перевизначено для бірманської */
.brand-word,.num,.st-dot,.st-code,.lang-pick summary{font-family:'Unbounded','Manrope',system-ui,sans-serif}
.fc-tr{line-height:1.5}
:lang(my) .fc-tr{margin-top:4px}
@media (max-width:420px){.bub{font-size:13px;max-width:95%}}
/* Бірманська: надрядкові/підрядкові знаки потребують більшого інтерліньяжу, інакше рядки налазять */
:lang(my) :is(.fc-tr,.k-meta,.b-tr,.mock-lbl,.flip-b,.st-tag,.brd-head span,.brd-host,.go-t,.foot-langs a,.lp-menu a,.hero-ticks li,.tr-row>*,.translit span){line-height:1.7}
.flap.my,.brd-row.here .flap.my{line-height:1.6;padding-block:2px}

/* ── /beta/: запрошення в закрите тестування Android ── */
.beta-hero{padding-bottom:56px}
.beta-hero .hero-title{font-size:clamp(36px,7vw,76px)}
.btn-off{opacity:.6;cursor:default;box-shadow:none}
.btn-off:active,.btn-off:hover{transform:none!important;box-shadow:none!important}
.beta-soon{margin:12px 0 0;font:600 14px/1.5 var(--f-body);color:var(--muted)}
.beta-steps-sec{padding:72px 0 40px;border-top:2px solid var(--line)}
.beta-steps{display:grid;gap:18px;margin:36px 0 0;padding:0;list-style:none;counter-reset:none}
@media(min-width:900px){.beta-steps{grid-template-columns:repeat(2,1fr);gap:22px}}
.beta-steps li{display:flex;gap:18px;align-items:flex-start;padding:22px;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r);box-shadow:4px 4px 0 var(--shadow)}
.bs-n{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);border:2px solid #000;font:900 20px/1 var(--f-display)}
.beta-steps b{display:block;font:800 18px/1.25 var(--f-display);letter-spacing:-.01em}
.beta-steps p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.beta-steps .btn{margin-top:14px}
/* Знак лого: легке «кивання» при наведенні */
@keyframes markWiggle{0%{transform:rotate(0) scale(1)}30%{transform:rotate(-12deg) scale(1.08)}55%{transform:rotate(8deg) scale(1.08)}78%{transform:rotate(-3deg) scale(1.03)}100%{transform:rotate(0) scale(1)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  :is(.brand,.foot-brand):hover img[src*="logo-mark"]{animation:markWiggle .7s cubic-bezier(.3,.7,.4,1)}
}

/* tighter vertical rhythm on phones */
@media (max-width:719px){
  .stats-sec{margin-top:40px;margin-bottom:8px}
  .route,.board-sec{padding:56px 0 32px}
  .features,.why,.faq,.final{padding:56px 0}
  .tickets-sec{padding:24px 0 56px}
  .beta-steps-sec{padding:48px 0 32px}
}

/* Android/in-app browsers: no blue tap flash, no link menu on long-press of buttons */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn,.top a,.lang-pick summary{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* табло: «код / платформа / статус» — по центру своїх колонок, і вміст колонок теж по центру */
.brd-head>span:not(:first-child){text-align:center}
@media (max-width:759px){.brd-head>span:last-child{text-align:right}}
@media (min-width:760px){.brd-url{text-align:center}.brd-go{justify-self:center}}

/* ── Єдиний вертикальний ритм (2026-10-13): кожна секція має однаковий відступ зверху/знизу (--sec-y),
   тож між секціями на одному тлі завжди 2×--sec-y, а в кольорових (why/final) вміст рівно відступає від країв.
   Від заголовка/ліду до вмісту секції — завжди 40px. Перекриває розрізнені padding-и вище. */
:root{--sec-y:72px}
@media (max-width:719px){:root{--sec-y:48px}}
.route,.features,.why,.board-sec,.tickets-sec,.faq,.final{padding:var(--sec-y) 0}
.stats-sec{margin:0;padding:36px 0 var(--sec-y)}   /* зверху = нижній відступ hero: стрічка-marquee між ними рівно посередині */
@media (max-width:979px){.stats-sec{padding-top:28px}}
.line,.board,.tickets{margin-top:40px}
/* галочки в hero: у рядок не влазять (2+1 виглядало криво) — рівний стовпчик */
.hero-ticks{flex-direction:column;gap:10px}