/* ═══════════════════════════════════════════════════════════════════
   refine.css v2 — რედაქციული / თბილი ქაღალდი
   ───────────────────────────────────────────────────────────────────
   საფუძველი: გაზომილი რეფერენსები (2026-08)
     · Telnyx   — თბილი კრემი #FEFDF5, სუფთა შავი, h1 72px/800, pill
     · Twilio   — h1 48px/700, letter-spacing −1.44px (−.03em), pill
     · Plivo    — ნეიტრალური #0A0C0F, h1 −.04em tracking, მონოქრომი
     · sais.ge  — მშობელი ბრენდი: --paper #fbfbf7, სერიფ სათაურები
   პრინციპი: მონოქრომი + თბილი ქაღალდი. ფერი — მინიმუმამდე.
   ღილაკი შავია, არა ფერადი. „AI-ტეალი" აღარსად ანათებს.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* ── ბაზა: თბილი ქაღალდი + მელანი ── */
    --paper:   #FBFAF6;
    --white:   #FFFFFF;
    --ink:     #14161A;
    --text:    #14161A;
    --muted:   #5A6068;
    --line:    rgba(20, 22, 26, .10);
    --hair:    rgba(20, 22, 26, .085);

    /* ── აქცენტი: ღრმა, გაუჯერებელი — არა კაშკაშა ── */
    --brand:   #14161A;          /* მოქმედება = მელანი, არა ფერი */
    --brand-d: #000000;
    --accent:  #1F5C4A;          /* ღრმა ტყისფერი — მხოლოდ წვრილი ნიშნები */
    --amber:   #A8792B;          /* დაწყნარებული ქარვა — მხოლოდ სტატუსზე */

    /* ── მუქ ზედაპირზე ── */
    --on-ink:       #F4F3EF;
    --on-ink-muted: #A5A9A6;
    --on-ink-line:  rgba(255, 255, 255, .13);
    --on-ink-err:   #E9A79F;

    --r-btn:  999px;             /* pill — Twilio/Telnyx-ის სტანდარტი */
    --r-card: 14px;
    --shadow-sm: none;
    --shadow:    none;
    --shadow-lg: 0 24px 60px rgba(20, 22, 26, .10);
}

body { background: var(--paper); }
::selection { background: var(--ink); color: var(--paper); }

/* ═══ 1. ტიპოგრაფია — მთავარი ბერკეტი ═══════════════════════════ */
h1, h2, h3, .section-h, .hero-h1, .plan-name, .box-h, .card-h, .flow-h {
    letter-spacing: -.028em;
}
.hero-h1 {
    font-size: clamp(38px, 7vw, 74px);
    line-height: 1.04;
    letter-spacing: -.035em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: var(--s3);
    text-wrap: balance;
}
.hero-lead {
    font-size: clamp(16px, 1.65vw, 19px);
    line-height: 1.65;
    color: var(--muted);
    max-width: 52ch;
    letter-spacing: -.005em;
}
.section-h {
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.1;
    letter-spacing: -.032em;
    margin-bottom: var(--s2);
    text-wrap: balance;
}
.section-lead { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: var(--s6); max-width: 58ch; }

/* პატარა ეტიკეტი — ფართო tracking, versal */
.eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--s3);
}
body { counter-reset: sec; }
.section { counter-increment: sec; }
.eyebrow::before {
    content: counter(sec, decimal-leading-zero);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--ink); opacity: .32;
}
.section-dark .eyebrow { color: var(--on-ink-muted); }
.section-dark .eyebrow::before { color: var(--on-ink); opacity: .4; }

/* ═══ 2. ჰერო — ღია, ჰაეროვანი, ცენტრში ტიპოგრაფია ══════════════ */
.hero {
    background: var(--paper);          /* ტეალის radial gradient მოიხსნა */
    color: var(--text);
    border-bottom: 1px solid var(--hair);
    padding-top: clamp(56px, 9vw, 116px);
    padding-bottom: clamp(48px, 7vw, 88px);
    position: relative;
    overflow: hidden;
}
.hero::before, .hero::after { content: none; }

.hero .badge {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 600; font-size: 12.5px;
    letter-spacing: -.005em;
    border-radius: 999px;
    padding: 7px 15px;
}
.hero .badge-dot { background: var(--amber); box-shadow: none; }

/* ღილაკები — მელანი და მოხაზული, არა ფერადი */
.btn { border-radius: var(--r-btn); font-weight: 600; letter-spacing: -.01em; transition: background .18s, color .18s, border-color .18s; }
.btn-primary { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); box-shadow: none; }
.btn-primary:hover { background: #000; color: var(--white); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn-lg { padding: 14px 28px; font-size: 15.5px; }

/* ჰერო-ბარათი — სუფთა ფურცელი ჰეარლაინით */
.hero-mock {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(20, 22, 26, .08);
    padding: 20px;
}
.hero-mock::before { content: none; }
.hm-chip { background: transparent; border-color: var(--line); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; }
.hm-dot { background: var(--accent); }
.hm-msg { background: var(--paper); border-color: var(--hair); }
.hm-bar { background: var(--hair); }
.hm-bar span { background: var(--ink); }
.hm-li { background: transparent; border-color: var(--hair); }
.hm-li b { font-family: 'Noto Serif Georgian', Georgia, serif; font-size: 16px; letter-spacing: -.02em; }
.hm-ok i  { background: var(--ink); }
.hm-snt i { background: var(--muted); }
.hm-rej i { background: var(--amber); }
.hm-note { color: var(--muted); opacity: .75; }

/* ═══ 3. ფაქტები — ჰეარლაინის ცხრილი ════════════════════════════ */
.hero .facts { border-top: 1px solid var(--hair); margin-top: clamp(40px, 6vw, 76px); padding-top: var(--s4); gap: 0; }
.hero .stat { padding: 2px var(--s3) 2px 0; position: relative; }
@media (min-width: 900px) {
    .hero .stat { padding-inline: var(--s3); }
    .hero .stat:first-child { padding-inline-start: 0; }
    .hero .stat + .stat::before {
        content: ''; position: absolute; inset-inline-start: 0; top: 2px; bottom: 2px;
        width: 1px; background: var(--hair);
    }
}
.stat-value {
    font-family: 'Noto Serif Georgian', Georgia, serif;
    font-size: clamp(21px, 2.3vw, 28px);
    letter-spacing: -.03em;
    color: var(--ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* ═══ 4. სექციები — სივრცე და ჰეარლაინი, არა ფერადი ბლოკები ═════ */
.section { padding: clamp(56px, 8vw, 116px) 0; background: var(--paper); }
.section-alt { background: var(--white); border-block: 1px solid var(--hair); }
.section-dark { background: var(--ink); color: var(--on-ink); }
.section-dark::before { content: none; }        /* ბადე მოიხსნა */
.section-dark h2, .section-dark h3 { color: var(--white); }

/* ═══ 5. ბარათები — ფურცელი, არა ყუთი ═══════════════════════════ */
.card, .card-sm {
    background: var(--white);
    border: 1px solid var(--hair);
    border-radius: var(--r-card);
    box-shadow: none;
    transition: border-color .2s, transform .2s;
}
.card::after { content: none; }
.card:hover, #platform .card:hover { transform: none; border-color: var(--line); box-shadow: none; }
.section-alt .card, .section-alt .card-sm { background: var(--paper); }
.card-ico {
    background: transparent;
    border: 1px solid var(--hair);
    color: var(--ink);
    border-radius: 10px;
}
.card-h { font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }
.card-t { color: var(--muted); line-height: 1.6; }
.section-dark .card { background: rgba(255, 255, 255, .04); border-color: var(--on-ink-line); }
.section-dark .card-ico { border-color: var(--on-ink-line); color: var(--on-ink); }

/* ═══ 6. ნაკადი — დანომრილი, თავშეკავებული ══════════════════════ */
.flow-step { background: var(--white); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 24px; }
.section-alt .flow-step { background: var(--paper); }
.flow-step:hover { border-color: var(--line); box-shadow: none; }
.flow-n {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Noto Serif Georgian', Georgia, serif;
    font-size: 14px; letter-spacing: -.02em;
    width: 40px; height: 40px; border-radius: 999px;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}
.flow-h { font-size: 16.5px; line-height: 1.35; }
.flow-t { color: var(--muted); line-height: 1.6; }
@media (min-width: 768px) { .flow-step::after { background: var(--hair); height: 1px; top: 44px; } }

/* ═══ 7. სქემა (მუქი) — ბრტყელი, სუფთა ══════════════════════════ */
.diagram { background: rgba(255, 255, 255, .03); border-color: var(--on-ink-line); border-radius: var(--r-card); }
.dg-title { fill: var(--on-ink); }
.dg-inner rect { fill: rgba(255, 255, 255, .07); stroke: var(--on-ink-line); }
.notes li { border-top-color: var(--on-ink-line); color: var(--on-ink-muted); }
.notes li .ic { color: var(--on-ink); }
.dgm-step.is-core { background: rgba(255, 255, 255, .08); border-color: var(--on-ink-line); }
.dgm-back, .dgm-back em { color: var(--on-ink-muted); }

/* ═══ 8. კატეგორიები / გათიშვა ══════════════════════════════════ */
.cat { border-left-width: 2px; border-left-color: var(--line); }
.cat-transactional { border-left-color: var(--ink); }
.cat-transactional .cat-tag { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.cat-informational { border-left-color: var(--muted); }
.cat-informational .cat-tag { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.cat-marketing { border-left-color: var(--amber); }
.cat-marketing .cat-tag { background: transparent; border: 1px solid rgba(168, 121, 43, .4); color: var(--amber); }
.cat-tag { border-radius: 999px; font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.optout-box, .geo { background: var(--white); border-color: var(--hair); }
.section-alt .optout-box, .section-alt .geo { background: var(--paper); }
.geo-flag { background: transparent; border: 1px solid var(--line); color: var(--ink); border-radius: 14px; }
.box-h { font-size: 18px; }
.box-h .ic { color: var(--ink); }
.highlight-item { background: transparent; border: 1px solid var(--line); border-radius: 14px; }
.highlight-item strong { font-size: 24px; color: var(--ink); letter-spacing: -.03em; }
.chip { background: var(--white); border-color: var(--hair); }
.note-line { border-left-color: var(--line); }

/* ═══ 9. ფასები ════════════════════════════════════════════════ */
.plan { background: var(--white); border-color: var(--hair); border-radius: var(--r-card); }
.section-alt .plan { background: var(--paper); }
.plan.is-featured { border-color: var(--ink); box-shadow: var(--shadow-lg); }
.plan-flag { background: var(--ink); color: var(--paper); box-shadow: none; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.plan-name { font-size: 22px; letter-spacing: -.03em; }
.plan-num { font-size: clamp(36px, 4vw, 46px); letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-soon { color: var(--muted); font-size: 18px; }
.plan-price { border-bottom-color: var(--hair); }
.plan-cta.btn-ghost { border-color: var(--line); }

/* ═══ 10. FAQ ══════════════════════════════════════════════════ */
.faq-item { background: var(--white); border-color: var(--hair); border-radius: 12px; }
.section-alt .faq-item { background: var(--paper); }
.faq-item.is-open { border-color: var(--line); }
.faq-q { font-size: 16.5px; letter-spacing: -.02em; }
.faq-q:hover { color: var(--ink); }
.faq-item.is-open .faq-ic { color: var(--ink); }
.faq-a p { color: var(--muted); line-height: 1.7; }

/* ═══ 11. კონტაქტი ═════════════════════════════════════════════ */
.contact-side { background: rgba(255, 255, 255, .04); border-color: var(--on-ink-line); border-radius: var(--r-card); }
.req-list .ic { color: var(--on-ink); }
.field input, .field select, .field textarea { border-radius: 10px; }
.section-dark .field input:focus,
.section-dark .field select:focus,
.section-dark .field textarea:focus {
    border-color: var(--on-ink);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .12);
}
.section-dark .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.section-dark .btn-primary:hover { background: var(--white); color: #000; }

/* ═══ 12. ჰედერი / ფუტერი ══════════════════════════════════════ */
.site-header { background: rgba(251, 250, 246, .82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { border-bottom-color: var(--hair); box-shadow: none; }
.brand-text { letter-spacing: -.03em; font-size: 17px; }
.brand-mark { color: var(--ink); }
.nav-list a { color: var(--muted); font-weight: 500; }
.nav-list a:hover { color: var(--ink); background: transparent; text-decoration: none; }
.nav-cta.btn-primary { padding: 10px 20px; font-size: 14px; }
.site-footer { background: var(--ink); }
.site-footer::before { content: none; }
.footer-h { color: var(--on-ink); letter-spacing: .14em; font-size: 11.5px; }
.footer-list li a { color: var(--on-ink-muted); }
.footer-list li a:hover { color: var(--white); }

/* ═══ 13. მობილური ═════════════════════════════════════════════ */
@media (max-width: 767px) {
    .hero .facts { grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); }
    .hero .stat { padding-inline: 0; }
    .eyebrow { font-size: 11px; letter-spacing: .14em; }
    .btn-lg { padding: 13px 24px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .card, .btn, .flow-step { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 — სტრუქტურა (განლაგება, არა ფერი)
   ───────────────────────────────────────────────────────────────────
   პრობლემა: ფერი შეიცვალა, კონცეფცია — არა. ერთნაირი ბარათების ბადე
   ყველა სექციაში = შაბლონი. რეფერენსებში (Telnyx/Stripe/Linear) ასე არაა:
     · სექციის სათაური ასიმეტრიულია — დასახელება მარცხნივ, აღწერა მარჯვნივ
     · ჩამონათვალი = ჰეარლაინის რიგები, არა ყუთების ბადე
     · პროცესი = ვერტიკალური რელსი, არა 6 თანაბარი კვადრატი
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. ასიმეტრიული სექციის თავსართი ────────────────────────────── */
@media (min-width: 1024px) {
    .section > .container {
        display: grid;
        grid-template-columns: minmax(0, 6.5fr) minmax(0, 5.5fr);
        column-gap: clamp(40px, 5vw, 88px);
        align-items: end;
    }
    .section > .container > .eyebrow     { grid-column: 1; grid-row: 1; margin-bottom: var(--s2); }
    .section > .container > .section-h   { grid-column: 1; grid-row: 2; margin-bottom: 0; }
    .section > .container > .section-lead{ grid-column: 2; grid-row: 2; margin-bottom: 0; padding-bottom: 6px; max-width: none; }
    /* დანარჩენი შიგთავსი — სრულ სიგანეზე, სათაურის ქვემოთ */
    .section > .container > *:not(.eyebrow):not(.section-h):not(.section-lead) {
        grid-column: 1 / -1;
        margin-top: clamp(40px, 5vw, 72px);
    }
    /* სათაურის ქვეშ თხელი ხაზი — რედაქციული გამყოფი */
    .section > .container::after {
        content: ''; grid-column: 1 / -1; grid-row: 3;
        height: 1px; background: var(--hair); margin-top: clamp(28px, 3.5vw, 48px);
    }
    .section-dark > .container::after { background: var(--on-ink-line); }
}

/* ── 2. კომპონენტები: ყუთების ბადე → ჰეარლაინის რიგები ─────────── */
@media (min-width: 768px) {
    #platform .grid, #security .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 clamp(32px, 4vw, 64px);
        border-top: 1px solid var(--hair);
    }
    #platform .card, #security .card, #security .card-sm {
        background: transparent !important;
        border: 0; border-bottom: 1px solid var(--hair);
        border-radius: 0;
        padding: clamp(22px, 2.4vw, 30px) 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 18px;
        height: auto;
    }
    #platform .card:hover, #security .card:hover { transform: none; border-color: var(--hair); }
    #platform .card-ico, #security .card-ico {
        grid-row: 1 / 3; grid-column: 1;
        width: 38px; height: 38px; margin: 0;
        border: 0; color: var(--muted);
        display: inline-flex; align-items: flex-start; justify-content: center;
    }
    #platform .card-h, #security .card-h { grid-column: 2; margin-bottom: 6px; }
    #platform .card-t, #security .card-t { grid-column: 2; margin: 0; }
}

/* ── 3. პროცესი: 6 ყუთი → ვერტიკალური რელსი ────────────────────── */
@media (min-width: 768px) {
    #how .flow {
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--hair);
    }
    #how .flow-step {
        background: transparent !important;
        border: 0; border-bottom: 1px solid var(--hair);
        border-radius: 0;
        padding: clamp(22px, 2.6vw, 32px) 0;
        display: grid;
        grid-template-columns: 64px minmax(0, 4fr) minmax(0, 6fr);
        column-gap: clamp(20px, 3vw, 44px);
        align-items: baseline;
        gap: 0 clamp(20px, 3vw, 44px);
    }
    #how .flow-step::after { display: none; }
    #how .flow-step:hover { border-color: var(--hair); }
    #how .flow-n {
        border: 0; width: auto; height: auto; border-radius: 0;
        font-size: 13px; color: var(--muted);
        letter-spacing: .08em; justify-content: flex-start;
        padding-top: 3px;
    }
    #how .flow-body { display: contents; }
    #how .flow-h { margin: 0; font-size: clamp(17px, 1.8vw, 21px); letter-spacing: -.025em; }
    #how .flow-t { margin: 0; }
}

/* ── 4. კატეგორიები: ბარათები → რიგები ──────────────────────────── */
@media (min-width: 768px) {
    #optout .grid { gap: 0; border-top: 1px solid var(--hair); grid-template-columns: 1fr; }
    #optout .cat {
        background: transparent !important;
        border: 0; border-bottom: 1px solid var(--hair);
        border-left: 0; border-radius: 0;
        padding: clamp(22px, 2.4vw, 30px) 0;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
        column-gap: clamp(24px, 3vw, 56px);
        align-items: baseline;
    }
    #optout .cat-tag { margin: 0; align-self: start; }
    #optout .cat > *:not(.cat-tag) { grid-column: 2; }
}

/* ── 5. FAQ: ყუთები → სრულსიგანიანი რიგები ──────────────────────── */
.faq { gap: 0; border-top: 1px solid var(--hair); }
.faq-item {
    background: transparent !important;
    border: 0; border-bottom: 1px solid var(--hair);
    border-radius: 0;
}
.faq-q { padding: clamp(18px, 2vw, 26px) 0; font-size: clamp(16px, 1.7vw, 19px); }
.faq-a { padding: 0 0 clamp(18px, 2vw, 24px); max-width: 68ch; }

/* ── 6. ფასები: სვეტები ერთ ხაზზე, ჰეარლაინით ──────────────────── */
@media (min-width: 900px) {
    .plans { gap: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
    .plan {
        background: transparent !important;
        border: 0; border-radius: 0;
        border-inline-end: 1px solid var(--hair);
        padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
        box-shadow: none;
    }
    .plan:last-child { border-inline-end: 0; }
    .plan.is-featured { background: var(--white) !important; box-shadow: none; }
    .section-alt .plan.is-featured { background: var(--paper) !important; }
    .plan-flag { top: 14px; left: auto; inset-inline-end: 18px; transform: none; }
}

/* ── 7. გათიშვის ბლოკები + უსაფრთხოება ─────────────────────────── */
.optout-box { background: transparent !important; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: var(--s3) 0 0; }
.geo { background: transparent !important; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: var(--s3) 0 0; }

/* ── 8. მობილური: სტრუქტურა მარტივი რჩება ──────────────────────── */
@media (max-width: 767px) {
    #platform .card, #security .card, #how .flow-step, #optout .cat {
        background: transparent !important;
        border: 0; border-bottom: 1px solid var(--hair);
        border-radius: 0; padding: 20px 0;
    }
    #platform .grid, #security .grid, #how .flow, #optout .grid {
        gap: 0; border-top: 1px solid var(--hair);
    }
    #how .flow-step::after { display: none; }
    .section-lead { margin-bottom: var(--s4); }
}