/* ==========================================================================
   imecadine.ge — v2 დიზაინ-სისტემა (2026-08-24)
   პრემიუმ SaaS-სტილი: მუქი ლურჯი ჰერო + ღია სექციები.
   app.css-ს არ ვცვლით — ეს ფენა მასზე ზემოდან დგება, რომ არსებული
   გვერდები არ დაზიანდეს. ახალი კლასები ცალკეა, საერთოა მხოლოდ
   header/footer, რაც განზრახაა.
   ========================================================================== */

:root {
  --navy:      #071A3D;
  --deep-navy: #031126;
  --navy-2:    #0C2551;
  --navy-3:    #12336B;
  --blue:      #155EEF;
  --blue-dark: #0F49C0;
  --cyan:      #1D9BF0;
  --teal:      #16C79A;
  --teal-dark: #0FA37D;
  --slate:     #F7F9FC;
  --ink2:      #0F172A;
  --ink-mid:   #475569;
  --ink-soft:  #64748B;
  --hair:      #E4EAF2;

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 24px;
  --sh-1: 0 1px 2px rgba(7,26,61,.05), 0 4px 14px rgba(7,26,61,.06);
  --sh-2: 0 2px 6px rgba(7,26,61,.07), 0 16px 40px rgba(7,26,61,.10);
  --sh-3: 0 24px 70px rgba(7,26,61,.20);
}

/* ── ტიპოგრაფია ───────────────────────────────────────────── */
.v2 { color: var(--ink2); font-family: var(--imec-font); }
.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
  /* app.css სათაურებს „Georgian Display"-ს (BPG Caps) აძლევს — კაპიტელი.
     v2-ში სათაური ჩვეულებრივი ქართულია, ბოლდით. */
  font-family: var(--imec-font);
  margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.22;
  text-transform: none;
}
.v2 p { margin: 0; }

.v2-h1  { font-size: clamp(2rem, 4.6vw, 3.35rem); line-height: 1.16; }
.v2-h2  { font-size: clamp(1.5rem, 2.9vw, 2.25rem); }
.v2-h3  { font-size: 1.125rem; font-weight: 600; }
.v2-lead{ font-size: clamp(1rem, 1.35vw, 1.125rem); line-height: 1.7; color: var(--ink-mid); }
.v2-sm  { font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.v2-xs  { font-size: .78rem; line-height: 1.55; color: var(--ink-soft); }
.v2 .num { font-variant-numeric: tabular-nums; }

.v2-wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.v2-sec  { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.v2-sec--slate { background: var(--slate); }
.v2-head { text-align: center; max-width: 62ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.v2-head .v2-lead { margin-top: .85rem; }

.v2-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--blue);
}
.v2-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--teal); border-radius: 2px; }
.v2-head .v2-eyebrow { margin-bottom: .8rem; }

/* ── ღილაკები ─────────────────────────────────────────────── */
.v2-btn {
  --bg: var(--teal); --fg: #fff; --bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.6rem; border-radius: 999px; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg); font: inherit; font-weight: 600;
  font-size: .97rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.v2-btn:hover { transform: translateY(-2px); }
.v2-btn--teal    { --bg: var(--teal); box-shadow: 0 8px 22px rgba(22,199,154,.32); }
.v2-btn--teal:hover { --bg: var(--teal-dark); box-shadow: 0 12px 28px rgba(22,199,154,.4); }
.v2-btn--blue    { --bg: var(--blue); box-shadow: 0 8px 22px rgba(21,94,239,.28); }
.v2-btn--blue:hover { --bg: var(--blue-dark); }
.v2-btn--navy    { --bg: var(--navy); }
.v2-btn--ghost   { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.28); }
.v2-btn--ghost:hover { --bg: rgba(255,255,255,.09); }
.v2-btn--outline { --bg: #fff; --fg: var(--navy); --bd: var(--hair); box-shadow: var(--sh-1); }
.v2-btn--outline:hover { --bd: #c9d6e8; }
.v2-btn--sm { padding: .62rem 1.15rem; font-size: .88rem; }
.v2-btn--wide { width: 100%; }
.v2-btn svg { width: 17px; height: 17px; flex: none; }

/* ── ჰედერი ───────────────────────────────────────────────── */
.v2-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(7,26,61,.86); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .25s ease, box-shadow .25s ease;
}
.v2-header.is-stuck { background: rgba(7,26,61,.97); box-shadow: 0 6px 24px rgba(0,0,0,.28); }
.v2-header__in { display: flex; align-items: center; gap: 1.6rem; height: 70px; }
.v2-logo { display: inline-flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; }
.v2-logo i { font-style: normal; color: var(--teal); }
.v2-logo svg, .v2-logo img { width: 30px; height: 30px; }
.v2-nav { display: flex; align-items: center; gap: 1.5rem; margin-inline-start: auto; }
.v2-nav a { color: #C6D4EA; text-decoration: none; font-size: .93rem; font-weight: 500; transition: color .15s; }
.v2-nav a:hover, .v2-nav a.is-on { color: #fff; }
.v2-actions { display: flex; align-items: center; gap: .6rem; margin-inline-start: .6rem; }
.v2-burger { display: none; margin-inline-start: auto; width: 42px; height: 42px; border: 0; border-radius: 11px; background: rgba(255,255,255,.1); cursor: pointer; }
.v2-burger span { display: block; width: 17px; height: 2px; margin: 3.5px auto; background: #fff; border-radius: 2px; }

@media (max-width: 940px) {
  .v2-burger { display: block; }
  .v2-nav {
    position: absolute; inset: 70px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; padding: .6rem 1.25rem 1.25rem; background: #071A3D; margin: 0;
    border-bottom: 1px solid rgba(255,255,255,.08); display: none;
  }
  .v2-nav.is-open { display: flex; }
  .v2-nav > a { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .v2-actions { margin: .9rem 0 0; }
  .v2-actions .v2-btn { flex: 1; }
}

/* ── ჰერო ─────────────────────────────────────────────────── */
.v2-hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.v2-hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(48% 52% at 18% 8%, rgba(21,94,239,.42), transparent 62%),
    radial-gradient(40% 48% at 88% 78%, rgba(22,199,154,.24), transparent 66%);
  pointer-events: none;
}
/* რუკის მოტივი — ფონზე ნაზი მარშრუტი */
.v2-hero__map { position: absolute; inset: 0; opacity: .16; pointer-events: none; }
.v2-hero__in { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 6vw, 5.5rem); }

.v2-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
  border-radius: 999px; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); font-size: .8rem; font-weight: 500; color: #DCE7F8;
}
.v2-badge b { color: var(--teal); font-weight: 700; }
.v2-hero h1 { margin: 1.35rem 0 0; color: #fff; }
.v2-hero h1 em { font-style: normal; color: var(--teal); }
.v2-hero__sub { margin-top: 1.1rem; max-width: 48ch; font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.75; color: #AFC2DE; }
.v2-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.v2-stats { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(1rem, 2.4vw, 2.2rem); margin-top: 2.6rem; padding-top: 1.9rem; border-top: 1px solid rgba(255,255,255,.13); justify-content: start; }
.v2-stat { display: flex; align-items: center; gap: .7rem; }
.v2-stat__ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.09); color: var(--cyan); }
.v2-stat__ico svg { width: 17px; height: 17px; }
.v2-stat b { display: block; font-size: 1.16rem; font-weight: 700; color: #fff; line-height: 1.2; }
.v2-stat span { font-size: .73rem; color: #90A6C7; }

/* ჰერო ფოტო */
.v2-shot { position: relative; }
.v2-shot__frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-3); border: 1px solid rgba(255,255,255,.12);
  aspect-ratio: 1238 / 1280;
}
.v2-shot__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-shot__frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(7,26,61,.12), rgba(7,26,61,.62));
}
.v2-shot__tag {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem;
  border-radius: 999px; background: rgba(7,26,61,.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); font-size: .74rem; color: #DCE7F8;
}
.v2-shot__tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(22,199,154,.25); }

/* მცურავი პროგრესის ბარათი */
.v2-float {
  position: absolute; right: -6px; bottom: -22px; z-index: 3; width: min(290px, 78%);
  background: #0C2551; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r);
  padding: 1rem 1.1rem; box-shadow: var(--sh-3);
}
.v2-float__t { display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; color: #fff; }
.v2-float__t svg { width: 17px; height: 17px; color: var(--teal); flex: none; }
.v2-float__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem; font-size: .78rem; color: #A9BEDD; }
.v2-float__row b { font-size: 1.05rem; color: #fff; }
.v2-float__bar { height: 7px; margin-top: .55rem; border-radius: 6px; background: rgba(255,255,255,.13); overflow: hidden; }
.v2-float__bar i { display: block; height: 100%; width: 80%; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), var(--teal)); }

@media (max-width: 900px) {
  .v2-hero__in { grid-template-columns: 1fr; padding-bottom: 4.5rem; }
  .v2-shot { order: -1; max-width: 420px; }
  .v2-stats { grid-template-columns: repeat(2, 1fr); }
  .v2-float { right: 8px; bottom: -18px; }
}

/* ── ტალღოვანი გამყოფი ────────────────────────────────────── */
.v2-wave { display: block; width: 100%; height: auto; margin-bottom: -1px; }

/* ── ორი ბარათი: თეორია / პრაქტიკა ────────────────────────── */
.v2-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.v2-card {
  position: relative; background: #fff; border: 1px solid var(--hair);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--sh-1); display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.v2-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.v2-card__top { display: flex; align-items: flex-start; gap: 1rem; }
.v2-ico {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  border-radius: 15px; color: #fff;
}
.v2-ico svg { width: 24px; height: 24px; }
.v2-ico--blue { background: linear-gradient(150deg, var(--blue), var(--cyan)); box-shadow: 0 8px 20px rgba(21,94,239,.26); }
.v2-ico--teal { background: linear-gradient(150deg, var(--teal), #0EA5A0); box-shadow: 0 8px 20px rgba(22,199,154,.26); }
.v2-card__top h3 { font-size: 1.28rem; font-weight: 700; }
.v2-card__top p { margin-top: .45rem; }
.v2-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.v2-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; color: var(--ink-mid); line-height: 1.5; }
.v2-list svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--teal); }
.v2-card .v2-btn { margin-top: auto; }
.v2-card__foot { margin-top: 1.6rem; }

/* ── უპირატესობების ბადე ──────────────────────────────────── */
.v2-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 860px) { .v2-grid6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v2-grid6 { grid-template-columns: 1fr; } }
.v2-feat { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 1.5rem 1.35rem; box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s, border-color .18s; }
.v2-feat:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: #d6e2f3; }
.v2-feat__ico { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #EAF1FE; color: var(--blue); margin-bottom: 1rem; }
.v2-feat__ico svg { width: 20px; height: 20px; }
.v2-feat h3 { font-size: 1rem; font-weight: 600; }
.v2-feat p { margin-top: .45rem; font-size: .87rem; line-height: 1.6; color: var(--ink-soft); }

/* ── როგორ მუშაობს ────────────────────────────────────────── */
.v2-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; }
@media (max-width: 780px) { .v2-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .v2-steps { grid-template-columns: 1fr; } }
.v2-step { position: relative; text-align: center; padding: 0 .5rem; }
.v2-step__n {
  width: 54px; height: 54px; margin: 0 auto 1.05rem; display: grid; place-items: center;
  border-radius: 50%; background: #fff; border: 2px solid var(--blue); color: var(--blue);
  font-weight: 700; font-size: 1.12rem; position: relative; z-index: 2; box-shadow: var(--sh-1);
}
.v2-step:nth-child(4) .v2-step__n { border-color: var(--teal); color: var(--teal); }
.v2-step h3 { font-size: 1.02rem; font-weight: 600; }
.v2-step p { margin-top: .45rem; font-size: .87rem; line-height: 1.6; color: var(--ink-soft); }
.v2-step::after {
  content: ''; position: absolute; top: 27px; left: calc(50% + 40px); right: calc(-50% + 40px);
  height: 2px; background: linear-gradient(90deg, #CBD8EC, #E4EAF2); z-index: 1;
}
.v2-step:last-child::after { display: none; }
@media (max-width: 780px) { .v2-step::after { display: none; } }

/* ── ტარიფები ─────────────────────────────────────────────── */
.v2-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.3rem; align-items: start; }
.v2-plan { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 1.7rem 1.5rem; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.v2-plan--hot { border: 2px solid var(--blue); box-shadow: var(--sh-2); position: relative; }
@media (min-width: 940px) { .v2-plan--hot { transform: scale(1.035); } }
.v2-plan__hd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.v2-plan__hd h3 { font-size: 1.08rem; font-weight: 600; }
.v2-tag { font-size: .68rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: #EEF3FB; color: var(--ink-soft); white-space: nowrap; }
.v2-tag--hot { background: var(--blue); color: #fff; }
.v2-plan__price { display: flex; align-items: baseline; gap: .5rem; margin: 1.1rem 0 .2rem; }
.v2-plan__price b { font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.v2-plan__price s { color: var(--ink-soft); font-size: 1rem; }
.v2-plan__price span { font-size: .84rem; color: var(--ink-soft); }
.v2-plan .v2-list { margin-top: 1.3rem; }
.v2-plan .v2-list li { font-size: .89rem; }
.v2-plan .v2-btn { margin-top: 1.6rem; }
.v2-plan--hot .v2-list svg { color: var(--blue); }
.v2-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 1.8rem; }
.v2-trust span { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink-soft); }
.v2-trust svg { width: 16px; height: 16px; color: var(--teal); }

/* ── FAQ ──────────────────────────────────────────────────── */
.v2-faq { display: grid; gap: .7rem; }
.v2-faq details { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--sh-1); overflow: hidden; }
.v2-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; cursor: pointer; font-size: .97rem; font-weight: 600;
  color: var(--ink2); list-style: none;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after {
  content: ''; width: 11px; height: 11px; flex: none; border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .2s ease;
}
.v2-faq details[open] summary { color: var(--blue); }
.v2-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--blue); }
.v2-faq p { padding: 0 1.3rem 1.25rem; font-size: .91rem; line-height: 1.72; color: var(--ink-mid); }

.v2-two { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.6rem; align-items: start; }
.v2-two aside { position: sticky; top: 96px; }
@media (max-width: 900px) { .v2-two aside { position: static; } }
@media (max-width: 900px) { .v2-two { grid-template-columns: 1fr; } }

/* ── შუა CTA ──────────────────────────────────────────────── */
.v2-cta {
  position: relative; overflow: hidden; border-radius: var(--r-lg); color: #fff;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-3) 100%);
  padding: clamp(1.8rem, 3.6vw, 2.6rem); box-shadow: var(--sh-2);
}
.v2-cta::after { content: ''; position: absolute; right: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(22,199,154,.3), transparent 68%); }
.v2-cta__ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: var(--teal); margin-bottom: 1.15rem; }
.v2-cta__ico svg { width: 26px; height: 26px; }
.v2-cta h3 { font-size: 1.42rem; color: #fff; }
.v2-cta p { margin: .7rem 0 1.5rem; font-size: .94rem; line-height: 1.7; color: #AFC2DE; max-width: 42ch; }

/* ── ქვედა CTA ზოლი ───────────────────────────────────────── */
.v2-strip { background: linear-gradient(115deg, var(--navy) 0%, var(--navy-3) 62%, #123F7E 100%); color: #fff; }
.v2-strip__in { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; padding: clamp(2rem, 4vw, 2.8rem) 0; }
.v2-strip h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: #fff; }
.v2-strip p { margin-top: .45rem; font-size: .92rem; color: #AFC2DE; }

/* ── ფუტერი ───────────────────────────────────────────────── */
.v2-footer { background: var(--navy); color: #93A9C9; padding: clamp(2.8rem, 5vw, 4rem) 0 1.6rem; }
.v2-footer__grid { display: grid; grid-template-columns: 1.55fr repeat(4, 1fr); gap: 2rem 1.4rem; }
.v2-footer h4 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .95rem; font-weight: 600; }
.v2-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.v2-footer a { color: #93A9C9; text-decoration: none; font-size: .88rem; transition: color .15s; }
.v2-footer a:hover { color: #fff; }
.v2-footer__about { font-size: .88rem; line-height: 1.7; margin-top: 1rem; max-width: 34ch; }
.v2-footer__bar { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; }
.v2-footer__bar .heart { color: #fff; }
.v2-footer__bar .heart b { color: #E4576B; font-weight: 400; }
@media (max-width: 860px) { .v2-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .v2-footer__grid { grid-template-columns: 1fr; } }

/* ── ხელმისაწვდომობა ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v2-btn, .v2-card, .v2-feat, .v2-faq summary::after { transition: none; }
  .v2-btn:hover, .v2-card:hover, .v2-feat:hover { transform: none; }
}
.v2 :focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }

/* ==========================================================================
   /praktika — მარშრუტების გვერდი (2026-08-24)
   ღია, EdTech-სტილის; header/footer არ იცვლება.
   ========================================================================== */
.pr { background: #fff; }
.pr-wrap { width: min(1440px, 100%); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.pr-sec { padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.pr-sec + .pr-sec { padding-top: 0; }

.pr-h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.pr-sub { margin-top: .5rem; font-size: .96rem; line-height: 1.65; color: var(--ink-mid); max-width: 66ch; }
.pr-secHd { margin-bottom: 1.5rem; }

/* ── ჰერო ─────────────────────────────────────────────────── */
.pr-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #EDF4FF 0%, #F4F9FF 46%, #EAF7F3 100%);
  border-bottom: 1px solid #E1EBF7;
}
.pr-hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem; align-items: center; padding-block: clamp(2rem, 4vw, 3.25rem); }
.pr-crumb { font-size: .84rem; color: var(--ink-soft); margin-bottom: .9rem; }
.pr-crumb a { color: var(--blue); text-decoration: none; }
.pr-crumb a:hover { text-decoration: underline; }
.pr-crumb span { margin-inline: .4rem; color: #A9BACF; }
.pr-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -.025em; color: var(--navy); line-height: 1.18; }
.pr-hero__lead { margin-top: .95rem; font-size: clamp(.96rem, 1.15vw, 1.06rem); line-height: 1.7; color: var(--ink-mid); max-width: 58ch; }

.pr-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.pr-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem; border-radius: 999px; background: #fff; border: 1px solid #DCE7F5; font-size: .86rem; font-weight: 500; color: var(--navy); box-shadow: 0 1px 3px rgba(7,26,61,.05); }
.pr-pill svg { width: 16px; height: 16px; color: var(--blue); }

.pr-heroCta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; margin-top: 1.7rem; }
.pr-price { font-size: .88rem; color: var(--ink-mid); }
.pr-price b { color: var(--navy); font-weight: 600; }
.pr-hero__art { justify-self: end; width: 100%; max-width: 460px; opacity: .9; }
.pr-hero__art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .pr-hero__in { grid-template-columns: 1fr; } .pr-hero__art { display: none; } }

/* ── ქალაქების ბარათები ───────────────────────────────────── */
.pr-cities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .pr-cities { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .pr-cities {
    display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .7rem; margin-inline: calc(clamp(1rem, 4vw, 4rem) * -1);
    padding-inline: clamp(1rem, 4vw, 4rem); scrollbar-width: thin;
  }
  .pr-city { flex: 0 0 76%; scroll-snap-align: start; }
}

.pr-city {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  aspect-ratio: 16 / 9; text-decoration: none; background: #E8EFF8;
  border: 3px solid transparent; box-shadow: 0 1px 3px rgba(7,26,61,.08), 0 6px 18px rgba(7,26,61,.07);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.pr-city picture { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.pr-city img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .35s ease; }
.pr-city::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(4,16,38,.86) 0%, rgba(4,16,38,.45) 34%, rgba(4,16,38,.06) 62%, transparent 100%);
}
.pr-city:hover { box-shadow: 0 6px 14px rgba(7,26,61,.12), 0 18px 40px rgba(7,26,61,.16); transform: translateY(-2px); }
.pr-city:hover img { transform: scale(1.06); }
.pr-city.is-on { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(21,94,239,.15), 0 14px 32px rgba(7,26,61,.16); }
.pr-city__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: .85rem .95rem; }
.pr-city__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.pr-city__n { display: inline-flex; align-items: center; gap: .35rem; margin-top: .2rem; font-size: .81rem; color: #D5E3F6; }
.pr-city__n svg { width: 13px; height: 13px; }
.pr-city__check {
  position: absolute; top: .6rem; right: .6rem; z-index: 4; width: 26px; height: 26px;
  display: none; place-items: center; border-radius: 50%; background: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(7,26,61,.35);
}
.pr-city__check svg { width: 15px; height: 15px; }
.pr-city.is-on .pr-city__check { display: grid; }
/* ფოტო თუ ვერ ჩაიტვირთა — ქალაქის სახელი გრადიენტზე */
/* ფოტოს ქვეშ დგას — თუ სურათი ჩაიტვირთა, ვეღარ ჩანს */
.pr-city__ph { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: linear-gradient(140deg, var(--navy-3), var(--blue)); color: #fff; font-size: 1.1rem; font-weight: 600; }

.pr-cityAll {
  display: grid; place-content: center; gap: .3rem; text-align: center;
  border: 2px dashed #C9D9EE; border-radius: 16px; aspect-ratio: 16 / 9;
  color: var(--blue); text-decoration: none; background: #F7FAFF; font-weight: 600; font-size: .95rem;
  transition: border-color .2s, background .2s;
}
.pr-cityAll:hover { border-color: var(--blue); background: #EFF5FF; }
.pr-cityAll small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-soft); }

/* ── მართვის პანელი ───────────────────────────────────────── */
.pr-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.15rem 1.25rem; border: 1px solid var(--hair); border-radius: 16px;
  background: #FBFCFE; margin-bottom: 1.4rem;
}
.pr-bar h2 { font-size: 1.18rem; font-weight: 700; color: var(--navy); }
.pr-bar__cnt { margin-top: .25rem; font-size: .86rem; color: var(--ink-soft); }
.pr-bar__cnt b { color: var(--blue); font-weight: 600; }
.pr-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.pr-field { position: relative; display: flex; align-items: center; }
.pr-field svg { position: absolute; left: .75rem; width: 16px; height: 16px; color: var(--ink-soft); pointer-events: none; }
.pr-input, .pr-select {
  height: 44px; border: 1px solid #DCE5F0; border-radius: 11px; background: #fff;
  font: inherit; font-size: .9rem; color: var(--ink2); padding-inline: .85rem;
  transition: border-color .15s, box-shadow .15s;
}
.pr-input { padding-inline-start: 2.3rem; min-width: 220px; }
.pr-input:focus, .pr-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(21,94,239,.14); }
.pr-seg { display: inline-flex; padding: 3px; border: 1px solid #DCE5F0; border-radius: 11px; background: #fff; height: 44px; }
.pr-seg button {
  display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent;
  border-radius: 8px; padding: 0 .8rem; font: inherit; font-size: .86rem; font-weight: 500;
  color: var(--ink-soft); cursor: pointer; transition: background .15s, color .15s;
}
.pr-seg button svg { width: 16px; height: 16px; }
.pr-seg button.is-on { background: var(--blue); color: #fff; }
@media (max-width: 760px) {
  /* ერთ სვეტად — ყველა კონტროლი სრული სიგანით, touch target ≥ 44px */
  .pr-bar { align-items: stretch; flex-direction: column; gap: 1rem; }
  .pr-tools { width: 100%; flex-direction: column; align-items: stretch; gap: .55rem; }
  .pr-field { width: 100%; }
  .pr-input, .pr-select { width: 100%; min-width: 0; height: 48px; }
  .pr-seg { width: 100%; height: 48px; }
  .pr-seg button { flex: 1; justify-content: center; }
}

/* ── მარშრუტის ბარათი ─────────────────────────────────────── */
.pr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
@media (max-width: 1050px) { .pr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pr-grid { grid-template-columns: 1fr; } }

.pr-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hair);
  border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(7,26,61,.05), 0 4px 14px rgba(7,26,61,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* [hidden]-ს UA-ს display:none აქვს, მაგრამ .pr-card-ის display:flex მას აჭარბებს */
.pr-card[hidden] { display: none !important; }
.pr-card:hover { transform: translateY(-3px); border-color: #BFD4F2; box-shadow: 0 8px 18px rgba(7,26,61,.1), 0 20px 44px rgba(7,26,61,.12); }
.pr-card__map { position: relative; aspect-ratio: 7 / 5; background: #EEF3F9; overflow: hidden; }
.pr-card__map img, .pr-card__map svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pr-card__lock {
  position: absolute; top: .65rem; right: .65rem; display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .7rem; border-radius: 999px; background: rgba(255,255,255,.94);
  border: 1px solid #E3E9F2; font-size: .74rem; font-weight: 600; color: #8A6320;
  box-shadow: 0 2px 6px rgba(7,26,61,.12);
}
.pr-card__lock svg { width: 13px; height: 13px; }
.pr-card__bm {
  position: absolute; top: .65rem; left: .65rem; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid #E3E9F2; border-radius: 9px; background: rgba(255,255,255,.94); color: var(--ink-soft);
  cursor: pointer; box-shadow: 0 2px 6px rgba(7,26,61,.1); transition: color .15s, background .15s;
}
.pr-card__bm svg { width: 15px; height: 15px; }
.pr-card__bm:hover { color: var(--blue); }
.pr-card__bm[aria-pressed="true"] { color: var(--blue); background: #EAF1FE; }
.pr-card__bm[aria-pressed="true"] svg { fill: currentColor; }

.pr-card__body { display: flex; flex-direction: column; gap: .75rem; padding: 1rem 1.05rem 1.1rem; flex: 1; }
.pr-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .62rem; border-radius: 7px; background: #EAF1FE; color: var(--blue); font-size: .76rem; font-weight: 600; }
.pr-card h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); }
.pr-card__cats { font-size: .76rem; color: var(--ink-soft); margin-top: .2rem; }
.pr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pr-stat { text-align: center; padding: .55rem .3rem; border-radius: 10px; background: #F6F9FD; border: 1px solid #EDF2F9; }
.pr-stat b { display: block; font-size: .95rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.pr-stat span { display: block; margin-top: .1rem; font-size: .7rem; color: var(--ink-soft); }
.pr-card .pr-go { margin-top: auto; }
.pr-go {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  min-height: 48px; border-radius: 12px; background: var(--blue); color: #fff; font: inherit;
  font-weight: 600; font-size: .93rem; text-decoration: none; border: 0; cursor: pointer;
  transition: background .15s ease;
}
.pr-go:hover { background: var(--blue-dark); }
.pr-go svg { width: 16px; height: 16px; }

/* ── მეტის ჩვენება ────────────────────────────────────────── */
.pr-more { display: grid; justify-items: center; gap: .6rem; margin-top: 1.8rem; }
.pr-more button {
  min-height: 48px; padding: 0 1.7rem; border-radius: 999px; border: 1.5px solid #D5E1F1;
  background: #fff; font: inherit; font-weight: 600; font-size: .93rem; color: var(--navy);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pr-more button:hover { border-color: var(--blue); background: #F6F9FF; }
.pr-more small { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.pr-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed #D5E1F1; border-radius: 18px; background: #FBFCFE; }
.pr-empty p { color: var(--ink-mid); margin-bottom: 1rem; }

/* ── სია-ხედი ─────────────────────────────────────────────── */
.pr-grid.is-list { grid-template-columns: 1fr; gap: .75rem; }
.pr-grid.is-list .pr-card { flex-direction: row; align-items: stretch; }
.pr-grid.is-list .pr-card__map { flex: 0 0 190px; aspect-ratio: auto; }
.pr-grid.is-list .pr-card__body { flex-direction: row; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pr-grid.is-list .pr-card__hd { flex: 1 1 200px; }
.pr-grid.is-list .pr-stats { flex: 0 0 260px; }
.pr-grid.is-list .pr-go { width: auto; padding-inline: 1.4rem; margin: 0; }
@media (max-width: 760px) {
  .pr-grid.is-list .pr-card { flex-direction: column; }
  .pr-grid.is-list .pr-card__map { flex: none; aspect-ratio: 7 / 5; }
  .pr-grid.is-list .pr-go { width: 100%; }
}

/* ── ინფო-ბარათები ────────────────────────────────────────── */
.pr-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .pr-info { grid-template-columns: 1fr; } }
.pr-infoCard { background: #F7FAFF; border: 1px solid #E4EDF9; border-radius: 16px; padding: 1.5rem 1.35rem; }
.pr-infoCard__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid #DCE7F5; color: var(--blue); margin-bottom: 1rem; }
.pr-infoCard__ico svg { width: 21px; height: 21px; }
.pr-infoCard h3 { font-size: 1.02rem; font-weight: 600; color: var(--navy); }
.pr-infoCard p { margin-top: .55rem; font-size: .89rem; line-height: 1.7; color: var(--ink-mid); }

/* ── ფოტოების კრედიტები ───────────────────────────────────── */
.pr-credits { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); font-size: .76rem; line-height: 1.7; color: #8494A8; }
.pr-credits a { color: #7E90A8; }

/* ── მობილური sticky CTA ──────────────────────────────────── */
.pr-sticky { display: none; }
@media (max-width: 700px) {
  .pr-sticky {
    position: sticky; bottom: 0; z-index: 50; display: block;
    padding: .7rem clamp(1rem, 4vw, 4rem) calc(.7rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--hair);
  }
  .pr-sticky .pr-go { min-height: 50px; }
}

/* ── skeleton ─────────────────────────────────────────────── */
.pr-sk { border-radius: 18px; border: 1px solid var(--hair); overflow: hidden; background: #fff; }
.pr-sk__m { aspect-ratio: 7 / 5; background: linear-gradient(100deg, #EEF3F9 30%, #F7FAFD 50%, #EEF3F9 70%); background-size: 220% 100%; animation: prsk 1.3s linear infinite; }
.pr-sk__l { height: 12px; margin: 1rem 1.05rem 0; border-radius: 6px; background: #EEF3F9; }
.pr-sk__l:last-child { width: 60%; margin-bottom: 1.4rem; }
@keyframes prsk { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .pr-sk__m { animation: none; } }

/* ── ჩაკეტილი მარშრუტის გვერდი ────────────────────────────── */
.pr-lock { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 1.6rem; align-items: center;
  padding: 1.4rem; border: 1px solid var(--hair); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(7,26,61,.05), 0 6px 20px rgba(7,26,61,.06); }
.pr-lock__map { position: relative; border-radius: 14px; overflow: hidden; background: #EEF3F9; aspect-ratio: 7/5; }
.pr-lock__map img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 780px) { .pr-lock { grid-template-columns: 1fr; } }

.pr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.pr-plan { background: #fff; border: 1px solid var(--hair); border-radius: 18px; padding: 1.4rem 1.3rem;
  box-shadow: 0 1px 2px rgba(7,26,61,.05); display: flex; flex-direction: column; }
.pr-plan.is-hot { border: 2px solid var(--blue); box-shadow: 0 8px 24px rgba(21,94,239,.14); }
.pr-plan__hd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pr-plan__hd h3 { font-size: 1.02rem; font-weight: 600; color: var(--navy); }
.pr-plan__price { display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem; }
.pr-plan__price b { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; color: var(--navy); }
.pr-plan__price span { font-size: .82rem; color: var(--ink-soft); }
.pr-plan form { margin-top: auto; }

/* ==========================================================================
   /teoria — მართვის კატეგორიების ამრჩევი (2026-08-24)
   ცალკე `.th-*` სივრცე, /praktika-ს `.pr-*`-ის ანალოგიურად.
   ========================================================================== */

.th {
  --th-blue: #146EF5;
  --th-blue-d: #0F55C7;
  --th-navy: #0F2B5B;
  --th-head: #10213D;
  --th-txt: #334155;
  --th-mut: #64748B;
  --th-sky: #F1F7FF;
  --th-gray: #F8FAFC;
  --th-line: #E2E8F0;
  --th-ok: #10B981;
  --th-warn: #F59E0B;
  background: #fff;
  color: var(--th-txt);
}
.th h1, .th h2, .th h3 { color: var(--th-head); }
.th-wrap { width: min(1440px, 100%); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.th-sec { padding-block: clamp(2.2rem, 4vw, 3.2rem); }

/* ფოკუსის რგოლი — ერთიანი მთელ გვერდზე */
.th a:focus-visible, .th button:focus-visible {
  outline: 3px solid rgba(20,110,245,.5); outline-offset: 3px;
}

/* ── ჰერო ─────────────────────────────────────────────────── */
.th-hero { background: linear-gradient(180deg, #EFF6FF 0%, #F7FBFF 100%); border-bottom: 1px solid var(--th-line); }
.th-hero__in {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(1.5rem, 3vw, 3rem); align-items: center;
  padding-block: clamp(1.8rem, 3.6vw, 3.2rem);
}
.th-crumb { font-size: .84rem; color: #566579; display: flex; gap: .45rem; align-items: center; }
.th-crumb a { color: #566579; text-decoration: none; border-radius: 4px; }
.th-crumb a:hover { color: var(--th-blue); text-decoration: underline; }
.th-h1 {
  margin: .7rem 0 0; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.14;
  letter-spacing: -.025em; font-weight: 700;
}
.th-lead { margin-top: .85rem; font-size: clamp(.98rem, 1.2vw, 1.08rem); line-height: 1.68; color: var(--th-txt); max-width: 56ch; }

.th-usp { display: flex; flex-wrap: wrap; gap: 0; margin-top: 1.6rem; }
.th-usp__i { display: flex; align-items: center; gap: .7rem; padding-inline: 1.1rem; }
.th-usp__i:first-child { padding-inline-start: 0; }
.th-usp__i + .th-usp__i { border-inline-start: 1px solid #D8E6F8; }
.th-usp__ico {
  flex: none; width: 40px; height: 40px; border-radius: 11px; background: #fff;
  display: grid; place-items: center; color: var(--th-blue);
  box-shadow: 0 1px 2px rgba(15,43,91,.06), 0 6px 16px rgba(15,43,91,.07);
}
.th-usp__ico svg { width: 21px; height: 21px; }
.th-usp__t { font-size: .86rem; line-height: 1.35; font-weight: 600; color: var(--th-head); max-width: 11ch; }

.th-hero__art { justify-self: end; width: 100%; max-width: 560px; }
.th-hero__art svg { width: 100%; height: auto; display: block; }

/* ── მთავარი ბლოკი: B/B1 + სწრაფი დაწყება ─────────────────── */
.th-main { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 1.25rem; align-items: start; }

.th-feat {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(1rem, 2.2vw, 2rem); align-items: center;
  background: #fff; border: 1px solid var(--th-line); border-radius: 18px;
  padding: clamp(1.1rem, 2vw, 1.7rem);
  box-shadow: 0 1px 2px rgba(15,43,91,.04), 0 10px 30px rgba(15,43,91,.06);
}
.th-feat::before {
  content: ''; position: absolute; inset-inline-start: -8%; inset-block-start: -35%;
  width: 62%; height: 170%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,110,245,.11), rgba(20,110,245,0) 72%);
}
.th-feat__media { position: relative; z-index: 1; }
.th-feat__media img { width: 100%; height: 260px; object-fit: contain; object-position: center; display: block; }
.th-feat__badge { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; }
.th-feat__body { position: relative; z-index: 1; min-width: 0; }
.th-feat__body h2 { font-size: clamp(1.4rem, 2.1vw, 1.75rem); }
.th-feat__body p { margin-top: .6rem; font-size: .95rem; line-height: 1.65; color: var(--th-txt); }

.th-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem; margin-top: 1.15rem; padding-top: 1.1rem; border-top: 1px solid var(--th-line);
}
.th-stat { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.th-stat + .th-stat { border-inline-start: 1px solid var(--th-line); padding-inline-start: .75rem; }
.th-stat__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--th-sky); display: grid; place-items: center; color: var(--th-blue); }
.th-stat__ico svg { width: 18px; height: 18px; }
.th-stat b { display: block; font-size: 1.18rem; font-weight: 700; color: var(--th-head); line-height: 1.15; font-variant-numeric: tabular-nums; }
.th-stat span { display: block; font-size: .78rem; color: var(--th-mut); line-height: 1.3; }

.th-feat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 1.2rem; }
.th-prog { flex: 1 1 240px; min-width: 0; }
.th-prog__hd { display: flex; justify-content: space-between; gap: .8rem; font-size: .82rem; color: var(--th-mut); }
.th-prog__hd b { color: var(--th-head); font-variant-numeric: tabular-nums; }
.th-prog__bar { margin-top: .45rem; height: 8px; border-radius: 99px; background: #E8EEF7; overflow: hidden; }
.th-prog__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #10B981, #34D399); }
.th-prog__none { flex: 1 1 240px; font-size: .86rem; color: var(--th-mut); }

/* ღილაკები */
.th-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: 0 1.35rem; border-radius: 12px;
  font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.th-btn svg { width: 18px; height: 18px; }
.th-btn--primary { background: var(--th-blue); color: #fff; box-shadow: 0 6px 18px rgba(20,110,245,.28); }
.th-btn--primary:hover { background: var(--th-blue-d); box-shadow: 0 10px 24px rgba(20,110,245,.34); }
.th-btn--primary:active { transform: translateY(1px); }
.th-btn--white { background: #fff; color: var(--th-blue); border-color: #CFE1FB; box-shadow: 0 2px 10px rgba(15,43,91,.08); }
.th-btn--white:hover { border-color: var(--th-blue); }

/* ── სწრაფი დაწყება ───────────────────────────────────────── */
.th-quick {
  background: #fff; border: 1px solid var(--th-line); border-radius: 18px;
  padding: clamp(1rem, 1.6vw, 1.35rem);
  box-shadow: 0 1px 2px rgba(15,43,91,.04), 0 10px 30px rgba(15,43,91,.06);
}
.th-quick > h2 { font-size: 1.18rem; }
.th-quick__list { margin-top: .9rem; display: grid; gap: .4rem; }
.th-quick__i {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem;
  padding: .8rem; border-radius: 14px; border: 1px solid transparent; text-decoration: none;
  min-height: 64px; transition: background .18s ease, border-color .18s ease;
}
.th-quick__i:hover { background: var(--th-sky); border-color: #D3E4FF; }
.th-quick__i:hover .th-quick__go { transform: translateX(3px); }
.th-quick__ico { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.th-quick__ico svg { width: 21px; height: 21px; }
.th-quick__ico--blue { background: #E6F0FF; color: #146EF5; }
.th-quick__ico--cyan { background: #E0F2FE; color: #0284C7; }
.th-quick__ico--warn { background: #FEF3C7; color: #D97706; }
.th-quick__t { display: block; font-weight: 600; font-size: .95rem; color: var(--th-head); line-height: 1.3; }
.th-quick__d { display: block; margin-top: .2rem; font-size: .81rem; color: var(--th-mut); line-height: 1.4; }
.th-quick__go { flex: none; color: #94A3B8; display: grid; place-items: center; transition: transform .18s ease; }
.th-quick__go svg { width: 18px; height: 18px; }

/* ── სხვა კატეგორიები ─────────────────────────────────────── */
.th-head2 { margin-bottom: 1.2rem; }
.th-head2 h2 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.th-head2 p { margin-top: .5rem; font-size: .95rem; line-height: 1.6; color: var(--th-mut); max-width: 62ch; }

.th-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.th-card {
  display: flex; flex-direction: column; min-height: 230px;
  background: #fff; border: 1px solid var(--th-line); border-radius: 16px;
  padding: 1rem; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(15,43,91,.04), 0 4px 14px rgba(15,43,91,.05);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.th-card:hover { transform: translateY(-4px); border-color: var(--th-blue); box-shadow: 0 14px 34px rgba(15,43,91,.13); }
.th-card:hover .th-card__img img { transform: scale(1.03); }
.th-card:hover .th-card__go { transform: translateX(3px); }
.th-card__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.th-card__go { color: #94A3B8; display: grid; place-items: center; transition: transform 180ms ease; }
.th-card__go svg { width: 17px; height: 17px; }
.th .th-card__t { margin: .6rem 0 0; font-size: .95rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--th-head); overflow-wrap: break-word; }
.th-card__img { margin: auto 0 .7rem; padding-top: .55rem; }
.th-card__img img { width: 100%; height: 110px; object-fit: contain; object-position: center; display: block; transition: transform 180ms ease; }
.th-card--wide .th-card__img img { height: 100px; }
.th-card__meta { display: grid; gap: .22rem; padding-top: .7rem; border-top: 1px solid #EEF2F7; font-size: .8rem; line-height: 1.4; color: var(--th-mut); }
.th-card__meta b { color: var(--th-head); font-variant-numeric: tabular-nums; font-weight: 600; }
.th-card__meta i { font-style: normal; color: #CBD5E1; }

.th-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 26px; padding: 0 .6rem; border-radius: 8px;
  font-size: .8rem; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap;
}
.th-badge--lg { min-height: 32px; padding: 0 .85rem; font-size: .95rem; border-radius: 10px; }
.th-badge--blue   { background: #146EF5; }
.th-badge--cyan   { background: #0369A1; }
.th-badge--violet { background: #7C3AED; }
.th-badge--green  { background: #047857; }
.th-badge--orange { background: #C2410C; }
.th-badge--brown  { background: #78350F; }
.th-badge--olive  { background: #4D5D2A; }

/* ── ქვედა CTA ────────────────────────────────────────────── */
.th-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: center;
  background: var(--th-sky); border: 1px solid #D9E8FF; border-radius: 18px;
  padding: clamp(1.2rem, 2.6vw, 1.9rem);
}
.th-cta__ico { display: none; }
.th-cta h2 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.th-cta p { margin-top: .5rem; font-size: .93rem; line-height: 1.6; color: var(--th-txt); max-width: 66ch; }

/* ── რესპონსივი ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .th-main { grid-template-columns: 1fr; }
  .th-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .th-quick__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .th-hero__in { grid-template-columns: 1fr; }
  .th-hero__art { justify-self: center; max-width: 420px; }
  .th-feat { grid-template-columns: 1fr; }
  .th-feat__media img { height: 200px; }
  .th-feat__badge { position: static; margin-bottom: .4rem; }
}
@media (max-width: 860px) {
  .th-quick__list { grid-template-columns: 1fr; }
  .th-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-cta { grid-template-columns: 1fr; }
  .th-cta .th-btn { width: 100%; }
}
@media (max-width: 640px) {
  .th-h1 { font-size: 2rem; }
  .th-hero__art { display: none; }
  .th-usp { gap: .6rem; }
  .th-usp__i { padding-inline: 0; flex: 1 1 100%; }
  .th-usp__i + .th-usp__i { border-inline-start: 0; }
  .th-usp__t { max-width: none; }
  .th-stats { grid-template-columns: 1fr; gap: .55rem; }
  .th-stat + .th-stat { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--th-line); padding-top: .55rem; }
  .th-feat__foot { flex-direction: column; align-items: stretch; }
  .th-feat__foot .th-btn { width: 100%; }
  .th-card { min-height: 0; }
  .th-card__img img, .th-card--wide .th-card__img img { height: 84px; }
}
@media (max-width: 480px) {
  .th-grid { gap: 12px; }
  .th-card { padding: .8rem; }
  .th .th-card__t { font-size: .88rem; }
  .th-card__meta { font-size: .76rem; }
}
/* ძალიან ვიწრო ეკრანზე ორი სვეტი უკვე იჭერს — ვშლით ერთზე */
@media (max-width: 340px) {
  .th-grid { grid-template-columns: 1fr; }
  .th-card__img img, .th-card--wide .th-card__img img { height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .th-card, .th-card__img img, .th-card__go, .th-quick__go, .th-btn { transition: none; }
  .th-card:hover { transform: none; }
}

/* ── ენის გადამრთველი (დროშებით) ──────────────────────────── */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: .42rem .6rem; font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.lang__btn:hover { background: rgba(255,255,255,.14); }
.lang__btn svg:last-child { transition: transform .18s ease; opacity: .7; }
.lang.is-open .lang__btn svg:last-child { transform: rotate(180deg); }
.lang-flag { display: block; border-radius: 2.5px; flex: none; }
.lang__code { letter-spacing: .04em; }
.lang__menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 200px; padding: .4rem; display: none; z-index: 950;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px;
  box-shadow: 0 8px 18px rgba(7,26,61,.10), 0 24px 60px rgba(7,26,61,.16);
}
.lang.is-open .lang__menu { display: block; }
.lang__item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .7rem; border-radius: 9px; text-decoration: none;
  color: var(--ink2); font-size: .9rem; min-height: 40px;
}
.lang__item:hover { background: var(--slate); }
.lang__item.is-on { background: #EAF2FF; font-weight: 600; color: var(--blue); }
.lang__item.is-on::after {
  content: ''; margin-inline-start: auto; width: 7px; height: 11px;
  border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
@media (max-width: 940px) {
  /* ბურგერის მენიუში: დროშები ბადედ */
  .lang { order: 9; width: 100%; }
  .lang__btn { display: none; }
  .lang__menu {
    position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem;
    background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12);
    box-shadow: none; min-width: 0;
  }
  .lang__item { color: #E7EEFA; }
  .lang__item:hover { background: rgba(255,255,255,.1); }
  .lang__item.is-on { background: rgba(29,155,240,.22); color: #fff; }
  .lang__item.is-on::after { border-color: #6FD3FF; }
}

/* ── ავატარი ──────────────────────────────────────────────── */
.ava {
  --ava-size: 36px;
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: var(--ava-size); height: var(--ava-size);
  border-radius: 50%; overflow: hidden; isolation: isolate;
  background: hsl(var(--ava-hue, 220) 62% 46%);
  color: #fff; font-weight: 700; user-select: none;
}
/* ინიციალები ქვეშ დევს — თუ სურათი ჩავარდა (onerror ხსნის), თავისით ჩანს */
.ava__ini {
  /* text-transform: uppercase განზრახ არ გვაქვს — ქართულს მთავრულში გადაიყვანდა */
  font-size: calc(var(--ava-size) * .4); line-height: 1; letter-spacing: .02em;
}
.ava img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ava--ring { box-shadow: 0 0 0 2px rgba(255,255,255,.22); }
.ava--lg { --ava-size: 76px; }
.v2-btn--me { gap: .45rem; padding-inline-start: .38rem; }
.v2-btn--me span { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-head { display: flex; align-items: center; gap: 1.1rem; }
@media (max-width: 560px) {
  .pf-head { gap: .9rem; }
  .pf-head .ava { --ava-size: 56px; }
}

/* ==========================================================================
   დახვეწა (2026-08-24) — სიღრმე, გრადიენტები, დეტალები.
   ცალკე ბლოკია, რომ ბაზისური სტილები ხელუხლებელი დარჩეს.
   ========================================================================== */

/* ── ჰერო: ღრმა ფონი + ნაზი ბადე ──────────────────────────── */
.v2-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
/* ⚠ .v2-hero__map-ს position არ ვცვლით — ბაზისურად absolute-ია და
   relative-ზე გადაყვანა მას layout-ში აბრუნებს (ჰერო 2×-ით იწელება). */
.v2-hero::after { z-index: 0; }
.v2-hero__in { position: relative; z-index: 1; }

/* სათაურის აქცენტი — გრადიენტული ტექსტი */
.v2-h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--teal) 8%, var(--cyan) 62%, #7FD9FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ბეჯი — მინისებრი */
.v2-badge {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

/* მაჩვენებლების ხაზი — გამყოფები ჰაერით */
.v2-stat + .v2-stat { position: relative; }
.v2-stat + .v2-stat::before {
  content: ''; position: absolute; inset-inline-start: -.9rem; inset-block: 18%;
  width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.16), transparent);
}

/* ── ბარათები: ორმაგი ჩრდილი + კიდის შუქი ─────────────────── */
.v2-card, .v2-plan, .v2-feat {
  position: relative;
  box-shadow: 0 1px 2px rgba(7,26,61,.05), 0 12px 30px rgba(7,26,61,.07);
}
.v2-card::before, .v2-plan::before, .v2-feat::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(140deg, rgba(21,94,239,.55), rgba(22,199,154,.35) 55%, transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .32s cubic-bezier(.16,1,.3,1);
}
.v2-card:hover::before, .v2-plan:hover::before, .v2-feat:hover::before { opacity: 1; }
.v2-card:hover, .v2-plan:hover, .v2-feat:hover {
  box-shadow: 0 2px 6px rgba(7,26,61,.07), 0 22px 50px rgba(7,26,61,.13);
}

/* პოპულარული ტარიფი — მუდმივი აქცენტი */
.v2-plan--hot { border-color: rgba(21,94,239,.42); }
.v2-plan--hot::before { opacity: .75; }

/* ── სექციის სათაური — ხაზი გრადიენტით ────────────────────── */
.v2-eyebrow::before { background: linear-gradient(90deg, var(--blue), var(--cyan)); }

/* ── ნაბიჯები — დამაკავშირებელი ხაზი ──────────────────────── */
.v2-steps { position: relative; }
@media (min-width: 861px) {
  .v2-steps::before {
    content: ''; position: absolute; inset-inline: 12%; top: 26px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--hair) 12%, var(--hair) 88%, transparent);
    z-index: 0;
  }
  .v2-step { position: relative; z-index: 1; }
}

/* ── FAQ — რბილი ბარათები ─────────────────────────────────── */
.v2-faq details {
  border-radius: 14px;
  border: 1px solid transparent;
}
.v2-faq details[open] {
  background: #fff;
  border-color: var(--hair);
  box-shadow: 0 1px 2px rgba(7,26,61,.04), 0 10px 26px rgba(7,26,61,.06);
}
.v2-faq summary::after { transition: transform .28s cubic-bezier(.16,1,.3,1); opacity: .55; }
.v2-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); opacity: .95; }

/* ── ქვედა ზოლი — ცოცხალი გრადიენტი ───────────────────────── */
.v2-strip {
  background:
    radial-gradient(90% 140% at 12% 0%, rgba(21,94,239,.55), transparent 62%),
    radial-gradient(80% 130% at 92% 100%, rgba(22,199,154,.42), transparent 60%),
    var(--navy);
}

/* ── ფუტერი — ზედა ნაზი ხაზი ──────────────────────────────── */
.v2-footer { position: relative; }
.v2-footer::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}

/* ── ჰედერი: სქროლზე ფონი მუქდება ─────────────────────────
   ⚠️ სიმაღლის შემცირება (70→62px) აქედან **განზრახ ამოღებულია**.
   ჰედერი `position: sticky`-ია, ე.ი. ნაკადშია — მისი 8px-ით დაპატარავება
   მთელ გვერდს 8px-ით ზემოთ სწევდა და დოკუმენტის სიმაღლესაც ამოკლებდა.
   ვინაიდან კლასი `scrollY > 8`-ზე ირთვებოდა და ძვრაც ზუსტად 8px იყო,
   ერთმანეთს ეჯაჭვებოდა: ჩაირთვება → კონტენტი ზემოთ → scrollY ≤ 8 →
   გამოირთვება → კონტენტი ქვემოთ → scrollY > 8 → … გვერდი ვიბრირებდა.
   ახლა სქროლზე მხოლოდ ფონი და ჩრდილი იცვლება — layout არ იძვრის.
   `backdrop-filter`-ის ტრანზიცია მოხსნილია: ბლერის ანიმაცია ყოველ კადრზე
   თავიდან ითვლება და ტექსტს აციმციმებს. */
.v2-header { transition: background-color .3s ease, box-shadow .3s ease; }
.v2-header.is-stuck { box-shadow: 0 6px 24px rgba(7,26,61,.28); }

/* ── არჩევანის ფერი ───────────────────────────────────────── */
.v2 ::selection { background: rgba(21,94,239,.22); }

/* ==========================================================================
   ჰერო — რეალური საგამოცდო ფოტოთი (2026-08-24)

   ფოტო `background-image` კი არა, ნამდვილი <img>-ია: ბრაუზერი მას LCP-ად
   ცნობს, srcset-ით ეკრანის ზომას არჩევს და preload-იც მუშაობს.
   ⚠ ფოტოს (ჰერო2) მარცხენა ჩაბნელება **ჩაწვეულია** — სიკაშკაშე 0–45%-ზე ≈4/255.
   ამიტომ CSS-ის სქრიმი მსუბუქია და მხოლოდ 45–80% ზოლს აბნელებს; თუ სუფთა
   ფოტოზე გადახვალ, ეს გრადიენტი ხელახლა უნდა გასქელდეს.
   ========================================================================== */

.v2-hero--photo { isolation: isolate; }

/* ── ფოტოს ფენა ───────────────────────────────────────────── */
.v2-hero__photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v2-hero__photo picture, .v2-hero__photo img { display: block; width: 100%; height: 100%; }
.v2-hero__photo img {
  object-fit: cover; object-position: 50% 45%;
  /* ფოტო ოდნავ გაცივებული — ლურჯ იდენტობას რომ დაემთხვეს */
  filter: saturate(.92) contrast(1.04);
}

/* ── ჩაბნელების ფენა ──────────────────────────────────────── */
.v2-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(7,26,61,.70) 0%, rgba(7,26,61,0) 18%),
    linear-gradient(to top,    rgba(7,26,61,.88) 0%, rgba(7,26,61,0) 30%),
    linear-gradient(90deg,
      rgba(7,26,61,.12)  0%,
      rgba(7,26,61,.16) 36%,
      rgba(7,26,61,.55) 46%,
      rgba(7,26,61,.79) 55%,
      rgba(7,26,61,.77) 63%,
      rgba(7,26,61,.34) 74%,
      rgba(7,26,61,.06) 88%,
      rgba(7,26,61,0)  100%);
}

/* ── დეკორი ფოტოზე — მხოლოდ მარცხენა, მუქ ნახევარზე ───────── */
.v2-hero--photo::before { z-index: 2; opacity: .55; }
.v2-hero--photo::after  { z-index: 2; opacity: .7; }
.v2-hero--photo .v2-hero__map {
  z-index: 2; opacity: .13;
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 62%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 62%);
}
.v2-hero--photo .v2-hero__in { z-index: 3; }
.v2-hero--photo .v2-wave { position: relative; z-index: 3; }

/* ── განლაგება ────────────────────────────────────────────── */
.v2-hero--photo .v2-hero__in {
  grid-template-columns: minmax(0, 1.36fr) minmax(0, .64fr);
  align-items: center;
  min-height: clamp(560px, 74vh, 780px);
  padding-block: clamp(2.6rem, 5.4vw, 3.9rem) clamp(3rem, 6vw, 4.4rem);
}
/* სათაური ისე იზომება, რომ სამივე წინადადება თითო სტრიქონზე დაჯდეს —
   ქართული ასოები ლათინურზე ფართოა, ამიტომ ზედა ზღვარი დაბალია. */
.v2-hero--photo .v2-h1 { font-size: clamp(1.9rem, 3.6vw, 2.88rem); line-height: 1.14; }
.v2-hero--photo .v2-hero__copy h1 { margin-top: 1.15rem; }
.v2-hero--photo .v2-stats { margin-top: 2.1rem; padding-top: 1.5rem; }
.v2-hero--photo .v2-hero__cta { margin-top: 1.7rem; }
/* ფოტოზე ტექსტს ნაზი ჩრდილი უფრო მკაფიოს ხდის */
.v2-hero__copy { text-shadow: 0 1px 3px rgba(4,14,33,.45); }
.v2-hero--photo .v2-hero__sub { max-width: 58ch; margin-top: 1rem; color: #C2D3EC; }
/* ფოტოს ფონზე მაჩვენებლების წარწერა ოდნავ ღიაა — კონტრასტი AA-ზე მაღლა რჩება */
.v2-hero--photo .v2-stat span { color: #9CB2D4; }
.v2-hero--photo .v2-badge { text-shadow: none; }

/* მზაობის ბარათი — ფოტოს მარჯვენა, მშვიდ არეზე */
.v2-hero__side {
  display: grid; align-content: end; justify-items: end;
  align-self: stretch; padding-block: clamp(1.5rem, 4vw, 3rem);
}
.v2-hero--photo .v2-float {
  position: relative; right: auto; bottom: auto;
  width: min(310px, 100%);
  background: rgba(9,29,66,.72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 70px rgba(3,11,26,.55), inset 0 1px 0 rgba(255,255,255,.1);
}
.v2-float__note {
  display: flex; align-items: flex-start; gap: .45rem;
  margin-top: .85rem; font-size: .76rem; line-height: 1.5; color: #A9BEDD;
}
.v2-float__note svg { width: 14px; height: 14px; flex: none; margin-top: .18em; color: var(--teal); }

/* ── მთავარი ღილაკები — დიდი და გრადიენტული ───────────────── */
.v2-btn--lg { padding: 1.05rem 1.9rem; font-size: 1.02rem; }
.v2-hero--photo .v2-btn--teal {
  background: linear-gradient(100deg, #1FD3A6 0%, #16C79A 44%, #0EA582 100%);
  box-shadow: 0 10px 28px rgba(22,199,154,.34), inset 0 1px 0 rgba(255,255,255,.26);
}
.v2-hero--photo .v2-btn--teal:hover { box-shadow: 0 14px 34px rgba(22,199,154,.42), inset 0 1px 0 rgba(255,255,255,.26); }
.v2-hero--photo .v2-btn--ghost {
  background: rgba(7,26,61,.42); border-color: rgba(255,255,255,.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.v2-hero--photo .v2-btn--ghost:hover { background: rgba(255,255,255,.14); }

/* ── ტაბლეტი ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .v2-hero--photo .v2-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(7,26,61,.74) 0%, rgba(7,26,61,0) 16%),
      linear-gradient(to top,    rgba(7,26,61,.90) 0%, rgba(7,26,61,0) 32%),
      linear-gradient(90deg,
        rgba(7,26,61,.14) 0%, rgba(7,26,61,.24) 38%,
        rgba(7,26,61,.74) 52%, rgba(7,26,61,.74) 72%,
        rgba(7,26,61,.36) 100%);
  }
  .v2-hero--photo .v2-hero__in { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); }
}

/* ── მობილური: ფოტო ფონად, ტექსტი ერთ სვეტში ──────────────── */
@media (max-width: 900px) {
  .v2-hero--photo .v2-hero__in {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: clamp(2.5rem, 8vw, 3.5rem) clamp(3.5rem, 9vw, 4.5rem);
    gap: 2rem;
  }
  /* ვიწრო ეკრანზე კადრი მარჯვნივ იწევს — ფოტოს ჩაწვეული ჩაბნელება
     0–45%-ზეა, ამიტომ მარცხენა ნაწილი ისედაც შავია და არაფერი ჩანს. */
  .v2-hero__photo img { object-position: 72% 44%; }
  .v2-hero--photo .v2-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(7,26,61,.68) 0%, rgba(7,26,61,.82) 44%, rgba(7,26,61,.93) 100%);
  }
  .v2-hero--photo .v2-hero__map { mask-image: none; -webkit-mask-image: none; }
  /* ბარათი ტექსტის ქვემოთ, სრულ სიგანეზე */
  .v2-hero__side { align-content: start; justify-items: stretch; padding-block: 0; }
  .v2-hero--photo .v2-stats { align-items: start; row-gap: 1.15rem; }
  /* ვიწრო ეკრანზე ფოტო ტექსტის ქვეშაც დგას — წარწერა ღიაა კონტრასტისთვის */
  .v2-hero--photo .v2-stat span { color: #A9BEDD; }
  .v2-hero--photo .v2-float { width: 100%; }
  .v2-hero--photo .v2-hero__sub { max-width: none; }
}

@media (max-width: 560px) {
  .v2-hero--photo .v2-hero__cta { display: grid; gap: .7rem; }
  .v2-hero--photo .v2-btn--lg { width: 100%; padding: .95rem 1.4rem; }
  .v2-hero--photo .v2-hero__in { padding-bottom: 3.5rem; }
}

/* ── ხელმისაწვდომობა: ფოტოს ანიმაცია არ გვაქვს, მაგრამ ──────
   ბარათის ტივტივი მოძრაობის შემცირებაზე თავად ითიშება. */
@media (prefers-reduced-motion: reduce) {
  .v2-hero__photo img { filter: none; }
}

/* ── ქვედა კრედიტი — smarketer ────────────────────────────── */
/* ლოგო ჩვენივე /static-იდან მოდის, გარე დომენს არ ვეყრდნობით. */
.v2-credit { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.v2-credit__by { font-size: .78rem; color: #7E93B4; }
.v2-footer .v2-credit__a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .34rem .8rem .34rem .42rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: #DCE7F8; font-size: .8rem; font-weight: 600; letter-spacing: .05em;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.v2-footer .v2-credit__a:hover {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22);
  color: #fff; transform: translateY(-1px);
}
.v2-credit__a img { width: 22px; height: 22px; display: block; flex: none; }

/* ==========================================================================
   საჩვენებელი ფონტი — სათაურები, ნავიგაცია, ღილაკები (2026-08-24)
   ქართულ გვერდზე ეს BPG WEB 002 Caps-ია, დანარჩენ ენებზე FiraGO;
   არჩევანი fonts.css-ის `--imec-display`-შია, აქ მხოლოდ გამოყენებაა.
   ========================================================================== */
.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 h5,
.v2-h1, .v2-h2, .v2-h3,
.v2-nav > a, .v2-btn, .v2-logo, .v2-eyebrow,
.v2-footer h4, .v2-credit__a,
.th-h1, .th-card__t, .th-eyebrow,
.pr-h2, .pr-hero h1 { font-family: var(--imec-display); }

/* BPG Caps-ს მხოლოდ ერთი წონა აქვს — სინთეზურ ბოლდს ვთიშავთ, თორემ
   ასოები ერთმანეთს ეწებება. ასოებს შორის ჰაერი წონას თავად ქმნის. */
html[lang="ka"] .v2 h1, html[lang="ka"] .v2 h2, html[lang="ka"] .v2 h3,
html[lang="ka"] .v2 h4, html[lang="ka"] .v2-nav > a, html[lang="ka"] .v2-btn,
html[lang="ka"] .v2-logo, html[lang="ka"] .v2-eyebrow,
html[lang="ka"] .th-card__t, html[lang="ka"] .pr-h2 { font-weight: 400; }

/* BPG Caps-ის ასოები FiraGO-ზე ~50%-ით მაღალი და განიერია (ქართული
   ასო cap-height-ზე ზის: 811/1000 vs 527/1000), ამიტომ ჰეროს სათაური
   ოთხ სტრიქონად იშლებოდა. მხოლოდ იქ ვამცირებთ — დანარჩენს კაპიტელის
   მასშტაბი უხდება. */
html[lang="ka"] .v2-hero--photo .v2-h1 {
  font-size: clamp(1.6rem, 2.9vw, 2.35rem);
  line-height: 1.24; letter-spacing: -.005em;
}

/* BPG-ს NBSP განიერია (342/1000, FiraGO-ს 265) — „9 701" ორ სიტყვად ჩანდა.
   ფონტს არ ვცვლით, უბრალოდ ხარვეზს ვამცირებთ. */
html[lang="ka"] .num, html[lang="ka"] .tabnum { word-spacing: -.16em; }

/* ==========================================================================
   /fasebi — ტარიფები (2026-08-24)
   პაკეტების მონაცემები ბაზიდან მოდის; დიზაინი `product`-ს მიჰყვება,
   არა სათაურის ტექსტს — პანელიდან სახელის შეცვლა ვიზუალს არ დაანგრევს.
   ========================================================================== */
.fz { background: #fff; }

/* მხოლოდ ეკრანის მკითხველისთვის (ცხრილში „შედის/არ შედის") */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── ჰერო ─────────────────────────────────────────────────── */
.fz-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 120% at 8% 0%, rgba(21,94,239,.42), transparent 62%),
    radial-gradient(60% 110% at 92% 100%, rgba(22,199,154,.22), transparent 66%),
    var(--navy);
}
.fz-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 76%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 30%, transparent 76%);
}
.fz-hero__in {
  position: relative; z-index: 1; text-align: center;
  padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(5.5rem, 9vw, 7.5rem);
}
.fz-crumb { font-size: .84rem; color: #8FA6C8; margin-bottom: 1.1rem; }
.fz-crumb a { color: #BDD2F2; text-decoration: none; }
.fz-crumb a:hover { color: #fff; text-decoration: underline; }
.fz-crumb span { margin-inline: .45rem; color: #5B7099; }
.fz .fz-eyebrow { color: #7FD9FF; }
.fz .fz-eyebrow::before { background: linear-gradient(90deg, var(--cyan), var(--teal)); }
.fz .fz-h1 {
  margin: .9rem auto 0; max-width: 20ch; color: #fff; font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2; letter-spacing: -.02em;
}
html[lang="ka"] .fz .fz-h1 { font-size: clamp(1.35rem, 2.7vw, 2.1rem); line-height: 1.28; font-weight: 400; }
.fz-lead { margin: 1rem auto 0; max-width: 62ch; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.7; color: #AFC2DE; }
.fz-pills { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.fz-pills li {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem;
  border-radius: 999px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14); font-size: .82rem; color: #DCE7F8;
}
.fz-pills svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

/* ── პაკეტები (ჰეროზე შემოწოლილი) ─────────────────────────── */
.fz-plansSec { background: var(--slate); padding-bottom: clamp(3rem, 6vw, 5rem); }
.fz-plansSec > .v2-wrap { margin-top: clamp(-6rem, -8vw, -4.5rem); }

.fz-note {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0 0 1.4rem; padding: .95rem 1.15rem; border-radius: var(--r);
  background: #fff; border: 1px solid rgba(21,94,239,.28);
  box-shadow: 0 10px 30px rgba(7,26,61,.14);
  font-size: .9rem; line-height: 1.6; color: var(--ink2);
}
.fz-note svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: .1em; }

.fz-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.fz-plan {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  box-shadow: 0 1px 2px rgba(7,26,61,.05), 0 14px 36px rgba(7,26,61,.08);
  transition: transform .2s var(--ease-out, ease), box-shadow .2s var(--ease-out, ease), border-color .2s;
}
.fz-plan:hover { transform: translateY(-4px); box-shadow: 0 2px 8px rgba(7,26,61,.07), 0 26px 56px rgba(7,26,61,.14); }
.fz-plan.is-hot { border-color: rgba(22,199,154,.45); box-shadow: 0 2px 8px rgba(7,26,61,.07), 0 24px 54px rgba(22,199,154,.18); }
.fz-plan.is-owned { border-color: rgba(21,94,239,.35); }

.fz-plan__ribbon {
  position: absolute; top: -.75rem; inset-inline-start: clamp(1.5rem, 2.4vw, 2rem);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .8rem; border-radius: 999px;
  background: var(--teal); color: #05271E; font-size: .74rem; font-weight: 600;
  box-shadow: 0 6px 16px rgba(22,199,154,.34);
}
.fz-plan__ribbon--on { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(21,94,239,.3); }
.fz-plan__ribbon svg { width: 13px; height: 13px; }

.fz .fz-plan__t { font-size: 1.2rem; font-weight: 700; color: var(--ink2); margin: .35rem 0 0; }
.fz-plan__sub { margin-top: .4rem; font-size: .87rem; line-height: 1.6; color: var(--ink-soft); min-height: 2.8em; }

.fz-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.fz-plan__price b { font-size: clamp(1.9rem, 3vw, 2.35rem); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); line-height: 1; }
.fz-plan__price s { font-size: 1rem; color: #94A3B8; }
.fz-plan__per { font-size: .82rem; color: var(--ink-soft); }
.fz-plan__perday { margin-top: .35rem; font-size: .78rem; color: var(--teal-dark); font-weight: 600; }

.fz-plan__list { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .62rem; }
.fz-plan__list li { display: flex; gap: .55rem; font-size: .88rem; line-height: 1.55; color: var(--ink-mid); }
.fz-plan__list svg { width: 16px; height: 16px; flex: none; margin-top: .18em; color: var(--teal-dark); }
.fz-plan--blue .fz-plan__list svg { color: var(--blue); }

.fz-plan__foot { margin-top: auto; padding-top: 1.5rem; }
.fz-plan__hint { margin-top: .7rem; font-size: .78rem; text-align: center; color: var(--ink-soft); }

/* ── შედარების ცხრილი ─────────────────────────────────────── */
.fz-tableWrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--hair); background: #fff; box-shadow: var(--sh-1); }
.fz-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.fz-table th, .fz-table td { padding: .95rem 1.1rem; text-align: start; }
.fz-table thead th { background: #F4F8FE; font-size: .8rem; font-weight: 600; color: var(--ink-mid); border-bottom: 1px solid var(--hair); }
.fz-table tbody th { font-weight: 500; font-size: .89rem; color: var(--ink2); }
.fz-table tbody tr + tr th, .fz-table tbody tr + tr td { border-top: 1px solid #EFF3F9; }
.fz-table td { width: 22%; text-align: center; }
.fz-table thead th:not(:first-child) { text-align: center; }
.fz-th { display: inline-flex; align-items: center; gap: .4rem; }
.fz-th svg { width: 16px; height: 16px; }
.fz-th--blue { color: var(--blue); }
.fz-th--teal { color: var(--teal-dark); }
.fz-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #E6F7F1; color: var(--teal-dark); }
.fz-yes svg { width: 15px; height: 15px; }
.fz-no { color: #C3CEDD; font-size: 1.1rem; }

/* ── გადახდის ბარათები ────────────────────────────────────── */
.fz-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.v2-feat__ico--teal { background: #E6F7F1; color: var(--teal-dark); }

/* ── რესპონსივი ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .fz-plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .fz-plan__sub { min-height: 0; }
  .fz-pay { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fz-hero__in { padding-bottom: clamp(4.5rem, 14vw, 6rem); }
  .fz-pills { gap: .45rem; }
  .fz-pills li { font-size: .78rem; padding: .42rem .8rem; }
  .fz-plansSec > .v2-wrap { margin-top: -3.5rem; }
}
/* მშვიდი ლენტა — ინფორმაციული ბეჯი (მაგ. „უფასო"), აქცენტის გარეშე */
.fz-plan__ribbon--calm { background: #E8EFFA; color: var(--blue); box-shadow: 0 6px 16px rgba(7,26,61,.1); }
/* მუქ CTA-ბარათში ბმული ღიაა — ლურჯი ლურჯზე არ იკითხება */
.v2-cta a:not(.v2-btn) { color: #9EC5FF; }
.v2-cta a:not(.v2-btn):hover { color: #fff; }

/* ==========================================================================
   ენის მენიუ — ჰედერის ფერში (2026-08-24)
   თეთრი პანელი მუქ ჰედერზე ცალკე ელემენტად ჩანდა; ახლა იმავე ლურჯშია.
   ========================================================================== */
.lang-flag { clip-path: inset(0 round 2.5px); }

.lang__menu {
  background: rgba(9, 29, 66, .96);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 10px 24px rgba(3, 11, 26, .42), 0 28px 70px rgba(3, 11, 26, .5);
}
.lang__menu .lang__item { color: #D6E2F5; }
.lang__menu .lang__item:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.lang__menu .lang__item.is-on { background: rgba(29, 155, 240, .18); color: #fff; }
.lang__menu .lang__item.is-on::after { border-color: var(--teal); }

/* ბურგერის მენიუში ისედაც მუქ ფონზეა — იქ გამჭვირვალე რჩება */
@media (max-width: 940px) {
  .lang__menu {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    box-shadow: none;
  }
}

/* ==========================================================================
   /praktika/:id — მარშრუტის დამკვრელი (2026-08-24)
   ფერები და წონები prava.smarketer.ge-ის პლეერიდანაა ერთი-ერთში აღებული:
   #0b1220 ფონი, #111a2e ბარათი, #2563eb აქცენტი, #f59e0b მანძილი.
   ========================================================================== */
.rt { background: #0b1220; color: #e5e7eb; }
.rt-wrap { width: min(1100px, 100% - 2rem); margin-inline: auto; }

/* ── ზედა ზოლი ────────────────────────────────────────────── */
.rt-bar { background: #111a2e; border-bottom: 1px solid #1f2a44; }
.rt-bar__in { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; }
.rt-back {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: #1c2740; color: #e5e7eb;
  text-decoration: none; font-size: 1.1rem; font-weight: 700;
  transition: background .18s ease;
}
.rt-back:hover { background: #26355a; color: #fff; }
.rt-ttl { min-width: 0; flex: 1; }
.rt .rt-ttl h1 { margin: 0; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.3; }
.rt-ttl p { margin: .15rem 0 0; font-size: .78rem; color: #8ea0c0; }
.rt-modes { display: flex; gap: .2rem; flex: none; background: #0b1220; border-radius: 10px; padding: 3px; }
.rt-modes button {
  border: 0; background: transparent; color: #8ea0c0; cursor: pointer;
  padding: .45rem .65rem; border-radius: 8px; font: inherit; font-size: .76rem; font-weight: 600;
  transition: background .18s ease, color .18s ease;
}
.rt-modes button.is-on { background: #2563eb; color: #fff; }

/* ── რუკა ─────────────────────────────────────────────────── */
.rt-map { width: 100%; height: clamp(340px, 52vh, 620px); background: #e8e6e1; z-index: 1; }
.rt-arrow, .rt-car { background: none; border: none; }
.rt-arrow svg { display: block; filter: drop-shadow(0 0 1px rgba(0,0,0,.5)); }
.rt-car .d {
  width: 20px; height: 20px; border-radius: 50%; background: #dc2626; border: 3px solid #fff;
  box-shadow: 0 0 0 2px rgba(220,38,38,.4), 0 1px 4px rgba(0,0,0,.5);
}
.rt .leaflet-container { font-family: inherit; }

/* ── პანელი ───────────────────────────────────────────────── */
.rt-panel { padding: 1rem 0 2.5rem; }
.rt-man {
  display: flex; align-items: center; gap: .9rem; min-height: 88px;
  background: #111a2e; border: 1px solid #22304f; border-radius: 16px; padding: 1rem;
}
.rt-man__ico { font-size: 2.5rem; line-height: 1; flex: none; }
.rt-man__txt { flex: 1; min-width: 0; }
.rt-man__label { font-size: 1.1rem; font-weight: 700; color: #fff; }
.rt-man__dist { font-size: .95rem; color: #f59e0b; margin-top: .18rem; font-variant-numeric: tabular-nums; }
.rt-man__next { font-size: .78rem; color: #7f8db0; margin-top: .35rem; }

.rt-prog { height: 6px; background: #1f2a44; border-radius: 6px; margin: .9rem 0 .25rem; overflow: hidden; }
.rt-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2563eb, #22d3ee); transition: width .12s linear; }
.rt-pct { font-size: .76rem; color: #8ea0c0; text-align: end; font-variant-numeric: tabular-nums; }

.rt-ctrls { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.rt-btn {
  border: 0; border-radius: 12px; background: #1c2740; color: #e5e7eb; cursor: pointer;
  padding: .75rem .95rem; font: inherit; font-size: .95rem; font-weight: 600;
  transition: background .18s ease, transform .12s ease;
}
.rt-btn:hover { background: #26355a; }
.rt-btn:active { transform: scale(.97); }
.rt-btn--go { background: #2563eb; flex: 1; min-width: 130px; }
.rt-btn--go:hover { background: #1d4ed8; }
.rt-btn.is-on { background: #2563eb; color: #fff; }
.rt-btn--voice.is-on { background: #16a34a; }
.rt-spd { display: flex; gap: .35rem; }
.rt-spd button {
  border: 0; border-radius: 12px; background: #1c2740; color: #e5e7eb; cursor: pointer;
  padding: .62rem .75rem; font: inherit; font-size: .82rem; font-weight: 600;
  font-variant-numeric: tabular-nums; transition: background .18s ease;
}
.rt-spd button.is-on { background: #2563eb; color: #fff; }
.rt-seek { width: 100%; margin-top: .9rem; accent-color: #2563eb; }

.rt-gps, .rt-hint { font-size: .8rem; line-height: 1.6; margin: .9rem 0 0; }
.rt-gps { color: #8ea0c0; }
.rt-hint { color: #6b7a9c; }
.rt-gps[hidden], .rt-hint[hidden], .rt-spd[hidden], .rt-seek[hidden] { display: none; }

/* ── მითითებების სია ──────────────────────────────────────── */
.rt-list { padding: .25rem 0 0; }
.rt .rt-list h2 { font-size: .8rem; color: #8ea0c0; margin: 1.1rem 0 .5rem; font-weight: 600; }
.rt-li {
  display: flex; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #16203a;
  font-size: .88rem; color: #dbe4f5; cursor: pointer;
}
.rt-li .d { margin-inline-start: auto; color: #f59e0b; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-li.is-done { opacity: .4; }
.rt-li.is-cur { background: #14213f; border-radius: 8px; padding: .55rem; border-bottom-color: transparent; }

@media (max-width: 720px) {
  .rt-wrap { width: min(1100px, 100% - 1.6rem); }
  .rt-bar__in { flex-wrap: wrap; }
  .rt-modes { width: 100%; }
  .rt-modes button { flex: 1; }
  .rt-map { height: clamp(300px, 46vh, 460px); }
  .rt-btn--go { min-width: 100%; }
  .rt-spd { width: 100%; }
  .rt-spd button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-prog i { transition: none; }
}
.rt-btn--ico { display: inline-grid; place-items: center; padding: .7rem .85rem; }
.rt-btn--ico svg { width: 18px; height: 18px; display: block; }

/* ==========================================================================
   /teoria/:kategoria — თემების გვერდი (2026-08-25)
   ბრენდის ტოკენებზე დგას; `tb-` სახელები რომ ძველ `topic-*`-ს არ შეეჯახოს.
   ========================================================================== */
.tb { background: var(--slate); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.tb > section + section { margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* ── სათაური ──────────────────────────────────────────────── */
.tb-top { background: #fff; border-bottom: 1px solid var(--hair); padding: clamp(1.2rem, 2.4vw, 1.9rem) 0; }
.tb-crumb { font-size: .84rem; color: var(--ink-soft); margin-bottom: .8rem; }
.tb-crumb a { color: var(--blue); text-decoration: none; }
.tb-crumb a:hover { text-decoration: underline; }
.tb-crumb span { margin-inline: .45rem; color: #A9BACF; }
.tb-top__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.tb .tb-h1 {
  font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 700; letter-spacing: -.02em;
  color: var(--navy); line-height: 1.2; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.tb-code {
  display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 8px;
  background: #E8EFFA; color: var(--blue); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; font-family: var(--imec-font);
}
.tb-lead { margin-top: .5rem; font-size: .95rem; line-height: 1.65; color: var(--ink-mid); max-width: 70ch; }

/* ── ჰერო ბანერი ──────────────────────────────────────────── */
.tb-hero {
  position: relative; overflow: hidden; border-radius: 24px; isolation: isolate;
  min-height: clamp(260px, 34vw, 400px); display: flex; align-items: center;
  background:
    radial-gradient(70% 120% at 88% 20%, rgba(29,155,240,.30), transparent 62%),
    linear-gradient(120deg, var(--deep-navy, #031126) 0%, var(--navy) 55%, #0C2551 100%);
  box-shadow: 0 2px 8px rgba(7,26,61,.08), 0 22px 50px rgba(7,26,61,.14);
}
.tb-hero__bg { position: absolute; inset: 0; z-index: -2; }
.tb-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; }
/* ტექსტის ზონა — მარცხნიდან მუქდება; ფოტოს გარეშეც იგივე იერი რჩება */
.tb-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg,
    rgba(3,17,38,.96) 0%, rgba(3,17,38,.88) 38%, rgba(3,17,38,.42) 70%, rgba(3,17,38,.10) 100%);
}
.tb-hero__in { position: relative; padding: clamp(1.6rem, 3.4vw, 2.8rem); max-width: 62ch; }
.tb .tb-hero__t {
  color: #fff; font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.28;
  font-weight: 700; letter-spacing: -.02em;
}
.tb-hero__p { margin-top: .8rem; font-size: clamp(.9rem, 1.15vw, 1rem); line-height: 1.7; color: #C2D3EC; max-width: 52ch; }
.tb-hero__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .55rem; }
.tb-hero__list li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; color: #DCE7F8; }
.tb-hero__list svg { width: 17px; height: 17px; flex: none; color: var(--teal); }

/* ── სამი ნაბიჯი ──────────────────────────────────────────── */
.tb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tb-step {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hair); border-radius: 18px;
  padding: 1.2rem; box-shadow: 0 1px 2px rgba(7,26,61,.04), 0 10px 26px rgba(7,26,61,.06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tb-step:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(7,26,61,.07), 0 18px 40px rgba(7,26,61,.12); border-color: #CFDDF3; }
.tb-step__hd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tb-step__n {
  display: inline-flex; padding: .24rem .6rem; border-radius: 999px;
  background: #EEF3FB; color: var(--ink-mid); font-size: .72rem; font-weight: 600;
}
.tb-step__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; }
.tb-step__ico svg { width: 20px; height: 20px; }
.tb .tb-step__t { margin-top: .9rem; font-size: 1.06rem; font-weight: 700; color: var(--ink2); }
.tb-step__p { margin-top: .35rem; font-size: .85rem; line-height: 1.6; color: var(--ink-soft); }
.tb-step__bar { height: 6px; margin-top: auto; border-radius: 6px; background: #EDF1F7; overflow: hidden; margin-block-start: 1.1rem; }
.tb-step__bar i { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.16,1,.3,1); }
.tb-step__note { margin-top: .5rem; font-size: .78rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .1rem .5rem; }
.tb-step__note b { color: var(--ink2); }
.tb-step__note--guest { margin-top: auto; padding-top: 1.1rem; align-items: center; }
.tb-step__note--guest svg { width: 14px; height: 14px; color: var(--blue); flex: none; }
.tb-step--blue   .tb-step__ico { background: #E8EFFA; color: var(--blue); }
.tb-step--blue   .tb-step__bar i { background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.tb-step--teal   .tb-step__ico { background: #E3F7F1; color: var(--teal-dark); }
.tb-step--teal   .tb-step__bar i { background: linear-gradient(90deg, var(--teal), #38D6B4); }
.tb-step--violet .tb-step__ico { background: #EEEBFB; color: #6D4AE0; }
.tb-step--violet .tb-step__bar i { background: linear-gradient(90deg, #6D4AE0, #9B7CF0); }

/* ── შეცდომების ზოლი ──────────────────────────────────────── */
.tb-mist {
  display: flex; align-items: center; gap: .9rem; text-decoration: none;
  background: #FFF4F4; border: 1px solid #F6D6D6; border-radius: 16px;
  padding: .9rem 1.1rem; color: var(--ink2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.tb-mist:hover { border-color: #ECB9B9; box-shadow: 0 8px 20px rgba(190,60,60,.10); }
.tb-mist__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: #FBE3E3; color: #C2410C; }
.tb-mist__ico svg { width: 18px; height: 18px; }
.tb-mist > span:nth-child(2) { display: grid; gap: .1rem; font-size: .86rem; color: var(--ink-mid); }
.tb-mist b { color: var(--ink2); font-size: .95rem; }
.tb-mist__go { margin-inline-start: auto; color: var(--blue); display: grid; place-items: center; }
.tb-mist__go svg { width: 18px; height: 18px; }

/* ── თემები: სათაური + ხელსაწყოები ────────────────────────── */
.tb-topics__hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tb-topics__hd .v2-sm { margin-top: .35rem; max-width: 62ch; }

.tb-tools { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.tb-search {
  display: flex; align-items: center; gap: .55rem; flex: 1 1 240px; min-width: 0;
  background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: .1rem .9rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tb-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(21,94,239,.12); }
.tb-search svg { width: 17px; height: 17px; color: var(--ink-soft); flex: none; }
.tb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: .92rem; padding: .8rem 0; color: var(--ink2); }
.tb-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.tb-chips button {
  border: 1px solid var(--hair); background: #fff; color: var(--ink-mid); cursor: pointer;
  padding: .55rem .9rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 600;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.tb-chips button:hover { border-color: #CFDDF3; }
.tb-chips button.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.tb-sort { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-soft); }
.tb-sort select {
  border: 1px solid var(--hair); background: #fff; border-radius: 12px; padding: .62rem .8rem;
  font: inherit; font-size: .85rem; color: var(--ink2); cursor: pointer;
}
.tb-sort select:focus-visible { outline: 3px solid rgba(29,155,240,.5); outline-offset: 2px; }

/* ── თემების ბადე ─────────────────────────────────────────── */
.tb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.tb-card {
  display: flex; align-items: center; gap: .85rem; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: .85rem 1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  border-color: rgba(21, 94, 239, .25);
}
.tb-card[hidden] { display: none; }
.tb-card__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; background: #EEF3FB; color: var(--blue); }
.tb-card__ico svg { width: 19px; height: 19px; }
.tb-card__body { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.tb .tb-card__t { font-size: .95rem; font-weight: 600; line-height: 1.35; color: var(--ink2); }
.tb-card__meta { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); }
.tb-card__wrong { color: #C2410C; font-weight: 600; }
.tb-card__bar { height: 4px; margin-top: .3rem; border-radius: 4px; background: #EDF1F7; overflow: hidden; }
.tb-card__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.tb-card__go { flex: none; color: #B7C6DD; display: grid; place-items: center; transition: transform .2s ease, color .2s ease; }
.tb-card__go svg { width: 18px; height: 18px; }
.tb-card:hover .tb-card__go { color: var(--blue); transform: translateX(3px); }
.tb-empty { margin-top: 1.2rem; text-align: center; font-size: .92rem; color: var(--ink-soft); }

/* ── CTA ზოლი ─────────────────────────────────────────────── */
.tb-cta {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: linear-gradient(120deg, #EEF4FF 0%, #F3F9FF 55%, #EAF7F3 100%);
  border: 1px solid #DCE7F8; border-radius: 20px; padding: clamp(1.1rem, 2.2vw, 1.6rem);
}
.tb-cta__ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 15px; background: #fff; color: var(--blue); box-shadow: 0 4px 12px rgba(7,26,61,.08); }
.tb-cta__ico svg { width: 23px; height: 23px; }
.tb .tb-cta h2 { font-size: 1.1rem; font-weight: 700; color: var(--navy); }
.tb-cta p { margin-top: .25rem; font-size: .88rem; color: var(--ink-mid); }
.tb-cta > div { flex: 1 1 260px; min-width: 0; }
.tb-cta .v2-btn { flex: none; }

/* ── მუქი ბანერი ──────────────────────────────────────────── */
.tb-banner {
  position: relative; overflow: hidden; border-radius: 24px;
  background:
    radial-gradient(60% 120% at 85% 30%, rgba(29,155,240,.32), transparent 62%),
    radial-gradient(50% 100% at 15% 100%, rgba(22,199,154,.20), transparent 66%),
    linear-gradient(120deg, var(--deep-navy, #031126), var(--navy) 60%, #0C2551);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
}
.tb-banner__in { position: relative; z-index: 1; max-width: 58ch; }
.tb .tb-banner h2 { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.3; font-weight: 700; }
.tb-banner p { margin: .7rem 0 1.3rem; font-size: .92rem; line-height: 1.7; color: #B7C9E4; }
.tb-banner__art {
  position: absolute; inset-inline-end: -2%; inset-block-start: 50%; translate: 0 -50%;
  width: clamp(160px, 22vw, 260px); color: rgba(127,178,255,.14); pointer-events: none;
}
.tb-banner__art svg { width: 100%; height: auto; display: block; }

/* ── რესპონსივი ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .tb-steps { grid-template-columns: repeat(2, 1fr); }
  .tb-steps > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .tb-steps { grid-template-columns: 1fr; }
  .tb-steps > :last-child { grid-column: auto; }
  .tb-grid { grid-template-columns: 1fr; }
  /* სვეტად flex:1 სიმაღლეზე იზრდება — ძებნის ველი მაღალ ცარიელ ყუთად ჩანდა */
  .tb-tools { flex-direction: column; align-items: stretch; }
  .tb-search { flex: none; }
  .tb-sort { justify-content: space-between; }
  .tb-sort select { flex: 1; }
  .tb-hero { min-height: 0; }
  .tb-hero__in { max-width: none; }
  .tb-cta .v2-btn { width: 100%; }
  .tb-banner__art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-step, .tb-card, .tb-card__go, .tb-step__bar i { transition: none; }
  .tb-step:hover, .tb-card:hover { transform: none; }
}
/* ჰერო ფოტოს გარეშე — ნიშნების დეკორი და ვიწრო ტექსტის სვეტი */
.tb-hero__art {
  position: absolute; inset-inline-end: clamp(1rem, 4vw, 3.5rem); inset-block-start: 50%;
  translate: 0 -50%; width: clamp(170px, 22vw, 260px); pointer-events: none;
}
.tb-hero__art svg { width: 100%; height: auto; display: block; }
@media (min-width: 761px) { .tb-hero__in { max-width: min(62ch, 60%); } }
@media (max-width: 760px) { .tb-hero__art { display: none; } }
/* BPG Caps განიერია — ქართულ სათაურს ოდნავ ვამცირებთ, რომ ორ სტრიქონად დაჯდეს */
html[lang="ka"] .tb .tb-hero__t { font-size: clamp(1.1rem, 2.15vw, 1.65rem); line-height: 1.32; }
html[lang="ka"] .tb .tb-banner h2 { font-size: clamp(1.05rem, 1.9vw, 1.4rem); }

/* ==========================================================================
   /teoria — კატეგორიის არჩევის გვერდი, განახლება (2026-08-25)
   ჰერო და მუქი ბანერი `tb-`-ს იზიარებს, რომ ორივე თეორიის გვერდი
   ერთნაირად გამოიყურებოდეს და CSS არ გაორმაგდეს.
   ========================================================================== */
/* საერთო ნაწილები ორივე გვერდისთვის */
:is(.tb, .th) .tb-hero__t { color: #fff; font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.28; font-weight: 700; letter-spacing: -.02em; }
html[lang="ka"] :is(.tb, .th) .tb-hero__t { font-size: clamp(1.1rem, 2.15vw, 1.65rem); line-height: 1.32; }

/* ── შესავალი ─────────────────────────────────────────────── */
.th-intro { background: #fff; border-bottom: 1px solid var(--hair); padding: clamp(1.2rem, 2.4vw, 1.9rem) 0; }
.th-intro__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.th-intro__go { flex: none; }
.th .th-crumb span { margin-inline: .45rem; }

/* ── ჰერო ─────────────────────────────────────────────────── */
.th-heroWrap { padding-top: clamp(1.2rem, 2.4vw, 1.8rem); }
.th-hero2 { position: relative; }
@media (min-width: 981px) { .th-hero2 .tb-hero__in { max-width: min(58ch, 56%); } }

/* მცურავი პროგრესის ბარათი */
.th-float {
  position: absolute; inset-inline-end: clamp(1rem, 2.6vw, 2rem); inset-block-end: clamp(1rem, 2.6vw, 2rem);
  z-index: 2; display: grid; gap: .3rem; width: min(210px, 42%);
  background: rgba(9,29,66,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: .95rem 1.05rem;
  box-shadow: 0 20px 50px rgba(3,11,26,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.th-float__lab { font-size: .72rem; color: #9FB6D8; }
.th-float__cat { font-size: .78rem; color: #DCE7F8; }
.th-float__cat b { color: #fff; }
.th-float__pct { font-size: 1.85rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.th-float__pct--n { font-size: 1.55rem; }
.th-float__bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.16); overflow: hidden; }
.th-float__bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--teal), #38D6B4); }
.th-float__sub { font-size: .72rem; color: #9FB6D8; font-variant-numeric: tabular-nums; }
.th-float__go {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .5rem;
  padding: .55rem .9rem; border-radius: 999px; background: var(--teal); color: #05271E;
  font-size: .82rem; font-weight: 700; text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.th-float__go:hover { background: #12B78D; transform: translateY(-1px); }
.th-float__go svg { width: 15px; height: 15px; }

/* ── მუქი CTA ბანერი ──────────────────────────────────────── */
.th-bannerWrap { padding-bottom: clamp(2rem, 4vw, 3rem); }
.th-banner {
  position: relative; overflow: hidden; border-radius: 24px; isolation: isolate;
  min-height: clamp(220px, 26vw, 320px); display: flex; align-items: center;
  background: linear-gradient(120deg, var(--deep-navy), var(--navy) 60%, #0C2551);
}
.th-banner__bg { position: absolute; inset: 0; z-index: -2; }
.th-banner__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; display: block; }
.th-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(3,17,38,.95) 0%, rgba(3,17,38,.86) 40%, rgba(3,17,38,.38) 72%, rgba(3,17,38,.10) 100%);
}
.th-banner__in { position: relative; padding: clamp(1.6rem, 3.4vw, 2.6rem); max-width: 56ch; }
:is(.th, .ab) .th-banner h2 { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.3; font-weight: 700; }
html[lang="ka"] :is(.th, .ab) .th-banner h2 { font-size: clamp(1.05rem, 1.9vw, 1.4rem); }
.th-banner p { margin: .7rem 0 1.3rem; font-size: .92rem; line-height: 1.7; color: #B7C9E4; }

@media (max-width: 980px) {
  .th-float {
    position: static; width: auto; margin: 0 clamp(1.6rem, 3.4vw, 2.8rem) clamp(1.6rem, 3.4vw, 2.8rem);
    grid-template-columns: auto 1fr; align-items: center; gap: .3rem .8rem;
  }
  .th-float__bar, .th-float__sub, .th-float__go { grid-column: 1 / -1; }
  .th-hero2 { display: block; }
  .th-hero2 .tb-hero__in { max-width: none; }
}
@media (max-width: 620px) {
  .th-intro__go { width: 100%; }
  .th-float__go { width: 100%; }
}
/* ვიწრო ეკრანზე ტექსტი მთელ სიგანეზეა — ჰორიზონტალური სქრიმი აქ არ გამოდგება,
   მარჯვენა ბოლო ღია რჩებოდა. ვერტიკალურ, თანაბარ ჩაბნელებაზე ვრთავთ. */
@media (max-width: 760px) {
  :is(.tb, .th) .tb-hero::before {
    background: linear-gradient(180deg, rgba(3,17,38,.90) 0%, rgba(3,17,38,.86) 50%, rgba(3,17,38,.94) 100%);
  }
  .th-banner::before {
    background: linear-gradient(180deg, rgba(3,17,38,.92) 0%, rgba(3,17,38,.88) 55%, rgba(3,17,38,.95) 100%);
  }
}

/* ==========================================================================
   /shesaxeb — ჩვენ შესახებ (2026-08-25)
   ყველა რიცხვი ბაზიდან/API-დან მოდის; მუქი ბანერი თეორიის `th-banner`-ს იზიარებს.
   ========================================================================== */
.ab { background: #fff; }

/* ── ჰერო ─────────────────────────────────────────────────── */
.ab-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(64% 110% at 6% 0%, rgba(21,94,239,.40), transparent 60%),
    radial-gradient(54% 100% at 96% 96%, rgba(22,199,154,.20), transparent 64%),
    linear-gradient(150deg, var(--deep-navy) 0%, var(--navy) 58%, #0C2551 100%);
  padding: clamp(1.4rem, 2.6vw, 2rem) 0 clamp(2.6rem, 5vw, 4rem);
}
.ab-crumb { font-size: .84rem; color: #8FA6C8; margin-bottom: clamp(1rem, 2.4vw, 1.6rem); }
.ab-crumb a { color: #BDD2F2; text-decoration: none; }
.ab-crumb a:hover { color: #fff; text-decoration: underline; }
.ab-crumb span { margin-inline: .45rem; color: #5B7099; }
.ab-hero__in { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.ab .ab-eyebrow { color: #7FD9FF; }
.ab .ab-eyebrow::before { background: linear-gradient(90deg, var(--cyan), var(--teal)); }
.ab .ab-h1 {
  margin-top: .9rem; color: #fff; font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.2;
}
html[lang="ka"] .ab .ab-h1 { font-size: clamp(1.35rem, 2.7vw, 2.05rem); line-height: 1.26; }
.ab-h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--teal) 8%, var(--cyan) 70%, #7FD9FF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ab-lead { margin-top: 1rem; max-width: 54ch; font-size: clamp(.94rem, 1.15vw, 1.04rem); line-height: 1.75; color: #C2D3EC; }
.ab-bullets { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ab-bullets li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: #DCE7F8; }
.ab-bullets svg { width: 17px; height: 17px; flex: none; color: var(--teal); }
.ab-hero__copy .v2-btn { margin-top: 1.6rem; }

.ab-hero__media { position: relative; }
.ab-hero__media picture { display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px rgba(3,11,26,.5); border: 1px solid rgba(255,255,255,.12); }
.ab-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 10; }
.ab-trust {
  position: absolute; inset-inline-start: clamp(-.5rem, -1vw, 0rem); inset-block-end: clamp(-1rem, -1.6vw, -.6rem);
  display: flex; align-items: flex-start; gap: .7rem; width: min(320px, 84%);
  background: rgba(9,29,66,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: .9rem 1rem;
  box-shadow: 0 20px 50px rgba(3,11,26,.55);
}
.ab-trust__ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: rgba(22,199,154,.18); color: var(--teal); }
.ab-trust__ico svg { width: 17px; height: 17px; }
.ab-trust > span:last-child { display: grid; gap: .18rem; min-width: 0; }
.ab-trust b { font-size: .88rem; color: #fff; }
.ab-trust > span:last-child > span { font-size: .76rem; line-height: 1.5; color: #A9BEDD; }

/* ── მაჩვენებლების ზოლი ───────────────────────────────────── */
.ab-statsWrap { margin-top: clamp(-2.4rem, -3vw, -1.6rem); position: relative; z-index: 2; }
.ab-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
  background: #fff; border: 1px solid var(--hair); border-radius: 20px;
  padding: clamp(1rem, 2vw, 1.5rem); box-shadow: 0 2px 8px rgba(7,26,61,.06), 0 20px 46px rgba(7,26,61,.10);
}
.ab-stat { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ab-stat + .ab-stat { border-inline-start: 1px solid var(--hair); padding-inline-start: .8rem; }
.ab-stat__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: #EEF3FB; color: var(--blue); }
.ab-stat__ico svg { width: 19px; height: 19px; }
.ab-stat b { display: block; font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 700; color: var(--ink2); line-height: 1.15; }
.ab-stat > span:last-child > span { font-size: .76rem; line-height: 1.4; color: var(--ink-soft); }

/* ── მისია ────────────────────────────────────────────────── */
.ab-two { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.ab-mission { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ab-mission__i {
  display: flex; align-items: flex-start; gap: .9rem;
  background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 1.1rem;
  box-shadow: 0 1px 2px rgba(7,26,61,.04), 0 10px 26px rgba(7,26,61,.05);
}
.ab-mission__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; }
.ab-mission__ico svg { width: 20px; height: 20px; }
.ab-mission__ico--blue { background: #E8EFFA; color: var(--blue); }
.ab-mission__ico--cyan { background: #E4F4FE; color: #0369A1; }
.ab-mission__ico--teal { background: #E3F7F1; color: var(--teal-dark); }
.ab-mission__i > span:last-child { display: grid; gap: .25rem; min-width: 0; }
.ab-mission b { font-size: .98rem; color: var(--ink2); }
.ab-mission__i > span:last-child > span { font-size: .86rem; line-height: 1.6; color: var(--ink-soft); }

/* ── რატომ ────────────────────────────────────────────────── */
.ab-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }

/* ── ორი ნაწილი ───────────────────────────────────────────── */
.ab-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.ab-part {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.6vw, 2rem); box-shadow: 0 1px 2px rgba(7,26,61,.05), 0 14px 36px rgba(7,26,61,.07);
}
.ab-part__lab {
  display: inline-flex; align-self: flex-start; padding: .26rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
}
.ab-part__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-top: 1rem; }
.ab-part__ico svg { width: 22px; height: 22px; }
.ab .ab-part h3 { margin-top: .9rem; font-size: 1.15rem; font-weight: 700; color: var(--ink2); }
.ab-part p { margin-top: .5rem; font-size: .9rem; line-height: 1.7; color: var(--ink-mid); }
.ab-part__go {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: 1.2rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: gap .2s ease;
}
.ab-part__go:hover { gap: .65rem; }
.ab-part__go svg { width: 17px; height: 17px; }
.ab-part--blue .ab-part__lab { background: #E8EFFA; color: var(--blue); }
.ab-part--blue .ab-part__ico { background: #E8EFFA; color: var(--blue); }
.ab-part--blue .ab-part__go { color: var(--blue); }
.ab-part--teal .ab-part__lab { background: #E3F7F1; color: var(--teal-dark); }
.ab-part--teal .ab-part__ico { background: #E3F7F1; color: var(--teal-dark); }
.ab-part--teal .ab-part__go { color: var(--teal-dark); }

/* ── უსაფრთხოების შენიშვნა ────────────────────────────────── */
.ab-safe {
  display: flex; align-items: flex-start; gap: 1rem; margin-top: 1.3rem;
  background: #FFF9EC; border: 1px solid #F2E0B8; border-radius: 18px;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.ab-safe__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: #FBEFD3; color: #B45309; }
.ab-safe__ico svg { width: 21px; height: 21px; }
.ab .ab-safe h3 { font-size: 1.02rem; font-weight: 700; color: #7C4A03; }
.ab-safe p { margin-top: .4rem; font-size: .88rem; line-height: 1.7; color: #855C1A; }

/* ── ბანერი ───────────────────────────────────────────────── */
.ab-bannerWrap { padding-block: clamp(2rem, 4vw, 3.2rem); }
.ab-banner__cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.ab .th-banner__in { max-width: 58ch; }

/* ── რესპონსივი ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ab-hero__in, .ab-two { grid-template-columns: 1fr; }
  .ab-why { grid-template-columns: repeat(2, 1fr); }
  .ab-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .ab-stat + .ab-stat { border-inline-start: 0; padding-inline-start: 0; }
  .ab-stat:nth-child(2) { border-inline-start: 1px solid var(--hair); padding-inline-start: 1rem; }
  .ab-stat:nth-child(4) { border-inline-start: 1px solid var(--hair); padding-inline-start: 1rem; }
  .ab-trust { position: static; width: auto; margin-top: .9rem; }
  .ab-hero__media picture { box-shadow: 0 16px 40px rgba(3,11,26,.4); }
}
@media (max-width: 700px) {
  .ab-why, .ab-parts { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: 1fr; }
  .ab-stat:nth-child(n) { border-inline-start: 0; padding-inline-start: 0; }
  .ab-stat + .ab-stat { border-top: 1px solid var(--hair); padding-top: .8rem; }
  .ab-hero__copy .v2-btn, .ab-banner__cta .v2-btn { width: 100%; }
  .ab-safe { flex-direction: column; gap: .8rem; }
}

/* ==========================================================================
   მუდმივი შეთავაზება — ქვედა ზოლი (.ups) + ჩასმადი ბლოკი (.upb)
   ჩანს მანამ, სანამ პრაქტიკა არ იყიდება; „დახურვა" მხოლოდ ჩაკეცავს.
   ========================================================================== */
.ups { position: fixed; inset: auto 0 0 0; z-index: 60; pointer-events: none; }
.ups__bar {
  pointer-events: auto;
  background: linear-gradient(100deg, var(--deep-navy) 0%, var(--navy) 46%, var(--navy-3) 100%);
  border-top: 1px solid rgba(126,168,255,.22);
  box-shadow: 0 -10px 34px rgba(3,17,38,.34);
  padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(0); transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.ups__in { display: flex; align-items: center; gap: 1rem; }

.ups__ico {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(22,199,154,.16); color: var(--teal);
}
.ups__ico svg { width: 21px; height: 21px; }

.ups__txt { min-width: 0; display: flex; flex-direction: column; gap: .1rem; color: #fff; }
.ups__txt b { font-size: .95rem; font-weight: 700; }
.ups__txt span {
  font-size: .8rem; color: #B9CBEA;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ups__buys { margin-inline-start: auto; display: flex; gap: .5rem; flex: none; }
.ups__buy {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .05rem; padding: .5rem .95rem; border-radius: 12px; text-decoration: none;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff;
  transition: background .16s ease, transform .16s ease, border-color .16s ease;
}
.ups__buy:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.ups__buy__p { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ups__buy__d { font-size: .7rem; color: #B9CBEA; }
.ups__buy.is-hot {
  background: var(--teal); border-color: transparent; box-shadow: 0 6px 20px rgba(22,199,154,.4);
}
.ups__buy.is-hot:hover { background: var(--teal-dark); }
.ups__buy.is-hot .ups__buy__d { color: rgba(255,255,255,.86); }
.ups__buy__tag {
  position: absolute; top: -9px; inset-inline-end: -6px;
  background: #F2545B; color: #fff; font-size: .6rem; font-weight: 700;
  padding: .12rem .42rem; border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}

.ups__x {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.07); border: 0; color: #93A9CE; cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.ups__x:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ჩაკეცილი მდგომარეობა — ზოლი ჩადის, პატარა ღილაკი რჩება */
.ups__pill {
  pointer-events: auto; position: absolute;
  inset-inline-end: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: none; align-items: center; gap: .4rem;
  padding: .6rem .95rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--teal); color: #fff; font: inherit; font-weight: 700; font-size: .9rem;
  box-shadow: 0 10px 26px rgba(22,199,154,.44);
}
.ups__pill svg { width: 16px; height: 16px; }
.ups.is-min .ups__bar  { transform: translateY(110%); }
.ups.is-min .ups__pill { display: inline-flex; }

/* ფუტერს ზოლი რომ არ დააფაროს */
body:has(#upsBar) .v2-footer { padding-bottom: 86px; }

@media (max-width: 860px) {
  .ups__txt span { display: none; }
  .ups__in { gap: .6rem; }
}
@media (max-width: 620px) {
  .ups__ico { display: none; }
  /* სამ ხაზზე გაწელილი სათაური ზოლს 80px-მდე ზრდიდა — ორზე ვჭრით */
  .ups__txt b {
    font-size: .86rem; line-height: 1.25; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ups__buy { padding: .45rem .7rem; }
  .ups__buy__p { font-size: .95rem; }
}

/* ── ჩასმადი ბლოკი ───────────────────────────────────────── */
.upb {
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3.4vw, 2.6rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
}
.upb--light { background: #fff; border: 1px solid var(--hair); box-shadow: var(--sh-1); }
.upb--dark  {
  background: linear-gradient(120deg, var(--deep-navy) 0%, var(--navy) 55%, var(--navy-3) 100%);
  color: #fff;
}
.upb__head { max-width: 62ch; }
.upb__eyebrow {
  display: inline-flex; align-items: center; gap: .42rem; margin-bottom: .7rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--teal);
}
.upb__eyebrow svg { width: 14px; height: 14px; }
.upb__t { font-size: clamp(1.28rem, 2.5vw, 1.85rem); font-weight: 700; letter-spacing: -.02em; }
.upb__p { margin-top: .6rem; font-size: .96rem; line-height: 1.65; color: var(--ink-mid); }
.upb--dark .upb__p { color: #B9CBEA; }

.upb__perks {
  list-style: none; margin: 1.3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem 1.2rem;
}
.upb__perks li { display: flex; align-items: center; gap: .6rem; font-size: .89rem; line-height: 1.4; }
.upb--dark .upb__perks li { color: #DCE7F8; }
.upb__perk__i {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(21,94,239,.09); color: var(--blue);
}
.upb--dark .upb__perk__i { background: rgba(22,199,154,.16); color: var(--teal); }
.upb__perk__i svg { width: 16px; height: 16px; }

.upb__plans {
  margin-top: 1.5rem; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.upb__plan {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--r); text-decoration: none;
  border: 1.5px solid var(--hair); background: var(--slate); color: var(--ink2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.upb--dark .upb__plan { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #fff; }
.upb__plan:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue); }
.upb__plan.is-hot { border-color: var(--teal); background: rgba(22,199,154,.07); }
.upb--dark .upb__plan.is-hot { background: rgba(22,199,154,.14); }
.upb__tag {
  position: absolute; top: -10px; inset-inline-start: 1.1rem;
  background: var(--teal); color: #fff; font-size: .66rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px; letter-spacing: .02em;
}
.upb__plan__ttl { font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.upb--dark .upb__plan__ttl { color: #9FB6DA; }
.upb__plan__price { display: flex; align-items: baseline; gap: .45rem; }
.upb__plan__price b { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.upb__plan__price i { font-style: normal; font-size: .84rem; color: var(--ink-soft); }
.upb--dark .upb__plan__price i { color: #9FB6DA; }
.upb__plan__per { font-size: .76rem; color: var(--teal); font-weight: 600; }
.upb__plan__go {
  margin-top: .7rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 700; color: var(--blue);
}
.upb--dark .upb__plan__go { color: var(--teal); }
.upb__plan.is-hot .upb__plan__go { color: var(--teal-dark); }
.upb--dark .upb__plan.is-hot .upb__plan__go { color: var(--teal); }
.upb__plan__go svg { width: 15px; height: 15px; }

.upb__fine {
  margin-top: 1.1rem; display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: var(--ink-soft);
}
.upb--dark .upb__fine { color: #9FB6DA; }
.upb__fine svg { width: 15px; height: 15px; flex: none; color: var(--teal); }

/* ==========================================================================
   თეორიის ქვეგვერდები (.tp) — ვარჯიში · გამოცდა · ბილეთები · შედეგი
   app.css-ის ძველი კლასები (.q-card / .answer / .ticket / .explain-box)
   აქ v2-ის პალიტრაზე გადმოდის — მხოლოდ `.tp`-ს შიგნით, რომ სხვაგან
   არაფერი დაზიანდეს.
   ========================================================================== */
.tp { background: var(--slate); min-height: 60vh; }
.tp-body { padding: clamp(1.6rem, 3.4vw, 2.6rem) 0 clamp(3rem, 6vw, 4.5rem); }
.tp-body--narrow { max-width: 820px; }
.tp-sec { margin-top: clamp(2rem, 4vw, 3rem); }

.tp-h1 {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: clamp(1.35rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.tp-h1__i {
  flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(21,94,239,.10); color: var(--blue);
}
.tp-h1__i--amber  { background: rgba(245,158,11,.14); color: #B45309; }
.tp-h1__i--violet { background: rgba(124,58,237,.12); color: #6D28D9; }
.tp-h1__i svg { width: 21px; height: 21px; }
.tp-top__side { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tp-score {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .9rem; border-radius: 999px; background: rgba(21,94,239,.09);
  color: var(--blue); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.tp-score.is-good { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.tp-score.is-mid  { background: rgba(245,158,11,.15); color: #B45309; }

/* ── პროგრესის ლიანდაგი ──────────────────────────────────── */
.tp-quiz { position: relative; }
.tp-rail {
  position: sticky; top: 78px; z-index: 20;
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1rem; margin-bottom: 1.2rem;
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border: 1px solid var(--hair); border-radius: 999px; box-shadow: var(--sh-1);
}
.tp-rail__bar { flex: 1; height: 7px; border-radius: 999px; background: #E8EEF7; overflow: hidden; }
.tp-rail__bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.tp-rail__n { font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.tp-rail__n b { color: var(--ink2); font-weight: 700; }

/* ── კითხვის ბარათი (quiz.js-ის მარკაპი) ─────────────────── */
.tp .quiz, .tp #quiz { max-width: none; }
.tp .q-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 3vw, 2.1rem); box-shadow: var(--sh-1);
}
.tp .q-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tp .q-index {
  background: var(--navy); color: #fff; border-radius: 999px; padding: .28rem .75rem;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.tp .q-cat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tp .q-ticket {
  margin-inline-start: auto; font-size: .78rem; color: var(--blue); text-decoration: none;
  background: rgba(21,94,239,.08); padding: .28rem .7rem; border-radius: 999px;
}
.tp .q-ticket:hover { background: rgba(21,94,239,.15); }
.tp .q-text { font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.6; color: var(--ink2); margin: 0 0 1.2rem; }
.tp .q-figure { margin: 0 0 1.2rem; }
.tp .q-image { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--hair); display: block; }

.tp .answers { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.tp .answer {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: start;
  padding: .85rem 1rem; border-radius: var(--r); border: 1.5px solid var(--hair);
  background: #fff; color: var(--ink2); font: inherit; font-size: .96rem; line-height: 1.5;
  cursor: pointer; transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.tp .answer:hover:not(.locked) { border-color: var(--blue); background: #F6F9FF; transform: translateX(2px); }
.tp .answer:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tp .answer .key {
  flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--slate); color: var(--ink-soft); font-size: .8rem; font-weight: 700;
  border: 1px solid var(--hair);
}
.tp .answer.correct { border-color: var(--teal); background: rgba(22,199,154,.08); }
.tp .answer.correct .key { background: var(--teal); border-color: var(--teal); color: #fff; }
.tp .answer.wrong { border-color: #F2545B; background: rgba(242,84,91,.07); }
.tp .answer.wrong .key { background: #F2545B; border-color: #F2545B; color: #fff; }
.tp .answer.selected { border-color: var(--blue); background: rgba(21,94,239,.07); }
.tp .answer.selected .key { background: var(--blue); border-color: var(--blue); color: #fff; }
.tp .answer.locked, .tp .answers-static .answer { cursor: default; transform: none; }

.tp .explain {
  margin-top: 1rem; padding: .95rem 1.1rem; border-radius: var(--r);
  border-inline-start: 3px solid var(--blue); background: var(--slate);
  font-size: .92rem; line-height: 1.65; color: var(--ink-mid);
}
.tp .explain b { color: var(--ink2); }
.tp .explain-ok { border-inline-start-color: var(--teal); background: rgba(22,199,154,.07); }
.tp .explain-ok b { color: var(--teal-dark); }
.tp .explain-no { border-inline-start-color: #F2545B; background: rgba(242,84,91,.06); }
.tp .explain-no b { color: #C6303A; }

.tp .explain-box { margin-top: 1rem; border-top: 1px dashed var(--hair); padding-top: .8rem; }
.tp .explain-box summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600; color: var(--blue);
}
.tp .explain-box summary::-webkit-details-marker { display: none; }
.tp .explain-box summary::before { content: '▸'; display: inline-block; transition: transform .15s ease; }
.tp .explain-box[open] summary::before { transform: rotate(90deg); }
.tp .explain-box .explain-body {
  margin-top: .6rem; font-size: .9rem; line-height: 1.7; color: var(--ink-mid);
}

.tp .quiz-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem;
  padding-top: 1.2rem; border-top: 1px solid var(--hair);
}
.tp .quiz-nav .nav-hint { font-size: .76rem; color: var(--ink-soft); }
.tp .quiz-nav .btn {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px;
  padding: .62rem 1.15rem; font: inherit; font-size: .88rem; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
}
.tp .quiz-nav .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(21,94,239,.26); }
.tp .quiz-nav .btn-primary:hover { background: var(--blue-dark); }
.tp .quiz-nav .btn-ghost { background: #fff; color: var(--navy); border-color: var(--hair); }
.tp .quiz-nav .btn-ghost:hover { border-color: #c9d6e8; }
.tp .quiz-nav .btn[disabled] { opacity: .45; pointer-events: none; }

/* ვარჯიშის ფინალი (quiz.js) */
.tp .q-card.center { text-align: center; }
.tp .q-card .result-score {
  font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--blue);
}
.tp .q-card .hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* ── შენიშვნა / ცარიელი მდგომარეობა ──────────────────────── */
.tp-note {
  display: flex; gap: .8rem; align-items: flex-start; margin-top: 1.4rem;
  padding: 1rem 1.2rem; border-radius: var(--r); background: rgba(21,94,239,.06);
  border: 1px solid rgba(21,94,239,.16);
}
.tp-note__i { flex: none; color: var(--blue); }
.tp-note__i svg { width: 19px; height: 19px; }
.tp-note p { font-size: .89rem; line-height: 1.6; color: var(--ink-mid); }
.tp-note a { color: var(--blue); font-weight: 600; }

.tp-empty {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(2.2rem, 5vw, 3.4rem); text-align: center; box-shadow: var(--sh-1);
}
.tp-empty__i {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 1rem;
  background: rgba(21,94,239,.09); color: var(--blue);
}
.tp-empty__i svg { width: 27px; height: 27px; }
.tp-empty h2 { font-size: 1.2rem; font-weight: 700; }
.tp-empty p { margin-top: .5rem; font-size: .93rem; color: var(--ink-mid); }
.tp-empty__go, .tp-empty .v2-btn { margin-top: 1.3rem; }
.tp-empty__go { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }

/* ── გვერდების ნავიგაცია ─────────────────────────────────── */
.tp-pager { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }
.tp-pager--wide { justify-content: space-between; }
.tp-pager__b {
  min-width: 40px; padding: .55rem .85rem; border-radius: 11px; text-align: center;
  background: #fff; border: 1px solid var(--hair); color: var(--ink2);
  font-size: .88rem; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background .14s ease;
}
.tp-pager__b:hover { border-color: var(--blue); background: #F6F9FF; }
.tp-pager__b.is-on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.tp-pager__gap { padding: .55rem .3rem; color: var(--ink-soft); }

/* ── CTA ზოლი ────────────────────────────────────────────── */
.tp-cta {
  margin-top: 1.8rem; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 1.3rem 1.5rem; box-shadow: var(--sh-1);
}
.tp-cta__i {
  flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(22,199,154,.13); color: var(--teal-dark);
}
.tp-cta__i svg { width: 22px; height: 22px; }
.tp-cta h2 { font-size: 1.05rem; font-weight: 700; }
.tp-cta p { margin-top: .3rem; font-size: .88rem; line-height: 1.6; color: var(--ink-mid); max-width: 58ch; }
.tp-cta__go { margin-inline-start: auto; display: flex; gap: .55rem; flex-wrap: wrap; }

/* ══════════ გამოცდის შესავალი ══════════ */
.ex-start {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2rem;
  align-items: stretch;
}
.ex-start__l {
  background: linear-gradient(135deg, var(--deep-navy) 0%, var(--navy) 52%, var(--navy-3) 100%);
  color: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 3.4vw, 2.4rem);
  box-shadow: var(--sh-2);
}
.ex-start__eyebrow {
  display: inline-flex; align-items: center; gap: .42rem; color: var(--teal);
  font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
.ex-start__eyebrow svg { width: 14px; height: 14px; }
.ex-start__t { margin-top: .7rem; font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; }
.ex-start__p { margin-top: .6rem; font-size: .93rem; line-height: 1.7; color: #B9CBEA; }
.ex-meters { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.ex-meter {
  flex: 1 1 96px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r); padding: .85rem .9rem; text-align: center;
}
.ex-meter b { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.ex-meter span { display: block; margin-top: .15rem; font-size: .74rem; color: #9FB6DA; }
.ex-meter--warn { background: rgba(242,84,91,.14); border-color: rgba(242,84,91,.3); }
.ex-meter--warn b { color: #FFB4B8; }
.ex-start__go { margin-top: 1.5rem; width: 100%; }
.ex-start__fine {
  margin-top: .9rem; display: flex; align-items: center; gap: .4rem;
  font-size: .78rem; color: #8FA8CE;
}
.ex-start__fine svg { width: 14px; height: 14px; flex: none; }

.ex-rules {
  list-style: none; margin: 0; padding: clamp(1.3rem, 2.8vw, 1.8rem);
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); display: grid; gap: .85rem; align-content: start;
}
.ex-rules__hd {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft); padding-bottom: .3rem;
  border-bottom: 1px solid var(--hair);
}
.ex-rules li { display: flex; gap: .7rem; align-items: flex-start; font-size: .89rem; line-height: 1.55; color: var(--ink-mid); }
.ex-rules__i {
  flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--slate); color: var(--blue); border: 1px solid var(--hair);
}
.ex-rules__i svg { width: 15px; height: 15px; }

.ex-hist { display: grid; gap: .6rem; }
.ex-try {
  display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink2);
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: .85rem 1.1rem;
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.ex-try:hover { border-color: var(--blue); transform: translateX(3px); box-shadow: var(--sh-1); }
.ex-try__ring {
  flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ring, var(--teal)) calc(var(--p) * 1%), #E8EEF7 0);
  position: relative;
}
.ex-try__ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.ex-try__ring b, .ex-try__ring i {
  position: relative; font-style: normal; font-variant-numeric: tabular-nums; line-height: 1;
}
.ex-try__ring b { font-size: 1.02rem; font-weight: 700; }
.ex-try__ring i { font-size: .68rem; color: var(--ink-soft); }
.ex-try.is-fail .ex-try__ring { --ring: #F2545B; }
.ex-try__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.ex-try__body b { font-size: .93rem; font-weight: 700; }
.ex-try.is-pass .ex-try__body b { color: var(--teal-dark); }
.ex-try.is-fail .ex-try__body b { color: #C6303A; }
.ex-try__body span { font-size: .8rem; color: var(--ink-soft); }
.ex-try__time {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ex-try__time svg { width: 14px; height: 14px; }
.ex-try__go { flex: none; color: #A9BACF; }
.ex-try__go svg { width: 17px; height: 17px; }

/* ══════════ ბილეთების სია ══════════ */
.tk-layout { display: grid; grid-template-columns: 268px 1fr; gap: 1.4rem; align-items: start; }
.tk-side { position: sticky; top: 86px; display: grid; gap: .9rem; }
.tk-jump {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: .95rem 1rem;
  box-shadow: var(--sh-1);
}
.tk-jump__l {
  display: flex; align-items: center; gap: .38rem; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-bottom: .55rem;
}
.tk-jump__l svg { width: 14px; height: 14px; }
.tk-jump__row { display: flex; gap: .4rem; }
.tk-jump__in {
  flex: 1; min-width: 0; padding: .55rem .75rem; border-radius: 10px; border: 1.5px solid var(--hair);
  background: var(--slate); font: inherit; font-size: .9rem; color: var(--ink2);
}
.tk-jump__in:focus { outline: none; border-color: var(--blue); background: #fff; }
.tk-jump__go {
  flex: none; width: 38px; border: 0; border-radius: 10px; background: var(--blue); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.tk-jump__go:hover { background: var(--blue-dark); }
.tk-jump__go svg { width: 16px; height: 16px; }

.tk-nav {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  box-shadow: var(--sh-1); overflow: hidden; max-height: 62vh; overflow-y: auto;
}
.tk-nav__i {
  display: flex; align-items: center; gap: .6rem; justify-content: space-between;
  padding: .68rem .95rem; text-decoration: none; color: var(--ink-mid); font-size: .87rem;
  border-bottom: 1px solid var(--hair); transition: background .14s ease, color .14s ease;
}
.tk-nav__i:last-child { border-bottom: 0; }
.tk-nav__i:hover { background: var(--slate); color: var(--ink2); }
.tk-nav__i b {
  flex: none; font-size: .76rem; font-weight: 700; color: var(--ink-soft);
  background: var(--slate); border-radius: 999px; padding: .12rem .48rem;
}
.tk-nav__i.is-on { background: rgba(21,94,239,.08); color: var(--blue); font-weight: 600; }
.tk-nav__i.is-on b { background: var(--blue); color: #fff; }

.tk-main { min-width: 0; display: grid; gap: .9rem; }
.tk-descr {
  display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1.1rem;
  background: rgba(21,94,239,.05); border: 1px solid rgba(21,94,239,.14); border-radius: var(--r);
  font-size: .88rem; line-height: 1.6; color: var(--ink-mid);
}
.tk-descr svg { width: 17px; height: 17px; flex: none; color: var(--blue); margin-top: .1rem; }

.tp .ticket {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.6vw, 1.7rem); box-shadow: var(--sh-1);
}
.tp .ticket-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tp .ticket-no {
  background: var(--navy); color: #fff; border-radius: 999px; padding: .28rem .8rem;
  font-size: .78rem; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums;
}
.tp .ticket-no:hover { background: var(--navy-3); }
.tp .ticket-cat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.tp .ticket-q { font-size: 1.02rem; line-height: 1.6; color: var(--ink2); margin: 0 0 1rem; }

/* ══════════ გამოცდის შედეგი ══════════ */
.rz { color: #fff; padding: clamp(2rem, 4.6vw, 3.4rem) 0; }
.rz--pass { background: linear-gradient(130deg, #06371F 0%, #0B5B3A 46%, #0FA37D 100%); }
.rz--fail { background: linear-gradient(130deg, #3A0A10 0%, var(--deep-navy) 52%, var(--navy-3) 100%); }
.rz__in { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.4rem, 3.4vw, 3rem); align-items: center; }
.rz__badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  font-size: .8rem; font-weight: 700;
}
.rz__badge svg { width: 15px; height: 15px; }
.rz__badge i {
  font-style: normal; margin-inline-start: .3rem; padding-inline-start: .5rem;
  border-inline-start: 1px solid rgba(255,255,255,.3); opacity: .85;
}
.rz__t { margin-top: .9rem; font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.rz__p { margin-top: .7rem; font-size: .98rem; line-height: 1.7; color: rgba(255,255,255,.84); max-width: 56ch; }
.rz__go { margin-top: 1.5rem; display: flex; gap: .7rem; flex-wrap: wrap; }

.rz__r { display: grid; gap: 1rem; justify-items: center; }
.rz__dial {
  width: clamp(150px, 22vw, 190px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center; position: relative;
  background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.16) 0);
}
.rz__dial::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: rgba(3,17,38,.55); }
.rz__dial__n, .rz__dial__l { position: relative; }
.rz__dial__n { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; }
.rz__dial__n i { font-style: normal; font-size: .5em; opacity: .7; }
.rz__dial__l { margin-top: .2rem; font-size: .78rem; color: rgba(255,255,255,.8); }
.rz__stats { list-style: none; margin: 0; padding: 0; display: flex; gap: .6rem; }
.rz__stats li {
  flex: 1; text-align: center; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: .7rem .6rem; min-width: 82px;
}
.rz__stats b { display: block; font-size: 1.12rem; font-weight: 700; }
.rz__stats span { display: block; margin-top: .1rem; font-size: .7rem; color: rgba(255,255,255,.72); }

.rz-legend { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft); }
.rz-legend__i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rz-legend__i--ok { background: var(--teal); }
.rz-legend__i--no { background: #F2545B; margin-inline-start: .7rem; }

.rz-list { display: grid; gap: .8rem; }
.rz-item {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2.4vw, 1.6rem); box-shadow: var(--sh-1);
  border-inline-start: 4px solid var(--teal);
}
.rz-item.is-no { border-inline-start-color: #F2545B; }
.rz-item__hd { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rz-item__n {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--slate); border: 1px solid var(--hair); font-size: .78rem; font-weight: 700; color: var(--ink-mid);
}
.rz-item__tk { font-size: .78rem; color: var(--blue); text-decoration: none; background: rgba(21,94,239,.08); padding: .24rem .65rem; border-radius: 999px; }
.rz-item__cat { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.rz-item__v {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 700; padding: .24rem .65rem; border-radius: 999px;
  background: rgba(22,199,154,.12); color: var(--teal-dark);
}
.rz-item__v svg { width: 13px; height: 13px; }
.rz-item.is-no .rz-item__v { background: rgba(242,84,91,.1); color: #C6303A; }
.rz-item__q { font-size: 1rem; line-height: 1.6; color: var(--ink2); margin-bottom: .9rem; }
.rz-item__fig { margin: 0 0 .9rem; }
.rz-item__fig img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--hair); display: block; }

.rz-ans { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rz-ans__i {
  display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem;
  border-radius: 12px; border: 1.5px solid var(--hair); background: #fff;
  font-size: .93rem; line-height: 1.5; color: var(--ink-mid);
}
.rz-ans__k {
  flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--slate); border: 1px solid var(--hair); font-size: .76rem; font-weight: 700; color: var(--ink-soft);
}
.rz-ans__i.is-correct { border-color: var(--teal); background: rgba(22,199,154,.07); color: var(--ink2); }
.rz-ans__i.is-correct .rz-ans__k { background: var(--teal); border-color: var(--teal); color: #fff; }
.rz-ans__i.is-wrong { border-color: #F2545B; background: rgba(242,84,91,.06); }
.rz-ans__i.is-wrong .rz-ans__k { background: #F2545B; border-color: #F2545B; color: #fff; }
.rz-ans__mine { font-style: normal; font-size: .78rem; color: var(--ink-soft); }

.rz-exp { margin-top: .9rem; border-top: 1px dashed var(--hair); padding-top: .75rem; }
.rz-exp summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .42rem;
  font-size: .85rem; font-weight: 600; color: var(--blue);
}
.rz-exp summary::-webkit-details-marker { display: none; }
.rz-exp summary svg { width: 15px; height: 15px; }
.rz-exp__b { margin-top: .6rem; font-size: .9rem; line-height: 1.7; color: var(--ink-mid); }

@media (max-width: 940px) {
  .ex-start { grid-template-columns: 1fr; }
  .tk-layout { grid-template-columns: 1fr; }
  .tk-side { position: static; }
  .tk-nav { max-height: none; }
  .rz__in { grid-template-columns: 1fr; }
  .rz__r { justify-items: start; }
  .rz__stats { width: 100%; }
}
@media (max-width: 620px) {
  .tp-rail { top: 74px; }
  .tp-cta__go { margin-inline-start: 0; width: 100%; }
  .ex-try__time { display: none; }
  .rz__stats { flex-wrap: wrap; }
}

/* ჩაკეტილი მარშრუტის უპირატესობები */
.lk-perks {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .65rem 1.1rem;
}
.lk-perks li { display: flex; align-items: center; gap: .6rem; font-size: .88rem; line-height: 1.4; color: var(--ink-mid); }
.lk-perks span {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(22,199,154,.12); color: var(--teal-dark);
}
.lk-perks svg { width: 16px; height: 16px; }

/* ==========================================================================
   პროფილი (.pf) — მუქი თავსართი, მაჩვენებლები, ცდები, გვერდითი სვეტი
   ⚠️ `.pr-*` პრაქტიკის გვერდისაა — ეს სხვა namespace-ია (`.pf-*`).
   ========================================================================== */
.pf { background: var(--slate); min-height: 60vh; }

/* ── თავსართი ────────────────────────────────────────────── */
.pf-top {
  background: linear-gradient(125deg, var(--deep-navy) 0%, var(--navy) 52%, var(--navy-3) 100%);
  color: #fff; padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(1.8rem, 3.6vw, 2.8rem);
}
.pf-crumb { font-size: .84rem; color: #9FB6DA; margin-bottom: 1.1rem; }
.pf-crumb a { color: #B9CBEA; text-decoration: none; }
.pf-crumb a:hover { color: #fff; text-decoration: underline; }
.pf-crumb span { margin-inline: .45rem; color: #5B76A8; }

.pf-id { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.6rem); flex-wrap: wrap; }
.pf-id__ava { flex: none; position: relative; }
.pf-id__ava .ava {
  box-shadow: 0 0 0 3px rgba(255,255,255,.16), 0 12px 32px rgba(3,17,38,.45);
  border-radius: 50%;
}
.pf-id__body { min-width: 0; flex: 1 1 260px; }
.pf-id__name {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; color: #fff;
}
.pf-id__mail {
  margin-top: .45rem; display: flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: #B9CBEA; min-width: 0;
}
.pf-id__mail svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.pf-id__mail span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pf-chips { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; gap: .45rem; flex-wrap: wrap; }
.pf-chips li {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .34rem .75rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; color: #C7D6EE;
}
.pf-chips li svg { width: 13px; height: 13px; opacity: .85; }
.pf-chips li.is-on {
  background: rgba(22,199,154,.16); border-color: rgba(22,199,154,.34); color: #8BEFD1;
}
.pf-id__go { margin-inline-start: auto; display: flex; gap: .55rem; flex-wrap: wrap; }

/* ── მაჩვენებლები ────────────────────────────────────────── */
.pf-body { padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(3rem, 6vw, 4.5rem); }
.pf-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem;
  margin-top: -3.2rem; margin-bottom: clamp(1.6rem, 3.4vw, 2.4rem);
}
.pf-stat {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.1rem 1.2rem; box-shadow: var(--sh-2);
}
.pf-stat__i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(21,94,239,.09); color: var(--blue); margin-bottom: .7rem;
}
.pf-stat__i svg { width: 18px; height: 18px; }
.pf-stat--teal   .pf-stat__i { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pf-stat--violet .pf-stat__i { background: rgba(124,58,237,.11); color: #6D28D9; }
.pf-stat--amber  .pf-stat__i { background: rgba(245,158,11,.15); color: #B45309; }
.pf-stat b {
  display: block; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; color: var(--ink2);
}
.pf-stat__l { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.4; color: var(--ink-soft); }

/* ── ორსვეტიანი ──────────────────────────────────────────── */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 1.4rem; align-items: start; }
.pf-col { min-width: 0; }
.pf-sec__hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pf-sec__hd .v2-sm { margin-top: .3rem; max-width: 56ch; }

/* ── ცდების სია ──────────────────────────────────────────── */
.pf-tries { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pf-try {
  display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--ink2);
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  padding: .8rem 1.1rem; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
a.pf-try:hover { border-color: var(--blue); transform: translateX(3px); box-shadow: var(--sh-1); }
.pf-try__ring {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  position: relative; background: conic-gradient(var(--ring, var(--blue)) calc(var(--p) * 1%), #E8EEF7 0);
}
.pf-try__ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.pf-try__ring b, .pf-try__ring i {
  position: relative; font-style: normal; line-height: 1; font-variant-numeric: tabular-nums;
}
.pf-try__ring b { font-size: .98rem; font-weight: 700; }
.pf-try__ring i { font-size: .66rem; color: var(--ink-soft); }
.pf-try--pass .pf-try__ring { --ring: var(--teal); }
.pf-try--fail .pf-try__ring { --ring: #F2545B; }
.pf-try--mist .pf-try__ring { --ring: #F59E0B; }
.pf-try--prac .pf-try__ring { --ring: var(--blue); }

.pf-try__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pf-try__mode { display: flex; align-items: center; gap: .45rem; font-size: .93rem; font-weight: 600; }
.pf-try__v {
  font-style: normal; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px;
}
.pf-try--pass .pf-try__v { background: rgba(22,199,154,.14); color: var(--teal-dark); }
.pf-try--fail .pf-try__v { background: rgba(242,84,91,.11); color: #C6303A; }
.pf-try__date { font-size: .79rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pf-try__time {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pf-try__time svg { width: 14px; height: 14px; }
.pf-try__go { flex: none; color: #A9BACF; }
.pf-try__go svg { width: 17px; height: 17px; }

/* ── გვერდითი ბარათები ───────────────────────────────────── */
.pf-side { display: grid; gap: .9rem; position: sticky; top: 86px; }
.pf-card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 1.25rem 1.35rem; box-shadow: var(--sh-1);
}
.pf-card__i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(21,94,239,.09); color: var(--blue); margin-bottom: .7rem;
}
.pf-card__i svg { width: 18px; height: 18px; }
.pf-card__i--amber { background: rgba(245,158,11,.15); color: #B45309; }
.pf-card__i--red   { background: rgba(242,84,91,.11); color: #C6303A; }
.pf-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.pf-card p { margin-top: .45rem; font-size: .86rem; line-height: 1.6; color: var(--ink-mid); }
.pf-card p b { color: var(--ink2); }
.pf-card .v2-btn { margin-top: 1rem; }
.pf-card--accent { border-color: rgba(245,158,11,.35); background: linear-gradient(180deg, #FFFBF3 0%, #fff 60%); }
.pf-card--danger { border-color: rgba(242,84,91,.28); }

.pf-acc { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pf-acc li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.pf-acc li > span {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .89rem; color: var(--ink-mid);
}
.pf-acc svg { width: 15px; height: 15px; color: var(--ink-soft); }

.pf-tag {
  font-size: .74rem; font-weight: 700; padding: .26rem .65rem; border-radius: 999px;
  background: var(--slate); color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.pf-tag--ok   { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pf-tag--wait { background: rgba(245,158,11,.15); color: #B45309; }
.pf-tag--off  { background: var(--slate); color: var(--ink-soft); }
.pf-tag--go   { background: var(--teal); color: #fff; box-shadow: 0 4px 12px rgba(22,199,154,.32); }
.pf-tag--go:hover { background: var(--teal-dark); }

.pf-ents {
  list-style: none; margin: .9rem 0 0; padding: .8rem 0 0; border-top: 1px dashed var(--hair);
  display: grid; gap: .3rem; font-size: .8rem; color: var(--ink-soft);
}
.pf-ents b { color: var(--ink-mid); font-weight: 600; }

.pf-form { margin-top: .9rem; display: grid; gap: .7rem; }
.pf-field { display: grid; gap: .3rem; }
.pf-field > span { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.pf-field input {
  padding: .68rem .85rem; border-radius: 11px; border: 1.5px solid var(--hair);
  background: var(--slate); font: inherit; font-size: .93rem; color: var(--ink2); width: 100%;
}
.pf-field input:focus { outline: none; border-color: var(--blue); background: #fff; }

.pf-orders { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .6rem; }
.pf-orders li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.pf-order__t { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pf-order__t b { font-size: .87rem; font-weight: 600; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-order__t i { font-style: normal; font-size: .76rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ── ტიპოგრაფიის დაზუსტება ───────────────────────────────
   ქართული სათაური BPG Caps-ია (საიტის საერთო წესი) — კაპიტელს
   tracking სჭირდება, თორემ ასოები ერთმანეთს ეკვრის. სექციის
   სათაური აქ დაფის მასშტაბისაა, არა ლენდინგის. */
.pf-sec__hd h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: .01em; }
.pf-card h3 { letter-spacing: .015em; }
.pf-chips li, .pf-field > span { letter-spacing: .03em; }

/* სახელი თავისუფალი ტექსტია (ხშირად ლათინური) — კაპიტელი მას არ უხდება */
.pf-id__name { font-family: var(--imec-font); font-weight: 700; letter-spacing: -.02em; }
.pf-more { display: inline-block; margin-top: .9rem; font-size: .83rem; color: var(--blue); text-decoration: none; font-weight: 600; }
.pf-more:hover { text-decoration: underline; }

.pf-del {
  margin-top: .9rem; width: 100%; padding: .68rem 1rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(242,84,91,.4); color: #C6303A;
  font: inherit; font-weight: 600; font-size: .88rem; transition: background .14s ease, border-color .14s ease;
}
.pf-del:hover { background: rgba(242,84,91,.07); border-color: #F2545B; }

@media (max-width: 980px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-side { position: static; }
}
/* ── ტელეფონი ─────────────────────────────────────────────
   დესკტოპის მასშტაბი 375px-ზე გვერდს ორჯერ აგრძელებდა: მარტო
   თავსართი 390px იყო. აქ იგივე იერარქიაა, უბრალოდ ჩამკვრივებული. */
@media (max-width: 620px) {
  .pf-top { padding: 1rem 0 1.35rem; }
  .pf-crumb { margin-bottom: .8rem; font-size: .8rem; }

  .pf-id { gap: .85rem; align-items: center; }
  /* ავატარის ზომა partial-ს inline `--ava-size`-ით მოაქვს — მხოლოდ
     !important თუ გადაფარავს. */
  .pf-id__ava .ava { --ava-size: 58px !important; }
  /* flex-basis 260px + ავატარი 335px-იან სვეტში არ ეტეოდა და სახელი
     ავატარის ქვეშ ვარდებოდა — auto ბაზისი გვერდიგვერდ ტოვებს. */
  .pf-id__body { flex: 1 1 auto; }
  .pf-id__name { font-size: 1.32rem; }
  .pf-id__mail { margin-top: .25rem; font-size: .82rem; min-width: 0; }
  .pf-id__mail span { min-width: 0; }

  .pf-chips { width: 100%; margin-top: .75rem; gap: .35rem; }
  .pf-chips li { font-size: .73rem; padding: .28rem .62rem; }

  .pf-id__go { margin-inline-start: 0; width: 100%; margin-top: .2rem; }
  .pf-id__go .v2-btn { flex: 1 1 auto; justify-content: center; }

  /* მაჩვენებელი — ხატულა ციფრის გვერდით, არა ზემოთ (ბარათი ნახევრდება) */
  .pf-stats { margin-top: -2rem; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .pf-stat {
    padding: .8rem .85rem; display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'i n' 'i l'; column-gap: .65rem;
  }
  .pf-stat__i { grid-area: i; margin: 0; width: 36px; height: 36px; border-radius: 11px; }
  .pf-stat__i svg { width: 17px; height: 17px; }
  .pf-stat b { grid-area: n; font-size: 1.4rem; }
  .pf-stat__l { grid-area: l; margin: 0; font-size: .72rem; line-height: 1.3; }

  .pf-body { padding-top: 1.2rem; }
  .pf-grid { gap: 1rem; }
  .pf-sec__hd { margin-bottom: .8rem; }
  .pf-try { padding: .7rem .85rem; gap: .8rem; }
  .pf-try__ring { width: 46px; height: 46px; }
  .pf-try__time { display: none; }

  .pf-side { gap: .75rem; }
  .pf-card { padding: 1.05rem 1.1rem; }
  .pf-card__i { width: 30px; height: 30px; border-radius: 9px; margin-bottom: .55rem; }
  .pf-card__i svg { width: 16px; height: 16px; }
  .pf-card h3 { font-size: .95rem; }
  .pf-card .v2-btn { margin-top: .85rem; }
  .pf-field input { padding: .6rem .75rem; }
}

/* პროფილი — მარშრუტების მალსახმობი (მათთვის, ვისაც უკვე აქვს წვდომა) */
.pf-routes {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  text-decoration: none; color: #fff; border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.6vw, 1.7rem) clamp(1.3rem, 2.8vw, 1.8rem);
  background: linear-gradient(120deg, var(--deep-navy) 0%, var(--navy) 55%, var(--navy-3) 100%);
  box-shadow: var(--sh-2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pf-routes:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.pf-routes__i {
  flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(22,199,154,.16); color: var(--teal);
}
.pf-routes__i svg { width: 23px; height: 23px; }
.pf-routes__b { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 240px; }
.pf-routes__b b { font-size: 1.02rem; font-weight: 700; }
.pf-routes__b span { font-size: .87rem; line-height: 1.55; color: #B9CBEA; }
.pf-routes__go {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 700; color: var(--teal); white-space: nowrap;
}
.pf-routes__go svg { width: 15px; height: 15px; }

/* ⚠️ .pf-routes-ის ბაზისური წესები ზემოთაა, ამიტომ მისი მობილური
   გადაფარვა ფაილის ბოლოში უნდა იდგეს — თორემ იმავე სპეციფიკურობაზე
   გვიანდელი წესი იმარჯვებს და მედია-ბლოკი უქმდება. */
@media (max-width: 620px) {
  .pf-routes { margin-top: 1.3rem; padding: 1.05rem 1.1rem; gap: .8rem; }
  .pf-routes__i { width: 40px; height: 40px; border-radius: 12px; }
  .pf-routes__i svg { width: 20px; height: 20px; }
  .pf-routes__b { flex: 1 1 180px; gap: .2rem; }
  .pf-routes__b b { font-size: .95rem; }
  .pf-routes__b span { font-size: .81rem; line-height: 1.45; }
  .pf-routes__go { margin-inline-start: 0; width: 100%; font-size: .85rem; }
}

/* ==========================================================================
   ადმინ პანელი (.pnl) — გვერდითი ნავიგაცია + სამუშაო არე
   ⚠️ namespace განზრახ **არ** იწყება `ad`-ით: `.ad` / `.ad-*` კლასებს
      რეკლამის ბლოკერები cosmetic-ფილტრით მალავს და პანელი ცარიელი ჩანს.
   ========================================================================== */
.pnl {
  display: grid; grid-template-columns: 258px minmax(0, 1fr);
  align-items: start; min-height: calc(100vh - 70px); background: var(--slate);
}

/* ── გვერდითი ნავიგაცია ──────────────────────────────────── */
.pn-side {
  position: sticky; top: 70px; align-self: start;
  height: calc(100vh - 70px); overflow-y: auto;
  background: linear-gradient(180deg, var(--deep-navy) 0%, var(--navy) 100%);
  padding: 1.1rem .85rem 1.4rem; display: flex; flex-direction: column; gap: .35rem;
}
.pn-brand {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem .9rem;
  color: #fff; text-decoration: none; font-weight: 700; letter-spacing: -.01em;
}
.pn-brand img, .pn-brand svg { width: 26px; height: 26px; border-radius: 7px; }

.pn-nav { display: grid; gap: .12rem; }
.pn-nav__h {
  margin: .85rem .5rem .3rem; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: #5B76A8; font-weight: 700;
}
.pn-nav__i {
  display: flex; align-items: center; gap: .6rem; padding: .52rem .6rem;
  border-radius: 10px; color: #B9CBEA; text-decoration: none; font-size: .87rem;
  transition: background .14s ease, color .14s ease;
}
.pn-nav__i:hover { background: rgba(255,255,255,.07); color: #fff; }
.pn-nav__i.is-on { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(21,94,239,.35); }
.pn-nav__ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; opacity: .9; }
.pn-nav__ico svg { width: 17px; height: 17px; }
.pn-nav__i.is-on .pn-nav__ico { opacity: 1; }

.pn-back {
  margin-top: auto; display: flex; align-items: center; gap: .45rem;
  padding: .55rem .6rem; border-radius: 10px; color: #8FA8CE; text-decoration: none;
  font-size: .82rem; border: 1px dashed rgba(255,255,255,.16);
}
.pn-back:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.pn-back svg { width: 14px; height: 14px; transform: rotate(180deg); }

/* ── სამუშაო არე ─────────────────────────────────────────── */
.pn-main { padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1rem, 2.6vw, 2rem) 3rem; min-width: 0; }
.pn-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.pn-crumb { font-size: .82rem; color: var(--ink-soft); margin-bottom: .5rem; }
.pn-crumb a { color: var(--blue); text-decoration: none; }
.pn-crumb a:hover { text-decoration: underline; }
.pn-crumb span { margin-inline: .4rem; color: #A9BACF; }
.pn-h1 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.pn-lead { margin-top: .35rem; font-size: .88rem; line-height: 1.6; color: var(--ink-mid); max-width: 74ch; }
.pn-lead a { color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.pn-lead a svg { width: 13px; height: 13px; }
.pn-pill {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem;
  border-radius: 999px; background: #fff; border: 1px solid var(--hair);
  font-size: .84rem; color: var(--ink-mid); box-shadow: var(--sh-1);
}
.pn-pill svg { width: 15px; height: 15px; color: var(--teal-dark); }
.pn-pill b { color: var(--ink2); }

/* ── ციფრები ─────────────────────────────────────────────── */
.pn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.pn-stat {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.1rem 1.2rem; box-shadow: var(--sh-1); text-decoration: none; color: var(--ink2);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.pn-stat:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--blue); }
.pn-stat__i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(21,94,239,.09); color: var(--blue); margin-bottom: .65rem;
}
.pn-stat__i svg { width: 18px; height: 18px; }
.pn-stat--teal   .pn-stat__i { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pn-stat--violet .pn-stat__i { background: rgba(124,58,237,.11); color: #6D28D9; }
.pn-stat--amber  .pn-stat__i { background: rgba(245,158,11,.15); color: #B45309; }
.pn-stat b { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pn-stat__l { display: block; margin-top: .2rem; font-size: .8rem; color: var(--ink-soft); }

.pn-mini {
  margin-top: .8rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .8rem; background: #fff; border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1rem 1.2rem; box-shadow: var(--sh-1);
}
.pn-mini div { text-align: center; }
.pn-mini b { display: block; font-size: 1.2rem; font-weight: 700; }
.pn-mini span { display: block; margin-top: .1rem; font-size: .76rem; color: var(--ink-soft); }

/* ── ბარათები და სიები ───────────────────────────────────── */
.pn-two { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.pn-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); }
.pn-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.pn-card__hd h2 { font-size: 1rem; font-weight: 700; }
.pn-card__hd a { font-size: .82rem; color: var(--blue); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.pn-card__hd a svg { width: 13px; height: 13px; }
.pn-empty { font-size: .86rem; color: var(--ink-soft); }

.pn-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pn-list li {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-bottom: 1px solid var(--hair);
}
.pn-list li:last-child { border-bottom: 0; }
.pn-list__m { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pn-list__m b { font-size: .87rem; font-weight: 600; }
.pn-list__m i { font-style: normal; font-size: .76rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-list__r { display: flex; align-items: center; gap: .5rem; flex: none; }
.pn-list__r b { font-size: .87rem; font-variant-numeric: tabular-nums; }
.pn-when { font-style: normal; font-size: .76rem; color: var(--ink-soft); white-space: nowrap; }

.pn-tag { font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--slate); color: var(--ink-soft); font-style: normal; white-space: nowrap; }
.pn-tag--ok   { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pn-tag--wait { background: rgba(245,158,11,.15); color: #B45309; }
.pn-tag--off  { background: rgba(242,84,91,.1); color: #C6303A; }

/* ── შიგთავსი: გვერდების სია ─────────────────────────────── */
.pn-pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.pn-page {
  display: grid; gap: .4rem; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink2);
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r); box-shadow: var(--sh-1);
  position: relative; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.pn-page:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--blue); }
.pn-page__hd { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pn-page__hd b { font-size: .98rem; font-weight: 700; }
.pn-page__meta { display: flex; flex-direction: column; gap: .1rem; font-size: .78rem; color: var(--ink-soft); }
.pn-page__go { position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; color: #A9BACF; }
.pn-page__go svg { width: 16px; height: 16px; }

.pn-note {
  margin-top: 1.4rem; display: flex; gap: .6rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-radius: var(--r); font-size: .84rem; line-height: 1.6;
  background: rgba(21,94,239,.05); border: 1px solid rgba(21,94,239,.14); color: var(--ink-mid);
}
.pn-note svg { width: 17px; height: 17px; flex: none; color: var(--blue); margin-top: .12rem; }
.pn-note code { font-size: .8em; background: #fff; padding: .1rem .35rem; border-radius: 5px; border: 1px solid var(--hair); }

/* ── ენის გადამრთველი ────────────────────────────────────── */
.pn-langs { display: flex; gap: .25rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: .25rem; box-shadow: var(--sh-1); }
.pn-langs a {
  padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--ink-soft); text-decoration: none; letter-spacing: .04em;
}
.pn-langs a:hover { background: var(--slate); color: var(--ink2); }
.pn-langs a.is-on { background: var(--navy); color: #fff; }

/* ── შიგთავსის ფორმა ─────────────────────────────────────── */
.pn-form { display: grid; gap: 1rem; }
.pn-sec { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.pn-sec.is-off { border-color: rgba(242,84,91,.3); background: #FFFBFB; }
.pn-sec__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--hair); flex-wrap: wrap;
}
.pn-sec__hd h2 { font-size: 1rem; font-weight: 700; }
.pn-sec__hd p { margin-top: .3rem; font-size: .82rem; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; }
.pn-sec.is-off .pn-sec__hd h2::after { content: ' · დამალულია'; color: #C6303A; font-size: .78rem; font-weight: 600; }

.pn-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; flex: none; }
.pn-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pn-switch__t {
  width: 40px; height: 23px; border-radius: 999px; background: #CBD5E1; position: relative;
  transition: background .16s ease; flex: none;
}
.pn-switch__t::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .16s ease;
}
.pn-switch input:checked + .pn-switch__t { background: var(--teal); }
.pn-switch input:checked + .pn-switch__t::after { transform: translateX(17px); }
.pn-switch input:focus-visible + .pn-switch__t { outline: 2px solid var(--blue); outline-offset: 2px; }
.pn-switch__l { font-size: .82rem; color: var(--ink-mid); }

.pn-fields { padding: 1.1rem 1.3rem; display: grid; gap: .85rem; }
.pn-field { display: grid; gap: .3rem; }
.pn-field__k { display: flex; align-items: center; gap: .5rem; }
.pn-field__k code {
  font-size: .72rem; color: var(--ink-soft); background: var(--slate);
  padding: .12rem .4rem; border-radius: 5px; border: 1px solid var(--hair);
}
.pn-field__k i { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--teal-dark); }
.pn-field input, .pn-field textarea {
  width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1.5px solid var(--hair);
  background: var(--slate); font: inherit; font-size: .9rem; line-height: 1.5; color: var(--ink2);
  resize: vertical;
}
.pn-field input:focus, .pn-field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.pn-field input::placeholder, .pn-field textarea::placeholder { color: #94A3B8; }
.pn-field.is-edited input, .pn-field.is-edited textarea { border-color: var(--teal); background: rgba(22,199,154,.05); }
.pn-field__src { font-size: .75rem; color: var(--ink-soft); line-height: 1.5; }

.pn-save {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border: 1px solid var(--hair); border-radius: var(--r); padding: .8rem 1rem; box-shadow: var(--sh-2);
}
.pn-save__note { font-size: .8rem; color: var(--ink-soft); }

.pn-reset { margin-top: 1.2rem; }
.pn-reset button {
  display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px;
  background: #fff; border: 1.5px solid rgba(242,84,91,.35); color: #C6303A;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.pn-reset button:hover { background: rgba(242,84,91,.06); border-color: #F2545B; }
.pn-reset svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .pnl { grid-template-columns: 1fr; }
  .pn-side {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: .5rem; overflow-x: auto; padding: .7rem .8rem;
  }
  .pn-brand { padding: 0 .6rem 0 .2rem; }
  .pn-brand span { display: none; }
  .pn-nav { display: flex; gap: .3rem; }
  .pn-nav__h { display: none; }
  .pn-nav__i { white-space: nowrap; padding: .45rem .7rem; }
  .pn-back { margin: 0; white-space: nowrap; }
}

/* ── პანელის ზედა ზოლი ───────────────────────────────────── */
.pn-top { background: var(--deep-navy); border-bottom: 1px solid rgba(255,255,255,.08); }
.pn-top__in {
  display: flex; align-items: center; gap: 1rem; height: 56px;
  padding-inline: clamp(.9rem, 2vw, 1.4rem);
}
.pn-top .v2-logo { font-size: .98rem; }
.pn-top .v2-logo svg, .pn-top .v2-logo img { width: 26px; height: 26px; }
.pn-top__tag {
  padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; background: rgba(21,94,239,.28); color: #A8C6FF;
}
.pn-top__go { margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }
.pn-top__go a { color: #B9CBEA; text-decoration: none; font-size: .84rem; }
.pn-top__go a:hover { color: #fff; }
.pn-top__me { display: inline-flex; align-items: center; gap: .4rem; }
.pn-top__out { padding: .35rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); }

/* პანელის რეჟიმში საიტის მარკეტინგული გარსი აღარაა — .pnl ზედა ზოლს ებმის.
   ⚠️ `.admin-mode .pn-side` (0,2,0) მედია-ბლოკის `.pn-side`-ს (0,1,0) თრგუნავს,
   ამიტომ ეს წესები მხოლოდ განიერ ეკრანზეა შემოსაზღვრული. */
.admin-mode .pnl { min-height: calc(100vh - 56px); }
.admin-mode main { display: block; }
@media (min-width: 901px) {
  .admin-mode .pn-side { top: 56px; height: calc(100vh - 56px); }
}

@media (max-width: 620px) {
  .pn-top__tag, .pn-top__me span { display: none; }
  .pn-top__in { gap: .6rem; }
}

/* ── ძველი პანელის შიგთავსი ახალ გარსში (.pn-legacy) ──────
   კითხვები/პაკეტები/პარამეტრები და ა.შ. ისევ app.css-ის კლასებს
   იყენებს — აქ მათ v2-ის სახეს ვაძლევთ, მარკაპის გადაწერის გარეშე. */
.pn-legacy h1 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .3rem; }
.pn-legacy > .muted, .pn-legacy > p.small { font-size: .88rem; line-height: 1.6; color: var(--ink-mid); margin-bottom: 1.2rem; max-width: 74ch; }
.pn-legacy .card {
  background: #fff; border: 1px solid var(--hair); border-radius: var(--r-lg);
  padding: 1.2rem 1.3rem; box-shadow: var(--sh-1); margin-bottom: 1rem;
}
.pn-legacy .card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.pn-legacy .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.pn-legacy .stat { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--sh-1); }
.pn-legacy .stat b { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.pn-legacy .stat span { display: block; margin-top: .15rem; font-size: .78rem; color: var(--ink-soft); }

.pn-legacy .table-wrap { border: 1px solid var(--hair); border-radius: var(--r); overflow: auto; background: #fff; }
.pn-legacy .tbl { width: 100%; border-collapse: collapse; font-size: .87rem; }
.pn-legacy .tbl th {
  text-align: start; padding: .7rem .9rem; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 700;
  background: var(--slate); border-bottom: 1px solid var(--hair);
}
.pn-legacy .tbl td { padding: .7rem .9rem; border-bottom: 1px solid var(--hair); color: var(--ink-mid); }
.pn-legacy .tbl tr:last-child td { border-bottom: 0; }
.pn-legacy .tbl tr:hover td { background: #FAFCFF; }

.pn-legacy .field { display: grid; gap: .3rem; margin-bottom: .8rem; }
.pn-legacy .field label { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.pn-legacy .input, .pn-legacy .textarea, .pn-legacy .select {
  width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1.5px solid var(--hair);
  background: var(--slate); font: inherit; font-size: .9rem; color: var(--ink2);
}
.pn-legacy .input:focus, .pn-legacy .textarea:focus, .pn-legacy .select:focus { outline: none; border-color: var(--blue); background: #fff; }

.pn-legacy .btn {
  display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px;
  padding: .6rem 1.15rem; font: inherit; font-size: .87rem; font-weight: 600;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
}
.pn-legacy .btn-primary, .pn-legacy .btn-amber { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(21,94,239,.26); }
.pn-legacy .btn-primary:hover, .pn-legacy .btn-amber:hover { background: var(--blue-dark); color: #fff; }
.pn-legacy .btn-dark { background: var(--navy); color: #fff; }
.pn-legacy .btn-ghost, .pn-legacy .btn-light { background: #fff; color: var(--navy); border-color: var(--hair); }
.pn-legacy .btn-ghost:hover { border-color: #c9d6e8; color: var(--navy); }
.pn-legacy .btn-sm { padding: .45rem .85rem; font-size: .8rem; }
.pn-legacy .btn-block { display: flex; width: 100%; justify-content: center; }

.pn-legacy .badge {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 999px; background: var(--slate); color: var(--ink-soft);
}
.pn-legacy .badge-green { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pn-legacy .badge-amber { background: rgba(245,158,11,.15); color: #B45309; }
.pn-legacy .badge-red   { background: rgba(242,84,91,.1); color: #C6303A; }
.pn-legacy .pill {
  display: inline-block; padding: .3rem .8rem; border-radius: 999px;
  background: var(--slate); color: var(--ink-soft); font-size: .8rem; font-weight: 600;
}
.pn-legacy .pill.active { background: rgba(22,199,154,.13); color: var(--teal-dark); }
.pn-legacy .alert { border-radius: var(--r); padding: .85rem 1.1rem; font-size: .86rem; line-height: 1.6; }
.pn-legacy .alert-err { background: rgba(242,84,91,.08); border: 1px solid rgba(242,84,91,.25); color: #9B2530; }
.pn-legacy .alert-ok, .pn-legacy .alert-info { background: rgba(21,94,239,.06); border: 1px solid rgba(21,94,239,.16); color: var(--ink-mid); }
.pn-legacy .divider { height: 1px; background: var(--hair); }
.pn-legacy .grid { display: grid; gap: 1rem; }
.pn-legacy .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pn-legacy .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pn-legacy details > summary { cursor: pointer; font-weight: 600; }
