/* ── 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); }