/* =========================================================================
   Doctra — Website Mockup Design System
   Brand derived from current doctra.ge:  cyan #1CB2D4  ·  navy #2A4D63
   Modernized into a full palette below. Plain, dependency-free CSS — opens
   straight from file:// with no build step or framework.
   ========================================================================= */

:root {
  /* Brand teal scale */
  --brand-50:  #ecfdff;
  --brand-100: #d2f6fc;
  --brand-200: #abecf8;
  --brand-300: #6fdcf0;
  --brand-400: #2ec3e0;
  --brand-500: #1cb2d4;   /* signature doctra cyan */
  --brand-600: #0e93b5;
  --brand-700: #0e7591;
  --brand-800: #135f76;
  --brand-900: #134f63;
  --brand-950: #0a3645;

  /* Ink / navy (headings, dark sections) */
  --ink-900: #0f2b3d;
  --ink-800: #14344a;
  --ink-700: #1d4459;
  --ink-600: #2a4d63;     /* original doctra navy */

  /* Neutral slate */
  --slate-50:  #f6f9fb;
  --slate-100: #eef3f6;
  --slate-200: #e1e8ee;
  --slate-300: #cbd6df;
  --slate-400: #94a6b4;
  --slate-500: #64798a;
  --slate-600: #4a5f70;
  --slate-700: #34485a;

  --accent: #ff7a59;       /* warm coral, used very sparingly */
  --success: #18b58a;

  --bg: #ffffff;
  --bg-tint: #f3fbfd;      /* faint teal section bg */
  --bg-soft: #f6f9fb;

  --ring: rgba(28,178,212,.35);
  --shadow-sm: 0 1px 2px rgba(15,43,61,.06), 0 1px 3px rgba(15,43,61,.07);
  --shadow-md: 0 6px 18px rgba(15,43,61,.08), 0 2px 6px rgba(15,43,61,.06);
  --shadow-lg: 0 24px 60px -20px rgba(14,52,74,.30), 0 8px 24px rgba(14,52,74,.10);
  --shadow-brand: 0 14px 40px -12px rgba(28,178,212,.55);

  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }

/* overflow-x: clip kills horizontal scroll from off-canvas decorative blobs
   without creating a scroll container (so the sticky header keeps working). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }

/* Visible keyboard focus for every interactive element (forms set their own ring) */
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }

/* Skip-to-content link (first focusable element, injected in the header partial) */
.skip-link {
  position: fixed; left: 12px; top: -64px; z-index: 200;
  background: var(--brand-700); color: #fff; padding: 11px 18px; border-radius: 10px;
  font-weight: 700; box-shadow: var(--shadow-md); transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

body {
  margin: 0;
  font-family: "Noto Sans Georgian", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink-800);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4 { color: var(--ink-900); line-height: 1.12; letter-spacing: -0.015em; margin: 0; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section-sm { padding-block: clamp(40px, 6vw, 72px); }
.tint { background: var(--bg-tint); }
.soft { background: var(--bg-soft); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--slate-600); line-height: 1.6; }
.measure { max-width: 720px; }
.measure-sm { max-width: 560px; }

/* ---- Eyebrow / badges ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-50);
  border: 1px solid var(--brand-200);
  padding: 6px 14px; border-radius: 999px;
}
.eyebrow svg { width: 15px; height: 15px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--slate-600);
  background: #fff; border: 1px solid var(--slate-200);
  padding: 5px 12px; border-radius: 999px;
}

/* ---- Buttons ---- */
.btn {
  --b: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 14px 24px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand-600); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-2px); }
.btn-outline { background: #fff; color: var(--ink-800); border-color: var(--slate-200); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--brand-300); color: var(--brand-700); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink-800); }
.btn-ghost:hover { color: var(--brand-700); }
.btn-white { background:#fff; color: var(--brand-700); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-lg { padding: 17px 30px; font-size: 1.05rem; border-radius: 14px; }
.btn-block { width: 100%; }

/* ---- Cards ---- */
.card {
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease, border-color .2s;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-200); }
.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Feature icon tile */
.icon-tile {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-100), var(--brand-50));
  color: var(--brand-700); border: 1px solid var(--brand-200); margin-bottom: 18px;
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile.solid { background: linear-gradient(140deg, var(--brand-500), var(--brand-700)); color:#fff; border:none; }

/* ---- Gradient / decorative ---- */
.text-gradient {
  background: linear-gradient(100deg, var(--brand-600), var(--brand-400) 60%, var(--brand-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0; pointer-events: none; }

/* =========================================================================
   Header / nav
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(225,232,238,.55);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.9);
  border-bottom-color: var(--slate-200);
  box-shadow: 0 1px 0 rgba(15,43,61,.03), 0 10px 34px -16px rgba(14,52,74,.22);
}

/* Real Doctra logo — dark variant in the light header, white variant in the dark footer */
.brand-logo { height: 31px; width: auto; max-width: none; flex: none; display: block; transition: transform .2s ease, opacity .2s ease; }
/* Full-bleed header: logo pinned far left, actions far right (override the
   1200px .container constraint that otherwise centers the bar on wide screens). */
.nav { display: flex; align-items: center; gap: 14px; height: 76px; max-width: none; padding-inline: clamp(20px, 3vw, 48px); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav-link {
  position: relative; font-weight: 600; font-size: 1rem; color: var(--slate-600);
  padding: 8px 8px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: color .18s ease;
}
/* Animated underline indicator (hover + active) */
.nav-link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
  border-radius: 2px; transform: scaleX(0); transform-origin: center; opacity: 0;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), opacity .18s ease;
}
.nav-link:hover { color: var(--brand-700); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); opacity: 1; }
.nav-link.active { color: var(--ink-900); }
.nav-link svg { width: 13px; height: 13px; opacity: .65; transition: transform .2s ease; }
/* Rotate the Products chevron while the mega-menu is open */
.has-menu:hover .menu-trigger svg,
.has-menu.menu-open .menu-trigger svg { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
/* Subtle divider between the utility toggles and the primary CTA */
.nav-actions .nav-divider { width: 1px; height: 22px; background: var(--slate-200); flex: none; margin-inline: 2px; }
.nav-actions .btn.always { padding: 9px 14px; font-size: .9rem; }
.nav-actions .lang-toggle button { padding-inline: 7px; }

/* Brand wordmark */
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.35rem; color: var(--ink-900); letter-spacing: -.02em; }
.brand:hover .brand-logo { transform: scale(1.04); opacity: .9; }

/* Dropdown (mega menu) */
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 9px); left: 0; transform: translateY(8px);
  background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 14px; width: 560px; max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s; z-index: 70;
}
.has-menu:hover .menu,
.has-menu.menu-open .menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* Invisible bridge across the gap so moving from the button to the panel keeps :hover */
.has-menu:hover::before { content: ""; position: absolute; top: 100%; left: 0; width: 160px; height: 13px; }
/* Products trigger is a <button> for keyboard access — strip the UA chrome */
.menu-trigger { background: none; border: none; font-family: inherit; cursor: pointer; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-item { display: flex; gap: 12px; padding: 12px; border-radius: 12px; transition: background .15s; }
.menu-item:hover { background: var(--brand-50); }
.menu-item .mi-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.menu-item .mi-icon svg { width: 20px; height: 20px; }
.menu-item h5 { margin: 0 0 2px; font-size: .95rem; font-weight: 700; color: var(--ink-900); }
.menu-item p { font-size: .82rem; color: var(--slate-500); line-height: 1.4; }

/* Language toggle */
.lang-toggle { display: inline-flex; background: var(--slate-100); border-radius: 10px; padding: 3px; border: 1px solid var(--slate-200); }
.lang-toggle button {
  border: none; background: transparent; font: inherit; font-size: .8rem; font-weight: 700; color: var(--slate-500);
  padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: all .15s;
}
.lang-toggle button.active { background: #fff; color: var(--brand-700); box-shadow: var(--shadow-sm); }

/* Dark / light theme toggle */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  border: 1px solid var(--slate-200); background: transparent; color: var(--slate-700);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Mobile */
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--ink-800); }
.hamburger svg { width: 26px; height: 26px; }
.mobile-menu {
  position: fixed; inset: 0; top: 76px; background: #fff; z-index: 55; padding: 24px;
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { padding: 14px 12px; border-radius: 12px; font-weight: 600; font-size: 1.1rem; color: var(--ink-800); border-bottom: 1px solid var(--slate-100); }
.mobile-menu a:hover { background: var(--brand-50); }
body.no-scroll { overflow: hidden; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 8vw, 110px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.rating-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; color: var(--slate-500); font-size: .9rem; }
.stars { color: #f6a609; letter-spacing: 2px; }

/* =========================================================================
   Mock product UI ("fake screenshots")  — devs replace with real images
   ========================================================================= */
.window {
  background: #fff; border: 1px solid var(--slate-200); border-radius: 18px; box-shadow: var(--shadow-lg);
  overflow: hidden; position: relative;
}
.window-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--slate-50); border-bottom: 1px solid var(--slate-200); }
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--slate-300); display: inline-block; }
.window-bar i:nth-child(1){ background:#ff5f57;} .window-bar i:nth-child(2){ background:#febc2e;} .window-bar i:nth-child(3){ background:#28c840;}
.window-bar .url { margin-left: 10px; font-size: .72rem; color: var(--slate-400); background:#fff; border:1px solid var(--slate-200); border-radius:6px; padding:3px 10px; }
.ui { padding: 18px; display: grid; gap: 14px; }
.ui-row { display: flex; gap: 12px; }
.ui-card { background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 12px; padding: 14px; flex: 1; }
.ui-kpi { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); }
.ui-kpi span { font-size: .72rem; font-weight: 700; color: var(--success); margin-left: 6px; }
.ui-label { font-size: .72rem; color: var(--slate-500); margin-bottom: 6px; font-weight: 600; }
.ui-bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; margin-top: 8px; }
.ui-bars span { flex: 1; background: linear-gradient(var(--brand-400), var(--brand-600)); border-radius: 6px 6px 0 0; opacity: .85; }
.ui-line { height: 9px; border-radius: 6px; background: var(--slate-200); }
.ui-line.short { width: 55%; } .ui-line.mid { width: 75%; }
.ui-pill { font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--brand-50); color:var(--brand-700); display:inline-block;}
.ui-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-300), var(--brand-600)); flex:none;}
.ui-list-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--slate-100); }
.ui-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ui-cal span { aspect-ratio:1; border-radius:7px; background:var(--slate-100); display:grid; place-items:center; font-size:.7rem; color:var(--slate-500); font-weight:600;}
.ui-cal span.on { background:var(--brand-500); color:#fff; }
.ui-cal span.soft { background:var(--brand-100); color:var(--brand-700); }

/* Floating mini-cards on hero */
.float-card {
  position: absolute; background: #fff; border: 1px solid var(--slate-200); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 12px 16px; display: flex; align-items: center; gap: 11px; z-index: 2;
}
.float-card .fc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color:#fff; flex:none; }
.float-card b { display:block; font-size: .9rem; color: var(--ink-900); }
.float-card small { color: var(--slate-500); font-size: .75rem; }

/* =========================================================================
   Logo marquee / trust bar
   ========================================================================= */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll-x 34s linear infinite; align-items: center; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.logo-chip { display: inline-flex; align-items: center; gap: 10px; color: var(--slate-400); font-weight: 800; font-size: 1.15rem; white-space: nowrap; opacity:.85; }
.logo-chip svg { width: 26px; height: 26px; }

/* =========================================================================
   Old vs new comparison
   ========================================================================= */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--slate-200); }
.vs-col { padding: 36px; }
.vs-old { background: var(--slate-50); }
.vs-new { background: linear-gradient(160deg, var(--brand-600), var(--brand-800)); color: #fff; }
.vs-mid { width: 1px; background: var(--slate-200); }
.vs li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 1rem; }
.vs li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.vs-old li { color: var(--slate-500); } .vs-old svg { color: #c0505b; }
.vs-new li { color: #eafaff; } .vs-new svg { color: #aef0a6; }

/* =========================================================================
   Stats
   ========================================================================= */
.stat { text-align: center; }
.stat .num { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.stat .lbl { color: var(--brand-100); margin-top: 10px; font-size: .98rem; }
.dark { background: radial-gradient(120% 120% at 80% 0%, var(--ink-700), var(--ink-900)); color: #fff; }
.dark h2, .dark h3 { color: #fff; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.quote-card { background:#fff; border:1px solid var(--slate-200); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:18px; height:100%; }
.quote-card p { font-size: 1.08rem; color: var(--ink-800); line-height: 1.55; }
.quote-mark { color: var(--brand-300); font-size: 2.6rem; line-height: .5; font-weight: 800; }
.quote-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.quote-author .av { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--brand-300),var(--brand-700)); flex:none; display:grid; place-items:center; color:#fff; font-weight:800; }
.quote-author b { color: var(--ink-900); font-size: .95rem; display:block; }
.quote-author small { color: var(--slate-500); }

/* =========================================================================
   FAQ accordion
   ========================================================================= */
.faq-item { border: 1px solid var(--slate-200); border-radius: 14px; background:#fff; margin-bottom: 12px; overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.faq-item.open { box-shadow: var(--shadow-sm); border-color: var(--brand-200); }
.faq-q { width: 100%; text-align: start; background: none; border: none; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink-900); padding: 20px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .chev { transition: transform .2s; color: var(--brand-600); flex:none; }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a-inner { padding: 0 24px 22px; color: var(--slate-600); line-height: 1.6; }

/* =========================================================================
   CTA band
   ========================================================================= */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px); background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .blob { background: #fff; opacity: .12; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--ink-900); color: #c6d4de; padding-block: 64px 32px; }
.site-footer h6 { color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 16px; font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer-grid a { color: #9fb3c1; font-size: .92rem; display: block; padding: 6px 0; transition: color .15s; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: #7e95a5; }
.footer-social { display:flex; gap:10px; }
.footer-social a { width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#c6d4de; }
.footer-social a:hover { background: var(--brand-600); color:#fff; }

/* =========================================================================
   Forms
   ========================================================================= */
.field { margin-bottom: 18px; }
.field label { display:block; font-weight:600; font-size:.9rem; color: var(--ink-800); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--slate-200); border-radius: 11px; font: inherit; font-size: .98rem;
  background: #fff; color: var(--ink-900); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 4px var(--ring); }
.field .err { color: #d4515f; font-size: .82rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e29aa2; }
.field.invalid .err { display: block; }
.form-note { font-size: .82rem; color: var(--slate-500); }
.form-success { background: #e9faf3; border:1px solid #b7ecd6; color:#0c7a57; padding:16px 18px; border-radius:12px; display:none; align-items:center; gap:10px; font-weight:600; }
.form-success.show { display:flex; }
.form-error { background: #fdecee; border:1px solid #f4c3ca; color:#b3293a; padding:16px 18px; border-radius:12px; display:none; align-items:center; gap:10px; font-weight:600; }
.form-error.show { display:flex; }
.btn[disabled] { opacity:.6; cursor:not-allowed; pointer-events:none; }

/* page hero (interior) */
.page-hero { background: linear-gradient(180deg, var(--bg-tint), #fff); padding-block: clamp(48px, 7vw, 88px) clamp(32px,4vw,48px); position: relative; overflow:hidden; }
.breadcrumb { font-size:.85rem; color: var(--slate-500); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--brand-700); }

/* checks list */
.checks li { display:flex; gap:11px; align-items:flex-start; padding:8px 0; color: var(--slate-700); }
.checks li svg { width:22px; height:22px; flex:none; color: var(--brand-600); margin-top:1px; }

/* =========================================================================
   Chatbot widget (mock FAQ assistant)
   ========================================================================= */
.chat-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; border: none; cursor: pointer;
  box-shadow: var(--shadow-brand); display: grid; place-items: center; transition: transform .2s;
}
.chat-fab:hover { transform: scale(1.06); }
.chat-fab svg { width: 27px; height: 27px; }
.chat-fab .ping { position:absolute; top:-2px; right:-2px; width:18px; height:18px; background:var(--accent); color:#fff; border-radius:50%; font-size:.62rem; font-weight:800; display:grid; place-items:center; border:2px solid #fff; }
.chat-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 80; width: 372px; max-width: calc(100vw - 32px); height: 540px; max-height: calc(100vh - 130px);
  background: #fff; border: 1px solid var(--slate-200); border-radius: 20px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right; transition: all .2s ease;
}
.chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.chat-head { background: linear-gradient(135deg, var(--brand-600), var(--brand-800)); color: #fff; padding: 18px 20px; display: flex; align-items: center; gap: 12px; }
.chat-head .bot-av { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex:none; }
.chat-head b { font-size: 1rem; } .chat-head small { color: #c9f1fb; display:flex; align-items:center; gap:6px; }
.chat-head small::before { content:""; width:8px; height:8px; border-radius:50%; background:#4ade80; display:inline-block; }
.chat-close { margin-left:auto; background:none; border:none; color:#fff; cursor:pointer; opacity:.85; }
.chat-body { flex: 1; overflow-y: auto; padding: 18px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 84%; padding: 11px 15px; border-radius: 16px; font-size: .92rem; line-height: 1.45; }
.bubble.bot { background: #fff; border: 1px solid var(--slate-200); border-bottom-left-radius: 5px; color: var(--ink-800); align-self: flex-start; }
.bubble.user { background: var(--brand-600); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.chat-cta { align-self: flex-start; font-size: .82rem; font-weight: 700; color: #fff; background: var(--brand-600); border-radius: 999px; padding: 9px 16px; text-decoration: none; transition: background .15s; }
.chat-cta:hover { background: var(--brand-700); }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--slate-200); background:#fff; }
.chat-suggest button { font: inherit; font-size: .8rem; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-200); padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.chat-suggest button:hover { background: var(--brand-100); }
.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--slate-200); background:#fff; }
.chat-input input { flex: 1; border: 1px solid var(--slate-200); border-radius: 999px; padding: 11px 16px; font: inherit; font-size: .9rem; }
.chat-input input:focus { outline: none; border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--ring); }
.chat-input button { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--brand-600); color: #fff; cursor: pointer; display: grid; place-items: center; flex:none;}
.typing { display:flex; gap:4px; padding: 12px 15px; }
.typing span { width:7px; height:7px; border-radius:50%; background: var(--slate-300); animation: blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s;} .typing span:nth-child(3){ animation-delay:.4s;}
@keyframes blink { 0%,80%,100%{ opacity:.3;} 40%{ opacity:1;} }

/* =========================================================================
   Scroll reveal
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .marquee-track { animation:none; } }

/* =========================================================================
   Utilities
   ========================================================================= */
.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:20px}.mt-5{margin-top:28px}.mt-6{margin-top:36px}.mt-8{margin-top:52px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:14px}.mb-4{margin-bottom:20px}.mb-5{margin-bottom:28px}.mb-6{margin-bottom:36px}
.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:14px}.gap-4{gap:20px}.wrap{flex-wrap:wrap}
.rel{position:relative}.z1{position:relative;z-index:1}
.pill-list{display:flex;flex-wrap:wrap;gap:10px}
.muted{color:var(--slate-500)}
.divider{height:1px;background:var(--slate-200);border:0;margin:0}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .cols-4 { grid-template-columns: repeat(2,1fr); }
}

/* Header nav collapse — the single-row nav is wider than it looks (esp. in Georgian,
   whose labels are longer), so it must fold into the hamburger BEFORE it would clip the
   right-side actions. Georgian needs the hamburger sooner, so it collapses at a higher
   width via the body[data-lang="ka"] scope (data-lang is set on <body> by i18n.js and
   updates live on toggle).
   Thresholds are measured, not guessed: with the nine-item nav the row needs 1225px in
   English and 1510px in Georgian — brand + links + actions + the 48px side padding.
   Values below add a ~25px buffer. Re-measure if a nav item is added, removed or
   relabelled, or the CTA button will clip off the right edge. */
@media (max-width: 1250px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .nav-actions .btn, .nav-actions .lang-toggle, .nav-actions .nav-divider { display: none; }
  .nav-actions .btn.always { display: inline-flex; }
}
@media (max-width: 1535px) {
  body[data-lang="ka"] .nav-links { display: none; }
  body[data-lang="ka"] .hamburger { display: inline-flex; }
  body[data-lang="ka"] .nav-actions .btn,
  body[data-lang="ka"] .nav-actions .lang-toggle,
  body[data-lang="ka"] .nav-actions .nav-divider { display: none; }
  body[data-lang="ka"] .nav-actions .btn.always { display: inline-flex; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .cols-3 { grid-template-columns: 1fr; }
  .cols-2 { grid-template-columns: 1fr; }
  .order-last-mobile { order: 2; }
  .vs { grid-template-columns: 1fr; }
  .vs-mid { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cols-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .container { padding-inline: 18px; }
  .float-card { display: none; }
  /* CTA lives in the mobile menu on small screens — keep header to logo + menu */
  .nav-actions .btn.always { display: none; }
  .nav { gap: 12px; }
}

/* =========================================================================
   Dark theme — applied via [data-theme="dark"] on <html>.
   The design system is token-based, so most of the work is re-defining the
   neutral/surface tokens; the rules below the token block only patch the
   components that hardcode light colours (mostly #fff surfaces & ink text).
   ========================================================================= */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1a24;
  --bg-tint: #0e202c;
  --bg-soft: #0e202c;

  /* elevated surfaces for cards / windows / inputs */
  --surface: #122734;
  --surface-2: #16303f;

  /* ink/navy was dark text on light surfaces — flip to light so every element
     using --ink-* (incl. inline color:var(--ink-900)) stays readable on dark.
     The only two ink *backgrounds* (.dark section, footer) are re-pinned below. */
  --ink-900: #eef5fa;
  --ink-800: #dce7ee;
  --ink-700: #c3d2dd;
  --ink-600: #aebfcc;

  /* neutral slate flipped: light borders become dark, dark text becomes light */
  --slate-50:  #16303f;
  --slate-100: #1b3543;
  --slate-200: #294655;
  --slate-300: #3a5667;
  --slate-400: #8aa0ae;
  --slate-500: #9fb3c1;
  --slate-600: #b7c6d2;
  --slate-700: #d0dbe3;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 22px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 64px -20px rgba(0,0,0,.85);
}

[data-theme="dark"] body { color: var(--slate-600); }
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4 { color: #eef5fa; }

[data-theme="dark"] .site-header { background: rgba(11,26,36,.72); border-bottom-color: rgba(41,70,85,.5); }
[data-theme="dark"] .site-header.scrolled { background: rgba(11,26,36,.9); box-shadow: 0 10px 34px -16px rgba(0,0,0,.7); }
[data-theme="dark"] .nav-actions .nav-divider { background: var(--slate-200); }

/* ink tokens now resolve light (see token block), so the two sections that used
   ink as a *background* are re-pinned to stay dark. */
[data-theme="dark"] .dark { background: radial-gradient(120% 120% at 80% 0%, #14344a, #08151d); }
[data-theme="dark"] .site-footer { background: #081119; }

/* light (#fff) surfaces → dark elevated surface */
[data-theme="dark"] .card,
[data-theme="dark"] .badge,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .menu,
[data-theme="dark"] .lang-toggle button.active,
[data-theme="dark"] .window,
[data-theme="dark"] .float-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .bubble.bot,
[data-theme="dark"] .chat-panel,
[data-theme="dark"] .chat-suggest,
[data-theme="dark"] .chat-input { background: var(--surface); }

[data-theme="dark"] .window-bar .url,
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .chat-input input { background: var(--surface-2); }

[data-theme="dark"] .mobile-menu { background: var(--bg); }

/* ink-based text that must turn light */
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .btn-ghost { color: var(--slate-700); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .chat-input input,
[data-theme="dark"] .ui-kpi,
[data-theme="dark"] .menu-item h5,
[data-theme="dark"] .hamburger { color: #eef5fa; }

[data-theme="dark"] .page-hero { background: linear-gradient(180deg, var(--bg-tint), var(--bg)); }

/* teal accents softened so they read on a dark background */
[data-theme="dark"] .eyebrow { background: rgba(28,178,212,.10); color: var(--brand-300); border-color: rgba(28,178,212,.28); }
[data-theme="dark"] .lang-toggle button.active { color: var(--brand-300); }
[data-theme="dark"] .menu-item:hover,
[data-theme="dark"] .mobile-menu a:hover { background: rgba(28,178,212,.10); color: var(--brand-300); }
[data-theme="dark"] .nav-link { color: var(--slate-600); }
[data-theme="dark"] .nav-link:hover { color: var(--brand-300); }
[data-theme="dark"] .nav-link.active { color: #eef5fa; }