/* Language switch: two links in one pill, the current language filled. Stays in the
   header at every width, so switching is always one tap. */
.language-switch {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid rgba(143, 180, 255, 0.24);
  border-radius: 999px;
  background: rgba(7, 18, 49, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* The thumb: a LukApp-blue pill under the current language that springs across when it changes. */
.language-thumb {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: linear-gradient(180deg, #2f86ff, #0868f8);
  box-shadow: 0 6px 16px -6px rgba(8, 104, 248, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: transform 0.5s cubic-bezier(0.3, 1.35, 0.5, 1);
  pointer-events: none;
}
.language-switch:has([data-language="en"][aria-current]) .language-thumb { transform: translateX(100%); }
.language-switch a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  color: #9fb0d0;
  font: 600 12px/1 "DM Sans", sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color 0.3s;
}
/* "ქა" uses the system's Georgian face on the English page, so English never downloads
   Google Sans for two letters; the Georgian page already has it. */
.language-switch a:lang(ka) { font: 600 13px/1 "Noto Sans Georgian", sans-serif; letter-spacing: 0; }
html:lang(ka) .language-switch a:lang(ka) { font-family: "Google Sans", "Noto Sans Georgian", sans-serif; }
.language-switch a:hover,
.language-switch a[aria-current] { color: #fff; }
.language-switch a:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .language-thumb { transition: none; }
}
/* Georgian type. Google Sans carries headlines, text and UI (it is drawn for Georgian,
   not borrowed); the accent words use a light, narrow Noto Serif Georgian, the same
   quiet contrast Instrument Serif gives the English. Neither font loads in English. */
html:lang(ka) {
  --sans: "Google Sans", "Noto Sans Georgian", "DM Sans", sans-serif;
  --display: "Google Sans", "Noto Sans Georgian", "Space Grotesk", sans-serif;
  --serif: "Noto Serif Georgian", Georgia, serif;
  font-optical-sizing: auto;
}
/* Latin display tracking is negative and squeezes Georgian letters; let the script breathe. */
html:lang(ka) body * { letter-spacing: normal; }
/* Capitals in English become Mtavruli in Georgian (i18n.js tags them); track them lightly. */
html:lang(ka) [data-ka-caps] { letter-spacing: 0.06em; }
html:lang(ka) em { font-style: normal; font-weight: 400; font-stretch: 85%; }
html:lang(ka) :is(h1, h2, h3) em { font-weight: 300; font-stretch: 78%; letter-spacing: -0.01em; }
html:lang(ka) .brand { font-family: "Space Grotesk", sans-serif; letter-spacing: -0.06em; }
html:lang(ka) .p-browser { overflow-wrap: anywhere; }

/* Georgian sizes. Mkhedruli has tall ascenders and descenders and longer words than the
   English lines these sizes were set for, so the big headlines step down and open up. */
/* "პროდუქტამდე." is one long word, so the accent line matches the others instead of
   growing like the English "pulse.", and stays clear of the hero art. */
html:lang(ka) h1 { font-size: clamp(3.2rem, 5.3vw, 5.5rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 700px; }
html:lang(ka) h1 em { font-size: 1.04em; line-height: 1.04; margin-top: 0.02em; }
html:lang(ka) .real-project h3 { font-size: clamp(2.1rem, 3.1vw, 3.1rem); line-height: 1.16; }
html:lang(ka) .invite h2 { font-size: clamp(3.2rem, 7.2vw, 7.4rem); line-height: 1.06; }
html:lang(ka) :is(.section-head h2, .manifesto h2) { line-height: 1.18; }
/* Long Georgian feature names need a wider tile: three a row beside the icon, not four
   (tablets and up; phones keep English's two a row). */
@media (min-width: 801px) {
  html:lang(ka) .estimator-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
/* Small phones: single Georgian words ("ონლაინმაღაზია") outgrow the text column beside the
   icon, so the icon moves above the label and the label gets the tile's full width. */
@media (max-width: 400px) {
  html:lang(ka) .estimator-tiles button { grid-template-columns: 1fr; align-content: start; gap: 8px; }
  html:lang(ka) .estimator-tiles button b { font-size: 0.875rem; }
}
/* Group titles are longer in Georgian; the hint wraps under the title instead of widening it. */
html:lang(ka) .estimator-step legend { flex-wrap: wrap; row-gap: 4px; }

/* Tablets and small laptops: Georgian nav words run longer than English, so the CTA
   keeps only "დავიწყოთ" (as English keeps "Start" at 801–900) and the nav tightens. */
@media (min-width: 801px) and (max-width: 1180px) {
  html:lang(ka) .header-cta .cta-long { display: none; }
  html:lang(ka) .header nav { font-size: 0.8125rem; }
}
@media (min-width: 801px) and (max-width: 1000px) {
  html:lang(ka) .header { column-gap: 14px; }
}
/* Tablets: both hero actions share a line in Georgian too (the copy column is ~370px). */
@media (min-width: 801px) and (max-width: 1100px) {
  html:lang(ka) .hero-actions { column-gap: 14px; }
  html:lang(ka) .hero .primary-action { padding-inline: 18px; gap: 12px; font-size: 0.875rem; }
  html:lang(ka) .hero-actions > a { font-size: 0.875rem; }
}
@media (min-width: 801px) and (max-width: 940px) {
  html:lang(ka) .header nav { gap: 12px; font-size: 0.78rem; }
  html:lang(ka) .header-cta { padding-inline: 18px; min-width: 0; }
  html:lang(ka) .header-cta > span[aria-hidden] { display: none; }
}
@media (min-width: 801px) and (max-width: 880px) {
  html:lang(ka) .header .brand { font-size: 1.5rem; }
  html:lang(ka) .header nav { gap: 10px; }
  html:lang(ka) .language-switch a { min-width: 34px; padding: 0 8px; }
}
@media (min-width: 801px) and (max-width: 840px) {
  html:lang(ka) .header nav { font-size: 0.72rem; gap: 9px; }
}
@media (min-width: 1001px) {
  .header { gap: 18px; }
  .header nav { margin-inline: auto; }
}
@media (max-width: 1000px) {
  .language-switch { margin-left: auto; }
  .header .menu-toggle { margin-left: 0; }
}
@media (max-width: 600px) {
  /* Phones: "პროდუქტამდე." has to fit the screen, so the accent line is set a touch
     smaller than the two above it rather than larger as in English. */
  html:lang(ka) h1 { font-size: 14vw; line-height: 1.08; }
  html:lang(ka) h1 em { font-size: 0.96em; margin-left: 0; }
  /* English runs "With a pulse." on one line on phones; the Georgian words each need theirs. */
  html:lang(ka) .hero-copy h1 > :is(span:nth-child(2), em) { display: block; }
  /* While web fonts load, a wider fallback must not push the page sideways. */
  html:lang(ka) :is(h1, h2, h3) { overflow-wrap: break-word; }
  .header { gap: 10px; }
  .header .language-switch { order: 1; }
  .header .menu-toggle { order: 2; }
  .header .header-cta { display: none; }
  html:lang(ka) .hero-copy > p { max-width: 100%; }
  html:lang(ka) .hero-actions { flex-wrap: wrap; gap: 20px; }
  html:lang(ka) .manifesto h2 { font-size: clamp(1.9rem, 7.5vw, 3rem); line-height: 1.45; }
  html:lang(ka) .contact h2 { font-size: clamp(2.6rem, 10vw, 4rem); line-height: 1.2; }
  html:lang(ka) .brief-title { font-size: 2rem; }
  html:lang(ka) .brief-actions { flex-wrap: wrap; }
  html:lang(ka) .lab-filters { flex-wrap: wrap; }
}
/* Large phones and small tablets (601–800): the CTA returns beside the menu; in Georgian it
   keeps only "დავიწყოთ" so logo, switch, CTA and menu share one row. */
@media (min-width: 601px) and (max-width: 800px) {
  html:lang(ka) .header-cta .cta-long { display: none; }
}
/* Narrow phones: logo, language switch and menu stay on one row in both languages. */
@media (max-width: 380px) {
  .header { column-gap: 8px; }
  .language-switch { padding: 2px; }
  .language-switch a { min-width: 32px; height: 34px; padding: 0 6px; }
}
@media (max-width: 350px) {
  .header .brand { font-size: 1.3rem; gap: 6px; }
  .header .menu-toggle { padding-inline: 12px; gap: 6px; }
}