/* ==========================================================================
   SAIS — ვერსია 2 · თანამედროვე ვიზუალური სისტემა
   --------------------------------------------------------------------------
   მთავარი განსხვავება v1-სგან:
   · უზარმაზარი ცენტრირებული ტიპოგრაფია
   · მრგვალი ფორმები და მსუბუქი ჩრდილები
   · ღია და მუქი სექციების მონაცვლეობა
   · მინის ეფექტი შapkaზე (backdrop-filter)

   🎨 აქცენტის ფერი იცვლება ერთი ცვლადით — იხ. --accent ქვემოთ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- აქცენტი: ერთი ცვლადი ცვლის მთელ საიტს ----
     ვარიანტი A (ნაგულისხმევი) — SAIS-ის ბრენდის ზურმუხტისფერი
     ვარიანტი B — ბრენდის ზურმუხტისფერი: data-accent="brand"        */
  /* ---- აქცენტი: მონოქრომი (ნაგულისხმევი, არჩეული 2026-08-14) ----
     ფერადი აქცენტი განზრახ არ არსებობს — შავი, თეთრი, ნაცრისფერი.
     ფერი გვერდზე მხოლოდ პროექტების სქრინებიდან მოდის, ისევე როგორც Apple-თან.
     ⚠️ ეს ასევე ყველაზე შორსაა „AI-ით გენერირებული საიტის" იერისგან:
     გენერირებული მაკეტი თითქმის ყოველთვის ნაჯერ ფერს იღებს.
     სხვა ვარიანტები: data-accent="warm" · "brand" · "blue" (იხ. ქვემოთ). */
  --accent:        #1d1d1f;
  --accent-hover:  #000000;
  --accent-press:  #000000;
  --accent-ink:    #1d1d1f;
  --accent-soft:   #ebebed;   /* bg-soft-ზე ოდნავ მუქი — CTA-უჯრა რომ გამოირჩეოდეს */
  --accent-glow:   rgba(0, 0, 0, .14);       /* მხოლოდ ფოკუსის რგოლისთვის */
  --accent-bright: #f5f5f7;   /* მუქ ფონზე — თეთრი */

  /* eyebrow-ის ფერი ცალკე ცვლადია: მონოქრომში ის შავი ვერ იქნება
     (სათაურს ეწებება), ფერად ვარიანტებში კი აქცენტის ფერს იღებს. */
  --eyebrow:       var(--ink-3);

  /* ---- ნეიტრალები — Apple-ის ნაცრისფრები ---- */
  --bg:            #ffffff;   /* ძირითადი ფონი — სუფთა თეთრი */
  --bg-soft:       #f5f5f7;   /* ალტერნატიული სექცია */
  /* მუქი სცენა ბრენდის ტემპერატურაში — სუფთა #000 „ხვრელად" ჩანს გვერდზე
     (სუფთა შავი ხვრელად ჩანს — გრაფიტი რბილია) */
  --bg-dark:       #161617;   /* მუქი სექცია — Apple-ის თითქმის-შავი */
  --bg-dark-2:     #1d1d1f;   /* მუქი ბარათი */

  --ink:           #1d1d1f;   /* ძირითადი ტექსტი — Apple */
  --ink-2:         #6e6e73;   /* მეორეხარისხოვანი — Apple */
  --ink-3:         #86868b;   /* მინიშნება — Apple */
  --ink-on-dark:   #f5f5f7;
  --ink-on-dark-2: #a1a1a6;

  --line:          #d2d2d7;   /* გამყოფი — Apple */
  --line-strong:   #86868b;
  --line-dark:     rgba(255, 255, 255, .14);

  /* ---- ტიპოგრაფია ----
     ⚠️ ქართული ასოები მრგვალია და დახურული კონტრფორმებით — მკაცრი
     უარყოფითი tracking (−.02em და მეტი) ო/ღ/ბ/ფ-ს ერთმანეთში ატენის.
     ზღვარი −.015em-ია; ვიყენებთ −.01em-ს.
     ასევე: წონა ერთი საფეხურით ქვევით — ლათინური 700 ≈ ქართული 600. */
  --font: "Google Sans", "Noto Sans Georgian", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ⚠️ ლათინური ენების 84–96px აქ არ ჯდება. ქართული სიტყვა 7–8 ასოა (ინგლისურში 5,1)
     და ასეთ კეგლზე ეკრანს ავსებს — მასშტაბი ერთი საფეხურით ჩამოწეულია. */
  --fs-mega:    clamp(1.875rem, 1.5rem + 1.6vw,  2.75rem);  /*  30 → 44 */
  --fs-display: clamp(1.5rem,   1.32rem + .8vw,  2rem);     /*  24 → 32 */
  --fs-h2:      clamp(1.3125rem,1.2rem + .5vw,   1.625rem); /*  21 → 26 */
  --fs-h3:      clamp(1.0625rem,1.02rem + .2vw,  1.1875rem);/*  17 → 19 */
  --fs-lead:    clamp(1rem,     .97rem + .16vw,  1.125rem); /*  16 → 18 */
  --fs-body:    1rem;                                       /*  16 */
  --fs-small:   .9375rem;                                   /*  15 */
  --fs-micro:   .8125rem;                                   /*  13 — მხოლოდ caption */

  /* line-height არასდროს 1.05-ზე ქვევით — ღ/ყ/ჭ-ს კუდები ეჯახება ბ/ჰ/ძ-ს თავებს */
  --lh-mega:    1.08;
  --lh-heading: 1.16;
  --lh-body:    1.6;
  --lh-body-ka: 1.65;
  --lh-btn:     1.2;   /* ღილაკში 1 კუდებს ჭრის */

  --tr-tight:   -.010em;
  --tr-normal:  -.005em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    600;   /* ქართულში 700 უკვე „გასუქებულია" — ჭერი 600-ია */

  /* ---- სივრცე ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px;  --s-10: 96px; --s-11: 128px; --s-12: 160px;

  --container:     1200px;
  --container-narrow: 720px;              /* ვიწრო ტექსტური სვეტი */
  --gutter:        clamp(20px, 5vw, 40px);
  /* რიტმი: 160px ლამაზია ცალკეულ ეკრანზე, მაგრამ 11 სექციაზე გვერდი
     გაუთავებელი ხდება. 64→104 საკმარისია „ჰაერისთვის". */
  --section-py:    clamp(40px, 3.2vw, 60px);
  /* ch იზომება „0"-ით, ქართული ასო კი უფრო ვიწროა — 62ch ≈ 68 რეალური ნიშანი */
  --measure:       62ch;

  /* ---- ფორმა: რადიუსი ფართობის მიხედვით იზრდება (ზრდადი კიბე).
     ერთი უნივერსალური რადიუსი „Bootstrap-ად" გამოიყურება.
     36px პატარა ბარათზე მულტფილმია — ჭერი 28px-ია. ---- */
  --r-sm:   10px;
  --r:      14px;
  --r-lg:   20px;
  --r-xl:   24px;
  --r-2xl:  28px;
  --r-pill: 980px;

  /* ---- ჩრდილები: მსუბუქი, თითქმის უხილავი ---- */
  --sh-sm:  0 1px 3px rgba(0, 0, 0, .04);
  --sh:     0 4px 20px rgba(0, 0, 0, .06);
  --sh-lg:  0 12px 40px rgba(0, 0, 0, .08);
  --sh-xl:  0 24px 70px rgba(0, 0, 0, .12);

  /* ---- მოძრაობა ---- */
  --ease:      cubic-bezier(.28, .11, .32, 1);   /* რბილი მრუდი */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .2s;
  --dur:       .4s;
  --dur-slow:  .8s;

  --tap: 44px;
  --header-h: 48px;

  /* v1-ის სახელების ალიასები — 404.html-სა და design-system.html-ის
     inline <style>-ები ძველ ცვლადებს იყენებენ. ალიასის გარეშე ფერი
     უბრალოდ არ მოქმედებდა (var() უცნობ ცვლადზე ჩუმად ჩავარდება). */
  --brand:        var(--accent);
  --brand-deep:   var(--accent-hover);
  --brand-tint:   var(--accent-soft);
  --brand-tint-2: var(--accent-soft);
  --brand-darker: var(--accent-ink);
  --surface:      var(--bg);
  --surface-2:    var(--bg-soft);
  --font-display: var(--font);
}

/* ---- ვარიანტი: Apple-ის ლურჯი (სარეზერვო) ----
   სანახავად: <html lang="ka" data-accent="blue">
   იყო ნაგულისხმევი 2026-08-14-მდე, შემდეგ მონოქრომმა ჩაანაცვლა. */
:root[data-accent="blue"] {
  --accent:        #0071e3;
  --accent-hover:  #0077ed;
  --accent-press:  #006edb;
  --accent-ink:    #0066cc;
  --accent-soft:   #f0f6fd;
  --accent-glow:   rgba(0, 113, 227, .16);
  --accent-bright: #2997ff;
}

/* ფერად ვარიანტებში eyebrow აქცენტის ფერს იბრუნებს, ლინკს კი მუდმივი
   ხაზი აღარ სჭირდება — მას ფერი გამოარჩევს. მონოქრომში პირიქითაა. */
:root[data-accent="blue"],
:root[data-accent="warm"],
:root[data-accent="brand"] { --eyebrow: var(--accent-ink); }
:root[data-accent="blue"]  .bento__link,
:root[data-accent="warm"]  .bento__link,
:root[data-accent="brand"] .bento__link { text-decoration: none; }

/* ---- ვარიანტი: გრაფიტი + თბილი აქცენტი ----
   სანახავად: <html lang="ka" data-accent="warm">  ·  index-warm.html
   ფუძე მონოქრომია, ფერი მხოლოდ ღილაკსა და ლინკზე.
   ⚠️ --accent-ink განზრახ უფრო მუქია ვიდრე --accent: #f56300 თეთრზე
   ტექსტისთვის კონტრასტს ვერ იძლევა (2.9:1), #c24e00 კი — 4.8:1 ✓ */
:root[data-accent="warm"] {
  --accent:        #f56300;
  --accent-hover:  #e05a00;
  --accent-press:  #c95100;
  --accent-ink:    #c24e00;
  --accent-soft:   #fff4ec;
  --accent-glow:   rgba(245, 99, 0, .16);
  --accent-bright: #ff8a3d;
}

/* ---- ბრენდის ზურმუხტისფერი ვარიანტი (სარეზერვო) ----
   სანახავად: <html lang="ka" data-accent="brand"> */
:root[data-accent="brand"] {
  --accent:        #00a879;
  --accent-hover:  #00966c;
  --accent-press:  #007e5b;
  --accent-ink:    #00614f;
  --accent-soft:   #e6f7f1;
  --accent-glow:   rgba(0, 168, 121, .22);
  --accent-bright: #2fd39c;
  --bg-dark:       #101a16;
  --bg-dark-2:     #18241f;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-ka);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semi); }
p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* გრძელი ქართული სიტყვა ვერასდროს გაწელავს ლეიაუტს */
h1, h2, h3, h4, p, li, a, span, summary { overflow-wrap: break-word; }
.grid > *, .split > *, .stack > *, .card > *, .hero__inner > *,
.form-grid > *, .section-head > * { min-width: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent); color: #fff; }

/* ⚠️ გლობალური `* { transition: .01ms }` ერთად აქრობს სპინერებსა და
   ჩატვირთვის ინდიკატორებს. ვთიშავთ მიზნობრივად. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .card, .tile, .project-card, .btn, .slide, .faq-item, .nav-links {
    transition-duration: .12s !important;
    animation: none !important;
  }
  .card:hover, .tile:hover, .project-card:hover, .card--link:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }

.section        { padding-block: var(--section-py); }
/* გვერდის სათაურის შემდეგ ზედა პედინგი ზედმეტია — ორმაგი ჰაერი გამოდის */
.page-head + .section { padding-top: 0; }
.section--tight { padding-block: calc(var(--section-py) * .55); }
.section--soft  { background: var(--bg-soft); }

/* მუქი სექცია — კონტრასტული ბლოკი */
.section--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .t-lead, .section--dark .t-body { color: var(--ink-on-dark-2); }
.section--dark .card {
  background: var(--bg-dark-2);
  border-color: var(--line-dark);
  color: var(--ink-on-dark);
}
.section--dark .card__title { color: #fff; }
.section--dark .card__text  { color: var(--ink-on-dark-2); }

/* სექციის სათაური — ცენტრში */
.section-head {
  display: grid;
  gap: var(--s-3);
  max-width: 720px;
  margin: 0 auto var(--s-6);
  text-align: center;
  justify-items: center;
}
.section-head--left {
  margin-inline: 0;
  text-align: left;
  justify-items: start;
}

.eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--accent-ink);
  letter-spacing: .01em;
}
.section--dark .eyebrow { color: var(--accent-bright); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-7), 5vw, var(--s-10));
  align-items: center;
}
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.stack   { display: grid; gap: var(--s-5); }
.stack-2 { display: grid; gap: var(--s-2); }
.stack-3 { display: grid; gap: var(--s-3); }
.stack-4 { display: grid; gap: var(--s-4); }

/* --------------------------------------------------------------------------
   4. ტიპოგრაფია
   -------------------------------------------------------------------------- */
.t-mega {
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
}
.t-display {
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-normal);
  font-weight: var(--fw-bold);
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: var(--tr-normal);
  font-weight: var(--fw-semi);
}
.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: var(--fw-regular);
  max-width: var(--measure);
}
.t-body  { font-size: var(--fs-body); line-height: var(--lh-body-ka); color: var(--ink-2); max-width: var(--measure); }
.t-small { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); }
.t-micro { font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-3); }

h1 { font-size: var(--fs-display); line-height: 1.1;  letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h2);      line-height: var(--lh-heading); letter-spacing: var(--tr-normal); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);      line-height: 1.25; font-weight: var(--fw-semi); }

.t-accent { color: var(--accent-ink); }
.t-muted  { color: var(--ink-3); }

/* ⚠️ ადრე აქ გრადიენტული ტექსტი იდგა (linear-gradient + background-clip: text).
   ეს დღეს ყველაზე ცნობადი „AI-ით გენერირებული საიტის" ნიშანია — Apple
   სათაურში გრადიენტს არასდროს იყენებს, სათაური ერთი მყარი ფერისაა.
   კლასი რჩება, რომ HTML არ შეიცვალოს, მაგრამ მყარ ფერს აძლევს. */
.t-gradient {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--ink);
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { margin-top: var(--s-9); }
.prose h3 { margin-top: var(--s-7); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose li + li { margin-top: var(--s-2); }
.prose a {
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.prose a:hover { opacity: .7; }

/* --------------------------------------------------------------------------
   5. ღილაკები — pill ფორმა
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 0 var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-btn);   /* 1 ჭრის ღ/ყ/ჭ-ს კუდებს ქართულ წარწერაში */
  padding-block: 12px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }

/* ⚠️ ღილაკს ფერადი ჩრდილი (glow) მოეხსნა — Apple-ის ღილაკი ბრტყელია.
   შუქის შარავანდედი ღილაკის ქვეშ მეორე „AI-საიტის" ნიშანია. */
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: none; }
.btn-primary:disabled { background: var(--line-strong); box-shadow: none; cursor: not-allowed; }

.btn-secondary {
  background: rgba(0, 0, 0, .05);
  color: var(--ink);
}
.btn-secondary:hover { background: rgba(0, 0, 0, .09); }

.btn-ghost {
  background: transparent;
  color: var(--accent-ink);
  padding-inline: var(--s-4);
}
.btn-ghost:hover { background: var(--accent-soft); }

.section--dark .btn-secondary { background: rgba(255, 255, 255, .14); color: #fff; }
.section--dark .btn-secondary:hover { background: rgba(255, 255, 255, .22); }
.section--dark .btn-ghost { color: var(--accent-bright); }
.section--dark .btn-ghost:hover { background: rgba(255, 255, 255, .1); }

.btn-lg { min-height: 50px; padding-inline: var(--s-6); font-size: var(--fs-body); }
.btn-sm { min-height: 38px; padding-inline: var(--s-4); font-size: var(--fs-small); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row--center { justify-content: center; }

/* ტექსტური ლინკი ისრით */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
  text-decoration: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  min-height: var(--tap);
}
.link-arrow::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease);
}
.link-arrow:hover::after { transform: translateX(3px); }
.section--dark .link-arrow { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   6. ბარათები — მრგვალი ფორმა
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 100%;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--soft { background: var(--bg-soft); border-color: transparent; }
.card--link { text-decoration: none; }
.card--link:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

/* ხატულა ფერად კვადრატში — ყველაზე საცნობი „შაბლონის" ნიშანი.
   ვტოვებთ თვით ხატულას, მაგრამ ვხსნით ფერად ფონს: უფრო წყნარი და ძვირი ჩანს. */
.card__icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: none;
  color: var(--ink-3);
  flex: none;
  margin-bottom: var(--s-2);
}
.card__icon svg { width: 22px; height: 22px; }
.section--dark .card__icon { background: none; color: var(--ink-on-dark-2); }
.section--dark .card__icon { background: rgba(255, 255, 255, .1); color: var(--accent-bright); }

.card__title { font-size: var(--fs-h3); line-height: 1.25; font-weight: var(--fw-semi); }
.card__text  { color: var(--ink-2); font-size: var(--fs-body); }
.card__foot  { margin-top: auto; padding-top: var(--s-4); }

/* პროექტის ბარათი — სურათი ზემოთ, კომპაქტური */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.tile:hover { border-color: var(--line-strong); box-shadow: var(--sh-lg); }

.tile__shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.tile__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--dur-slow) var(--ease);
}
.tile:hover .tile__shot img { transform: scale(1.03); }

.tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1;
}
.tile__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: var(--tr-normal); }
.tile__text  { color: var(--ink-2); font-size: var(--fs-small); }
.tile__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-small);
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   6b. BENTO — დიდი ბლოკები, სადაც სათაური ცენტრშია და სქრინი ქვევიდან „ამოდის"
   ეს არის მთავარი განსხვავება შაბლონური „ბარათი + ხატულა + ლინკი"-სგან.
   -------------------------------------------------------------------------- */
.bento { display: grid; gap: 12px; }
.bento-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .bento-2, .bento-3 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   ავტომატური ბადე — რიგები თანაბრად იყოფა, უჯრების რაოდენობას CSS თვითონ თვლის.
   6 უჯრა → 3 რიგში (3+3) · 8 → 4 რიგში (4+4) · 9 → 3 რიგში (3+3+3).
   პროექტის დამატება/წაშლა კლასის შეცვლას აღარ საჭიროებს.

   როგორ მუშაობს: `:has(> :nth-child(N):last-child)` ნიშნავს „ბადეში ზუსტად N უჯრაა".
   სვეტების ჭერი 4-ია — 5 სვეტზე ბარათი ძალიან ვიწროვდება და ქართული სიტყვა იტეხება.
   ⚠️ დათვლა მხოლოდ ≥1101px-ზე ირთვება: ვიწრო ეკრანზე ისედაც ფიქსირებული კიბეა,
   თორემ სპეციფიკურობა ერთმანეთს გადაფარავს.
   -------------------------------------------------------------------------- */
.bento--auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 861px)  { .bento--auto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) {
  .bento--auto { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento--auto:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 1fr); }
  .bento--auto:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 3, 5, 6, 9 — სამზე თანაბრად ჯდება (5 → 3+2, დანარჩენი სუფთად) */
  .bento--auto:has(> :nth-child(3):last-child),
  .bento--auto:has(> :nth-child(5):last-child),
  .bento--auto:has(> :nth-child(6):last-child),
  .bento--auto:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   გვერდითი სქროლი — ბადის ნაცვლად ჰორიზონტალური რიგი (Apple-ის კარუსელი).
   ბარათი ფიქსირებული სიგანისაა, ბოლო ოდნავ „იჭყიტება" — ეს ეუბნება თვალს,
   რომ გვერდით კიდევ არის. სქროლბარი დამალულია, გადაფურცვლა snap-ით.
   -------------------------------------------------------------------------- */
.bento--scroll {
  grid-template-columns: none;
  grid-auto-flow: column;
  /* ⚠️ ბარათი განზრახ ვიწროა: ერთ ეკრანზე მეტი უნდა მოხვდეს და ბოლო
     შუაზე გაიჭრას — სწორედ ეს ეუბნება თვალს, რომ ეს სიაა და გრძელდება.
     განიერ ბარათებთან რიგი „დამთავრებულად" გამოიყურებოდა.
     ⚠️ 1200px-იან კონტეინერში ~3.4 ბარათი ეტევა — ბოლო შუაზე იჭრება და
     სწორედ ეს ჭრილი ეუბნება თვალს, რომ სია მარჯვნივ გრძელდება. */
  grid-auto-columns: clamp(320px, 26vw, 360px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* გუტერამდე გადის, რომ ბარათები ეკრანის კიდეს „გაექცნენ" */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  /* ⚠️ scroll-padding აუცილებელია: padding-inline-ის გამო პირველი ბარათის
     snap-წერტილი 0-ზე კი არა, gutter-ზე ხვდებოდა და ბრაუზერი ჩატვირთვისთანავე
     scrollLeft-ს 40px-ზე აყენებდა. შედეგად „დასაწყისშივე ვართ" შემოწმება
     ცრუვდებოდა და მარცხენა ისარი ცარიელ კიდეზე ენთებოდა. */
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-3);
  scrollbar-width: none;
}
.bento--scroll::-webkit-scrollbar { display: none; }
.bento--scroll > * { scroll-snap-align: start; }

/* --------------------------------------------------------------------------
   ბარათი პორტფოლიოს ლოგიკით: სქრინი ზემოთ, ტექსტი ქვემოთ.
   ⚠️ ადრე პირიქით იყო — დიდი ცენტრირებული ტექსტი ზემოთ, სქრინი კი ქვევით
   ვიწრო ზოლად მოჭრილი. ნამუშევრების ბლოკში ეს იერარქია შებრუნებულია:
   როცა პროდუქტი თვითონ საიტია, სწორედ სქრინი უნდა იყოს ბარათის გმირი.
   ასე აწყობილია Vercel-ის showcase, Linear-ის customers და სტუდიების
   პორტფოლიოები. ტექსტი მარცხნივ სწორდება — ცენტრი „აფიშას" ჰგავს,
   მარცხენა სწორება კი კატალოგს.
   `order: -1` აქ მუშაობს, რადგან .bento__shot პირდაპირი შვილია.
   -------------------------------------------------------------------------- */
/* ⚠️ ბარათს თანაბარი პედინგი აქვს ოთხივე მხრიდან და სქრინი შიგნით ზის.
   წინა ვერსიაში სურათი კიდემდე გავიდა, სტრიქონებს შორის კი მხოლოდ 2px
   დარჩა — ბარათი „გაუწყობელი" ჩანდა. ჰაერი აქ დეკორაცია არაა: სწორედ ის
   ქმნის დასრულებულობის შეგრძნებას. */
.bento--scroll .bento__item--sm {
  min-height: 0;
  padding: var(--s-4);
  text-align: left;
  align-items: stretch;
  gap: var(--s-2);
}
.bento--scroll .bento__item--sm > :not(.bento__shot) { max-width: none; }
.bento--scroll .bento__item--sm .bento__eyebrow { margin-top: var(--s-1); }
.bento--scroll .bento__item--sm .bento__title   { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); }
/* ⚠️ აღწერისთვის სამი სტრიქონია დაჯავშნილი, არა ორი.
   ქართული ასო ლათინურზე გაცილებით განიერია: ვიწრო ბარათში 60 ნიშანი
   ორ სტრიქონში ფიზიკურად ვერ ეტევა — ერთგან ორი გამოდიოდა, მეორეგან სამი
   და ბარათები ერთმანეთს ასცდა. ახლა ტექსტის ბლოკი ყველგან ერთი
   სიმაღლისაა, მიუხედავად იმისა, რეალურად რამდენი სტრიქონი გამოვიდა. */
.bento--scroll .bento__item--sm .bento__sub {
  font-size: var(--fs-small);
  line-height: 1.4;
  /* ბარათი გაგანიერდა — აღწერა ორ სტრიქონში ჯდება, სამის ჯავშნა აღარაა საჭირო */
  min-height: calc(1.4em * 2);
}

.bento--scroll .bento__item--sm .bento__shot {
  order: -1;
  margin: 0 0 var(--s-3);
  width: 100%;
  /* სრული პროპორცია, არა მოჭრილი ზოლი — საიტი უნდა იცნობოდეს */
  height: auto;
  aspect-ratio: 16 / 10;
  /* ბარათის შიგნით ზის, საკუთარი მრგვალი კუთხითა და თხელი ჩარჩოთი —
     ისე იკითხება, როგორც „ეკრანი", და არა როგორც ფონის სურათი */
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.bento--scroll .bento__item--sm .bento__shot img { border-radius: inherit; }
/* ისარი ქვედა კუთხეში — ზემოთ ის სქრინზე მოხვდებოდა და ღია სურათზე იკარგება */
.bento--scroll a.bento__item::after {
  top: auto;
  bottom: var(--s-4);
  right: var(--s-4);
}
@media (prefers-reduced-motion: reduce) { .bento--scroll { scroll-snap-type: none; } }

/* ისრები ლენტის გვერდებზე.
   ⚠️ `.has-arrows` კლასს JS ამატებს — JS-ის გარეშე ღილაკები საერთოდ არ ჩანს,
   რომ მკვდარ ღილაკებს არ ვაჩვენოთ. */
.scroll-wrap { position: relative; }
.scroll-btn { display: none; }
.scroll-wrap.has-arrows .scroll-btn {
  display: grid;
  place-items: center;
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 8px 24px rgba(0, 0, 0, .10);
  color: var(--ink);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.scroll-wrap.has-arrows .scroll-btn:hover { background: #fff; }
.scroll-btn svg { width: 18px; height: 18px; }
.scroll-btn--prev { left: calc(var(--gutter) * -1 + 4px); }
.scroll-btn--next { right: calc(var(--gutter) * -1 + 4px); }
/* ბოლოში მისვლისას ღილაკი ქრება — ისე, როგორც Apple-თან.
   ⚠️ `display: none` და არა მხოლოდ `opacity: 0` — გამჭვირვალე ღილაკი მაინც
   ეკიდა ბარათს და თავიდან მარცხენა ისარი ჩანდა, მიუხედავად იმისა, რომ
   მარცხნივ სასქროლი აღარაფერი იყო. */
.scroll-wrap.has-arrows .scroll-btn:disabled,
.scroll-wrap.has-arrows .scroll-btn.is-off {
  display: none;
}
/* ტელეფონზე ისრები ზედმეტია — თითით ისედაც ილისტება */
@media (max-width: 860px) {
  .scroll-wrap.has-arrows .scroll-btn { display: none; }
}

/* ოთხი რიგში — ყველა პროექტი ერთ ბადეში, ერთი ზომით.
   ⚠️ სვეტს ზედა ზღვარი არ ეძლევა: 1fr სვეტს სრულ სიგანეზე ჭიმავს,
   თორემ ბადე კონტეინერზე ვიწრო ხდება და შუაში „ჩამოკიდებული" რჩება. */
.bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .bento--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ტელეფონზე ბარათები ვერტიკალურად ჩამწკრივება გვერდს გაუთავებელს ხდის —
   ამიტომ ბადე გვერდით სქროლად იქცევა. */
@media (max-width: 640px) {
  .bento--4,
  .bento--auto {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s-3);
    scrollbar-width: none;
  }
  .bento--4::-webkit-scrollbar,
  .bento--auto::-webkit-scrollbar { display: none; }
  .bento--4 > *,
  .bento--auto > * { scroll-snap-align: center; }
  .bento__item--sm { min-height: 300px; }
}

.bento__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: clamp(36px, 4vw, 56px) var(--s-6) 0;
  min-height: clamp(380px, 34vw, 480px);
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease);
}
/* ⚠️ ბარათი მთლიანად აღარ იზრდება — ახლა hover-ზე მხოლოდ სქრინი მიახლოვდება.
   ორივე ერთად „ხტუნვას" ქმნიდა. */
.bento__item:hover { transform: none; }

/* გარე ბმულის ისარი კუთხეში — მხოლოდ იმ უჯრებზე, რომლებიც ლინკია.
   ⚠️ ადრე ყოველ ბარათში ეწერა „გახსნა ↗" — რვა ერთნაირი წარწერა ზედიზედ.
   ბარათი ისედაც მთლიანად ლინკია, ამიტომ ტექსტი ინფორმაციას არ ამატებდა,
   სამაგიეროდ სიმაღლეზე ერთმანეთს არ ემთხვეოდა და კიბედ ჩანდა. */
a.bento__item::after {
  content: "↗";
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: var(--fs-small);
  line-height: 1;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
a.bento__item:hover::after { color: var(--ink); transform: translate(2px, -2px); }

/* კომპაქტური ბარათი — 4 სვეტისთვის მორგებული */
.bento__item--sm {
  min-height: clamp(280px, 23vw, 320px);
  padding: clamp(22px, 2.2vw, 28px) var(--s-5) 0;
  gap: 6px;
}
.bento__item--sm .bento__title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }

/* ფიქსირებული სიმაღლე აღარ სჭირდება: „გახსნა ↗" მოიხსნა და გასასწორებელი
   აღარაფერია. სქრინი ისედაც ბარათის ძირსაა მიბმული და სიმაღლე ფიქსირებული
   აქვს — ბადეში ყველა სურათი ერთ ხაზზე დგას, ტექსტის სიგრძის მიუხედავად. */
.bento__item--sm .bento__sub {
  font-size: var(--fs-small);
  max-width: 30ch;
  line-height: 1.4;
}

/* სქრინი --sm-შიც კიდემდე გადის, ოღონდ --s-5 პედინგზე.
   ⚠️ margin-top: auto საბაზისო წესიდან რჩება — სურათი ბარათის ძირს ეკვრის.
   ფიქსირებული margin-top-ით სურათი „გაჰყვებოდა" ტექსტს და ბადის ქვედა
   ხაზი აირეოდა. */
.bento__item--sm .bento__shot {
  width: calc(100% + var(--s-5) * 2);
  margin-inline: calc(var(--s-5) * -1);
  height: clamp(150px, 13vw, 190px);
}

/* ბოლო უჯრა — ბმული, სქრინის გარეშე. აწყობს ბადეს ლუწ რიგებად */
.bento__item--cta {
  justify-content: center;
  background: var(--accent-soft);
  gap: var(--s-3);
}
.bento__item--cta .bento__title { color: var(--accent-ink); }
.bento__item--cta .bento__sub { color: var(--accent-ink); opacity: .75; }

/* უჯრა სქრინის გარეშე — შიგთავსი ვერტიკალურად ცენტრში.
   ⚠️ საბაზისო .bento__item-ს padding-bottom: 0 აქვს, რადგან ქვევით სქრინი დგება.
   სქრინის გარეშე ტექსტი თავზე ეკვრის და ქვემოთ ცარიელი ადგილი რჩება —
   ამიტომ აქ ქვედა padding ბრუნდება. */
.bento__item--plain {
  justify-content: center;
  padding-bottom: clamp(22px, 2.2vw, 28px);
}

/* --------------------------------------------------------------------------
   კურსორზე მიმდევარი სინათლე — `data-spotlight`-იან უჯრებზე.
   კოორდინატებს JS წერს --mx/--my ცვლადებში.
   ⚠️ ეს არ არის დეკორატიული „ნათება": ლაქა უძრავად კი არ დგას, არამედ
   კურსორს მიჰყვება — ანუ რეაქციაა, არა ფონის ეფექტი. ფერი არ ერევა:
   ღია უჯრაზე შავია 6%-ზე, მუქზე — თეთრი 10%-ზე, ე.ი. მონოქრომი რჩება.
   -------------------------------------------------------------------------- */
/* ⚠️ ისტორია, რომ აღარ დავბრუნდეთ: სცადა სრული ინვერსია (ღია ბარათი hover-ზე
   შავდებოდა) და „ფარანი" mix-blend-mode: difference-ით. ორივე ცხადად ჩანდა,
   მაგრამ უარყოფილია — ინვერსია ბარათს გვერდით მდგომ მუქ ბარათს ამსგავსებდა
   და წყვილი, რომელიც კონტრასტზე იდგა, ერთფეროვნდებოდა; difference კი უხეშად
   გამოიყურებოდა. დარჩა პირველი, თავშეკავებული ვარიანტი: რბილი ნაცრისფერი ლაქა.
   ღია ბარათზე ის განზრახ დახვეწილია — ეს არჩევანია, არა შეცდომა. */
.bento__item[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(0, 0, 0, .06), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.bento__item--dark[data-spotlight]::before {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .10), transparent 70%);
}
.bento__item[data-spotlight]:hover::before { opacity: 1; }

/* ⚠️ აბსოლუტური ::before სტატიკურ შვილებზე ზემოთ იხატება და ტექსტს
   გადააფარებდა — ამიტომ შვილებს ცალკე ფენა ეძლევათ. */
.bento__item[data-spotlight] > * { position: relative; z-index: 1; }

/* ლინკის ისარი გამოცურდება */
.bento__item[data-spotlight] .bento__link::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.bento__item[data-spotlight]:hover .bento__link::after { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .bento__item[data-spotlight]::before { display: none; }
  .bento__item[data-spotlight] .bento__link::after { opacity: 1; transform: none; }
}

.bento__item--dark { background: var(--bg-dark); color: var(--ink-on-dark); }
.bento__item--dark .bento__sub { color: var(--ink-on-dark-2); }
.bento__item--wide { grid-column: span 2; }
@media (max-width: 900px) { .bento__item--wide { grid-column: auto; } }

.bento__eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  color: var(--eyebrow);
  letter-spacing: .02em;
}
.bento__item--dark .bento__eyebrow { color: var(--accent-bright); }

.bento__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);   /* 24 → 36 */
  font-weight: var(--fw-semi);
  line-height: 1.14;
  letter-spacing: var(--tr-tight);
}
.bento__sub {
  font-size: var(--fs-lead);
  color: var(--ink-3);
  line-height: 1.4;
  max-width: 34ch;
}

/* სქრინი ქვევით — ბლოკის კიდით იჭრება, თითქოს „ამოდის".
   ⚠️ სიმაღლე ფიქსირებულია და სურათი object-fit: cover-ით ჯდება.
   თუ სურათს სრულად გამოვაჩენთ, ჭრის ადგილი ბარათის სიმაღლეზეა
   დამოკიდებული და ყოველ ბარათში სხვაგან მოდის — არეული ნაგლეჯები გამოდის. */
.bento__shot {
  margin-top: auto;
  /* ბარათის კიდემდე გადის — ჩარჩო და ჩრდილი მას „ზემოდან დაწებებულ"
     მართკუთხედად აქცევდა. ბარათს overflow: hidden აქვს, ამიტომ სურათს
     მისივე მრგვალი კუთხე ჭრის. */
  width: calc(100% + var(--s-6) * 2);
  margin-inline: calc(var(--s-6) * -1);
  height: clamp(150px, 15vw, 210px);
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
}
.bento__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  display: block;
  /* სქრინებს მხოლოდ ოდნავ ეხსნება სიხასხასე — 5%.
     ⚠️ სრული grayscale(1) აქ გასინჯულია და არ ვარგა: სქრინები კვდება,
     პროდუქტი ვეღარ იცნობა. მიზანი მხოლოდ პირველი დარტყმის შერბილებაა,
     ფერის წაშლა — არა. hover-ზე სუფთა ორიგინალი. */
  filter: grayscale(.05);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.bento__item:hover .bento__shot img { transform: scale(1.03); filter: grayscale(0); }

/* ტექსტური ლინკი ისრით — არა შევსებული ღილაკი.
   ⚠️ ბარათი თვითონ ლინკია; შიგნით მძიმე შევსებული „აბი" გვერდის ნამდვილ CTA-ს
   ეჯიბრება და ბადეს ხმაურიანს ხდის. შევსება მხოლოდ გვერდის მთავარ ღილაკს რჩება. */
.bento__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  text-decoration: none;
  margin-top: var(--s-1);
  transition: color var(--dur-fast) var(--ease);
}
.bento__item:hover .bento__link {
  background: none;
  color: var(--accent-press);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bento__item--sm .bento__link { font-size: var(--fs-small); }
.bento__item--dark .bento__link { color: var(--accent-bright); }
.bento__item--dark:hover .bento__link { color: #fff; }

/* --------------------------------------------------------------------------
   6bb. ჰორიზონტალური სქროლი — ბარათები მარჯვნივ ილისტება.
   ბადეს ჯობს მაშინ, როცა ელემენტი ბევრია და გვერდის დაგრძელება არ გვინდა.
   -------------------------------------------------------------------------- */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 320px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--s-4);
  /* კიდეებამდე გავყავართ, რომ ბოლო ბარათი „ჩამოჭრილი" ჩანდეს — ეს ეუბნება
     მომხმარებელს, რომ გასაგრძელებელი კიდევ არის */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.scroller > * { scroll-snap-align: start; }

.scroller::-webkit-scrollbar { height: 8px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
.scroller::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* მინიშნება: „მარჯვნივ გადაფურცლე" */
.scroller-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
@media (prefers-reduced-motion: reduce) { .scroller { scroll-snap-type: none; } }

/* --------------------------------------------------------------------------
   6c. ენის გადამრთველი
   -------------------------------------------------------------------------- */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px;
  border-radius: var(--r-pill);
  background: rgba(25, 28, 26, .06);
  flex: none;
}
.lang button {
  min-width: 34px;
  min-height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .03em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(25, 28, 26, .12);
}
@media (max-width: 1040px) {
  .lang { margin: var(--s-4) 0 0; align-self: flex-start; }
  .lang button { min-width: 44px; min-height: 36px; font-size: var(--fs-small); }
}

/* --------------------------------------------------------------------------
   7. ბეჯები
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .05);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge--accent { background: var(--accent-soft); color: var(--accent-ink); }
.section--dark .badge { background: rgba(255, 255, 255, .12); color: var(--ink-on-dark); }

.dot-live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  box-shadow: 0 0 0 3px var(--accent-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .dot-live { animation: pulse 2.4s var(--ease) infinite; }
}
/* ⚠️ 50%-ზე v1-ის ზურმუხტისფერი იყო ჩარჩენილი (rgba(0,168,121,.04)) —
   ცისფერ თემაზე წერტილი მწვანედ ციმციმებდა. ახლა ცვლადზეა. */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow); }
  50%      { box-shadow: 0 0 0 7px transparent; }
}

.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding-left: 0; }

/* --------------------------------------------------------------------------
   8. ფორმები
   -------------------------------------------------------------------------- */
.field { display: grid; gap: var(--s-2); }
.label { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--ink); }
.label .req { color: #d93025; }

.input, .textarea, .select {
  width: 100%;
  min-height: 52px;
  padding: 14px var(--s-5);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .textarea:hover, .select:hover { background: rgba(0, 0, 0, .07); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.textarea { min-height: 140px; resize: vertical; }

.select {
  appearance: none;
  padding-right: var(--s-9);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2386868b' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-5) center;
}

.field-hint  { font-size: var(--fs-small); color: var(--ink-3); }
.field-error { font-size: var(--fs-small); color: #d93025; font-weight: var(--fw-medium); }
.field.is-invalid .input,
.field.is-invalid .textarea { border-color: #d93025; background: #fdf2f1; }

.check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  cursor: pointer;
  min-height: var(--tap);
  padding-block: 10px;
}
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
.check span  { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }

.form-grid { display: grid; gap: var(--s-5); }
@media (min-width: 720px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--2 .span-2 { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   9. HEADER — მინის ეფექტი
   -------------------------------------------------------------------------- */
/* მინის ეფექტი — რჩება. იცვლება მხოლოდ პუნქტების კითხვადობა. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.topbar.is-stuck { box-shadow: 0 1px 12px rgba(25, 28, 26, .06); }

@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(255, 255, 255, .97); }
}

/* თხელი შapka — მთავარი ის არის, რომ ნავიგაცია არ იპყრობდეს ყურადღებას */
.nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-logo { display: block; height: 22px; width: auto; }
@media (max-width: 640px) { .brand-logo { height: 20px; } }
.brand-logo--light { filter: brightness(0) invert(1); opacity: .95; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  font-weight: var(--fw-regular);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  transition: color var(--dur-fast) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); font-weight: var(--fw-medium); }

.nav-links a[aria-current].nav-cta { color: #fff; background: var(--accent); }

/* ⚠️ `.nav-links a` (0,1,1) აჭარბებს `.btn-primary`-ს (0,1,0), ამიტომ შapkaს
   ღილაკი აქცენტის ფონზე ნაცრისფერ წარწერას იღებდა. ლურჯზე ეს ჯერ კიდევ
   ჩანდა, მონოქრომში კი ფონი შავია და ტექსტი საერთოდ იკარგება.
   aria-current-იანი შემთხვევა ზემოთ ადრეც იყო გასწორებული — ჩვეულებრივი არა. */
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover { color: #fff; }

.nav-cta { margin-left: var(--s-3); }

.icon-button {
  display: none;
  width: var(--tap); height: var(--tap);
  align-items: center; justify-content: center;
  margin-left: auto;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.icon-button:hover { background: rgba(0, 0, 0, .05); }

@media (max-width: 1040px) {
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: var(--s-3) var(--gutter) var(--s-7);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(25, 28, 26, .08);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { min-height: 52px; font-size: var(--fs-lead); border-radius: var(--r); }
  .nav-cta { margin: var(--s-4) 0 0; width: 100%; }
  .icon-button { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   10. HERO — პირველი ეკრანი
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(36px, 4vw, 60px) clamp(32px, 3.5vw, 52px);
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 70%;
  /* ⚠️ აქ ფერადი radial-gradient „ნისლი" იდგა ჰეროს უკან — მესამე „AI-საიტის"
     ნიშანი. Apple-ის ჰერო სუფთა თეთრ ან სუფთა შავ ფონზე დგას. */
  background: none;
  pointer-events: none;
  z-index: -1;
}
.hero__inner {
  display: grid;
  gap: var(--s-4);
  justify-items: center;
  max-width: 820px;
  margin-inline: auto;
}
.hero h1 {
  font-size: var(--fs-mega);
  line-height: var(--lh-mega);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 620px;
  line-height: 1.45;
}

/* ციფრები */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  width: 100%;
  max-width: 760px;
  margin-top: var(--s-6);
}
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.stat b {
  display: block;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.1;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
}
.stat span {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-3);
  line-height: 1.4;
}

/* ჰერო-ს დიდი ვიზუალი — სქრინი ფერად ფონზე, ქვევიდან იჭრება */
.hero-visual {
  margin-top: clamp(28px, 3.5vw, 48px);
  padding: clamp(20px, 2.5vw, 40px) clamp(20px, 2.5vw, 40px) 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--bg-soft);
  overflow: hidden;
}
.hero-visual img {
  width: 100%;
  display: block;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
}

/* გმირის ვიზუალი — მოწყობილობის ჩარჩო */
.showcase {
  margin-top: clamp(var(--s-8), 6vw, var(--s-10));
  position: relative;
}
.device {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--bg-soft);
  padding: 10px;
  box-shadow: var(--sh-xl);
  overflow: hidden;
}
.device__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4) 14px;
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.device__dots { display: flex; gap: 6px; }
.device__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, .12); }
.device__screen {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}

/* --------------------------------------------------------------------------
   11. SLIDER
   -------------------------------------------------------------------------- */
.slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease), visibility .6s;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide a { display: block; width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.slide figcaption {
  position: absolute;
  left: 50%; bottom: var(--s-4);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--sh);
}

.slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.slider__arrows { display: flex; gap: var(--s-2); }
.slider__arrow {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .05);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease);
}
.slider__arrow:hover { background: rgba(0, 0, 0, .1); }
.slider__arrow.is-paused { background: var(--accent-soft); color: var(--accent-ink); }
.slider__arrow .icon-play  { display: none; }
.slider__arrow.is-paused .icon-pause { display: none; }
.slider__arrow.is-paused .icon-play  { display: block; }

.slider__dots { display: flex; gap: 2px; }
.slider__dot {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.slider__dot::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  transition: background var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease);
}
.slider__dot[aria-current="true"]::after { background: var(--accent); width: 26px; border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   12. PROOF STRIP
   -------------------------------------------------------------------------- */
.proof {
  padding-block: var(--s-5);
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.proof__label {
  font-size: var(--fs-micro);
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.proof__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-7);
  align-items: center;
}
.proof__item {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  letter-spacing: var(--tr-normal);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12b. მარტივი ბადე ყუთების გარეშე — სერვისებისა და ნაბიჯებისთვის.
   „ხატულა + ჩარჩო + ლინკი" ყოველ უჯრაში სწორედ ის შაბლონია, რომელიც
   საიტს ავტომატურად გენერირებულს ამსგავსებს.
   -------------------------------------------------------------------------- */
.plain-grid {
  display: grid;
  gap: var(--s-6) var(--s-7);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) { .plain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plain-grid { grid-template-columns: minmax(0, 1fr); } }

.plain-item { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.plain-item h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); }
.plain-item p  { font-size: var(--fs-small); color: var(--ink-3); line-height: 1.5; }
.plain-item__num {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semi);
  color: var(--accent-ink);
  letter-spacing: .04em;
}
.section--dark .plain-item { border-top-color: var(--line-dark); }
.section--dark .plain-item p { color: var(--ink-on-dark-2); }
.section--dark .plain-item__num { color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   13. STEPS
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; }
.step { display: grid; gap: var(--s-4); }
.step__num {
  counter-increment: step;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: var(--fw-semi);
  font-size: var(--fs-lead);
}
.step__num::before { content: counter(step); }
.section--dark .step__num { background: rgba(255, 255, 255, .1); color: var(--accent-bright); }
.step__body { display: grid; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 820px; margin-inline: auto; }
.faq-item {
  background: var(--bg-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease);
}
.faq-item[open] { background: transparent; box-shadow: none; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  min-height: 68px;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-item__body { padding: 0 var(--s-6) var(--s-6); color: var(--ink-2); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   15. CTA
   -------------------------------------------------------------------------- */
.cta {
  text-align: center;
  display: grid;
  gap: var(--s-6);
  justify-items: center;
  max-width: 720px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   16. PAGE HEAD (შიდა გვერდები)
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px);
  text-align: center;
}
.page-head__inner { display: grid; gap: var(--s-5); justify-items: center; max-width: 760px; margin-inline: auto; }
.page-head--left { text-align: left; }
.page-head--left .page-head__inner { justify-items: start; margin-inline: 0; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.breadcrumbs a { color: var(--ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }
.page-head--left .breadcrumbs { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--bg-soft);
  color: var(--ink-2);
  padding-block: var(--s-10) var(--s-6);
  font-size: var(--fs-small);
}
.footer__grid {
  display: grid;
  gap: var(--s-8);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-bottom: var(--s-8);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

.footer__about { color: var(--ink-3); max-width: 38ch; margin-top: var(--s-4); }
.footer__col h3 {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--ink-3);
  text-decoration: none;
}
.footer__col a:hover { color: var(--ink); }
@media (max-width: 1040px) { .footer__col a, .footer__bottom a { min-height: var(--tap); } }

.footer__legal {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-micro);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__bottom a { color: var(--ink-3); text-decoration: none; }
.footer__bottom a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   18. PERSON / LEGAL TOC
   -------------------------------------------------------------------------- */
.person {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  height: 100%;
  align-content: start;
  text-align: center;
  justify-items: center;
}
.person__avatar {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  /* ბრტყელი ნაცრისფერი, არა გრადიენტი — ინიციალები ტიპოგრაფიით იკითხება */
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 1.75rem;
  font-weight: var(--fw-semi);
}
.person__name { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: 1.25; }
.person__role { font-size: var(--fs-small); color: var(--ink-3); }
.person__bio  { font-size: var(--fs-small); color: var(--ink-2); }
.person__foot { margin-top: auto; padding-top: var(--s-3); }

.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 2px; }
.legal-toc a {
  display: block;
  padding: 10px var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  color: var(--ink-3);
  text-decoration: none;
}
.legal-toc a:hover { background: var(--bg-soft); color: var(--ink); }
@media (max-width: 900px) { .legal-toc { position: static; } }

/* --------------------------------------------------------------------------
   19. დამხმარეები
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4); top: -60px;
  z-index: 200;
  padding: 12px var(--s-5);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.link-brand { color: var(--accent-ink); text-decoration: none; }
.link-brand:hover { opacity: .7; }
.center-row { justify-content: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }

/* გამოჩენა სქროლზე */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

@supports (padding: max(0px)) {
  .wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left)); }
  .footer { padding-bottom: max(var(--s-6), env(safe-area-inset-bottom)); }
}

@media print {
  .topbar, .footer, .slider__nav { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   20. თავსებადობა v1-ის მარკაპთან
   შიდა გვერდები v1-ის კლასებით არის დაწერილი — აქ მათ v2-ის სახეს ვაძლევთ,
   რომ 12 გვერდის ხელახლა გადაწერა არ დაგვჭირდეს.
   ========================================================================== */

/* ტიპოგრაფია */
.t-h1 { font-size: var(--fs-display); line-height: 1.1; letter-spacing: var(--tr-tight); font-weight: var(--fw-bold); }

/* kicker → eyebrow */
.section-kicker {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  color: var(--eyebrow);
  letter-spacing: .01em;
  text-transform: none;
}
.section-kicker::before { display: none; }
/* ⚠️ აქ v1-ის ზურმუხტისფერი var(--accent-bright) იყო ჩარჩენილი — მუქ სექციაზე
   აქცენტი ცისფერის ნათელ ვარიანტს უნდა იყენებდეს. */
.section--dark .section-kicker { color: var(--accent-bright); }

/* სექციები */
.section--alt  { background: var(--bg-soft); }
.section--tint { background: var(--accent-soft); }

.section-head--center { text-align: center; justify-items: center; margin-inline: auto; }

/* v1-ის section-head მარცხნივ იყო — v2-ში ცენტრშია, გარდა split-ისა */
.split .section-head,
.page-head--left .section-head { text-align: left; justify-items: start; margin-inline: 0; }

/* პროექტის ბარათი — სურათი ზემოთ, ტექსტი ქვემოთ.
   ⚠️ order-ით გადალაგება აკრძალულია: __meta არის __body-ს შვილი, და არა
   ბარათის პირდაპირი შვილი — order მასზე არ მოქმედებს და განლაგება ირევა. */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  height: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-lg); }

.project-card__shot {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.project-card__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
  box-shadow: none;
  transition: transform var(--dur-slow) var(--ease);
}
.project-card:hover .project-card__shot img { transform: scale(1.03); }

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1;
}
.project-card__title { font-size: var(--fs-h3); font-weight: var(--fw-semi); letter-spacing: var(--tr-normal); }
.project-card__text  { color: var(--ink-2); font-size: var(--fs-small); }
.project-card__meta {
  margin-top: auto;
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
/* ტეგები ბარათში ადგილს ჭამს — შიდა გვერდზე ვმალავთ */
.project-card__body .tag-row { display: none; }

/* CTA ბლოკი → მუქი მრგვალი ბლოკი */
.cta-band {
  display: grid;
  gap: var(--s-6);
  align-items: center;
  padding: clamp(var(--s-8), 6vw, var(--s-11)) clamp(var(--s-6), 5vw, var(--s-10));
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  border-radius: var(--r-2xl);
  text-align: center;
  justify-items: center;
}
.cta-band h2 { color: #fff; }
.cta-band p  { color: var(--ink-on-dark-2); max-width: 52ch; margin-top: var(--s-3); }
.cta-band .btn-secondary { background: rgba(255, 255, 255, .14); color: #fff; }
.cta-band .btn-secondary:hover { background: rgba(255, 255, 255, .22); }
.cta-band .btn-row { justify-content: center; }

/* სლაიდერის ჩარჩო → device */
.slider { display: grid; gap: var(--s-5); }
.slider__frame {
  position: relative;
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  padding: 10px;
}
.slider__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4) 14px;
  border: 0;
  background: none;
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-weight: var(--fw-regular);
}
.slider__dots-mac { display: flex; gap: 6px; }
.slider__dots-mac span { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, .12); }
.slider__track {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
}
.slider__frame > img { display: block; width: 100%; border-radius: var(--r-lg); }

/* proof-strip → proof */
.proof-strip { padding-block: var(--s-8); border: 0; background: none; text-align: center; }
.proof-strip__inner { display: grid; gap: var(--s-5); justify-items: center; }
.proof-strip__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}
.proof-strip__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-9); align-items: center; }
.proof-strip__item {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semi);
  color: var(--ink-3);
  letter-spacing: var(--tr-normal);
  white-space: nowrap;
}

/* hero v1 */
.hero__layout { display: grid; gap: clamp(var(--s-7), 5vw, var(--s-10)); align-items: center; text-align: left; }
@media (min-width: 981px) { .hero__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero__copy { display: grid; gap: var(--s-5); align-content: start; justify-items: start; }

/* split ვარიანტი */
.split--text-narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .split--text-narrow { grid-template-columns: minmax(0, 1fr); } }

/* ბეჯები v1 */
.badge--live  { background: var(--accent-soft); color: var(--accent-ink); }
.badge--muted { color: var(--ink-3); }
.badge--live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

/* ბარათი v1 */
.card--flat { background: transparent; border-color: transparent; padding: 0; }

/* ნაბიჯები v1 */
.step--stacked { grid-template-columns: minmax(0, 1fr); }

/* გვერდის სათაური v1 — შიდა გვერდებზე მარცხნივ რჩება.
   ⚠️ `.wrap` და `.page-head__inner` ერთსა და იმავე ელემენტზეა.
   აქ max-width-ისა და margin-inline-ის მიცემა კლავს `.wrap`-ის ცენტრირებას:
   სათაური მარცხენა კიდეში ვიწრო სვეტად გადადის, ბადე კი ცენტრში რჩება — გვერდი „ცურავს".
   ამიტომ სიგანეს ვზღუდავთ მხოლოდ ტექსტზე, კონტეინერზე არა. */
.page-head { border-bottom: 0; background: none; text-align: left; padding-block: clamp(28px, 3vw, 44px) clamp(20px, 2vw, 28px); }
/* ⚠️ `.wrap` და `.page-head__inner` ერთი ელემენტია.
   `max-width: none` კლავს `.wrap`-ის 1200px-ს — სათაური მთელ ეკრანზე ეშლება,
   ბადე კი 1200-ში რჩება და ორი სხვადასხვა კიდე გამოდის.
   სწორია კონტეინერის იგივე სიგანე. */
.page-head__inner {
  justify-items: start;
  max-width: var(--container);
  margin-inline: auto;
}
.page-head__inner > p,
.page-head__inner > .t-lead { max-width: var(--measure); }
.breadcrumbs { justify-content: flex-start; }

/* stat-row v1 */
.stat-row--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-row { border-top: 0; padding-top: 0; }

/* utility-ები v1 */
.card--form { padding: clamp(var(--s-6), 4vw, var(--s-8)); }

.brand-sub {
  display: block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  margin-top: 2px;
}
@media (max-width: 640px) { .brand-sub { display: none; } }

/* ==========================================================================
   SAIS — constellation ვერსია
   შავი სცენა, დიდი მსუბუქი ტიპოგრაფია და პროცედურული ნაწილაკები
   ========================================================================== */

:root {
  color-scheme: dark;
  --accent: #8052ff;
  --accent-hover: #916cff;
  --accent-press: #7144ed;
  --accent-ink: #a98fff;
  --accent-soft: rgba(128, 82, 255, .12);
  --accent-glow: rgba(128, 82, 255, .26);
  --accent-bright: #b39cff;
  --eyebrow: #ffb829;
  /* Circuit obsidian: не чистый чёрный, а холодный графит с едва
     заметным изумрудным подтоном, связанным с палитрой частиц. */
  --bg: #07100f;
  --bg-soft: #0a1714;
  --bg-dark: #050c0b;
  --bg-dark-2: #0d1a17;
  --ink: #ffffff;
  --ink-2: #bdbdbd;
  --ink-3: #8b8b91;
  --ink-on-dark: #ffffff;
  --ink-on-dark-2: #bdbdbd;
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .32);
  --line-dark: rgba(255, 255, 255, .14);
  --font: "Inter", "Noto Sans Georgian", "Segoe UI", system-ui, sans-serif;
  --fs-mega: clamp(2.75rem, 4.7vw, 5.25rem);
  --fs-display: clamp(2.25rem, 3.7vw, 4.5rem);
  --fs-h2: clamp(1.65rem, 2vw, 2.5rem);
  --fs-h3: clamp(1.15rem, 1.4vw, 1.55rem);
  --fs-lead: clamp(1rem, .94rem + .32vw, 1.25rem);
  --section-py: clamp(88px, 10vw, 150px);
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 68px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;
  --dur-slow: 1.05s;
}

body {
  background:
    radial-gradient(110% 78% at 76% 8%, rgba(27, 92, 73, .105), transparent 48%),
    radial-gradient(92% 70% at 7% 78%, rgba(62, 54, 111, .055), transparent 46%),
    var(--bg);
  background-attachment: fixed;
  color: #fff;
  font-weight: 300;
}

h1, h2, h3, h4 {
  font-weight: 400;
  letter-spacing: -.01em;
}

::selection { background: #8052ff; color: #fff; }
:focus-visible { outline-color: #b39cff; }
.section, .section--soft, .section--dark, .section--alt { background: var(--bg); }
.section--tint { background: var(--bg-soft); }
.t-lead, .t-body, .t-small { color: var(--ink-2); }
.eyebrow, .section-kicker, .bento__eyebrow { color: #ffb829; }

/* ნავიგაცია */
.topbar {
  background: rgba(5, 12, 11, .68);
  border-bottom-color: transparent;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.topbar.is-stuck {
  border-bottom-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(5, 12, 11, .96); }
}
.nav { min-height: var(--header-h); }
.brand-logo {
  height: 25px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .96;
}
.nav-links { gap: 2px; }
.nav-links a {
  color: #96969b;
  font-size: .72rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a[aria-current] { color: #fff; font-weight: 400; }
.nav-links a.nav-cta,
.nav-links a.nav-cta:hover,
.nav-links a[aria-current].nav-cta {
  background: #8052ff;
  color: #fff;
  padding-inline: 18px;
  border-radius: 999px;
}
.nav-cta { margin-left: 10px; }
.icon-button { color: #fff; }
.icon-button:hover { background: rgba(255, 255, 255, .08); }
.lang {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .04);
}
.lang button { color: #8b8b91; }
.lang button[aria-pressed="true"] { background: #fff; color: #000; }

/* საერთო კომპონენტები */
.btn {
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: .015em;
  box-shadow: none;
}
.btn-primary,
.btn-primary:hover {
  background: #8052ff;
  border-color: #8052ff;
  color: #fff;
}
.btn-primary:hover { background: #916cff; transform: translateY(-1px); }
.btn-secondary { background: transparent; border-color: var(--line); color: #fff; }
.btn-secondary:hover { background: rgba(255, 255, 255, .07); }
.link-arrow { color: #fff; font-weight: 400; }
.link-arrow::after { color: #ffb829; }
.link-brand { color: #b39cff; }

.card,
.tile,
.bento__item,
.person,
.faq-item,
.cta-band {
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
.card,
.bento__item { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.card--link:hover,
.tile:hover { box-shadow: none; border-color: var(--line-strong); }
.bento__item--dark { background: transparent; }
.bento__shot { border-color: var(--line); }
.bento__shot img { filter: saturate(.75) brightness(.72); }
.bento__item:hover .bento__shot img { filter: saturate(1) brightness(.9); }
.badge { background: rgba(255, 255, 255, .08); color: var(--ink-2); }
.proof { background: var(--bg-dark); border-color: var(--line); }
.plain-item { border-color: var(--line); }
.plain-item p { color: var(--ink-2); }
.plain-item__num { color: #ffb829; }

.input, .select, .textarea {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(255, 255, 255, .19);
  color: #fff;
  border-radius: 12px;
}
.input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, .34); }
.input:focus, .select:focus, .textarea:focus {
  border-color: #8052ff;
  box-shadow: 0 0 0 4px rgba(128, 82, 255, .13);
}
.input::placeholder, .textarea::placeholder { color: #717178; }
.select option { background: #09090a; color: #fff; }
.label { color: #c7c7ca; font-weight: 400; }
.req { color: #ffb829; }
.check { color: var(--ink-2); }

/* შიდა გვერდები */
.page-head {
  min-height: min(72vh, 760px);
  display: grid;
  align-items: end;
  padding-bottom: clamp(64px, 8vw, 120px);
  background:
    radial-gradient(circle at 78% 38%, rgba(75, 126, 190, .09), transparent 23%),
    radial-gradient(circle at 68% 52%, rgba(42, 135, 132, .052), transparent 18%),
    var(--bg);
}
.page-head h1, .page-head .t-mega {
  font-size: clamp(2.7rem, 6.5vw, 6rem);
  line-height: 1.06;
  font-weight: 400;
}
.page-head__inner { gap: 22px; max-width: 900px; }
.breadcrumbs, .breadcrumbs a { color: #8b8b91; }
.cta-band { border-width: 1px 0; border-radius: 0; background: var(--bg-dark); }
.footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.footer__col h3 { color: #fff; font-weight: 400; }
.footer__col a, .footer__bottom a, .footer__about, .footer__legal, .footer__bottom { color: #88888e; }

/* მთავარი გვერდის ატმოსფერო */
.constellation-home { isolation: isolate; }
.cosmos-grain {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: -1;
  pointer-events: none;
  /* წანაცვლებული წერტილების სტატიკური ბადე ნაწილაკებისა და ტექსტის უკან. */
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 .55px, rgba(255, 255, 255, .045) .9px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 .55px, rgba(255, 255, 255, .045) .9px, transparent 1.3px);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

.cosmos-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cosmos-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.cosmos-hero__layout {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1.11fr);
  align-items: center;
  position: relative;
}
.cosmos-hero__copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-block: 70px 100px;
}
.cosmos-kicker {
  display: inline-flex;
  color: #ffb829;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.cosmos-hero h1 {
  margin: 0;
  width: min(100%, 640px);
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  font-size: clamp(3rem, 4vw, 4.65rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
}
.cosmos-hero h1 span { overflow-wrap: normal; word-break: normal; }
.cosmos-lead {
  max-width: 540px;
  color: #c9c9cc;
  font-size: clamp(1rem, .94rem + .3vw, 1.2rem);
  font-weight: 200;
  line-height: 1.65;
}
.cosmos-hero .btn-row { gap: 18px; }
.cosmos-hero .btn { min-height: 48px; padding-inline: 22px; }
.cosmos-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
  padding-top: 28px;
  color: #707076;
  font-size: .72rem;
  letter-spacing: .025em;
}
.cosmos-proof span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 22px;
  border-radius: 50%;
  background: #8052ff;
  vertical-align: middle;
}

.particle-figure {
  position: relative;
  width: 100%;
  height: clamp(420px, 46vw, 670px);
  margin: 0;
  contain: layout paint style;
}
.particle-figure canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.particle-figure--hero {
  width: calc(100% + 13vw);
  height: min(82svh, 820px);
  margin-right: -13vw;
  z-index: 2;
}
.cosmos-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 26px;
  width: 28px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 99px;
}
.cosmos-scroll span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffb829;
  transform: translateX(-50%);
  animation: cosmos-scroll 2.2s var(--ease-out) infinite;
}
@keyframes cosmos-scroll {
  0% { transform: translate(-50%, 0); opacity: 0; }
  24% { opacity: 1; }
  70%, 100% { transform: translate(-50%, 21px); opacity: 0; }
}

/* სრული სცენები */
.cosmos-section {
  position: relative;
  padding-block: clamp(110px, 14vw, 210px);
  overflow: clip;
}
.cosmos-section--full {
  min-height: 100svh;
  display: grid;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .055);
}
.cosmos-section--text { background: var(--bg-dark); }
.cosmos-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: clamp(58px, 7vw, 100px);
}
.cosmos-heading h2,
.cosmos-content > h2,
.cosmos-feature h2,
.cosmos-contact h2 {
  max-width: 11ch;
  font-size: clamp(2.55rem, 4.8vw, 5.6rem);
  line-height: 1.08;
  font-weight: 400;
}
.cosmos-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(60px, 8vw, 130px);
  align-items: center;
}
.cosmos-stage--reverse { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.cosmos-stage--reverse .cosmos-content { order: 1; }
.cosmos-stage--reverse .cosmos-visual { order: 2; }
.cosmos-stage--projects { align-items: start; }
.cosmos-stage--projects .cosmos-visual {
  position: sticky;
  top: calc(var(--header-h) + 50px);
}
.cosmos-visual { min-width: 0; }
.cosmos-content { display: grid; gap: 34px; align-content: center; min-width: 0; }

/* პროექტების სია */
.project-list { border-bottom: 1px solid var(--line); }
.project-row {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 124px;
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding-block: 20px;
  border-top: 1px solid var(--line);
  color: #fff;
  text-decoration: none;
  transition: border-color .45s var(--ease), padding .45s var(--ease);
}
.project-row:hover { border-color: rgba(255, 255, 255, .38); padding-left: 8px; }
.project-row__num { color: #5f5f66; font-size: .72rem; align-self: start; padding-top: 4px; }
.project-row__body { display: grid; min-width: 0; }
.project-row__tag {
  color: #ffb829;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.project-row strong {
  margin-top: 5px;
  font-size: clamp(1.28rem, 1.7vw, 1.72rem);
  font-weight: 400;
  line-height: 1.18;
}
.project-row__body > span:last-child {
  max-width: 48ch;
  margin-top: 7px;
  color: #88888e;
  font-size: .84rem;
  line-height: 1.55;
}
.project-row img {
  width: 124px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
  opacity: .38;
  filter: saturate(.35) brightness(.65);
  transition: opacity .55s var(--ease), filter .55s var(--ease), transform .55s var(--ease);
}
.project-row:hover img { opacity: 1; filter: saturate(.9) brightness(.9); transform: scale(1.04); }

/* ტექსტური სიები */
.cosmos-list { display: grid; border-bottom: 1px solid var(--line); }
.cosmos-list > div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.cosmos-list > div > span { color: #8052ff; font-size: .72rem; padding-top: 5px; }
.cosmos-list h3 { font-size: clamp(1.14rem, 1.45vw, 1.55rem); font-weight: 400; line-height: 1.28; }
.cosmos-list p {
  grid-column: 2;
  max-width: 52ch;
  color: #8d8d93;
  font-size: .9rem;
  line-height: 1.58;
}
.cosmos-list--compact > div { padding-block: 19px; }
.cosmos-feature { display: grid; gap: 19px; padding-block: 32px; border-top: 1px solid var(--line); }
.cosmos-feature:last-child { border-bottom: 1px solid var(--line); }
.cosmos-feature h2 { font-size: clamp(2rem, 3vw, 3.8rem); max-width: 12ch; }

/* კითხვები და კონტაქტი */
.cosmos-narrow { max-width: 960px; }

/* FAQ aligns with the left edge of the main content grid instead of floating
   in the middle of the planet. Keep enough room on the right for the sphere. */
@media (min-width: 701px) {
  .page-home .cosmos-section--text .cosmos-narrow {
    --faq-inline-start: max(var(--gutter), calc((100vw - var(--container)) / 2));
    width: min(960px, calc(100% - var(--faq-inline-start) - var(--gutter)));
    margin-left: var(--faq-inline-start);
    margin-right: 0;
  }
}
.faq { border-bottom: 1px solid var(--line); }
.faq-item { border-width: 1px 0 0; border-radius: 0; }
.faq-item summary {
  padding: 26px 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.4vw, 1.35rem);
  font-weight: 300;
}
.faq-item summary::after { border-color: #ffb829; }
.faq-item__body { padding: 0 0 30px; color: #97979d; }
.cosmos-contact { border-top: 1px solid rgba(255, 255, 255, .06); }
.cosmos-contact__layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(60px, 9vw, 150px);
  align-items: start;
}
.cosmos-contact__copy { display: grid; gap: 28px; position: sticky; top: 120px; }

/* რბილი გამოჩენა */
.js .reveal {
  transform: translateY(38px);
  transition-duration: 1.1s;
}
.js .reveal.is-in { transform: translateY(0); }

@media (max-width: 1040px) {
  .nav-links {
    background: rgba(0, 0, 0, .96);
    border-bottom-color: var(--line);
    box-shadow: none;
  }
  .nav-links a { color: #aaaab0; }
  .nav-links a.nav-cta { justify-content: center; margin: 10px 0 0; width: 100%; }
  .lang { align-self: flex-start; margin-block: 10px; }
  .cosmos-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cosmos-hero h1 { font-size: clamp(2.7rem, 6.2vw, 4.8rem); }
  .cosmos-stage { gap: 54px; }
}

@media (max-width: 780px) {
  :root { --section-py: 82px; }
  .cosmos-hero { min-height: 820px; }
  .cosmos-hero__layout { min-height: 820px; display: block; }
  .cosmos-hero__copy { width: 100%; max-width: 620px; padding-block: 78px 360px; }
  .cosmos-hero h1 { max-width: 11ch; font-size: clamp(2.65rem, 10vw, 4.6rem); }
  .particle-figure--hero {
    position: absolute;
    right: -9%;
    bottom: -3%;
    width: 118%;
    height: 58%;
    margin: 0;
    opacity: .88;
  }
  .cosmos-scroll { display: none; }
  .cosmos-proof { display: none; }
  .cosmos-section { padding-block: 100px; }
  .cosmos-heading { align-items: flex-start; flex-direction: column; margin-bottom: 54px; }
  .cosmos-stage,
  .cosmos-stage--reverse,
  .cosmos-contact__layout { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .cosmos-stage--projects .cosmos-visual { position: relative; top: auto; }
  .cosmos-stage--reverse .cosmos-content { order: 2; }
  .cosmos-stage--reverse .cosmos-visual { order: 1; }
  .particle-figure { height: min(92vw, 540px); }
  .cosmos-content > h2,
  .cosmos-heading h2,
  .cosmos-contact h2 { max-width: 13ch; }
  .cosmos-contact__copy { position: static; }
}

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  .brand-logo { height: 21px; }
  .cosmos-hero { min-height: 760px; }
  .cosmos-hero__layout { min-height: 760px; }
  .cosmos-hero__copy { gap: 19px; padding-block: 54px 292px; }
  .cosmos-hero h1 { font-size: clamp(2rem, 8.7vw, 2.4rem); line-height: 1.14; }
  .cosmos-lead { font-size: .98rem; line-height: 1.62; }
  .particle-figure--hero { width: 135%; right: -17.5%; height: 52%; }
  .cosmos-section { padding-block: 84px; }
  .cosmos-heading h2,
  .cosmos-content > h2,
  .cosmos-contact h2 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  .project-row { grid-template-columns: 28px minmax(0, 1fr) 78px; gap: 10px; min-height: 116px; }
  .project-row img { width: 78px; }
  .project-row__body > span:last-child { display: none; }
  .project-row:hover { padding-left: 0; }
  .cosmos-list > div { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; }
  .cosmos-list p { grid-column: 2; }
  .footer__grid { gap: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-scroll span { animation: none; opacity: 1; }
  .project-row, .project-row img { transition: none; }
}

/* ==========================================================================
   პროექტების ჰორიზონტალური სცენა
   ========================================================================== */

.cosmos-projects {
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
}
.cosmos-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 55% 50%, rgba(75, 126, 190, .038), transparent 43%);
}
.cosmos-projects__field {
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  width: 110%;
  height: 120%;
  opacity: .72;
  pointer-events: none;
}
.cosmos-projects__layout {
  display: grid;
  grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
  gap: clamp(38px, 5vw, 76px);
  align-items: center;
}
.cosmos-projects__intro { display: grid; gap: 26px; align-content: center; }
.cosmos-projects__intro,
.project-slide__body { text-shadow: 0 2px 20px #000, 0 0 34px rgba(0, 0, 0, .86); }
.cosmos-projects__intro h2 {
  max-width: 10ch;
  font-size: clamp(2.65rem, 3.65vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
}
.cosmos-projects__intro .link-arrow { justify-self: start; }
.project-carousel { min-width: 0; outline: 0; }
.project-carousel__viewport {
  overflow: hidden;
  padding-block: 24px;
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.project-carousel__track {
  display: flex;
  gap: clamp(30px, 4vw, 58px);
  will-change: transform;
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
}
.project-slide {
  flex: 0 0 clamp(500px, 47vw, 630px);
  display: grid;
  grid-template-columns: minmax(260px, 1.12fr) minmax(160px, .88fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: center;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  opacity: .08;
  filter: grayscale(1) brightness(.42);
  transform: scale(.88);
  transform-origin: center center;
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform .95s var(--ease-out);
}
.project-slide.is-adjacent {
  opacity: .3;
  filter: grayscale(.72) brightness(.58);
  transform: scale(.93);
}
.project-slide.is-active { opacity: 1; filter: none; transform: scale(1); }
.project-slide.is-clone { cursor: pointer; }
.project-slide__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: #080809;
}
.project-slide__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: inherit;
  pointer-events: none;
}
.project-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: saturate(.78) brightness(.82);
  transition: filter .8s var(--ease), transform 1.1s var(--ease-out);
}
.project-slide.is-active:hover .project-slide__media img { filter: saturate(1) brightness(.95); transform: scale(1.025); }
.project-slide__body { display: grid; min-width: 0; align-content: center; }
.project-slide__tag {
  color: #a98fff;
  font-size: .67rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.project-slide__body strong {
  margin-top: 8px;
  font-size: clamp(2rem, 3vw, 3.35rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.025em;
}
.project-slide__body > span:last-child {
  margin-top: 18px;
  color: #c4c4c8;
  font-size: .88rem;
  font-weight: 200;
  line-height: 1.6;
}
.project-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 12px;
}
.project-carousel__controls button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #8052ff;
  color: #fff;
  cursor: pointer;
  transition: transform .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease);
}
.project-carousel__controls button:hover { background: #916cff; transform: scale(1.06); }
.project-carousel__controls button:disabled { opacity: .24; cursor: default; transform: none; }
.project-carousel__count { min-width: 58px; color: #797980; font-size: .72rem; text-align: center; }

/* ========================================================================== 
   სრულეკრანიანი სცენების გადასვლა
   ========================================================================== */

html.deck-mode,
body.deck-ready { height: 100%; overflow: hidden; overscroll-behavior: none; }
.deck-ready .topbar {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}
.deck-ready main {
  position: fixed;
  inset: var(--header-h) 0 0;
  overflow: hidden;
}
.deck-ready main > .deck-scene,
.deck-ready > .footer.deck-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 5vh, 0);
  transition:
    opacity .58s var(--ease),
    transform .82s var(--ease-out),
    visibility 0s linear .82s;
}
.deck-ready main > .deck-scene.is-before,
.deck-ready > .footer.deck-scene.is-before { transform: translate3d(0, -5vh, 0); }
.deck-ready main > .deck-scene.is-active,
.deck-ready > .footer.deck-scene.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}
.deck-ready main > .deck-scene .reveal,
.deck-ready > .footer.deck-scene .reveal { opacity: 1; transform: none; }
.deck-ready .cosmos-hero,
.deck-ready .cosmos-projects,
.deck-ready .cosmos-section--full { height: 100%; min-height: 0; }
.deck-ready .cosmos-section { padding-block: clamp(54px, 6.2vh, 78px); }
.deck-ready .cosmos-hero__layout { min-height: 100%; }
.deck-ready .cosmos-hero__copy { padding-block: 42px 74px; }
.deck-ready .particle-figure--hero { height: min(76vh, 740px); }
.deck-ready .cosmos-projects { padding-block: clamp(38px, 5vh, 64px); }
.deck-ready .cosmos-stage { min-height: 100%; }
.deck-ready .footer {
  top: var(--header-h);
  bottom: 0;
  height: auto;
  display: grid;
  align-content: center;
  padding-block: clamp(42px, 7vh, 82px);
}
.deck-nav {
  position: fixed;
  z-index: 150;
  right: max(16px, env(safe-area-inset-right));
  top: 50%;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
}
.deck-nav button {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.deck-nav button::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5b5b62;
  transition: transform .45s var(--ease-out), background .45s var(--ease);
}
.deck-nav button[aria-current="true"]::before { background: #8052ff; transform: scale(2); }

@media (max-width: 900px) {
  .cosmos-projects__layout { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 30px; }
  .project-slide { flex-basis: min(590px, 72vw); }
}

@media (max-width: 700px) {
  .deck-nav { right: 4px; gap: 7px; }
  .cosmos-projects__layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cosmos-projects__intro { gap: 12px; }
  .cosmos-projects__intro h2 { max-width: none; font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .project-carousel__viewport { margin-right: calc(var(--gutter) * -1); padding-block: 8px; }
  .project-carousel__track { gap: 20px; }
  .project-slide {
    flex-basis: min(82vw, 420px);
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }
  .project-slide__media { aspect-ratio: 16 / 9; border-radius: 16px; }
  .project-slide__body strong { font-size: clamp(1.65rem, 8vw, 2.3rem); }
  .project-slide__body > span:last-child { margin-top: 9px; font-size: .78rem; line-height: 1.45; }
  .project-carousel__controls { justify-content: flex-start; padding-top: 8px; }
  .project-carousel__controls button { width: 40px; height: 40px; }
  .deck-ready .cosmos-projects { padding-block: 28px; }
  .deck-ready .cosmos-section { padding-block: 38px; }
  .deck-ready .cosmos-stage { align-content: start; }
}

@media (prefers-reduced-motion: reduce) {
  .project-carousel__track,
  .project-slide,
  .deck-ready main > .deck-scene,
  .deck-ready > .footer.deck-scene { transition-duration: .01ms; }
}

/* ========================================================================== 
   მთავარი გვერდის ერთიანი scroll-ანიმაცია
   ========================================================================== */

.timeline-home .timeline-particles {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 701px) {
  html.timeline-mode {
    overflow-x: hidden;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }
  html.timeline-mode::-webkit-scrollbar { display: none; }
  body.timeline-ready {
    min-height: calc(var(--timeline-scenes) * 100vh);
    overflow-x: hidden;
    background: var(--bg);
  }
  .timeline-ready .topbar {
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
  }
  .timeline-ready .timeline-particles {
    opacity: 1;
    visibility: visible;
  }
  .timeline-ready .particle-figure:not(.timeline-particles) {
    opacity: 0;
    visibility: hidden;
  }
  .timeline-ready main > .timeline-scene,
  .timeline-ready > .footer.timeline-scene {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 2;
    width: 100%;
    height: calc(100svh - var(--header-h));
    min-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
  }
  .timeline-ready main > .timeline-scene.is-timeline-current,
  .timeline-ready > .footer.timeline-scene.is-timeline-current { z-index: 4; }
  .timeline-ready .timeline-scene .reveal {
    opacity: 1;
    transform: none;
  }
  .timeline-ready .cosmos-hero,
  .timeline-ready .cosmos-projects,
  .timeline-ready .cosmos-section--full,
  .timeline-ready .cosmos-section--text,
  .timeline-ready .cosmos-contact {
    display: grid;
    align-items: center;
    padding-block: clamp(38px, 5.5vh, 66px);
    border: 0;
    background: transparent;
  }
  .timeline-ready .cosmos-hero__layout,
  .timeline-ready .cosmos-stage,
  .timeline-ready .cosmos-projects__layout,
  .timeline-ready .cosmos-contact__layout {
    min-height: 100%;
    align-items: center;
  }
  .timeline-ready .cosmos-hero__copy { padding-block: 32px 70px; }
  .timeline-ready .cosmos-hero .cosmos-lead { max-width: min(34.5vw, 540px); }
  .timeline-ready .cosmos-hero__layout {
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(48px, 3.75vw, 72px);
  }
  .timeline-ready .cosmos-hero::after { display: none; }
  .timeline-ready .cosmos-scroll { bottom: 18px; }
  .timeline-ready .cosmos-projects { isolation: auto; }
  .timeline-ready .cosmos-projects::before { display: none; }
  .timeline-ready .cosmos-projects__layout {
    grid-template-columns: minmax(290px, 360px) minmax(0, 1fr);
  }
  .timeline-ready .project-carousel__viewport { padding-block: 12px; }
  .timeline-ready .project-slide { flex-basis: clamp(470px, 45vw, 600px); }
  .timeline-ready .project-slide__media { max-height: min(57vh, 560px); }
  .timeline-ready .cosmos-section--text .cosmos-narrow {
    width: min(59%, 780px);
    max-width: none;
    margin-left: max(0px, calc((100vw - var(--container)) / 2));
    margin-right: auto;
    background: linear-gradient(90deg, var(--bg) 0%, rgba(7, 16, 15, .92) 72%, transparent 100%);
    box-shadow: -12vw 0 0 var(--bg);
  }
  .timeline-ready .cosmos-heading { margin-bottom: clamp(30px, 4vh, 52px); }
  .timeline-ready .faq-item summary { padding-block: clamp(15px, 2.1vh, 23px); }
  .timeline-ready .faq-item__body { padding-bottom: 20px; }
  .timeline-ready .cosmos-contact__copy { position: static; }
  .timeline-ready .cosmos-contact { padding-block: clamp(16px, 2.5vh, 28px); }
  .timeline-ready .cosmos-contact .form-grid { gap: clamp(8px, 1.25vh, 13px); }
  .timeline-ready .cosmos-contact .field { gap: 4px; }
  .timeline-ready .cosmos-contact .input,
  .timeline-ready .cosmos-contact .select {
    min-height: 44px;
    padding-block: 9px;
    background-color: rgba(0, 0, 0, .62);
  }
  .timeline-ready .cosmos-contact .textarea {
    min-height: 88px;
    max-height: 88px;
    padding-block: 10px;
    background-color: rgba(0, 0, 0, .62);
    resize: none;
  }
  .timeline-ready .cosmos-contact .check {
    min-height: 34px;
    padding-block: 3px;
  }
  .timeline-ready > .footer.timeline-scene {
    display: grid;
    align-content: center;
    padding-block: clamp(34px, 5vh, 64px);
    border: 0;
    background: transparent;
  }
  .timeline-spacer {
    position: relative;
    z-index: -1;
    width: 1px;
    height: calc(var(--timeline-scenes) * 100vh);
    pointer-events: none;
  }
  .timeline-progress {
    position: fixed;
    z-index: 160;
    top: calc(var(--header-h) + 22px);
    right: 5px;
    bottom: 22px;
    width: 3px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
  }
  .timeline-progress span {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, .48);
    transform: scaleY(0);
    transform-origin: center top;
    will-change: transform;
  }
}

@media (max-width: 700px) {
  .timeline-home .timeline-particles { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-ready main > .timeline-scene,
  .timeline-ready > .footer.timeline-scene { will-change: auto; }
}

/* ვიზუალი და ტექსტი მონაცვლეობით იცვლის მხარეს. */
@media (min-width: 701px) {
  .timeline-ready #services .cosmos-content,
  .timeline-ready .cosmos-offers .cosmos-content {
    order: 2;
    grid-column: 2;
  }
  .timeline-ready #services .cosmos-visual,
  .timeline-ready .cosmos-offers .cosmos-visual {
    order: 1;
    grid-column: 1;
  }
  .timeline-ready #services .cosmos-stage,
  .timeline-ready .cosmos-offers .cosmos-stage {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  }
  .timeline-ready #services .cosmos-content,
  .timeline-ready .cosmos-offers .cosmos-content {
    gap: clamp(18px, 2.8vh, 30px);
  }
  .timeline-ready #services .cosmos-list > div {
    padding-block: clamp(12px, 1.8vh, 20px);
  }
  .timeline-ready .cosmos-offers .cosmos-feature {
    gap: 13px;
    padding-block: clamp(17px, 2.4vh, 26px);
  }
  .timeline-ready .cosmos-offers .cosmos-feature h2 {
    font-size: clamp(2rem, 3.2vw, 3.7rem);
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .timeline-ready .cosmos-content > h2,
  .timeline-ready .cosmos-heading h2,
  .timeline-ready .cosmos-contact h2 {
    font-size: clamp(2.5rem, 4.5vw, 4.4rem);
  }
  .timeline-ready #services .cosmos-list > div { padding-block: 11px; }
  .timeline-ready .cosmos-list p { font-size: .8rem; line-height: 1.42; }
}

/* ჩვეულებრივი დოკუმენტის scroll: WebGL მხოლოდ ფიქსირებული ცოცხალი ფონია. */
@media (min-width: 701px) {
  .timeline-natural .timeline-particles {
    z-index: 1;
    opacity: 1;
    visibility: visible;
  }
  .timeline-natural main > section,
  .timeline-natural > .footer {
    position: relative;
    z-index: 3;
  }
  .timeline-natural main > section {
    border-color: transparent;
    background: transparent;
  }
  .timeline-natural .cosmos-hero::after,
  .timeline-natural .cosmos-projects::before {
    display: none;
  }
  .timeline-natural main > section > .wrap,
  .timeline-natural > .footer > .wrap {
    position: relative;
    z-index: 2;
  }
  .timeline-natural .particle-figure:not(.timeline-particles) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .timeline-natural #services .cosmos-content,
  .timeline-natural .cosmos-offers .cosmos-content {
    order: 2;
    grid-column: 2;
    position: relative;
    z-index: 3;
  }
  .timeline-natural #services .cosmos-visual,
  .timeline-natural .cosmos-offers .cosmos-visual {
    order: 1;
    grid-column: 1;
  }
  .timeline-natural #services .cosmos-stage,
  .timeline-natural .cosmos-offers .cosmos-stage {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  }
}

/* ტექსტი ქვემოდან მოდის მცირე ტალღოვანი რხევით, მაგრამ თვითონ გვერდი არ იყინება. */
@keyframes cosmos-text-wave-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 42px, 0) skewY(1.15deg);
    filter: blur(2px);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) skewY(-.22deg);
    filter: blur(0);
  }
  82% { transform: translate3d(0, 1px, 0) skewY(.08deg); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewY(0);
    filter: blur(0);
  }
}
.js .timeline-natural .reveal {
  opacity: 0;
  transform: translate3d(0, 42px, 0) skewY(1.15deg);
  transition: none;
  will-change: transform, opacity, filter;
}
.js .timeline-natural .reveal.is-in {
  animation: cosmos-text-wave-in .88s cubic-bezier(.16, 1, .3, 1) both;
}

/* ?brain-hover-debug=1 — pointer-ის მდგომარეობა და influence-ის რბილი ნიღაბი. */
.brain-hover-debug {
  position: fixed;
  inset: auto 14px 14px;
  z-index: 1000;
  display: block;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: rgba(0, 0, 0, .82);
  color: #d8d3e2;
  font-size: 11px;
  pointer-events: none;
}
.brain-hover-debug code { color: inherit; white-space: normal; }
.brain-hover-debug__mask {
  position: fixed;
  left: var(--pointer-x, 50vw);
  top: var(--pointer-y, 50vh);
  width: calc(var(--pointer-radius, 100px) * 2);
  height: calc(var(--pointer-radius, 100px) * 2);
  border: 1px solid rgba(150, 120, 255, .72);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 120, 255, .16), rgba(150, 120, 255, .055) 58%, transparent 100%);
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .js .timeline-natural .reveal,
  .js .timeline-natural .reveal.is-in {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ========================================================================== 
   DAY / NIGHT THEMES
   ღამის თემა ინარჩუნებს შავ სცენას. დღის თემა არის დამოუკიდებელი,
   ცივი „daylight observatory“ პალიტრა — არა მექანიკური ინვერსია.
   ========================================================================== */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #07100f;
  --theme-bg-soft: #0a1714;
  --theme-surface: rgba(10, 23, 20, .76);
  --theme-text: #ffffff;
  --theme-muted: #bdbdbd;
  --theme-faint: #8b8b91;
  --theme-line: rgba(255, 255, 255, .14);
  --theme-line-strong: rgba(255, 255, 255, .32);
  --theme-header: rgba(5, 12, 11, .68);
}

html[data-theme="light"] {
  color-scheme: light;
  --theme-bg: #ebeaf0;
  --theme-bg-soft: #e3e2e9;
  --theme-surface: rgba(255, 255, 255, .66);
  --theme-text: #17161c;
  --theme-muted: #5f5d67;
  --theme-faint: #77747f;
  --theme-line: rgba(28, 24, 38, .15);
  --theme-line-strong: rgba(28, 24, 38, .34);
  --theme-header: rgba(235, 234, 240, .82);

  --bg: var(--theme-bg);
  --bg-soft: var(--theme-bg-soft);
  --bg-dark: #e7e7ed;
  --bg-dark-2: #dedee6;
  --ink: var(--theme-text);
  --ink-2: var(--theme-muted);
  --ink-3: var(--theme-faint);
  --ink-on-dark: var(--theme-text);
  --ink-on-dark-2: var(--theme-muted);
  --line: var(--theme-line);
  --line-strong: var(--theme-line-strong);
  --line-dark: var(--theme-line);
  --accent-ink: #6840d9;
  --accent-soft: rgba(128, 82, 255, .09);
  --accent-glow: rgba(128, 82, 255, .18);
  --accent-bright: #6840d9;
  --eyebrow: #9b6400;
}

body,
.topbar,
.footer,
.section,
.section--soft,
.section--dark,
.section--alt,
.section--tint,
.page-head,
.nav-links,
.input,
.select,
.textarea {
  transition:
    background-color .32s var(--ease),
    border-color .32s var(--ease),
    color .32s var(--ease);
}

/* კომპაქტური კონტროლი: ღამით მზე ჩანს, დღისით — მთვარე. */
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  border: 1px solid var(--theme-line);
  border-radius: 50%;
  color: var(--theme-text);
  background: var(--theme-surface);
  transition:
    color .25s var(--ease),
    background-color .25s var(--ease),
    border-color .25s var(--ease),
    transform .25s var(--ease);
}
.theme-toggle:hover {
  background: rgba(128, 82, 255, .12);
  border-color: rgba(128, 82, 255, .42);
  transform: rotate(7deg);
}
.theme-toggle svg { position: absolute; }
html[data-theme="dark"] .theme-toggle__moon,
html[data-theme="light"] .theme-toggle__sun { display: none; }

@media (max-width: 1040px) {
  .theme-toggle { margin-left: auto; }
  #menuButton { margin-left: 0; }
}

/* დღის ძირითადი ზედაპირები და ტიპოგრაფია. */
html[data-theme="light"] body,
html[data-theme="light"] body.timeline-ready {
  background: var(--theme-bg);
  color: var(--theme-text);
}
html[data-theme="light"] ::selection { background: #8052ff; color: #fff; }
html[data-theme="light"] .section,
html[data-theme="light"] .section--soft,
html[data-theme="light"] .section--dark,
html[data-theme="light"] .section--alt { background: var(--theme-bg); color: var(--theme-text); }
html[data-theme="light"] .section--tint { background: var(--theme-bg-soft); }
html[data-theme="light"] .t-lead,
html[data-theme="light"] .t-body,
html[data-theme="light"] .t-small,
html[data-theme="light"] .prose,
html[data-theme="light"] .check { color: var(--theme-muted); }
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] .bento__eyebrow,
html[data-theme="light"] .cosmos-kicker { color: #9b6400; }

/* დღის ნავიგაცია — ორიგინალი ლოგოს მუქი ფერები პირდაპირ იკითხება. */
html[data-theme="light"] .topbar {
  background: var(--theme-header);
  border-bottom-color: transparent;
  box-shadow: none;
}
html[data-theme="light"] .topbar.is-stuck {
  border-bottom-color: rgba(28, 24, 38, .11);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .64);
}
html[data-theme="light"] .brand-logo { filter: none; opacity: 1; }
html[data-theme="light"] .nav-links a { color: #6b6873; }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a[aria-current] { color: var(--theme-text); }
html[data-theme="light"] .nav-links a.nav-cta,
html[data-theme="light"] .nav-links a.nav-cta:hover,
html[data-theme="light"] .nav-links a[aria-current].nav-cta { color: #fff; }
html[data-theme="light"] .icon-button { color: var(--theme-text); }
html[data-theme="light"] .icon-button:hover { background: rgba(25, 21, 35, .065); }
html[data-theme="light"] .theme-toggle:hover { background: rgba(128, 82, 255, .10); }
html[data-theme="light"] .lang {
  border-color: var(--theme-line);
  background: rgba(255, 255, 255, .52);
}
html[data-theme="light"] .lang button { color: var(--theme-faint); }
html[data-theme="light"] .lang button[aria-pressed="true"] { background: #242129; color: #fff; }

@media (max-width: 1040px) {
  html[data-theme="light"] .nav-links {
    background: rgba(243, 243, 246, .97);
    border-bottom-color: var(--theme-line);
    box-shadow: 0 18px 38px rgba(30, 25, 43, .09);
  }
  html[data-theme="light"] .nav-links a { color: #5f5c68; }
}

/* ღილაკები, ბარათები და ფორმები დღის სინათლეზე. */
html[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, .42);
  border-color: var(--theme-line);
  color: var(--theme-text);
}
html[data-theme="light"] .btn-secondary:hover { background: rgba(128, 82, 255, .08); }
html[data-theme="light"] .link-arrow { color: var(--theme-text); }
html[data-theme="light"] .link-brand { color: #6840d9; }
html[data-theme="light"] .card,
html[data-theme="light"] .tile,
html[data-theme="light"] .bento__item,
html[data-theme="light"] .person,
html[data-theme="light"] .faq-item {
  background: transparent;
  border-color: var(--theme-line);
  color: var(--theme-text);
}
html[data-theme="light"] .card--link:hover,
html[data-theme="light"] .tile:hover { border-color: var(--theme-line-strong); }
html[data-theme="light"] .bento__shot { border-color: var(--theme-line); }
html[data-theme="light"] .bento__shot img { filter: saturate(.86) brightness(.96); }
html[data-theme="light"] .bento__item:hover .bento__shot img { filter: saturate(1) brightness(1); }
html[data-theme="light"] .badge { background: rgba(25, 21, 35, .065); color: var(--theme-muted); }
html[data-theme="light"] .proof { background: transparent; border-color: var(--theme-line); }
html[data-theme="light"] .plain-item { border-color: var(--theme-line); }
html[data-theme="light"] .plain-item p { color: var(--theme-muted); }
html[data-theme="light"] .plain-item__num { color: #9b6400; }

html[data-theme="light"] .input,
html[data-theme="light"] .select,
html[data-theme="light"] .textarea {
  background: rgba(255, 255, 255, .58);
  border-color: rgba(28, 24, 38, .19);
  color: var(--theme-text);
}
html[data-theme="light"] .input:hover,
html[data-theme="light"] .select:hover,
html[data-theme="light"] .textarea:hover { border-color: rgba(28, 24, 38, .36); }
html[data-theme="light"] .input:focus,
html[data-theme="light"] .select:focus,
html[data-theme="light"] .textarea:focus {
  border-color: #8052ff;
  box-shadow: 0 0 0 4px rgba(128, 82, 255, .11);
}
html[data-theme="light"] .input::placeholder,
html[data-theme="light"] .textarea::placeholder { color: #898691; }
html[data-theme="light"] .select option { background: #fff; color: var(--theme-text); }
html[data-theme="light"] .label { color: #4f4c57; }
html[data-theme="light"] .req { color: #9b6400; }
html[data-theme="light"] .field.is-invalid .input,
html[data-theme="light"] .field.is-invalid .textarea { background: #fff4f2; }

/* შიდა გვერდები: მსუბუქი ატმოსფერო, მაგრამ იგივე კონტრასტი და რიტმი. */
html[data-theme="light"] .page-head {
  color: var(--theme-text);
  background:
    radial-gradient(circle at 78% 38%, rgba(128, 82, 255, .13), transparent 25%),
    radial-gradient(circle at 67% 54%, rgba(21, 132, 110, .10), transparent 20%),
    linear-gradient(180deg, #f8f8fa 0%, var(--theme-bg) 100%);
}
html[data-theme="light"] .breadcrumbs,
html[data-theme="light"] .breadcrumbs a { color: var(--theme-faint); }
html[data-theme="light"] .cta-band {
  background: #e8e6ef;
  border-color: var(--theme-line);
  color: var(--theme-text);
}
html[data-theme="light"] .cta-band h2 { color: var(--theme-text); }
html[data-theme="light"] .cta-band p { color: var(--theme-muted); }
html[data-theme="light"] .cta-band .btn-secondary {
  background: rgba(255, 255, 255, .52);
  color: var(--theme-text);
}
html[data-theme="light"] .footer {
  background: #ececf1;
  border-top-color: var(--theme-line);
  color: var(--theme-muted);
}
html[data-theme="light"] .footer__col h3 { color: var(--theme-text); }
html[data-theme="light"] .footer__col a,
html[data-theme="light"] .footer__bottom a,
html[data-theme="light"] .footer__about,
html[data-theme="light"] .footer__legal,
html[data-theme="light"] .footer__bottom { color: #6f6c77; }
html[data-theme="light"] .footer__col a:hover,
html[data-theme="light"] .footer__bottom a:hover { color: var(--theme-text); }

/* მთავარი WebGL სცენა: თეთრი ხაზები გრაფიტდება, ბრენდის ფერები რჩება. */
html[data-theme="light"] .cosmos-grain {
  background-color: var(--theme-bg);
  background-image:
    radial-gradient(circle, rgba(30, 26, 41, .16) 0 .55px, rgba(30, 26, 41, .055) .9px, transparent 1.3px),
    radial-gradient(circle, rgba(30, 26, 41, .16) 0 .55px, rgba(30, 26, 41, .055) .9px, transparent 1.3px);
}
html[data-theme="light"] .particle-figure canvas {
  filter: brightness(.64) saturate(1.18) contrast(1.28);
}
/* Native timeline თავად აყენებს დღის მუქ პალიტრას; CSS ფილტრი მას აღარ აბუნდოვანებს. */
html[data-theme="light"] .particle-figure[data-renderer="particle-atlas-webgl"] canvas {
  filter: none;
}
html[data-theme="light"] .timeline-natural .timeline-particles { opacity: .94; }
html[data-theme="light"] .cosmos-hero,
html[data-theme="light"] .cosmos-section--full,
html[data-theme="light"] .cosmos-contact { border-color: rgba(28, 24, 38, .09); }
html[data-theme="light"] .cosmos-hero::after {
  background: linear-gradient(to bottom, transparent, var(--theme-bg));
}
html[data-theme="light"] .cosmos-lead { color: #57545f; }
html[data-theme="light"] .cosmos-proof { color: #77747f; }
html[data-theme="light"] .cosmos-scroll { border-color: rgba(28, 24, 38, .3); }
html[data-theme="light"] .cosmos-scroll span { background: #8052ff; }
html[data-theme="light"] .cosmos-section--text { background: #eeedf2; }
html[data-theme="light"] .project-row { color: var(--theme-text); }
html[data-theme="light"] .project-row:hover { border-color: var(--theme-line-strong); }
html[data-theme="light"] .project-row__num { color: #817e89; }
html[data-theme="light"] .project-row__tag { color: #9b6400; }
html[data-theme="light"] .project-row__body > span:last-child { color: #696671; }
html[data-theme="light"] .project-row img {
  opacity: .56;
  filter: saturate(.55) brightness(.92);
}
html[data-theme="light"] .project-row:hover img { opacity: 1; filter: saturate(1) brightness(1); }
html[data-theme="light"] .cosmos-list p { color: #686570; }
html[data-theme="light"] .faq-item summary { color: var(--theme-text); }
html[data-theme="light"] .faq-item__body { color: var(--theme-muted); }
html[data-theme="light"] .cosmos-projects::before {
  background: radial-gradient(circle at 55% 50%, rgba(128, 82, 255, .095), transparent 45%);
}
html[data-theme="light"] .cosmos-projects__intro,
html[data-theme="light"] .project-slide__body { text-shadow: none; }
html[data-theme="light"] .project-slide { color: var(--theme-text); }
html[data-theme="light"] .project-slide__media { background: #e5e5eb; }
html[data-theme="light"] .project-slide__media::after { border-color: rgba(28, 24, 38, .15); }
html[data-theme="light"] .project-slide__media img { filter: saturate(.84) brightness(.96); }
html[data-theme="light"] .project-slide.is-active:hover .project-slide__media img { filter: saturate(1) brightness(1); }
html[data-theme="light"] .project-slide__tag { color: #6840d9; }
html[data-theme="light"] .project-slide__body > span:last-child { color: var(--theme-muted); }
html[data-theme="light"] .project-carousel__count { color: var(--theme-faint); }

@media (min-width: 701px) {
  html[data-theme="light"] .timeline-natural .cosmos-section--text .cosmos-narrow {
    background: linear-gradient(90deg, var(--theme-bg) 0%, rgba(243, 243, 246, .91) 72%, transparent 100%);
    box-shadow: -12vw 0 0 var(--theme-bg);
  }
  html[data-theme="light"] .timeline-natural .cosmos-contact .input,
  html[data-theme="light"] .timeline-natural .cosmos-contact .select,
  html[data-theme="light"] .timeline-natural .cosmos-contact .textarea {
    background-color: rgba(255, 255, 255, .68);
  }
  html[data-theme="light"] .timeline-progress { background: rgba(28, 24, 38, .08); }
  html[data-theme="light"] .timeline-progress span { background: rgba(28, 24, 38, .46); }
}

html[data-theme="light"] .brain-hover-debug {
  border-color: rgba(28, 24, 38, .2);
  background: rgba(250, 250, 252, .9);
  color: #312e38;
}

/* შიდა გვერდების intro-ს ცოცხალი ფიგურა. ტექსტი ყოველთვის წინა ფენაზეა,
   ხოლო მარცხენა mask ფიგურას სათაურში შეჭრის გარეშე აქრობს. */
.page-head,
.err-wrap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-head__inner,
.err-wrap > .wrap {
  position: relative;
  z-index: 2;
}
.page-head__inner {
  width: min(calc(100% - 40px), var(--container));
  max-width: var(--container);
  margin-inline: auto;
  padding-right: clamp(300px, 40vw, 690px);
  justify-items: start;
}
.page-head__figure {
  position: absolute;
  z-index: 1;
  top: 48%;
  right: clamp(-110px, 1vw, 24px);
  width: min(52vw, 760px);
  height: min(72vh, 700px);
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 12%, #000 31%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 12%, #000 31%);
}
.page-head__figure canvas {
  filter: brightness(1.18) saturate(.92) contrast(1.04);
  transform: translateZ(0);
}

/* На странице «О нас» широкая горизонтальная форма SAIS визуально легче
   остальных скульптур, поэтому опускаем только её к центру текстового блока. */
@media (min-width: 701px) {
  .page-about .page-head {
    min-height: min(62vh, 650px);
    align-items: center;
    padding-block: clamp(42px, 5vw, 70px);
  }
  .page-about .page-head__figure { top: 54%; }
  .page-contact .page-head__figure { top: 58%; }

  /* Лампочка остаётся главным визуальным акцентом, но больше не растягивает
     вступление на весь экран: направления услуг появляются заметно раньше. */
  .page-services .page-head {
    min-height: min(62vh, 650px);
    padding-bottom: clamp(44px, 5vw, 72px);
  }
  .page-services .page-head__figure {
    top: 52%;
    right: clamp(-24px, 4vw, 64px);
    width: min(43vw, 650px);
    height: min(62vh, 590px);
  }
}

/* ყველა შიდა გვერდზე მთავარი ფიგურის უკან რჩება მეორე, სრულეკრანიანი
   სიღრმის ფენა: თავისუფლად მოძრავი პირამიდები და მთავარი გვერდის ბადე. */
body.page-has-atmosphere {
  background-color: var(--bg);
  background-image:
    radial-gradient(110% 78% at 76% 8%, rgba(27, 92, 73, .105), transparent 48%),
    radial-gradient(92% 70% at 7% 78%, rgba(62, 54, 111, .055), transparent 46%),
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 .55px, rgba(255, 255, 255, .045) .9px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, .12) 0 .55px, rgba(255, 255, 255, .045) .9px, transparent 1.3px);
  background-size: auto, auto, 6px 6px, 6px 6px;
  background-position: center, center, 0 0, 3px 3px;
  background-attachment: fixed;
}
.page-has-atmosphere > main,
.page-has-atmosphere > .footer {
  position: relative;
  z-index: 2;
}
.page-has-atmosphere .page-head {
  background:
    radial-gradient(circle at 78% 35%, rgba(75, 126, 190, .064), transparent 25%),
    radial-gradient(circle at 66% 48%, rgba(42, 135, 132, .042), transparent 20%),
    rgba(5, 12, 11, .2);
}
.page-has-atmosphere main > .section,
.page-has-atmosphere main > .section--soft,
.page-has-atmosphere main > .section--dark,
.page-has-atmosphere main > .section--alt,
.page-has-atmosphere main > .section--tint {
  background-color: rgba(5, 12, 11, .36);
}
.page-has-atmosphere main > .section--alt,
.page-has-atmosphere main > .section--soft,
.page-has-atmosphere main > .section--tint {
  background-color: rgba(8, 18, 16, .54);
}
.page-has-atmosphere > .footer { background: rgba(5, 12, 11, .8); }
.page-atmosphere {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 0;
  width: 100%;
  height: auto;
  min-height: calc(100svh - var(--header-h));
  margin: 0;
  opacity: .62;
  pointer-events: none;
  contain: layout paint style;
}
.page-atmosphere canvas {
  filter: brightness(1.12) saturate(.86);
  transform: translateZ(0);
}

@media (max-width: 1040px) {
  .page-head__inner { padding-right: clamp(210px, 36vw, 370px); }
  .page-head__figure {
    right: -12vw;
    width: 64vw;
    opacity: .88;
  }
}

@media (max-width: 700px) {
  .page-head__inner {
    width: min(calc(100% - 32px), var(--container));
    padding-right: 0;
  }
  .page-head__figure {
    top: 52%;
    right: -38%;
    width: 112vw;
    height: min(62vh, 560px);
    opacity: .56;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  }
  .page-atmosphere { opacity: .48; }
}

/* ========================================================================== 
   ცოცხალი პროექტები — სრულეკრანიანი, კიდეებს მიღმა გამავალი კარუსელი
   ========================================================================== */
.page-home { --header-h: 80px; }
.page-home .topbar {
  background: rgba(5, 12, 11, .82);
  border-bottom-color: rgba(255, 255, 255, .035);
}
.page-home .nav { min-height: 80px; }
.page-home .brand-logo { height: 31px; }

.page-home .cosmos-projects {
  position: relative;
  display: block;
  min-height: max(760px, calc(100svh - var(--header-h)));
  height: max(760px, calc(100svh - var(--header-h)));
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.page-home.timeline-natural .cosmos-projects {
  background: transparent;
}
.page-home .cosmos-projects::after {
  display: none;
}
.page-home .cosmos-projects__field {
  inset: -15% -8%;
  width: 116%;
  height: 130%;
  opacity: .9;
}
.page-home .cosmos-projects__layout {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}
.page-home .cosmos-projects__intro {
  position: absolute;
  z-index: 8;
  top: 55px;
  left: clamp(28px, 3.76vw, 72px);
  display: grid;
  gap: 22px;
  align-content: start;
  max-width: min(44vw, 760px);
}
.page-home .cosmos-projects__intro .projects-title {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(4.875rem, 5.5vw, 6.75rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  white-space: nowrap;
}
.page-home .cosmos-projects__intro .link-arrow {
  justify-self: start;
  color: rgba(255, 255, 255, .88);
}
.page-home .project-carousel {
  position: absolute;
  inset: 0;
  z-index: 3;
  min-width: 0;
  outline: 0;
}
.page-home .project-carousel__viewport {
  position: absolute;
  inset: 90px 0 98px;
  overflow: hidden;
  padding: 0;
  mask-image: none;
  -webkit-mask-image: none;
}
.page-home .project-carousel__track {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 570px;
  will-change: transform;
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
}
.page-home .project-slide {
  position: relative;
  z-index: 1;
  flex: 0 0 clamp(350px, 20.92vw, 400px);
  display: block;
  height: clamp(520px, 29.82vw, 570px);
  min-width: 0;
  color: #fff;
  text-decoration: none;
  opacity: .2;
  filter: brightness(.25) saturate(.7);
  transform: none;
  transform-origin: center center;
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform .95s var(--ease-out);
}
.page-home .project-slide.is-adjacent {
  z-index: 2;
  opacity: .2;
  filter: brightness(.25) saturate(.7);
  transform: none;
}
.page-home .project-slide.is-active {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: none;
}
.page-home .project-slide__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border-radius: clamp(30px, 1.88vw, 36px);
  background: var(--bg-dark-2);
}
.page-home .project-slide__media::after {
  border-color: rgba(255, 255, 255, .12);
}
.page-home .project-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(.7) saturate(.72);
}
.page-home .project-slide.is-active .project-slide__media img {
  filter: brightness(1.04) contrast(1.08) saturate(1.08);
}
.page-home .project-slide.is-active:hover .project-slide__media img {
  filter: brightness(1.07) contrast(1.09) saturate(1.12);
  transform: scale(1.022);
}
.page-home .project-slide__body {
  position: absolute;
  z-index: 7;
  top: 45px;
  left: calc(100% + 24px);
  width: clamp(360px, 21.97vw, 420px);
  height: 480px;
  display: grid;
  align-content: center;
  padding: clamp(32px, 2.3vw, 44px);
  overflow: hidden;
  border-radius: 34px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, .76));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  transition: opacity .55s var(--ease), transform .75s var(--ease-out), visibility .55s;
  backdrop-filter: brightness(.58) saturate(.72);
  -webkit-backdrop-filter: brightness(.58) saturate(.72);
}
.page-home .project-slide.is-active .project-slide__body {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.page-home .project-slide__tag {
  color: #8f68ff;
  font-size: clamp(1rem, .94vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: none;
}
.page-home .project-slide__body strong {
  margin-top: 18px;
  font-size: clamp(3.625rem, 3.45vw, 4.25rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}
.page-home .project-slide__body > span:last-child {
  max-width: 360px;
  margin-top: 28px;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1.16rem, 1.05vw, 1.3rem);
  font-weight: 300;
  line-height: 1.45;
}
.page-home .project-carousel__controls.projects-controls {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  transform: translateX(-50%);
}
.page-home .projects-control {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  font-size: 1.15rem;
}
.page-home .project-carousel__count {
  position: absolute;
  left: calc(100% + 18px);
  min-width: 58px;
  color: rgba(255, 255, 255, .35);
  font-size: .75rem;
  text-align: left;
  white-space: nowrap;
}

@media (min-width: 1280px) {
  /* Keep every translated label on one line without squeezing the CTA or
     language switcher out of the 1320px header container. */
  .page-home .nav-links { gap: clamp(18px, 1.55vw, 28px); }
  .page-home .nav-links a {
    min-height: 44px;
    padding-inline: 0;
    font-size: clamp(.94rem, .9vw, 1.06rem);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }
  .page-home .nav-links a.nav-cta {
    min-height: 56px;
    margin-left: 2px;
    padding-inline: 28px;
  }
}

@media (max-width: 900px) {
  .page-home .cosmos-projects,
  .page-home .cosmos-projects__layout {
    min-height: 800px;
    height: 800px;
  }
  .page-home .cosmos-projects__intro {
    top: 34px;
    left: var(--gutter);
    max-width: calc(100% - var(--gutter) * 2);
    gap: 13px;
  }
  .page-home .cosmos-projects__intro .projects-title {
    max-width: 9ch;
    font-size: clamp(3rem, 10.5vw, 5.2rem);
    line-height: .92;
    white-space: normal;
  }
  .page-home .project-carousel__viewport { inset: 170px 0 88px; }
  .page-home .project-carousel__track { gap: 16px; height: 500px; }
  .page-home .project-slide {
    flex-basis: min(74vw, 340px);
    height: 500px;
  }
  .page-home .project-slide__media { border-radius: 28px; }
  .page-home .project-slide__body {
    inset: auto 0 0;
    width: 100%;
    height: auto;
    min-height: 48%;
    padding: 28px 24px;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .94), rgba(0, 0, 0, .34));
    transform: translateY(10px);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .page-home .project-slide__tag { font-size: .9rem; }
  .page-home .project-slide__body strong { margin-top: 8px; font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .page-home .project-slide__body > span:last-child { margin-top: 12px; font-size: .94rem; line-height: 1.4; }
  .page-home .project-carousel__controls.projects-controls { bottom: 18px; }
  .page-home .projects-control { width: 54px; height: 54px; flex-basis: 54px; }
  .page-home .project-carousel__count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .topbar,
  .footer,
  .section,
  .page-head,
  .particle-figure canvas,
  .theme-toggle { transition: none; }
}

/* ========================================================================== 
   MEGA SMOOTH — ინერციული scroll და ტექსტის კასკადური ტალღა
   ========================================================================== */

html.has-wheel-inertia { scroll-behavior: auto; }

@keyframes sais-reveal-wave {
  0% {
    opacity: 0;
    transform: translate3d(0, 46px, 0) skewY(1.05deg) scale(.992);
    filter: blur(3px);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -4px, 0) skewY(-.18deg) scale(1.001);
    filter: blur(0);
  }
  80% { transform: translate3d(0, 1.5px, 0) skewY(.06deg) scale(1); }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes sais-reveal-part-wave {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) skewY(.65deg);
    filter: blur(2px);
  }
  64% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) skewY(-.1deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewY(0);
    filter: blur(0);
  }
}

.js body.timeline-natural .reveal,
.js body:not(.timeline-natural) .reveal {
  opacity: 0;
  transform: translate3d(0, 46px, 0) skewY(1.05deg) scale(.992);
  filter: blur(3px);
  transition: none;
  animation: none;
  will-change: transform, opacity, filter;
}

.js body.timeline-natural .reveal.is-in,
.js body:not(.timeline-natural) .reveal.is-in {
  animation: sais-reveal-wave 1.08s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms) both;
}

.js .reveal .reveal-part {
  opacity: 0;
  transform: translate3d(0, 24px, 0) skewY(.65deg);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

.js .reveal.is-in .reveal-part {
  animation: sais-reveal-part-wave 1s cubic-bezier(.16, 1, .3, 1)
    calc(var(--reveal-delay, 0ms) + var(--reveal-part-delay, 0ms) + 70ms) both;
}

@media (prefers-reduced-motion: reduce) {
  html.has-wheel-inertia { scroll-behavior: auto; }
  .js body.timeline-natural .reveal,
  .js body.timeline-natural .reveal.is-in,
  .js body:not(.timeline-natural) .reveal,
  .js body:not(.timeline-natural) .reveal.is-in,
  .js .reveal .reveal-part,
  .js .reveal.is-in .reveal-part {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
    transition: none;
  }
}

/* ========================================================================== 
   PROJECTS NATIVE CAROUSEL — ერთი scroll-track, ერთი აქტიური ცენტრი
   ========================================================================== */

.page-home .cosmos-projects {
  --project-card-width: clamp(350px, 20.84vw, 400px);
  --project-card-height: 570px;
}

.page-home .cosmos-projects__intro {
  top: 52px;
  left: clamp(34px, 3.75vw, 72px);
  width: min(390px, 27vw);
  max-width: 390px;
  gap: 18px;
}

.page-home .cosmos-projects__intro .projects-title {
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(4.25rem, 4.4vw, 5.375rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.045em;
  white-space: normal;
  pointer-events: none;
}

.page-home .project-carousel__viewport {
  position: absolute;
  inset: 95px 0 auto;
  width: 100%;
  height: var(--project-card-height);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 calc(50vw - var(--project-card-width) / 2);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(50vw - var(--project-card-width) / 2);
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  mask-image: none;
  -webkit-mask-image: none;
}

.page-home .project-carousel__viewport::-webkit-scrollbar { display: none; }
.page-home .project-carousel__viewport.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

/* Invisible recentering between cloned carousel cycles must be a true jump.
   Without this override `behavior:auto` inherits the smooth viewport rule. */
.page-home .project-carousel__viewport.is-cycle-jumping {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.page-home .project-carousel__track {
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  height: 100%;
  padding: 0;
  background: transparent;
  transform: none;
  transition: none;
  will-change: auto;
}

.page-home .project-slide,
.page-home .project-slide.is-adjacent,
.page-home .project-slide.is-active {
  position: relative;
  flex: 0 0 var(--project-card-width);
  display: block;
  width: var(--project-card-width);
  height: var(--project-card-height);
  min-width: 0;
  overflow: visible;
  color: #fff;
  text-decoration: none;
  opacity: 1;
  filter: none;
  transform: translate3d(0, var(--card-y, 18px), 0) scale(var(--card-scale, .88));
  transform-origin: center center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: none;
  -webkit-user-drag: none;
}

.page-home .project-slide__media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: var(--bg-dark-2);
  box-shadow: 0 26px 80px rgba(0, 0, 0, calc(.18 + var(--card-focus, 0) * .3));
}

.page-home .project-slide__media::before {
  display: none;
}

.page-home .project-slide__media::after {
  z-index: 3;
  border-color: rgba(255, 255, 255, calc(.075 + var(--card-focus, 0) * .085));
}

.page-home .project-carousel .project-slide .project-slide__media img,
.page-home .project-carousel .project-slide.is-active:hover .project-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--project-cover-position, 50% center);
  filter: brightness(var(--card-brightness, .58)) saturate(var(--card-saturation, .76)) contrast(calc(1.02 + var(--card-focus, 0) * .05));
  transform: scale(calc(1.018 + var(--card-focus, 0) * .012));
  transition: none;
  user-select: none;
  pointer-events: none;
}

.page-home .project-slide:focus-visible .project-slide__media,
.page-home .project-carousel__viewport:focus-visible {
  outline: 3px solid #9c7bff;
  outline-offset: 5px;
}

.page-home .project-info {
  position: absolute;
  z-index: 12;
  top: 158px;
  left: calc(50% + var(--project-card-width) / 2 + 28px);
  width: min(390px, calc(50vw - var(--project-card-width) / 2 - 58px));
  min-height: 390px;
  display: grid;
  grid-template-rows: auto minmax(130px, auto) minmax(92px, auto) auto;
  align-content: center;
  padding: 34px 34px 30px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.page-home .project-info > * {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .68);
}

.page-home .project-info__category {
  color: #9a73ff;
  font-size: clamp(1rem, .94vw, 1.125rem);
  font-weight: 600;
  line-height: 1.35;
}

.page-home .project-info__title {
  align-self: center;
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(3.5rem, 3.34vw, 4rem);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.035em;
}

.page-home .project-info__description {
  max-width: 340px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(1.12rem, 1.04vw, 1.25rem);
  font-weight: 300;
  line-height: 1.45;
}

.page-home .project-info__link {
  justify-self: start;
  margin-top: 22px;
  color: rgba(255, 255, 255, .9);
  font-size: .94rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .32);
}

.page-home .project-info__link:focus-visible {
  outline: 2px solid #9c7bff;
  outline-offset: 5px;
}

.project-info .line-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.project-info .line { display: block; }

/* A fast, non-blocking signal reveal gives every newly selected project a
   crisp response without reintroducing the old swipe cooldown. */
.page-home .project-info.is-text-revealing :where(
  .project-info__category,
  .project-info__description,
  .project-info__link,
  .project-info__title .line
) {
  animation: project-info-signal-in 260ms cubic-bezier(.18, .82, .28, 1) both;
}
.page-home .project-info.is-text-revealing .project-info__title .line {
  animation-delay: calc(20ms + var(--line-index, 0) * 28ms);
}
.page-home .project-info.is-text-revealing .project-info__description { animation-delay: 58ms; }
.page-home .project-info.is-text-revealing .project-info__link { animation-delay: 88ms; }

@keyframes project-info-signal-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 42% 0);
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0);
  }
}

.page-home .project-carousel__controls.projects-controls {
  left: 50%;
  bottom: 22px;
  gap: 14px;
  transform: translateX(-50%);
}
.page-home .projects-control { width: 64px; height: 64px; flex-basis: 64px; }
.page-home .projects-control:disabled { opacity: .24; cursor: default; }
.page-home .project-carousel__count { left: calc(100% + 18px); }

@media (max-width: 1450px) and (min-width: 1101px) {
  .page-home .cosmos-projects__intro { width: 300px; }
  .page-home .cosmos-projects__intro .projects-title { font-size: clamp(3.55rem, 4.6vw, 4.25rem); }
  .page-home .project-info { padding-inline: 28px; }
}

@media (max-width: 1100px) {
  .page-home .cosmos-projects {
    --project-card-width: min(52vw, 420px);
    --project-card-height: 520px;
    min-height: 1080px;
    height: 1080px;
  }
  .page-home .cosmos-projects__layout { min-height: 1080px; height: 1080px; }
  .page-home .cosmos-projects__intro {
    top: 30px;
    left: var(--gutter);
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
    gap: 12px;
  }
  .page-home .cosmos-projects__intro .projects-title {
    font-size: clamp(3.35rem, 7vw, 4.5rem);
  }
  .page-home .project-carousel__viewport { top: 170px; height: var(--project-card-height); }
  .page-home .project-slide__media { border-radius: 30px; }
  .page-home .project-info {
    top: 735px;
    left: 50%;
    width: min(620px, calc(100% - var(--gutter) * 2));
    min-height: 250px;
    grid-template-rows: auto auto auto auto;
    padding: 28px 30px;
    transform: translateX(-50%);
  }
  .page-home .project-info__title { min-height: 0; font-size: clamp(2.8rem, 6vw, 3.7rem); }
  .page-home .project-info__description { min-height: 0; margin-top: 15px; }
  .page-home .project-info__link { margin-top: 15px; }
  .page-home .project-carousel__controls.projects-controls { top: 710px; bottom: auto; }
}

@media (max-width: 700px) {
  .page-home .cosmos-projects {
    --project-card-width: 80vw;
    --project-card-height: min(114vw, 570px);
    min-height: calc(var(--project-card-height) + 610px);
    height: calc(var(--project-card-height) + 610px);
  }
  .page-home .cosmos-projects__layout {
    min-height: calc(var(--project-card-height) + 610px);
    height: calc(var(--project-card-height) + 610px);
  }
  .page-home .cosmos-projects__intro { top: 26px; }
  .page-home .cosmos-projects__intro .projects-title {
    font-size: clamp(2.875rem, 13.2vw, 3.625rem);
    line-height: .92;
  }
  .page-home .project-carousel__viewport {
    top: 166px;
    height: var(--project-card-height);
    padding-inline: 10vw;
    scroll-padding-inline: 10vw;
  }
  .page-home .project-carousel__track { gap: 16px; }
  .page-home .project-slide__media { border-radius: 26px; }
  .page-home .project-carousel__controls.projects-controls {
    top: calc(var(--project-card-height) + 184px);
  }
  .page-home .projects-control { width: 56px; height: 56px; flex-basis: 56px; }
  .page-home .project-carousel__count { display: none; }
  .page-home .project-info {
    top: calc(var(--project-card-height) + 266px);
    width: calc(100% - var(--gutter) * 2);
    min-height: 280px;
    padding: 24px 22px;
    border-radius: 26px;
  }
  .page-home .project-info__category { font-size: .94rem; }
  .page-home .project-info__title { margin-top: 10px; font-size: clamp(2.55rem, 12vw, 3.35rem); }
  .page-home .project-info__description { font-size: 1rem; line-height: 1.45; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .project-carousel__viewport { scroll-behavior: auto; }
  .page-home .project-info.is-text-revealing :where(
    .project-info__category,
    .project-info__description,
    .project-info__link,
    .project-info__title .line
  ) { animation: none; }
}

/* ========================================================================== 
   GLOBAL SMALL-TEXT LEGIBILITY
   Georgian glyphs lose their counters quickly at light weights. Keep the
   display typography airy, but make all reading and utility text substantial.
   ========================================================================== */
:root {
  --fs-small: 1rem;
  --fs-micro: .875rem;
  --ink-2: #d9dedc;
  --ink-3: #b6bdbb;
  --ink-on-dark-2: #d9dedc;
  --theme-muted: #d9dedc;
  --theme-faint: #b6bdbb;
  --text-edge-shadow:
    0 0 1px rgba(2, 7, 6, 1),
    0 0 3px rgba(2, 7, 6, .98),
    0 1px 9px rgba(2, 7, 6, .94),
    0 0 18px rgba(2, 7, 6, .72);
  --display-edge-shadow:
    0 1px 2px rgba(2, 7, 6, .98),
    0 0 9px rgba(2, 7, 6, .82),
    0 0 22px rgba(2, 7, 6, .48);
}

body { font-weight: 400; }

:where(
  .t-lead, .t-body, .t-small, .t-micro,
  .card__text, .tile__text, .bento__sub, .bento__link,
  .plain-item p, .person__role, .person__bio,
  .project-card__text, .project-card__meta,
  .field-hint, .check span, .breadcrumbs,
  .faq-item summary, .faq-item__body,
  .footer, .footer__about, .footer__legal, .footer__bottom
) {
  font-weight: 450;
}

.nav-links a,
.cosmos-kicker,
.cosmos-proof,
.project-row__num,
.project-row__tag,
.cosmos-list > div > span,
.project-slide__tag,
.project-carousel__count,
.page-home .project-carousel__count,
.scroller-hint {
  font-size: .875rem;
}

.nav-links a { color: #b8b8bf; font-weight: 500; }
.cosmos-lead { color: #d1d1d6; font-weight: 400; }
.cosmos-proof { color: #aaaab2; font-weight: 400; }
.project-row__num { color: #9d9da5; }
.project-row__body > span:last-child {
  color: #b9b9c0;
  font-size: .9375rem;
  font-weight: 400;
}
.cosmos-list p,
.timeline-ready .cosmos-list p {
  color: #bebec5;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.58;
}
.faq-item__body { color: #c7c7cc; }
.breadcrumbs,
.breadcrumbs a { color: #b1b1b8; }
.footer__col a,
.footer__bottom a,
.footer__about,
.footer__legal,
.footer__bottom { color: #aaaab2; }
.input::placeholder,
.textarea::placeholder { color: #a7a7ae; opacity: 1; }
.project-slide__body > span:last-child {
  color: #d0d0d5;
  font-size: 1rem;
  font-weight: 400;
}
.page-home .project-slide__body > span:last-child,
.page-home .project-info__description {
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
}
.page-home .project-carousel__count { color: rgba(255, 255, 255, .64); }

/* The moving pyramid field must not cut through fine glyph strokes. */
.page-has-atmosphere :where(
  .t-lead, .t-body, .t-small, .t-micro, .breadcrumbs,
  .card__text, .plain-item p, .person__role, .person__bio,
  .project-card__text, .project-card__meta, .faq-item__body,
  .footer__about, .footer__legal, .footer__bottom
),
.page-home :where(
  .cosmos-lead, .cosmos-proof, .project-row__body > span:last-child,
  .cosmos-list p, .faq-item__body
) {
  text-shadow: var(--text-edge-shadow);
}

/* Контраст формируется строго вокруг глифов, а не прямоугольной подложкой.
   Поэтому частицы остаются видимыми между строками, но не дробят буквы. */
.page-has-atmosphere :where(
  .t-display, .t-mega, .t-h1, .t-h2, .t-h3,
  .section-head h1, .section-head h2, .plain-item h3,
  .card__title, .bento__title, .faq-item summary
),
.page-home :where(
  .cosmos-hero h1, .cosmos-content h2, .cosmos-list h3,
  .cosmos-heading h2, .cosmos-contact h2,
  .project-info__title, .project-info__category
) {
  text-shadow: var(--display-edge-shadow);
}

.page-has-atmosphere :where(
  .t-lead, .t-body, .t-small, .t-micro, .breadcrumbs,
  .card__text, .tile__text, .bento__sub, .bento__link,
  .plain-item p, .plain-item__num, .person__role, .person__bio,
  .project-card__text, .project-card__meta,
  .field label, .field-hint, .check span,
  .faq-item__body, .footer__about, .footer__legal, .footer__bottom
),
.page-home :where(
  .cosmos-lead, .cosmos-proof, .cosmos-list p,
  .project-row__body > span:last-child, .project-info__description,
  .project-info__link, .faq-item__body
) {
  text-shadow: var(--text-edge-shadow);
}

.page-has-atmosphere :where(
  .t-lead, .t-body, .t-small, .plain-item p,
  .card__text, .bento__sub, .person__bio,
  .project-card__text, .faq-item__body
) {
  color: #d6dcda;
  font-weight: 450;
}

/* Декоративный field сохраняет плотность и глубину, но его самые светлые
   частицы больше не конкурируют с текстом по яркости. */
.page-has-atmosphere .page-atmosphere { opacity: .48; }
.page-has-atmosphere .page-atmosphere canvas {
  filter: brightness(.9) saturate(.84) contrast(.97);
}

@media (max-width: 700px) {
  .page-has-atmosphere .page-atmosphere { opacity: .36; }
}

/* Compact trilingual control: visible on every page without competing with CTA. */
.nav > .lang {
  flex: none;
  min-height: 38px;
  margin: 0 0 0 12px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav > .lang button {
  min-width: 36px;
  min-height: 30px;
  padding-inline: 7px;
  color: #b8b8bf;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .015em;
}
.nav > .lang button:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav > .lang button[aria-pressed="true"] {
  background: #fff;
  color: #080809;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .26);
}

@media (max-width: 1040px) {
  .nav > .lang { margin: 0 10px 0 auto; align-self: center; }
}

@media (max-width: 440px) {
  .nav > .lang { margin-right: 6px; }
  .nav > .lang button { min-width: 31px; padding-inline: 5px; }
}

/* Первый вход: короткий boot-экран скрывает только реальную подготовку
   атласа, шрифтов и WebGL-сцены. Внутренние переходы его не повторяют. */
html.site-booting { overflow: hidden; }
html.site-booting body > :not(.site-loader) { visibility: hidden; }
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  color: #e9f2ef;
  background:
    radial-gradient(circle at 50% 44%, rgba(56, 186, 120, .12), transparent 31%),
    radial-gradient(circle at 62% 58%, rgba(42, 135, 132, .07), transparent 38%),
    #07100f;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1), visibility .42s;
}
.site-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(198, 220, 213, .26) .7px, transparent .8px);
  background-size: 5px 5px;
  mask-image: radial-gradient(circle at center, #000 12%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at center, #000 12%, transparent 76%);
}
.site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-loader__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 17px;
  width: min(260px, 72vw);
}
.site-loader__logo {
  display: block;
  width: 112px;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(92, 225, 164, .11));
}
.site-loader__label {
  color: rgba(214, 231, 225, .55);
  font: 500 10px/1 var(--font-latin, Arial, sans-serif);
  letter-spacing: .34em;
  text-indent: .34em;
}
.site-loader__track {
  position: relative;
  width: 100%;
  height: 1px;
  overflow: hidden;
  background: rgba(182, 210, 201, .13);
}
.site-loader__track span {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #2a8784, #38ba78 62%, #d7e4e1);
  box-shadow: 0 0 12px rgba(56, 186, 120, .35);
  animation: sais-boot-progress 1.85s cubic-bezier(.18, .72, .2, 1) forwards;
}
@keyframes sais-boot-progress {
  0% { transform: scaleX(0); opacity: .55; }
  70% { transform: scaleX(.82); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Low-tier отличается только внутренней стоимостью рендера; визуальная
   композиция и размеры фигур остаются теми же. */
html[data-performance-tier^="low"] .page-atmosphere { filter: saturate(.96); }

@media (prefers-reduced-motion: reduce) {
  .site-loader { transition-duration: .01ms; }
  .site-loader__track span { animation: none; transform: scaleX(1); }
}

/* ========================================================================== 
   GLASS FOOTER
   The animated pyramid field remains visible through a restrained layer of
   dark green glass, while the text keeps enough contrast on every scene.
   ========================================================================== */
body .footer,
body.page-has-atmosphere > .footer,
body.timeline-ready > .footer.timeline-scene {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(13, 30, 27, .72), rgba(5, 15, 13, .86));
  border-top: 1px solid rgba(190, 255, 226, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 -24px 72px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
}

body .footer::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 130% at 12% 0%, rgba(87, 220, 157, .1), transparent 68%),
    radial-gradient(48% 120% at 88% 100%, rgba(116, 103, 192, .075), transparent 70%);
}

body .footer::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 3%, rgba(211, 255, 236, .2) 50%, transparent 97%);
}

body .footer > .wrap {
  position: relative;
  z-index: 1;
}

body .footer__legal {
  border-top-color: rgba(219, 255, 240, .1);
}

@media (max-width: 700px) {
  body .footer,
  body.page-has-atmosphere > .footer,
  body.timeline-ready > .footer.timeline-scene {
    -webkit-backdrop-filter: blur(14px) saturate(1.12);
    backdrop-filter: blur(14px) saturate(1.12);
  }
}

/* About-page invitation: an actual discovery meeting instead of an empty
   dark rectangle. The photograph itself provides the quiet central field. */
.page-about .cta-band--consultation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(310px, 28vw, 410px);
  padding-inline: clamp(28px, 6vw, 88px);
  color: #fff;
  background-color: #07110f;
  background-image:
    linear-gradient(180deg, rgba(6, 24, 20, .16), rgba(4, 18, 15, .42)),
    url('../../img/about-consultation.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(184, 255, 224, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 24px 70px rgba(0, 0, 0, .16);
}

.page-about .cta-band--consultation > * {
  position: relative;
  z-index: 1;
  text-shadow: var(--text-edge-shadow);
}

.page-about .cta-band--consultation h2 {
  text-shadow: var(--display-edge-shadow);
}

@media (max-width: 700px) {
  .page-about .cta-band--consultation {
    min-height: 360px;
    background-position: 43% center;
  }
}

/* Project identity system ---------------------------------------------------
   Product screenshots had unrelated palettes and densities. Every project now
   uses one purpose-built symbol on the same deep-jade technical stage. */
.page-home .project-slide__media,
.page-projects .bento__shot,
.page-about .project-card__shot {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 44%, rgba(75, 216, 151, .2), transparent 36%),
    radial-gradient(circle at 82% 12%, rgba(126, 93, 224, .1), transparent 30%),
    linear-gradient(150deg, #0d2a24 0%, #081b17 52%, #07110f 100%);
}

/* On the home carousel the same identity stage becomes real glass: every
   colour stop stays translucent, so the moving atmosphere remains visible. */
.page-home .project-slide__media {
  border: 1px solid rgba(205, 255, 233, .15);
  background:
    radial-gradient(circle at 48% 38%, rgba(86, 229, 161, .075), transparent 43%),
    radial-gradient(circle at 88% 8%, rgba(138, 110, 236, .05), transparent 29%),
    linear-gradient(160deg, rgba(13, 30, 27, .78), rgba(5, 15, 13, .9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -1px 0 rgba(100, 234, 174, .045),
    0 26px 80px rgba(0, 0, 0, calc(.14 + var(--card-focus, 0) * .2));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Blur only the three visible cards. Applying it to all 24 cyclic clones
   makes low-power laptops composite far more glass than the user can see. */
.page-home .project-slide.is-active .project-slide__media,
.page-home .project-slide.is-adjacent .project-slide__media {
  -webkit-backdrop-filter: blur(15px) saturate(1.18);
  backdrop-filter: blur(15px) saturate(1.18);
}

.page-home .project-slide.is-active .project-slide__media {
  border-color: rgba(220, 255, 240, .24);
  background:
    radial-gradient(circle at 48% 38%, rgba(94, 239, 171, .09), transparent 44%),
    radial-gradient(circle at 88% 8%, rgba(145, 118, 242, .055), transparent 30%),
    linear-gradient(160deg, rgba(13, 30, 27, .72), rgba(5, 15, 13, .86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(100, 234, 174, .06),
    0 30px 82px rgba(0, 0, 0, .28);
}

.page-home .project-slide__media::before,
.page-projects .bento__shot::before,
.page-about .project-card__shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  opacity: .54;
  background:
    radial-gradient(circle, rgba(190, 255, 224, .16) 0 1px, transparent 1.15px) 0 0 / 10px 10px,
    linear-gradient(125deg, transparent 24%, rgba(121, 240, 184, .055) 25%, transparent 26% 74%, rgba(140, 115, 232, .045) 75%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 82% 76% at 50% 48%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 76% at 50% 48%, #000 38%, transparent 100%);
}

.page-home .project-carousel .project-slide .project-slide__media img.project-identity-icon,
.page-home .project-carousel .project-slide.is-active:hover .project-slide__media img.project-identity-icon,
.page-projects .bento__shot .project-identity-icon,
.page-about .project-card__shot .project-identity-icon {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

.page-home .project-carousel .project-slide .project-slide__media img.project-identity-icon,
.page-home .project-carousel .project-slide.is-active:hover .project-slide__media img.project-identity-icon {
  padding: clamp(38px, 3.2vw, 64px) clamp(22px, 2.1vw, 42px);
  filter:
    brightness(var(--card-brightness, .58))
    saturate(var(--card-saturation, .76))
    contrast(1.03)
    drop-shadow(0 22px 28px rgba(0, 0, 0, .34));
  transform: scale(.98);
  transition: none;
}

.page-projects .bento__shot .project-identity-icon,
.page-about .project-card__shot .project-identity-icon {
  padding: clamp(12px, 1.4vw, 22px) clamp(18px, 1.9vw, 30px);
  filter: saturate(.96) brightness(.94) contrast(1.03) drop-shadow(0 12px 18px rgba(0, 0, 0, .27));
  transform: scale(.96);
  transition: transform 360ms var(--ease), filter 360ms var(--ease);
}

.page-projects .bento__item:hover .bento__shot .project-identity-icon,
.page-about .project-card:hover .project-card__shot .project-identity-icon {
  filter: saturate(1.08) brightness(1.04) contrast(1.03) drop-shadow(0 16px 24px rgba(0, 0, 0, .3));
  transform: translateY(-2px) scale(1.015);
}

@media (max-width: 700px) {
  .page-home .project-carousel .project-slide .project-slide__media img.project-identity-icon,
  .page-home .project-carousel .project-slide.is-active:hover .project-slide__media img.project-identity-icon {
    padding: 34px 18px;
  }

  .page-projects .bento__shot .project-identity-icon,
  .page-about .project-card__shot .project-identity-icon {
    padding: 10px 18px;
  }
}

/* ==========================================================================
   MOBILE PARTICLE STAGE
   Keep the desktop morph choreography, but make it a calm fixed background.
   The old mobile composition rendered a different figure inside every layout
   column, producing cropped shapes and large empty vertical pockets.
   ========================================================================== */
@media (max-width: 700px) {
  .timeline-home.timeline-natural .timeline-particles {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: calc(100svh - var(--header-h));
    margin: 0;
    opacity: .72;
    visibility: visible;
    pointer-events: none;
    contain: strict;
  }

  .timeline-home.timeline-natural .timeline-particles canvas {
    filter: brightness(.9) saturate(.9) contrast(1.02);
  }

  .timeline-home.timeline-natural main,
  .timeline-home.timeline-natural main > section,
  .timeline-home.timeline-natural > .footer {
    position: relative;
    z-index: 2;
  }

  .timeline-home.timeline-natural main > section {
    border-color: transparent;
    background: transparent;
  }

  .timeline-home.timeline-natural .cosmos-hero::after,
  .timeline-home.timeline-natural .cosmos-projects::before {
    display: none;
  }

  .timeline-home.timeline-natural .particle-figure:not(.timeline-particles),
  .timeline-home.timeline-natural .cosmos-visual {
    display: none;
  }

  .timeline-home.timeline-natural .cosmos-hero,
  .timeline-home.timeline-natural .cosmos-hero__layout {
    min-height: calc(100svh - var(--header-h));
  }

  .timeline-home.timeline-natural .cosmos-hero__layout {
    display: grid;
    align-items: center;
  }

  .timeline-home.timeline-natural .cosmos-hero__copy {
    width: 100%;
    max-width: 620px;
    padding-block: clamp(58px, 11svh, 92px) clamp(74px, 14svh, 112px);
  }

  .timeline-home.timeline-natural .cosmos-stage,
  .timeline-home.timeline-natural .cosmos-stage--reverse,
  .timeline-home.timeline-natural .cosmos-contact__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .timeline-home.timeline-natural .cosmos-stage--reverse .cosmos-content {
    order: 1;
  }

  /* Secondary-page hero sculptures stay semantic, but become centered scenery
     instead of a huge right-hand object clipped by the narrow viewport. */
  body.page-has-atmosphere .page-head__figure {
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: .3;
    pointer-events: none;
    transform: none;
    -webkit-mask-image: radial-gradient(ellipse 82% 74% at 64% 50%, #000 0 42%, rgba(0, 0, 0, .72) 67%, transparent 100%);
    mask-image: radial-gradient(ellipse 82% 74% at 64% 50%, #000 0 42%, rgba(0, 0, 0, .72) 67%, transparent 100%);
  }

  body.page-has-atmosphere .page-head__figure canvas {
    filter: brightness(.92) saturate(.88) contrast(1.02);
  }

  body.page-has-atmosphere .page-head__inner {
    position: relative;
    z-index: 2;
    padding-right: 0;
  }

  body.page-has-atmosphere .page-atmosphere {
    opacity: .3;
  }
}

/* ===========================================================================
   COMPACT DESKTOP SCALE
   High-DPI laptops often expose a wide CSS viewport with very little vertical
   room. Scale the complete projects composition from both axes so it keeps the
   desktop silhouette without overflowing shorter screens.
   ========================================================================== */
@media (min-width: 1101px) {
  .page-home {
    --header-h: clamp(68px, 9.5svh, 80px);
  }

  .page-home .nav { min-height: var(--header-h); }
  .page-home .brand-logo {
    height: clamp(25px, min(1.62vw, 3.8svh), 31px);
  }

  .page-home .nav-links {
    gap: clamp(14px, min(1.35vw, 2.65svh), 26px);
  }

  .page-home .nav-links a:not(.nav-cta) {
    min-height: clamp(38px, 5.8svh, 44px);
    font-size: clamp(.86rem, min(.9vw, 2.05svh), 1.06rem);
  }

  .page-home .nav-links a.nav-cta {
    min-height: clamp(46px, 7.1svh, 56px);
    padding-inline: clamp(20px, min(1.5vw, 3.6svh), 28px);
  }

  .page-home .cosmos-projects {
    --project-card-width: clamp(300px, min(20.84vw, 46svh), 400px);
    --project-card-height: clamp(430px, min(29.72vw, 62svh), 570px);
    min-height: max(620px, calc(100svh - var(--header-h)));
    height: max(620px, calc(100svh - var(--header-h)));
  }

  .page-home .cosmos-projects__layout {
    min-height: inherit;
    height: 100%;
  }

  .page-home .cosmos-projects__intro {
    top: clamp(28px, 5.6svh, 52px);
    width: min(390px, 25vw);
    gap: clamp(12px, 2.2svh, 18px);
  }

  .page-home .cosmos-projects__intro .projects-title {
    font-size: clamp(3.1rem, min(4.4vw, 7.8svh), 5.375rem);
  }

  .page-home .project-carousel__viewport {
    top: clamp(72px, 10svh, 95px);
  }

  .page-home .project-slide__media { border-radius: clamp(28px, 3.8svh, 36px); }

  .page-home .project-info {
    top: clamp(118px, 18svh, 158px);
    min-height: clamp(285px, 43svh, 390px);
    grid-template-rows: auto minmax(96px, auto) minmax(70px, auto) auto;
    padding: clamp(24px, 3.8svh, 34px);
  }

  .page-home .project-info__category {
    font-size: clamp(.9rem, min(.94vw, 2.2svh), 1.125rem);
  }

  .page-home .project-info__title {
    margin-top: clamp(10px, 2svh, 16px);
    font-size: clamp(2.7rem, min(3.34vw, 6.2svh), 4rem);
  }

  .page-home .project-info__description {
    margin-top: clamp(14px, 2.6svh, 22px);
    font-size: clamp(1rem, min(1.04vw, 2.45svh), 1.25rem);
  }

  .page-home .project-info__link { margin-top: clamp(14px, 2.6svh, 22px); }

  .page-home .projects-control {
    width: clamp(48px, 7svh, 64px);
    height: clamp(48px, 7svh, 64px);
    flex-basis: clamp(48px, 7svh, 64px);
  }

  .page-home .project-carousel__controls.projects-controls {
    bottom: clamp(14px, 2.8svh, 22px);
  }
}