/* ── Design tokens ──────────────────────────────────────────── */
    :root {
      --brand:        #16a34a;
      --brand-soft:   color-mix(in srgb, var(--brand) 12%, transparent);
      --brand-fade:   color-mix(in srgb, var(--brand)  6%, transparent);
      --brand-strong: color-mix(in srgb, var(--brand) 75%, #000);

      /* Typography — English defaults */
      --base-font-size:  16px;
      --heading-scale:   1;
      --heading-lh:      1.2;
      --heading-ls:     -0.02em;
      --body-lh:         1.65;
      --body-ls:         0em;

      /* Font families — overridden from settings via JS */
      --font-en: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --font-ka: 'Noto Sans Georgian', 'Inter', ui-sans-serif, system-ui, sans-serif;
    }

    /* ── Georgian overrides ── */
    html[lang="ka"] {
      --heading-lh:   1.55;
      --heading-ls:   0.01em;
      --body-lh:      1.9;
      --body-ls:      0.015em;
    }

    /* ── Root font / family ── */
    html, body, .font-sans {
    font-size: var(--base-font-size);
    font-family: var(--font-en) !important;
    }

    html[lang="ka"],
    html[lang="ka"] body,
    html[lang="ka"] .font-sans,
    html[lang="ka"] input,
    html[lang="ka"] textarea,
    html[lang="ka"] button,
    html[lang="ka"] select,
    html[lang="ka"] h1, html[lang="ka"] h2, html[lang="ka"] h3, html[lang="ka"] p, html[lang="ka"] a, html[lang="ka"] span {
    font-family: var(--font-ka) !important;
    }

    /* ── Typography variables ── */
    h1, h2, h3, h4, h5, h6 {
      line-height:     var(--heading-lh)  !important;
      letter-spacing:  var(--heading-ls)  !important;
      font-size:       calc(var(--heading-scale) * 1em) !important;
    }
    p, li, td, th, label, span.body-text {
      line-height:    var(--body-lh)   !important;
      letter-spacing: var(--body-ls)   !important;
    }

    /* ── Theme utilities ── */
    .bg-brand        { background-color: var(--brand); }
    .bg-brand:hover  { background-color: var(--brand-strong); }
    .bg-brand-soft   { background-color: var(--brand-soft); }
    .bg-brand-fade   { background-color: var(--brand-fade); }
    .text-brand      { color: var(--brand); }
    .border-brand    { border-color: var(--brand); }
    .ring-brand      { --tw-ring-color: var(--brand); }
    .from-brand      { --tw-gradient-from: var(--brand); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

    /* ── Hero background ── */
    .hero-bg {
      background-color: #0B1120;
      border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    }
    .hero-grid {
      background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    
    /* ... existing styles ... */

    /* ── New subtle background grid ────────────────────────────────────────────── */
    #app {
      position: relative; /* establishes stack context for the pseudo-element */
    }

    #app::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Path to your faded grid image (PNG or SVG recommended) */
      background-image: url('../images/bg-grid.webp');
      background-repeat: repeat;
      background-size: 1254px 1254px; /* RECOMMENDED: adjusts scale. change as needed */
      /* Make it subtle & faded. Adjust between 0.05 (5%) and 0.15 (15%) for perfect subtlety against dark background. */
      opacity: 0.35;
      z-index: -1; /* places it behind content */
      pointer-events: none; /* ensures decorative overlay doesn't block clicks */
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #060b14; }
    ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 45%, #000); border-radius: 3px; }

    /* Cards */
    .card-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
    .card-lift:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      border-color: var(--brand-soft);
    }

    /* Nav link underline */
    .nav-link { position: relative; padding-bottom: 4px; }
    .nav-link::after {
      content: ''; position: absolute; left: 0; bottom: 0;
      width: 0; height: 2px; background: var(--brand); transition: width .25s ease;
    }
    .nav-link:hover::after, .nav-link.is-active::after { width: 100%; }
    .nav-link.is-active { color: white; }

    /* Skeleton */
    .skel {
      background: linear-gradient(90deg, #1e293b 25%, #28394f 50%, #1e293b 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: .75rem;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* View transitions */
    .view-enter { animation: viewIn .35s ease both; }
    @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

    /* Toast */
    #toast { transition: opacity .35s ease, transform .35s ease; }
    #toast.hidden-toast { opacity: 0; transform: translateY(1rem); pointer-events: none; }

    /* Lang toggle */
    .lang-pill {
      position: relative;
      display: inline-flex;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 9999px;
      padding: 3px;
    }
    .lang-pill button {
      position: relative;
      z-index: 2;
      padding: 4px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      color: #cbd5e1;
      border-radius: 9999px;
      transition: color .2s ease;
    }
    .lang-pill button.is-active { color: white; }
    .lang-pill .pill-thumb {
      position: absolute;
      z-index: 1;
      top: 3px; bottom: 3px;
      left: 3px;
      width: calc(50% - 3px);
      background: var(--brand);
      border-radius: 9999px;
      transition: transform .25s cubic-bezier(.4,0,.2,1);
    }
    .lang-pill[data-lang="ka"] .pill-thumb { transform: translateX(100%); }

    /* Mobile menu animation */
    #mobile-menu { transform-origin: top; transition: max-height .3s ease, opacity .25s ease; }
    #mobile-menu.is-closed { max-height: 0; opacity: 0; overflow: hidden; }
    #mobile-menu.is-open   { max-height: 600px; opacity: 1; }

    /* Blog card image */
    .blog-card-img {
      aspect-ratio: 16/9;
      overflow: hidden;
      background: #1e293b;
    }
    .blog-card-img img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform .4s ease;
    }
    .card-lift:hover .blog-card-img img { transform: scale(1.04); }

    /* ── Product page: requirements spec block ──────────────────────
       The two-column look is AUTHORED, not parsed. The owner marks the
       label with <strong> (already in the CMS whitelist) and this lays it
       out. Nothing splits a string and nothing reads meaning back out of
       our own rendered HTML — that seam is why this is not a repeater.

       A REAL TWO-COLUMN GRID (2026-08-18, owner-measured on the live page):
       the inline-block + min-width version let a WRAPPED value start its
       second line under the label, so the columns ran into each other —
       worse in Georgian, whose labels are longer. Now each <li> is a grid:
       the <strong> is the first item, the text run after it is an anonymous
       item in the second column, so a wrapped value aligns under the value
       and there is a hard boundary. Columns align across rows because the
       label column is a FIXED width, not content-derived — no subgrid.

       17rem is MEASURED, not chosen: the widest plausible Georgian label
       ("პროგრამული უზრუნველყოფა", Noto Sans Georgian 600 at this block's
       15.2px) is 248px; the common ones ("დამატებითი მოთხოვნები",
       "მხარდაჭერილი ვერსიები") 215px; English tops out at 168px. 17rem =
       272px at the 16px root, 24px of headroom, in rem so it follows the CMS
       base font. A label wider than that wraps INSIDE its own column, which
       is correct — better than pushing the value. The candidate list was
       non-exhaustive; production labels are the owner's to compare. */
    .grg-spec ul { list-style: none; margin: 0; padding: 0; }
    .grg-spec li {
      display: grid;
      grid-template-columns: 17rem minmax(0, 1fr);
      column-gap: 1rem;
      padding: .6rem 0;
      border-bottom: 1px solid #16223a;
      font-size: .95rem;
      color: #e2e8f0;
    }
    .grg-spec li:last-child { border-bottom: 0; }
    .grg-spec li > strong {
      color: #94a3b8;
      font-weight: 600;
    }
    /* Anything ELSE inside the value (a link, a second <strong>) stays in the
       value column rather than becoming a third grid item on a new row. */
    .grg-spec li > :not(:first-child) { grid-column: 2; }
    /* A plain bullet with no leading label is not a two-column row. */
    .grg-spec li:not(:has(> strong:first-child)) { display: block; }
    @media (max-width: 640px) {
      /* On a phone: label above value, one column. */
      .grg-spec li { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; }
      .grg-spec li > :not(:first-child) { grid-column: 1; }
    }

    /* ── Product page: FAQ disclosure ───────────────────────────────
       NEVER set `display: inline` on a <summary>. Measured 2026-08-17: it
       silently disables the whole disclosure — the content laid out at
       165px with open === false while the source read perfectly. The
       element keeps its default display:list-item here; only the MARKER is
       replaced, which is the safe pattern and is verified in a real
       browser rather than asserted from this comment.

       HANGING INDENT (2026-08-18, owner-measured on the live page): a
       question that wraps used to start its second line under the marker.
       The marker is now absolutely positioned in a gutter and the summary
       carries the padding, so every line — first and wrapped — starts at
       the same x. `display` on the summary is DELIBERATELY NOT TOUCHED. */
    .grg-faq > summary { list-style: none; position: relative; padding-left: 1.5rem; }
    .grg-faq > summary::-webkit-details-marker { display: none; }
    .grg-faq > summary::before {
      content: "+";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--brand);
      font-weight: 800;
    }
    .grg-faq[open] > summary::before { content: "\2013"; }