/* ==========================================================================
   imecadine.ge — დიზაინის სისტემა v3 (2026-10-16)

   user: „მთელი საიტის დიზაინი გავაუმჯობესოთ… დაიხვეწოს" — iclinic.ge-ის
   ხარისხით, imecadine-ის ფერებში. ეს ფურცელი საერთოა (head.ejs, type.css-ის
   შემდეგ, გვერდის ფურცლამდე) და მხოლოდ საერთო ნაწილებს ხატავს:
     • ტოკენები — ფერი, გრადიენტი, ჩრდილი, კუთხე
     • ჰეროს ფონი — წვრილი ბადე + რბილი „ავრორა" (iclinic.ge-ის ენა)
     • ღილაკები — მთავრული ლეიბლი; მთავარი = გრადიენტი + რბილი ნათება
     • eyebrow — პატარა მთავრული ლეიბლი წერტილით
     • ბარათი, მაჩვენებლის ბარათი (გრადიენტული ზედა ხაზით), სექციის სათაური
   გვერდის კომპოზიცია (home.css, theory-hub.css …) ცალკე რჩება.
   ⚠️ ადმინ-პანელს არ ეხება (`.admin-mode`).
   ========================================================================== */

:root {
  /* ტექსტი — iclinic.ge-ის ტონები imecadine-ის navy-ზე */
  --ds-ink:    #14254A;
  --ds-ink-2:  #42526E;
  --ds-ink-3:  #66758F;
  /* ბრენდი */
  --ds-blue:   #1460FF;
  --ds-blue-d: #0F4CCC;
  --ds-teal:   #0ABAB5;     /* დეკორი (ტექსტად არა) */
  --ds-teal-d: #06736F;     /* ტექსტი/ღილაკი — თეთრი მასზე 5.7:1 */
  --ds-violet: #6D4AFF;
  /* გრადიენტი: ლურჯი → ფირუზისფერი (iclinic-ის teal→violet-ის ჩვენებური) */
  --ds-grad:      linear-gradient(120deg, #1460FF 0%, #0A7FE6 52%, #079E97 100%);
  --ds-grad-text: linear-gradient(100deg, #1460FF 0%, #0A86D8 45%, #07948E 100%);
  --ds-grad-teal: linear-gradient(120deg, #078A84 0%, #06736F 100%);
  /* ზედაპირები */
  --ds-bg:      #FFFFFF;
  --ds-bg-soft: #F5F8FC;
  --ds-bg-tint: #F1F6FF;
  --ds-line:    #E4EAF2;
  --ds-line-2:  #EDF1F6;
  --ds-r:    18px;
  --ds-r-sm: 12px;
  --ds-sh:   0 1px 2px rgba(20,37,74,.04), 0 10px 30px rgba(20,37,74,.06);
  --ds-sh-h: 0 2px 6px rgba(20,37,74,.06), 0 18px 40px rgba(20,37,74,.10);
  --ds-glow: 0 10px 24px -8px rgba(20,96,255,.55);
  --ds-glow-teal: 0 10px 24px -8px rgba(6,115,111,.5);
}

/* ══ ჰეროს ფონი: მოძრავი რბილი გრადიენტი ════════════════════════
   2026-10-17, user: „ბეგრაუნდში კუბიკები არ მინდა — მკრთალი, ფონში გადასული
   გარდამავალი ფერი, რომ იმუშაოს ბექში". ბადე მოხსნილია; ორი ფენა „ღრუბლის":
     ::after  — ავრორა (ლურჯი ზემოთ-მარცხნივ, ფირუზი ზემოთ-მარჯვნივ, იისფერი ქვემოთ)
     ::before — მეორე, უფრო ნელი ფენა საპირისპირო მიმართულებით
   ორი სხვადასხვა რიტმი (26 წმ / 34 წმ) ფერს მუდმივად, მაგრამ შეუმჩნევლად ცვლის.
   `isolation` — ფსევდო-ელემენტები შიგთავსის უკან დგას, გვერდის უკან არა.
   ⚠️ ილუსტრაციიან ჰეროებს (.tt-sec--hero, .pk-sec--hero) აქ არ ვამატებთ —
      მათ საკუთარი ფონი აქვთ.
   `display:block` — site.css-ში .fz-hero/.ab-hero-ს ფსევდოები დამალულია. */
body.v2:not(.admin-mode) :is(.hp-sec--hero, .page-head, .ds-hero, .tb-top, .fz-hero, .ab-hero) {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #F4F8FF 0%, #F9FBFF 55%, #FFFFFF 100%);
}
body.v2:not(.admin-mode) :is(.hp-sec--hero, .page-head, .ds-hero, .tb-top, .fz-hero, .ab-hero)::before {
  content: ''; display: block; position: absolute; inset: -25% -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 42% at 72% 38%, rgba(10,186,181,.10), transparent 70%),
    radial-gradient(ellipse 30% 36% at 30% 70%, rgba(20,96,255,.08), transparent 70%);
}
body.v2:not(.admin-mode) :is(.hp-sec--hero, .page-head, .ds-hero, .tb-top, .fz-hero, .ab-hero)::after {
  content: ''; display: block; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 40% at 12% 16%, rgba(20,96,255,.14), transparent 64%),
    radial-gradient(ellipse 38% 36% at 88% 10%, rgba(10,186,181,.15), transparent 66%),
    radial-gradient(ellipse 52% 42% at 58% 94%, rgba(109,74,255,.08), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  body.v2:not(.admin-mode) :is(.hp-sec--hero, .page-head, .ds-hero, .tb-top, .fz-hero, .ab-hero)::after {
    animation: ds-aurora 26s ease-in-out infinite alternate;
  }
  body.v2:not(.admin-mode) :is(.hp-sec--hero, .page-head, .ds-hero, .tb-top, .fz-hero, .ab-hero)::before {
    animation: ds-drift 34s ease-in-out infinite alternate;
  }
}
@keyframes ds-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.08); }
}
@keyframes ds-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, -4%, 0) scale(1.12); }
}

/* გრადიენტული აქცენტი სათაურში (`<span class="ds-accent">`) */
.ds-accent {
  background: var(--ds-grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* მთავრულს ქვედა ნაწილი არ აქვს — clip-ის ბოლოში არაფერი იჭრება */
  padding-bottom: .04em;
}

/* ══ eyebrow — პატარა მთავრული ლეიბლი ═════════════════════════════ */
body.v2:not(.admin-mode) :is(.ds-eyebrow, .hp-badge) {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .85rem .42rem .7rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--ds-line);
  box-shadow: 0 1px 2px rgba(20,37,74,.04);
  font-family: var(--imec-caps); font-weight: 600; font-size: .74rem;
  letter-spacing: .08em; line-height: 1.2; color: var(--ds-blue-d);
}
body.v2:not(.admin-mode) :is(.ds-eyebrow, .hp-badge)::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ds-grad);
  box-shadow: 0 0 0 3px rgba(20,96,255,.12);
}

/* ══ ღილაკები ═════════════════════════════════════════════════════
   მთავრული ლეიბლი 13.5px/600 (+0.06em, type.css); 12px კუთხე; მთავარი —
   გრადიენტი რბილი ნათებით. ფონი `background-image`-ით, რომ ძველი
   `background: var(--…)` წესების ფერი ქვეშ დარჩეს (ფოლბექი). */
body.v2:not(.admin-mode) :is(.hp-btn, .v2-btn, .sh-btn, .tt-btn, .pk-btn, .btn, .pr-go) {
  font-size: .845rem; border-radius: 12px;
}
body.v2:not(.admin-mode) :is(.hp-btn--pri, .v2-btn--blue, .v2-btn--primary, .sh-btn--pri, .tt-btn--blue, .tt-btn--pri, .pk-btn--pri, .btn-primary, .pr-go, .fz-plan .v2-btn--navy) {
  background-color: var(--ds-blue);
  background-image: var(--ds-grad);
  border-color: transparent; color: #fff;
  box-shadow: var(--ds-glow);
}
body.v2:not(.admin-mode) :is(.hp-btn--teal, .v2-btn--teal, .tt-btn--teal, .pk-btn--teal) {
  background-color: var(--ds-teal-d);
  background-image: var(--ds-grad-teal);
  border-color: transparent; color: #fff;
  box-shadow: var(--ds-glow-teal);
}
body.v2:not(.admin-mode) :is(.hp-btn--ghost, .v2-btn--ghost, .v2-btn--outline, .sh-btn--ghost, .tt-btn--ghost, .pk-btn--ghost, .btn-ghost, .btn:not(.btn-primary, .btn-amber, .btn-dark, .btn-ghost)) {
  background: #fff; color: var(--ds-ink); border-color: var(--ds-line);
  box-shadow: 0 1px 2px rgba(20,37,74,.05);
}
@media (hover: hover) and (pointer: fine) {
  body.v2:not(.admin-mode) :is(.hp-btn--pri, .v2-btn--blue, .v2-btn--primary, .sh-btn--pri, .tt-btn--blue, .tt-btn--pri, .pk-btn--pri, .btn-primary, .pr-go, .fz-plan .v2-btn--navy):hover {
    color: #fff; filter: saturate(1.08) brightness(1.04);
    box-shadow: 0 14px 30px -10px rgba(20,96,255,.65); transform: translateY(-2px);
  }
  body.v2:not(.admin-mode) :is(.hp-btn--teal, .v2-btn--teal, .tt-btn--teal, .pk-btn--teal):hover {
    color: #fff; filter: brightness(1.06);
    box-shadow: 0 14px 30px -10px rgba(6,115,111,.6); transform: translateY(-2px);
  }
  body.v2:not(.admin-mode) :is(.hp-btn--ghost, .v2-btn--ghost, .v2-btn--outline, .sh-btn--ghost, .tt-btn--ghost, .pk-btn--ghost, .btn-ghost, .btn:not(.btn-primary, .btn-amber, .btn-dark, .btn-ghost)):hover {
    background: #fff; color: var(--ds-blue-d); border-color: #BFD3FB;
    box-shadow: 0 8px 20px -10px rgba(20,37,74,.25); transform: translateY(-2px);
  }
}

/* ══ ბარათი და მაჩვენებელი ════════════════════════════════════════ */
.ds-card {
  background: #fff; border: 1px solid var(--ds-line); border-radius: var(--ds-r);
  box-shadow: var(--ds-sh);
}
/* მაჩვენებლის ბარათი — დიდი ციფრი + წარწერა, ზემოთ გრადიენტული ხაზი (iclinic.ge) */
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.ds-stat {
  position: relative; overflow: hidden; text-align: center;
  padding: 1.15rem 1rem 1.05rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--ds-line); box-shadow: var(--ds-sh);
}
.ds-stat::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ds-grad);
}
.ds-stat b {
  display: block; font-family: var(--imec-display); font-weight: 800;
  font-size: clamp(1.75rem, 2.6vw, 2.15rem); line-height: 1.1; letter-spacing: -.01em;
  color: var(--ds-ink); font-variant-numeric: tabular-nums;
}
.ds-stat span { display: block; margin-top: .35rem; font-size: .86rem; color: var(--ds-ink-3); line-height: 1.4; }

/* ძველი გვერდების თავსართი: მობილურზე გრძელი სიტყვა („კონფიდენციალურობის")
   27px მთავრულით 390px-ში ვერ ეტეოდა და ეკრანს სცდებოდა. */
body.v2:not(.admin-mode) .page-head h1 { font-size: clamp(1.4rem, 4.4vw, 2.4rem); }
body.v2:not(.admin-mode) :is(h1, h2, h3) { overflow-wrap: break-word; }

/* ══ ტექსტური გვერდი (წესები, კონფიდენციალურობა, ანგარიშის წაშლა) ══════
   სათაურის ფონტი/წონა type.css-იდანაა; აქ — ზომა, რიტმი და სიგანე. */
.ds-prose { color: var(--ds-ink-2); font-size: 1rem; line-height: 1.75; max-width: 72ch; }
.ds-prose > :first-child { margin-top: 0; }
.ds-prose h2 { margin: 2.1rem 0 .55rem; font-size: clamp(1.06rem, 1.45vw, 1.2rem); color: var(--ds-ink); }
.ds-prose h3 { margin: 1.5rem 0 .45rem; font-size: 1rem; color: var(--ds-ink); }
.ds-prose :is(p, ul, ol) { margin: 0 0 1rem; }
.ds-prose :is(ul, ol) { padding-inline-start: 1.3rem; }
.ds-prose li { margin: .35rem 0; }
.ds-prose li::marker { color: var(--ds-blue); }
.ds-prose a { color: var(--ds-blue-d); text-decoration: underline; text-underline-offset: 2px; }

/* ══ ფოკუსი ══════════════════════════════════════════════════════ */
body.v2:not(.admin-mode) :is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(20,96,255,.38); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.v2:not(.admin-mode) :is(.hp-btn, .v2-btn, .sh-btn, .tt-btn, .pk-btn, .btn) { transition: none; }
  body.v2:not(.admin-mode) :is(.hp-btn, .v2-btn, .sh-btn, .tt-btn, .pk-btn, .btn):hover { transform: none; }
}