/* b-lab.pro - стилі. Брендбук ARC 2023: Yellow Supreme #E9C728 + чорний #1C1C1B.
   Шрифт Road UA (А. Константинов, О. Колодко), вільний, fsType 0; субсет кирилиця + латиниця.
   Типографіка за логікою pro-mobility.org (DB, 28.09.2026): шість стилів тексту, у кожного одна роль:
   Display - лише головний заголовок; Headline - заголовки розділів і цифри; Title - лише назви карток;
   Intro - підзаголовок і лід; Body - весь текст, посилання й кнопки (надзаголовок - Body 700 акцентом);
   Caption - лише підписи і підвал. Ваги 400 і 700, без капсу. Два кольори тексту плюс акцент для посилань.
   Винятки, узгоджені з DB за старим сайтом (28.09.2026): меню шапки 18 px, кнопки 19 px жирні, підвал - Body.
   Корінь не масштабується: великі стилі ростуть через vw, як на pro-mobility.org.
   Композиція за pro-mobility.org (DB, 28.09.2026, v14): на головній блок = екран, текст вирівняний ліворуч,
   продукти в 3 колонки, кружки 56 px, головний заголовок до 60 px. */

@font-face{font-family:"Road UA";font-weight:400;font-display:swap;src:url(/assets/fonts/roadua-regular.woff) format("woff")}
@font-face{font-family:"Road UA";font-weight:700;font-display:swap;src:url(/assets/fonts/roadua-bold.woff) format("woff")}

/* ── 1. Токени ── */
:root{
  --paper:#fff; --paper-2:#f6f5f0; --rule:#e4e1dc; --dash:#cfcbc4;
  --ink:#1c1c1b; --ink-soft:#666461;
  --yellow:#e9c728; --yellow-text:#7d690c;          /* 5.4:1 на білому, 4.9:1 на --paper-2 */
  --dark:#1c1c1b; --on-dark:#d8dbde; --on-dark-soft:#a6acb2;

  --font:"Road UA",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* шість стилів тексту */
  /* Road UA має x-висоту 0,50 em проти 0,54 у Noto Sans і вужчий: на тих самих пікселях виглядає на ~8% дрібнішим,
     тому кожен стиль на ~8% більший за pro-mobility.org (60 · 44 · 26 · 23 · 18 · 15, меню 16) - оптично той самий розмір. */
  --t-display:700 clamp(2.5rem,4.2vw,3.75rem)/1.06 var(--font);
  --t-headline:700 clamp(1.875rem,3.1vw,2.75rem)/1.12 var(--font);
  --t-title:700 clamp(1.375rem,1.8vw,1.625rem)/1.25 var(--font);
  --t-intro:400 clamp(1.1875rem,1.58vw,1.4375rem)/1.45 var(--font);
  --t-eyebrow:700 1.125rem/1.4 var(--font);
  --t-body:400 1.125rem/1.5 var(--font);
  --t-caption:400 .9375rem/1.45 var(--font);
  --t-menu:400 1.125rem/1.4 var(--font);
  --t-button:700 1.1875rem/1.2 var(--font);
  /* шкала відступів, крок 8 */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:5rem;

  --wrap:80rem; --gutter:2.5rem; --header:4.5rem;
  --ease:cubic-bezier(.2,.7,.3,1); --lift:0 .75rem 1.75rem -.75rem rgb(28 28 27/.22);
  color-scheme:light;
}

/* ── 2. База ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + var(--s2));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:var(--t-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{color:var(--ink);text-wrap:balance}
h1{font:var(--t-display);letter-spacing:-.015em}
h2{font:var(--t-headline);letter-spacing:-.01em}
h3{font:var(--t-title)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.skip{position:absolute;left:-100vw}
.skip:focus{left:var(--s2);top:var(--s2);z-index:99;padding:var(--s1) var(--s2);background:var(--yellow);color:var(--ink)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.em{color:var(--yellow-text)}
.nobr{white-space:nowrap}

/* ── 3. Шапка ── */
.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:var(--s3);min-height:var(--header)}
.brand{flex:none}
.brand img{height:3rem;width:auto}
.menu{display:contents}
.nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto;font:var(--t-menu)}
.nav a{position:relative;padding-block:var(--s1);text-decoration:none;white-space:nowrap}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--yellow);scale:0 1;transition:scale .25s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{scale:1}
.nav .lang{color:var(--ink-soft)}
.burger{display:none}
.phone{display:flex;gap:var(--s3);font:var(--t-menu);font-weight:700}
.phone a{text-decoration:none;white-space:nowrap}
.phone a:hover{color:var(--yellow-text)}

/* ── 4. Перший екран ── */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--dark);color:#fff}
.hero-bg{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;animation:zoom 30s var(--ease) both}
@keyframes zoom{from{scale:1}to{scale:1.14}}
.hero .wrap>*{animation:rise .9s var(--ease) both}
.hero .wrap>:nth-child(2){animation-delay:.1s}
.hero .wrap>:nth-child(3){animation-delay:.2s}
.hero .wrap>:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;translate:0 1rem}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgb(18 22 26/.72),rgb(18 22 26/.84))}
.hero.home::before{background:linear-gradient(rgb(18 22 26/.55),rgb(18 22 26/.72))}
.hero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding-block:var(--s7) calc(var(--s7) + var(--s2));text-align:left}
.hero.home{display:grid;align-items:center;min-height:calc(100svh - var(--header))}
.hero.home .wrap{padding-block:var(--s7) calc(var(--s7) + var(--s4))}
.hero .wrap>.down{position:absolute;bottom:var(--s4);left:50%;width:2.75rem;height:2.75rem;margin-left:-1.375rem;border:2px solid rgb(255 255 255/.6);border-radius:50%;animation:rise .9s .5s var(--ease) both,nudge 2.4s 1.5s ease-in-out infinite;transition:border-color .2s}
.down::after{content:"";position:absolute;left:50%;top:42%;width:.625rem;height:.625rem;border:solid #fff;border-width:0 2px 2px 0;translate:-50% -50%;rotate:45deg}
.down:hover{border-color:var(--yellow)}
@keyframes nudge{50%{translate:0 .375rem}}
.hero h1{max-width:66rem;color:#fff}
.hero p{max-width:44rem;font:var(--t-intro);color:rgb(255 255 255/.9)}
.hero .kicker+h1{margin-top:calc(var(--s2) - var(--s3))}
.kicker{font:var(--t-eyebrow);color:var(--yellow)}
.hero p.kicker{font:var(--t-eyebrow);color:var(--yellow)}
.crumbs{font:var(--t-caption);color:rgb(255 255 255/.75)}
.hero p.crumbs{font:var(--t-caption)}

/* ── 5. Кнопки ── */
.actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--s2)}
.actions.gap{margin-top:var(--s5)}
.btn{display:inline-block;padding:.875rem var(--s4);border:2px solid var(--yellow);background:var(--yellow);color:var(--ink);font:var(--t-button);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,translate .2s var(--ease)}
.btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.hero .btn:hover{color:var(--yellow);border-color:var(--yellow)}
.btn.line{background:transparent;border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.hero .btn.line{border-color:rgb(255 255 255/.6);color:#fff}
.hero .btn.line:hover{background:transparent;border-color:var(--yellow);color:var(--yellow)}

/* ── 6. Секції ── */
.sec{padding-block:5.5rem}
.sec.alt{background:var(--paper-2)}
.head{display:flex;flex-direction:column;gap:var(--s3);max-width:48rem;margin:0 0 var(--s6)}
.head p{color:var(--ink-soft)}
.note{margin-top:var(--s4);font:var(--t-caption);color:var(--ink-soft)}

/* головна (і EN): кожен блок займає щонайменше екран під шапкою, вміст по центру по вертикалі - як на pro-mobility.org */
@media (min-width:48em) and (min-height:37.5em){
  main:has(>.hero.home)>.sec{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh - var(--header))}
}

/* Симпозіум - темна смуга */
.sec.dark{background:var(--dark);color:var(--on-dark)}
.sympo{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:center}
.sympo>div{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.sympo h2{color:#fff}
.sympo-logo{height:2.5rem;width:auto;margin-bottom:var(--s1)}
.sympo .kicker{margin-bottom:calc(var(--s2) - var(--s3))}
.sympo-list{display:flex;flex-direction:column;gap:var(--s3)}
.sympo-list li{padding-left:var(--s3);border-left:3px solid var(--yellow);color:var(--on-dark-soft);transition:translate .25s var(--ease)}
.sympo-list b{display:block;margin-bottom:.25rem;font:var(--t-title);color:#fff}
.sympo .btn:hover{color:var(--yellow);border-color:var(--yellow)}
.nav a[href^="https://sympo"]{color:var(--yellow-text)}

/* пронумеровані причини */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6) var(--s4)}
.reasons li{position:relative;display:flex;align-items:center;min-height:10rem;padding:var(--s5) var(--s4) var(--s4);border:1px dashed var(--dash)}
.reasons li{transition:border-color .25s,background-color .25s}
.reasons .n{position:absolute;top:0;left:var(--s4);translate:0 -50%;transition:scale .25s var(--ease)}
.n{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--yellow);color:var(--ink);font:var(--t-title)}

/* продукти */
.partner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5)}
.partner h2{max-width:40rem;font:var(--t-intro)}
.partner img{height:1.875rem;width:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cards>:last-child{grid-column:span 2}   /* 7 продуктів + навчання: остання картка закриває третій ряд */
.card{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);border:1px solid var(--rule);border-top:3px solid transparent;background:var(--paper);text-decoration:none;transition:translate .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card h3+p{margin-top:calc(.75rem - var(--s2))}
.card p{flex:1}
.more{color:var(--yellow-text)}
.more::after{content:"→";display:inline-block;margin-left:.375em;transition:translate .25s var(--ease)}
.mark{display:flex;align-items:center;height:1.75rem}
.mark img{width:auto;height:auto;max-width:100%;max-height:1.625rem;mix-blend-mode:multiply}
.tag{padding:.125rem .625rem;border:1px solid var(--ink);font:var(--t-caption);font-weight:700;color:var(--ink)}

/* кроки */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.steps li{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--s2);align-items:start}
.steps .n{width:2.75rem;height:2.75rem;background:none;border:2px solid var(--yellow);color:var(--yellow-text);font:var(--t-eyebrow);transition:background-color .25s,color .25s}
.steps h3{margin-bottom:.75rem}

/* списки з маркером */
.ticks{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s5);max-width:60rem;padding:var(--s4) var(--s5);background:var(--paper-2)}
.ticks.one{grid-template-columns:1fr;max-width:48rem;padding:0;background:none}
.ticks li{position:relative;padding-left:1.5rem}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:.5625rem;height:.5625rem;background:var(--yellow)}
.pros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pros li{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--s2);min-height:9rem;padding:var(--s4);border-bottom:3px solid var(--yellow);background:var(--paper);text-wrap:balance;font:var(--t-intro);color:var(--ink);transition:translate .3s var(--ease),box-shadow .3s var(--ease)}
.pros li::before{content:"";width:.75rem;height:1.25rem;margin-bottom:.25rem;border:solid var(--yellow);border-width:0 .25rem .25rem 0;rotate:45deg}
.callout{max-width:48rem;margin:var(--s5) 0 0;padding:var(--s3);border-left:4px solid var(--yellow);background:var(--paper-2);color:var(--ink)}
.alt .callout{background:var(--paper)}
.stat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s1);margin-top:var(--s6)}
.stat b{font:var(--t-headline);color:var(--ink)}

/* реквізити */
.reg{border-top:1px solid var(--rule)}
.reg div{display:grid;grid-template-columns:15rem 1fr;align-items:baseline;gap:var(--s3);padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.reg dt{font:var(--t-caption);color:var(--ink-soft)}
.reg dd{color:var(--ink);font-variant-numeric:tabular-nums}
.reg a{color:var(--yellow-text)}
.reg-note{max-width:48rem;margin:var(--s3) 0 0;font:var(--t-caption);color:var(--ink-soft)}

/* контакти */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.lines{display:flex;flex-direction:column;gap:var(--s3)}
.lines dt{font:var(--t-caption);color:var(--ink-soft)}
.lines dd{font:var(--t-title);color:var(--ink)}
.lines dd.plain{font:var(--t-body)}
.lines dd a{text-decoration:none;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/100% 2px no-repeat;transition:background-size .25s var(--ease)}
.lines dd a:hover{background-size:100% 100%}
.links{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.links a{color:var(--yellow-text)}
.ask{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding:var(--s4);border:1px dashed var(--dash)}
.ask ol{padding-left:1.25rem;list-style:decimal}
.ask .note{margin-top:0}

/* ── 7. Підвал ── */
.foot{padding-block:var(--s6) var(--s4);background:var(--dark);color:var(--on-dark);font:var(--t-body)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5)}
.foot-logo{height:3.25rem;width:auto;margin-bottom:var(--s2)}
.foot-grid p{max-width:24rem;color:var(--on-dark-soft)}
.foot-h{margin-bottom:var(--s2);font-weight:700;color:#fff}
.foot-links{display:flex;flex-direction:column;gap:var(--s1)}
.foot-links a{padding-block:.125rem;text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--yellow)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgb(255 255 255/.12);font:var(--t-caption);color:var(--on-dark-soft)}

.meta a{display:inline-block;padding-block:.25rem;color:var(--on-dark)}
.meta a:hover{color:var(--yellow)}

/* текстова сторінка (політика конфіденційності) */
.prose{max-width:46rem}
.prose h2{margin:var(--s5) 0 .75rem;font:var(--t-title)}
.prose h2:first-child{margin-top:0}
.prose p+p{margin-top:var(--s2)}
.prose a{color:var(--yellow-text)}

/* ── 8. Вікна продуктів ── */
.modal{width:calc(100% - var(--s4));max-width:52rem;max-height:90vh;margin:auto;padding:0;overflow-y:auto;border:0;background:var(--paper);color:var(--ink);box-shadow:0 25px 50px -12px rgb(0 0 0/.35)}
.modal:focus-visible{outline:0}
.modal::backdrop{background:rgb(28 28 27/.78);backdrop-filter:blur(3px)}
.modal[open]{animation:pop .3s cubic-bezier(.16,1,.3,1)}
@keyframes pop{from{opacity:0;scale:.97}}
.m-body{position:relative;padding:var(--s5)}
.m-close{position:absolute;top:var(--s2);right:var(--s2);width:2.5rem;height:2.5rem;border:0;background:none;color:var(--ink-soft);font:400 2rem/1 var(--font);cursor:pointer}
.m-close:hover{color:var(--ink)}
.m-body .mark{margin-bottom:var(--s2)}
.m-body h2{display:inline-block;padding-bottom:var(--s1);border-bottom:3px solid var(--yellow)}
.m-lead{margin-top:var(--s3);font:var(--t-intro)}
.m-body h3{margin:var(--s4) 0 .75rem}
.m-body .ticks{grid-template-columns:1fr;gap:var(--s1);max-width:none;padding:0;background:none}
.m-body .callout{max-width:none;margin-top:var(--s3)}
.m-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule)}

/* ── 9. Наведення (лише де є миша: на сенсорних екранах :hover «залипає») ── */
@media (hover:hover){
  .btn:hover{translate:0 -2px}
  .reasons li:hover{border-style:solid;border-color:var(--yellow);background:var(--paper-2)}
  .reasons li:hover .n{scale:1.1}
  .card:hover{translate:0 -.375rem;border-color:var(--rule);border-top-color:var(--yellow);box-shadow:var(--lift)}
  .card:hover .more::after,a.more:hover::after{translate:.25em 0}
  .steps li:hover .n{background:var(--yellow);color:var(--ink)}
  .pros li:hover{translate:0 -.375rem;box-shadow:var(--lift)}
  .sympo-list li:hover{translate:.375rem 0}
}

/* ── 10. Адаптив ── */
@media (max-width:81.25em){.phone{display:none}}
@media (max-width:71.25em){
  .reasons,.steps,.cards{grid-template-columns:repeat(2,1fr)}
  .cards>:last-child{grid-column:auto}
  .pros{grid-template-columns:repeat(2,1fr)}
  .contact,.foot-grid,.sympo{grid-template-columns:1fr}
  .ticks{grid-template-columns:1fr}
  .top .wrap{position:relative}
  .burger{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:0 calc(-1 * var(--s1)) 0 auto;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
  .burger span,.burger span::before,.burger span::after{display:block;width:1.5rem;height:2px;background:currentColor;transition:translate .25s var(--ease),rotate .25s var(--ease),opacity .2s}
  .burger span{position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{translate:0 -.4375rem}
  .burger span::after{translate:0 .4375rem}
  .open .burger span{background:transparent}
  .open .burger span::before{translate:0;rotate:45deg}
  .open .burger span::after{translate:0;rotate:-45deg}
  .menu{display:none;position:absolute;top:100%;inset-inline:0;max-height:calc(100dvh - var(--header));overflow-y:auto;overscroll-behavior:contain;padding:var(--s1) var(--gutter) var(--s3);border-bottom:1px solid var(--rule);background:var(--paper);box-shadow:var(--lift);animation:drop .25s var(--ease)}
  .open .menu{display:block}
  @keyframes drop{from{opacity:0;translate:0 -.5rem}}
  .nav{flex-direction:column;align-items:stretch;gap:0;margin:0;font:var(--t-body)}
  .nav a{padding-block:.75rem;border-bottom:1px solid var(--rule)}
  .nav a::after{inset:0 auto 0 calc(-1 * var(--gutter));width:3px;height:auto;scale:1 0}
  .nav a:hover::after,.nav a[aria-current]::after{scale:1}
  .nav .lang{border-bottom:0}
  .phone{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s2);font:var(--t-body)}
}
@media (max-width:38.75em){
  :root{--gutter:1.5rem;--header:4rem}
  .sec{padding-block:4.5rem}
  .ticks{padding:var(--s3)}
  .reasons,.steps,.cards{grid-template-columns:1fr}
  .brand img{height:2.5rem}
  .pros{grid-template-columns:1fr}
  .reasons{gap:var(--s2)}
  .reasons li{justify-content:flex-start;gap:var(--s2);min-height:0;padding:var(--s2) var(--s3) var(--s2) var(--s2);text-align:left}
  .reasons .n{position:static;translate:none;flex:none;width:2.5rem;height:2.5rem;font:var(--t-eyebrow)}
  .pros{gap:var(--s2)}
  .pros li{flex-direction:row;justify-content:flex-start;gap:var(--s3);min-height:0;padding:var(--s2) var(--s3);text-align:left}
  .pros li::before{flex:none;margin:0 .25rem .25rem}
  .actions{flex-direction:column;align-items:stretch;text-align:center}
  .btn{padding-inline:var(--s2);font-size:1.0625rem}
  .reg div{grid-template-columns:1fr;gap:0}
  .modal{width:100%;max-width:none;height:100%;max-height:none}
  .m-body{padding:var(--s4) var(--s2)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}