/* NaviVolta — shared shell: type, navigation, footer, motion, coverage map.
   Loaded after each page's own <style>, so it wins where they disagree. */

/* ─── type ─────────────────────────────────────────────────────────────
   Unbounded carries the headings — wide, geometric, reads as engineered.
   Golos Text carries everything you actually read; it was drawn for Cyrillic,
   so the Bulgarian letterforms are right rather than borrowed from Russian
   italic shapes. Both are SIL OFL and served from our own domain, so the pages
   look identical on every phone and nothing is fetched from Google. */

@font-face{
  font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/Unbounded_cyr.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/Unbounded_lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/GolosText_cyr.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(/fonts/GolosText_lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;
}

:root{
  --font-display:'Unbounded',system-ui,sans-serif;
  --font-text:'Golos Text',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{font-family:var(--font-text)}
h1,h2,h3,.brand,.btn,.slogan,.strip b{font-family:var(--font-display)}
/* Unbounded earns its place in capitals. Its Cyrillic lowercase is drawn with
   single-storey, near-cursive forms — fine as a display quirk, but on the
   policy page, whose headings are sentence case, it reads as handwriting. */
/* Unbounded earns its place in capitals. Its Cyrillic lowercase is drawn with
   single-storey, near-cursive forms — a fine display quirk in a caps headline,
   but the policy page sets its headings in sentence case, where the same forms
   read as handwriting in the middle of a legal text. Pages marked .doc keep the
   text face for headings. */
.doc h2,.doc h3{font-family:var(--font-text);font-weight:700;letter-spacing:-.012em}
/* Unbounded already sets a wide rhythm; the tight tracking the system font
   needed makes Bulgarian words collide here. */
h1,h2{letter-spacing:-.004em}
h1,h2{font-weight:700}
h3{font-weight:600;letter-spacing:.06em}
.btn{font-weight:600;letter-spacing:.01em}
.brand{font-weight:700}
.strip b{font-weight:600;font-variant-numeric:tabular-nums}

/* ─── shared navigation ────────────────────────────────────────────────
   Same links, same order, on every page. Own class names so no page's
   private .nav / .l rules interfere. */
.sitebar{
  position:sticky;top:0;z-index:60;background:rgba(5,8,6,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hair2);
  transition:background .25s,border-color .25s;
}
.sitebar-in{
  max-width:1200px;margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:26px;height:66px;
}
.sitebar .brand{
  display:flex;align-items:center;gap:9px;
  font-size:1.05rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
}
.sitebar-links{display:flex;align-items:center;gap:26px;margin-right:auto}
.sitebar .brand svg{width:18px;height:23px;flex:none}
.sitebar .brand b{color:var(--volt)}
.sitebar a.nl{
  font-size:.85rem;color:var(--mute);text-decoration:none;
  transition:color .18s;white-space:nowrap;
}
.sitebar a.nl:hover,.sitebar a.nl[aria-current]{color:var(--ink)}
.sitebar a.nl[aria-current]{color:var(--volt)}
/* The call to action is defined here rather than left to each page: three of
   the four pages never styled .btn, so the same button rendered as a pill on
   one page and as a plain green link on the next. */
.sitebar .btn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  background:var(--volt);color:#08170A;padding:11px 20px;border-radius:999px;
  font-size:.76rem;letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;transition:filter .18s;
}
.sitebar .btn:hover{filter:brightness(1.08)}

.lang{display:flex;align-items:center;gap:7px;font-size:.74rem;letter-spacing:.06em}
.lang a{color:var(--faint);text-decoration:none;transition:color .18s}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--ink);font-weight:700}
.lang span{color:var(--hair)}

/* The bar is sticky, so a jump to #map or #testers would otherwise land with
   the heading hidden underneath it. */
[id]{scroll-margin-top:86px}
/* The phone bar carries a second row, so it is taller, not shorter. */
@media (max-width:820px){[id]{scroll-margin-top:112px}}

/* ─── closed-test notice ───────────────────────────────────────────────
   Sits under the bar on every page. The app is not public: the Play link only
   works for accounts the owner has added by hand, so without this a visitor
   would meet a Google error page and read it as a broken site. Deliberately not
   sticky — it is context, not a control, and it should scroll away. */
.notice{background:#141A0C;border-bottom:1px solid #2A3618}
.notice-in{
  max-width:1200px;margin:0 auto;padding:10px 28px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-size:.82rem;color:#C3CFB4;line-height:1.45;
}
.notice-in svg{width:16px;height:16px;color:var(--volt);flex:none}
.notice-in b{color:var(--ink);font-weight:700}
.notice-in a{
  color:var(--volt);text-decoration:none;font-weight:600;white-space:nowrap;
  margin-left:auto;
}
.notice-in a:hover{text-decoration:underline}
@media (max-width:820px){
  .notice-in{padding:9px 18px;font-size:.78rem;gap:9px}
  .notice-in a{margin-left:0;width:100%;padding-left:27px}
}
@media (max-width:520px){.notice-in{padding-inline:16px}}

/* ─── shared footer ────────────────────────────────────────────────── */
.sitefoot{border-top:1px solid var(--hair2);background:var(--deep);padding:38px 0 34px}
.sitefoot-in{max-width:1200px;margin:0 auto;padding:0 28px}
.sitefoot .row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.sitefoot .brand{display:flex;align-items:center;gap:9px;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.sitefoot .brand svg{width:17px;height:22px}
.sitefoot .brand b{color:var(--volt)}
.sitefoot .slogan{text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:.8rem}
.sitefoot .slogan i{color:var(--volt);font-style:normal}
.sitefoot .links{margin-left:auto;display:flex;gap:20px;font-size:.79rem;flex-wrap:wrap}
.sitefoot .links a{color:var(--mute);text-decoration:none}
.sitefoot .links a:hover{color:var(--ink)}
.sitefoot .legal{margin:22px 0 0;font-size:.72rem;color:var(--faint);max-width:80ch;line-height:1.6}

/* On a phone the links move to a second row inside the bar instead of being
   hidden behind a menu button. They are the whole point of the site — a reader
   who has to guess that a hamburger exists mostly does not tap it, and the only
   remaining path to the other pages was the footer, an entire page away. */
@media (max-width:820px){
  .sitebar-in{
    flex-wrap:wrap;height:auto;row-gap:0;column-gap:14px;padding:11px 18px 0;
  }
  .sitebar .brand{font-size:.98rem}
  .lang{margin-left:auto}
  .sitebar .btn{padding:9px 15px;font-size:.7rem}
  .sitebar-links{
    order:3;width:100%;margin:9px -18px 0;padding:0 18px 10px;
    gap:20px;overflow-x:auto;scrollbar-width:none;
    border-top:1px solid var(--hair2);padding-top:9px;
  }
  .sitebar-links::-webkit-scrollbar{display:none}
  .sitebar a.nl{font-size:.82rem;padding:2px 0;flex:none}
  /* The current page is underlined, not just tinted: on a small screen the
     green-on-dark tint alone is easy to miss. */
  .sitebar a.nl[aria-current]{
    color:var(--volt);box-shadow:inset 0 -2px 0 var(--volt);
  }
  .sitefoot .links{margin-left:0;width:100%}
  /* The dividers are drawn on each item's right edge, so once the row wraps the
     last item on a line trails a stray line into the margin. */
  .verbs div{border-right:0;padding-right:0;margin-right:22px}
}
@media (max-width:380px){
  /* Unbounded is a wide face and Bulgarian sets long words in caps, so the
     pages' own clamp floors (2rem) still overflow a 320px screen. */
  h1{font-size:clamp(1.5rem,7.2vw,2rem)}
  h2{font-size:clamp(1.2rem,5.4vw,1.65rem)}
  .sitebar-in{column-gap:10px;padding-inline:14px}
  .sitebar-links{margin-inline:-14px;padding-inline:14px;gap:16px}
  .sitebar .btn{padding:8px 12px;font-size:.66rem}
}
/* On a phone the brand, the language switch and the call to action are all that
   is left, and together they were 23 px wider than the screen. */
/* Narrow phones. No `height` here on purpose: the bar carries a second row of
   links below 820px, and pinning it to one row's worth left that row hanging
   outside the sticky area, with the page scrolling underneath it. */
@media (max-width:520px){
  .sitebar-in{padding:10px 16px 0;column-gap:11px}
  .sitebar-links{margin-inline:-16px;padding-inline:16px}
  .sitebar .brand{font-size:.97rem;gap:7px}
  .sitebar .btn{padding:9px 14px;font-size:.7rem}
  .sitefoot-in{padding:0 16px}
  /* Buttons are nowrap by design, but one of them carries an email address
     that is simply wider than a 320px phone. Let those wrap rather than push
     the whole page sideways. */
  .btn{max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
  .sitebar .btn{white-space:nowrap}
}

/* ─── coverage map ─────────────────────────────────────────────────── */
.cov{display:block;width:100%;height:auto;overflow:visible}
.cov-city circle{fill:#37452F}
.cov-city text{
  fill:#5C6759;font-family:var(--font-text);font-size:13px;
  letter-spacing:.14em;font-weight:600;
}
/* The dots' resting state is VISIBLE. Hiding them by default would mean a
   blocked or broken script leaves the map permanently blank — and the map is
   the evidence for the number next to it, not decoration. */
.cov-dots circle{opacity:.94}
.cov-dots .u{fill:var(--volt)}
.cov-dots .f{fill:#84C132}
.cov-dots .s{fill:#4E6B36}
.cov-dots .halo{fill:var(--volt);opacity:.13}
/* Only once JavaScript has confirmed it can animate do they start hidden. */
.js-motion .reveal:not(.reveal-in) .cov-dots circle{opacity:0}
/* Dots land in sequence once the map scrolls in — the country fills up the way
   the network did. Capped so it never becomes a wait. */
.js-motion .reveal-in .cov-dots circle{
  animation:covdot .5s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay:calc(var(--i) * 14ms);
}
.js-motion .reveal-in .cov-dots .halo{animation-name:covhalo}
@keyframes covdot{from{opacity:0;transform:scale(.2)}to{opacity:.94;transform:none}}
@keyframes covhalo{from{opacity:0;transform:scale(.2)}to{opacity:.13;transform:none}}
/* The animation must not be able to leave a dot faded out if it is interrupted;
   `backwards` above holds the start frame, and this holds the end. */
.js-motion .reveal-in .cov-dots circle{animation-fill-mode:both}
.cov-dots circle{transform-box:fill-box;transform-origin:center}

.cov-legend{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:24px;
  font-size:.79rem;color:var(--mute);
}
.cov-legend span{display:flex;align-items:center;gap:9px}
.cov-legend i{width:11px;height:11px;border-radius:50%;flex:none}

/* ─── scroll motion ────────────────────────────────────────────────────
   Sections settle into place instead of appearing. Anything that has not been
   reached yet stays visible to screen readers and to browsers without JS —
   the hidden state is only applied once site.js confirms it can remove it. */
.js-motion .reveal{opacity:0;transform:translateY(18px)}
.js-motion .reveal-in{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),
             transform .7s cubic-bezier(.2,.8,.3,1);
}
.js-motion .reveal-in.d1{transition-delay:.08s}
.js-motion .reveal-in.d2{transition-delay:.16s}
.js-motion .reveal-in.d3{transition-delay:.24s}

/* A printed page never scrolls, so nothing would ever be revealed — someone
   printing the privacy policy would get blank sections. */
@media print{
  .js-motion .reveal{opacity:1!important;transform:none!important}
  .cov-dots circle{opacity:.94!important;animation:none!important}
  .sitebar{position:static}
}

/* Respecting this is not politeness: for people with vestibular disorders,
   parallax and slide-ins cause real nausea. */
@media (prefers-reduced-motion:reduce){
  .js-motion .reveal,.js-motion .reveal-in{opacity:1;transform:none;transition:none}
  .js-motion .reveal:not(.reveal-in) .cov-dots circle{opacity:.94}
  .cov-dots circle{animation:none!important;opacity:.94}
  .cov-dots .halo{opacity:.13}
  .hero .bg img{transform:none!important}
  html{scroll-behavior:auto}
}