/* ==========================================================================
   K-SYS PROTECT: styles shared by the inner pages (Despre Noi, Servicii, Contact)
   The look of the header, the logo, the buttons, the footer and the glow is
   copied from the homepage, so all the pages feel the same.
   ========================================================================== */

/* The font file lives in assets/fonts/ (this file is in assets/css/, hence the ../) */
@font-face {
  font-family: "Google Sans Flex";
  src: url("../fonts/GoogleSansFlex.ttf") format("truetype");
  font-weight: 1 1000;
  font-display: swap;
}

/* ---------- Colors, sizes and fonts: change them here ---------- */
:root {
  --bg: #0d1319;                                 /* dark text colour on the white buttons */
  --sheet: #000000;
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --dim: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.12);             /* thin dividing lines */
  --pad: clamp(1.25rem, 3vw, 2.5rem);            /* space around the screen edges */
  --side: clamp(1.5rem, 12vw, 14rem);

  --font: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
  /* film grain, the same as on the homepage: a small tile of SVG noise (12% strong) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* The logo picture (1100 x 835: its height is 0.759 x its width), small in the top-left corner.
     The same size and place as the homepage logo once it has shrunk into the header. */
  --logo-end: 4.5rem;                            /* logo WIDTH */
  --logo-ratio: 0.759;
  --logo-end-top: calc(var(--pad) + 1.25rem - var(--logo-end) * var(--logo-ratio) / 2);   /* centred on the header buttons */
}

/* ---------- Basics ---------- */
    * { box-sizing: border-box; margin: 0; }
    body {
      background: #000;                 /* black: if the background picture fails to load, the page is plain black */
      color: var(--text);
      font-family: var(--font);
    }
    a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }

/* ---------- Buttons ---------- */
    .button {
      display: inline-block;
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: 2px;
      padding: 0.6rem 1.1rem;
      color: var(--text);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 600;                 /* same weight as the menu links */
    }
    .button:hover { background: var(--text); color: var(--bg); }
    .button--solid {
      background: var(--text);
      color: var(--bg);
      padding: 0.85rem 1.6rem;
      font-size: 1rem;
      font-weight: 500;
    }
    .button--solid:hover { background: transparent; color: var(--text); }
    /* Centers the letters exactly: the font leaves more space above the letters than below,
       so the empty space is trimmed and the padding made a bit bigger to keep the same button size */
    .button { text-align: center; line-height: 1.2; }
    @supports (text-box: trim-both cap alphabetic) {
      .button { text-box: trim-both cap alphabetic; padding-top: 0.85rem; padding-bottom: 0.85rem; }
      .button--solid { padding-top: 1.1rem; padding-bottom: 1.1rem; }
    }

/* ---------- The top bar: menu, call button and the "authorized installer" decal ---------- */
    .site-header {
      position: fixed;                  /* was "absolute" before: this is what keeps it on screen */
      z-index: 10;                      /* keeps it above the sections */
      top: 0; left: 0; right: 0;
      display: flex;
      justify-content: flex-end;        /* the menu sits on the right (the logo is a separate element) */
      align-items: center;
      gap: 2rem;
      padding: var(--pad);
      /* a soft dark fade so the links stay readable over the picture */
      background: linear-gradient(to bottom, rgba(13, 19, 25, 0.7), rgba(13, 19, 25, 0));
    }
    .badge {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.4rem 0.8rem;
      border: 1px solid rgba(200, 208, 224, 0.22);
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.04);
      color: rgba(200, 208, 224, 0.62);
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.02em;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }
    .badge svg { flex: none; width: 0.95rem; height: 0.95rem; }
@media (max-width: 1240px) { .badge { left: 9.5rem; transform: translateY(-50%); } }
    @media (max-width: 900px)  { .badge { display: none; } }
    .header-right {
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    .site-header ul {
      display: flex;
      gap: 1.75rem;
      list-style: none;
      padding: 0;
    }
    .site-header ul a {
      color: var(--text);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 600;                 /* 400 = normal, 600 = semi-bold, 700 = bold */
    }
    .site-header ul a:hover { text-decoration: underline; text-underline-offset: 6px; }
/* When text scrolls up under the menu, a soft dark blur behind the menu keeps the links readable */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -1.5rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}

/* the page you are on */
.site-header ul a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ---------- The logo (small, fixed in the top-left corner) ---------- */
    .logo {
      position: fixed;                  /* stays on the screen while the page scrolls */
      z-index: 20;                      /* above the header */
      left: var(--pad);
      top: var(--logo-end-top);
      width: var(--logo-end);
    }
    .logo img {
      display: block;
      width: 100%;
      height: auto;
    }

/* ---------- The soft white light that follows the mouse ---------- */
    .cursor-glow {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 8;                                    /* above the cards, below the menu and the logo */
      width: 110px;
      height: 110px;
      margin: -55px 0 0 -55px;                       /* centers the circle on the cursor (half of the size above) */
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0) 70%);
      mix-blend-mode: screen;                        /* adds light instead of covering things */
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease;
      will-change: transform;
    }
    .cursor-glow.is-on { opacity: 1; }
    @media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* ---------- The footer ---------- */
    .site-footer {
      position: relative;
      z-index: 5;
      background: var(--sheet);
      padding: 1.75rem var(--side) 2.25rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .site-footer p {
      font-size: 0.9rem;
      color: var(--muted);
    }

/* the footer lines up with the left edge of the page (on the homepage it lines up with the cards) */
.site-footer { padding-inline: var(--pad); }

/* ==========================================================================
   Page layout (only used by the inner pages)
   ========================================================================== */

/* THE BACKGROUND: a blurred, darkened crop of the homepage dusk scene, fixed to the screen
   (the text scrolls over it). Each page picks its own crop with a class on the div:
   page-bg--despre (calm sky), page-bg--servicii (amber ground), page-bg--contact (street lights).
   Three layers: the picture (::before), then the grain + the darkening (::after). */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}
/* the picture. The url is counted from this CSS file (assets/css/), hence ../images/ */
.page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-photo, none) var(--page-pos, 50% 50%) / cover no-repeat;
  transform: scaleX(var(--page-flip, 1));        /* -1 = mirrored left/right */
}
/* the darkening: --page-dark all over (0.5 = 50% black), and darker towards the bottom so the
   black footer does not start with a hard edge. The grain sits under the darkening. */
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(rgba(0, 0, 0, var(--page-dark, 0.5)), rgba(0, 0, 0, var(--page-dark, 0.5))),
    var(--grain) 0 0 / 180px 180px repeat;
}
.page-bg--despre   { --page-photo: url("../images/bg-despre-noi.webp"); }
.page-bg--servicii {
  --page-photo: url("../images/bg-servicii.webp");
  --page-flip: -1;                               /* mirrored: the dark blue side goes under the rows on the right */
}
.page-bg--contact  { --page-photo: url("../images/bg-contact.webp"); }

/* Phones show only a narrow strip of the picture: choose the calm part on each page */
@media (max-width: 700px) {
  .page-bg--servicii { --page-pos: 0% 50%; }      /* the dark blue side (before the mirroring) */
  .page-bg--contact  { --page-pos: 40% 50%; }
}

.page { position: relative; z-index: 1; }

/* ---------- The "title on the left, text on the right" section ---------- */
.split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(7rem, 16vh, 11rem) var(--pad) clamp(4rem, 8vw, 7rem);
}
/* the thin vertical line between the two columns, top to bottom of the section */
.split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.split-title {
  align-self: start;
  position: sticky;                              /* the title stays in view while a long text scrolls */
  top: 6.5rem;
  padding-right: 2rem;
}
.split-title h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}
.split-body {
  max-width: 46rem;
  padding-left: clamp(1.5rem, 4vw, 4rem);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  color: var(--muted);
}
.split-body p { margin: 0 0 1.1em; }
.split-body .strong { color: var(--text); font-weight: 600; }          /* the sentence that should stand out */
.split-body ul { margin: 0 0 1.4em; padding: 0; list-style: none; }
.list-lines li { padding: 0.55rem 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.list-lines li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.list-dash li::before { content: "\2013"; margin-right: 0.7em; color: var(--dim); }
.split-body .button { margin-top: 0.8rem; }

/* When the page loads: the title slides in from the left, the text (or the accordion) from the right.
   overflow-x: clip hides the parts that start outside the screen without breaking the sticky title. */
.split { overflow-x: clip; }
.split-title { animation: slide-in-left 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.split-body  { animation: slide-in-right 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-4rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(4rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------- The Contact page: rows of label + detail, with thin lines between them ---------- */
.contact-list { margin: 0 0 2.25rem; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.contact-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}
.contact-label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.contact-value {
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-value--big { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; }
a.contact-value { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.4s ease; }
a.contact-value:hover { background-size: 100% 1px; }          /* a thin underline grows under the link */
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.contact-actions .button { margin-top: 0; }

/* On this page the right side does not slide in as one block: the rows rise in one after another */
.split-body--contact { animation: none; }
.contact-list li, .contact-actions { animation: rise-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.contact-list li:nth-child(1) { animation-delay: 0.3s; }
.contact-list li:nth-child(2) { animation-delay: 0.42s; }
.contact-list li:nth-child(3) { animation-delay: 0.54s; }
.contact-list li:nth-child(4) { animation-delay: 0.66s; }
.contact-actions { animation-delay: 0.82s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: none; }
}

/* people who turn off animations in their system settings see the page at once */
@media (prefers-reduced-motion: reduce) {
  .split-title, .split-body, .contact-list li, .contact-actions, .company { animation: none; }
}

/* ---------- Contact page: the company details ("Date firmă") under the buttons ---------- */
.company {
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  animation: rise-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.95s both;
}
.company-title {
  margin-bottom: 1.1rem;
  font-size: 0.8rem;                             /* the same small capitals as the labels above */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.company-list { margin: 0; }
.company-list div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);  /* lines up with the contact rows above */
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.company-list dt { color: var(--dim); }
.company-list dd { margin: 0; color: var(--muted); }
@media (max-width: 800px) {
  .company-list div { grid-template-columns: 1fr; gap: 0.1rem; padding: 0.5rem 0; }
}
/* ---------- The expandable rows (accordion), used on the Servicii page ---------- */
.split-note { max-width: 22rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.5; color: var(--dim); }
.split-body--wide { max-width: none; padding-right: 0; }

.acc { border-bottom: 1px solid var(--line); }
.acc-item { border-top: 1px solid var(--line); scroll-margin-top: 7rem; }   /* scroll-margin: leaves room for the menu when a link jumps here */
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  list-style: none;                                       /* hides the browser's own little triangle */
  cursor: pointer;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.acc-head::-webkit-details-marker { display: none; }
.acc-head:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.acc-title { color: rgba(255, 255, 255, 0.86); transition: color 0.25s ease; }
.acc-head:hover .acc-title { color: #fff; }

/* the plus: two thin lines; when the row is open, the vertical one fades away and it becomes a minus */
.acc-icon { position: relative; flex: none; width: 14px; height: 14px; color: var(--muted); }
.acc-icon::before, .acc-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.acc-icon::after { transform: rotate(90deg); }
html:not(.js) .acc-item[open] .acc-icon::after, .js .acc-item.is-open .acc-icon::after { transform: rotate(0deg); opacity: 0; }
html:not(.js) .acc-item[open] .acc-title, .js .acc-item.is-open .acc-title { color: #fff; }

.acc-inner {
  max-width: 46rem;
  padding: 0 3rem 1.7rem 0;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  color: var(--muted);
}
.acc-inner p { margin: 0 0 1em; }
.acc-inner p:last-child { margin-bottom: 0; }
/* the short bold line at the start of some texts (the client's "...!" sentences) */
.acc-inner .acc-lead { color: var(--text); font-weight: 600; }
/* the lists of features: a thin dash in front of each item, the name in white */
.acc-inner ul { margin: 0 0 1em; padding: 0; list-style: none; }
.acc-inner ul:last-child { margin-bottom: 0; }
.acc-inner li { position: relative; padding-left: 1.3em; margin-bottom: 0.45em; }
.acc-inner li::before { content: "\2013"; position: absolute; left: 0; color: var(--dim); }
.acc-inner li strong { color: var(--text); font-weight: 600; }

/* the small category headings between the rows (the same 4 groups as the cards on the homepage) */
.acc-group {
  padding: 2.4rem 0 0.8rem;
  font-size: 0.8rem;                             /* the same small capitals as the labels on the Contact page */
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.acc-group:first-child { padding-top: 0; }

/* ---------- Phones and small screens ---------- */
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split::before { display: none; }
  .split-title { position: static; padding-right: 0; margin-bottom: 2.25rem; }
  .split-body { padding-left: 0; }
  .contact-list li { grid-template-columns: 1fr; gap: 0.4rem; }   /* label above the detail */
}
@media (max-width: 700px) {
  :root { --side: 1.5rem; }
}

    /* ---------- Footer: copyright on the left, the "Powered by" credit on the right ---------- */
    .site-footer {
      display: flex;
      flex-wrap: wrap;                  /* on narrow screens the credit drops under the copyright */
      justify-content: space-between;
      align-items: center;
      gap: 0.6rem 2rem;
    }
    .credit { color: var(--dim); }
    .site-footer .credit-name { color: var(--muted); font-weight: 600; white-space: nowrap; }
    .credit-sep { margin: 0 0.6em; opacity: 0.6; }
    .credit a {
      color: var(--muted);
      text-decoration: none;
      /* a thin underline grows under the email on hover */
      background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
      transition: background-size 0.4s ease, color 0.3s ease;
    }
    .credit a:hover { color: var(--text); background-size: 100% 1px; }

    /* ---------- Phone menu: a square button with three lines next to "Sună acum".
       Tapping it opens the menu links as a small panel under the header. ---------- */
    .menu-toggle { display: none; }
    @media (max-width: 700px) {
      .header-right { gap: 0.5rem; }
      .menu-toggle {
        position: relative;
        display: block;
        flex: none;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.6);    /* the same border as the "Sună acum" button */
        border-radius: 2px;
        background: transparent;
        color: var(--text);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
      }
      .menu-toggle:hover { background: var(--text); color: var(--bg); }
      .menu-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
      /* the three lines; when the menu is open the top and bottom ones turn into an X */
      .menu-toggle span {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1.1rem;
        height: 1.5px;
        margin: -0.75px 0 0 -0.55rem;
        background: currentColor;
        transition: transform 0.3s ease, opacity 0.2s ease;
      }
      .menu-toggle span:nth-child(1) { transform: translateY(-6px); }
      .menu-toggle span:nth-child(3) { transform: translateY(6px); }
      .is-menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
      .is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
      .is-menu-open .menu-toggle span:nth-child(3) { transform: rotate(-45deg); }

      /* the panel with the links */
      .site-header nav {
        position: absolute;
        top: calc(100% - 0.6rem);
        right: var(--pad);
        min-width: 13rem;
        padding: 0.35rem 1.25rem;
        background: rgba(10, 13, 20, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 3px;
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;                            /* hidden links can't be reached with Tab either */
        transform: translateY(-0.5rem);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
      }
      .is-menu-open nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 0.25s ease, transform 0.25s ease;
      }
      .site-header ul { flex-direction: column; gap: 0; }
      .site-header li + li { border-top: 1px solid rgba(255, 255, 255, 0.09); }
      .site-header ul a { display: block; padding: 0.9rem 0; }
    }

/* ==========================================================================
   Social icons (footer on every page; bigger, with the names, on the Contact page)
   ========================================================================== */
.footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.social { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
.social svg { flex: none; width: 1.15rem; height: 1.15rem; }
/* hover AND keyboard focus look the same: the site blue, lifted by 1px */
.social a:hover,
.social a:focus-visible { color: rgb(170, 190, 255); transform: translateY(-1px); }
.social a:focus-visible { outline: 2px solid rgb(170, 190, 255); outline-offset: 2px; }
@media (max-width: 700px) { .social a { min-width: 2.75rem; min-height: 2.75rem; } }   /* 44 px: easy to tap with a finger */
@media (prefers-reduced-motion: reduce) {
  .social a { transition: none; }
  .social a:hover, .social a:focus-visible { transform: none; }
}
/* the Contact page version: a bit bigger, with the name next to each icon */
.social--big { gap: 0.25rem 1.25rem; }
.social--big a { justify-content: flex-start; padding-right: 0.4rem; color: var(--text); font-size: 1rem; }
.social--big svg { width: 1.35rem; height: 1.35rem; }

/* ==========================================================================
   Contact page: "Zonă de acoperire" under the text on the left, "Urmărește-ne" at the end on the right
   ========================================================================== */
.zone { max-width: 22rem; margin-top: 2.5rem; }
.follow { animation-delay: 1.05s; }              /* it rises in right after "Date firmă" */
/* the county names as rounded "pills" */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 0.4rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.95rem;
  color: var(--text);
}