/* ============================================================================
   cloudtech.ge — 2026 refresh
   Loaded after the theme's style.css (through configuration.headend), so it only
   overrides: type, rhythm, colours and the shared components. No markup changes.
   ========================================================================== */

/* The brand face: the licensed Georgian Helvetica if it is on the server, otherwise
   FiraGO — the closest free Georgian grotesque — so the page never falls back to Arial. */
@font-face {
  font-family: 'Helvetica Neue LT GEO';
  src: url('/fonts/HelveticaNeueLTGEOW82-45Lt.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT GEO';
  src: url('/fonts/HelveticaNeueLTGEOW82-55Rm.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT GEO';
  src: url('/fonts/HelveticaNeueLTGEOW82-65Md.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT GEO';
  src: url('/fonts/HelveticaNeueLTGEOW82-75Bd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue LT GEO';
  src: url('/fonts/HelveticaNeueLTGEOW82-85Bl.woff2') format('woff2');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ct-font: 'Helvetica Neue LT GEO', 'FiraGO', 'Noto Sans Georgian', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ct-ink: #0f1d33;
  --ct-ink-2: #43536b;
  --ct-muted: #7c8ba1;
  --ct-line: #e3e8f0;
  --ct-brand: #1f6feb;
  --ct-brand-dark: #1550b8;
  --ct-accent: #16b1c9;
  --ct-surface: #ffffff;
  --ct-soft: #f5f8fd;
  --ct-dark: #0d1526;
}

html { scroll-behavior: smooth; }

body,
button,
input,
select,
textarea,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ct-font) !important;
  font-feature-settings: 'case' 1;
}
body {
  color: var(--ct-ink);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

/* ---- headings: tighter, darker, with room to breathe */
h1, h2, h3, h4 { color: var(--ct-ink); font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; }
h1 { font-size: clamp(30px, 3.4vw, 46px); }
h2 { font-size: clamp(23px, 2.2vw, 31px); margin-top: 1.9em; margin-bottom: .55em; }
h3 { font-size: clamp(19px, 1.5vw, 23px); margin-top: 1.5em; margin-bottom: .5em; }

/* ---- article body: comfortable measure and rhythm */
.article-content, .article-body, .page-content, .entry-content, .content-area {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--ct-ink-2);
}
.article-content p, .article-body p { margin: 0 0 1.05em; }
.article-content ul, .article-content ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.article-content li { margin-bottom: .45em; }
.article-content a { color: var(--ct-brand); text-decoration: none; border-bottom: 1px solid rgba(31, 111, 235, .28); }
.article-content a:hover { color: var(--ct-brand-dark); border-bottom-color: currentColor; }
.article-content img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(15, 29, 51, .10); }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: .96em; }
.article-content th, .article-content td { padding: 11px 13px; border-bottom: 1px solid var(--ct-line); text-align: left; }
.article-content th { background: var(--ct-soft); font-weight: 600; color: var(--ct-ink); }
.article-content blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--ct-brand);
  background: var(--ct-soft);
  border-radius: 0 12px 12px 0;
  color: var(--ct-ink-2);
}

/* ---- header / navigation */
header .nav-link, .navbar .nav-link, .main-menu a, nav a { font-weight: 500; letter-spacing: .01em; }
.navbar, header { backdrop-filter: saturate(140%) blur(6px); }

/* ---- buttons across the site */
.btn, button.btn, a.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .08s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover, a.btn:hover { transform: translateY(-1px); }
.btn-primary, .btn.btn-primary {
  background: linear-gradient(135deg, var(--ct-brand), var(--ct-brand-dark));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(31, 111, 235, .22);
}

/* ---- cards and panels the theme uses */
.card, .service-item, .box, .panel {
  border-radius: 16px;
  border: 1px solid var(--ct-line);
  box-shadow: 0 10px 30px rgba(15, 29, 51, .06);
}

/* ---- the blocks we inject into articles (order form, product cards, pricing, FAQ) */
.cp-order input, .cp-order select, .cp-order textarea {
  font-family: var(--ct-font) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cp-order input:focus, .cp-order select:focus, .cp-order textarea:focus {
  outline: none;
  border-color: var(--ct-brand) !important;
  box-shadow: 0 0 0 3px rgba(31, 111, 235, .15);
}
.cp-order button[type='submit'], .cp-order-cta a {
  transition: transform .08s ease, filter .16s ease;
}
.cp-order button[type='submit']:hover, .cp-order-cta a:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cp-faq-item { border-radius: 12px !important; }
.cp-plan, .cp-download, .cp-order, .cp-order-cta { border-color: var(--ct-line) !important; }

/* product cards on /article/120 lift a little on hover */
.article-content [style*='border-radius:18px'][style*='box-shadow'] {
  transition: transform .14s ease, box-shadow .18s ease;
}
.article-content [style*='border-radius:18px'][style*='box-shadow']:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15, 29, 51, .12) !important;
}

/* ---- footer */
footer { font-size: 15px; }

/* ---- selection and focus */
::selection { background: rgba(31, 111, 235, .18); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ct-brand);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  body { font-size: 15.5px; }
  .article-content { font-size: 16px; }
}

/* ---------------------------------------------------------------- product cards (/article/120) */
.cp-lead { max-width: 760px; margin: 0 0 26px; }
.cp-lead p { font-size: 17px; line-height: 1.65; color: var(--ct-ink-2); margin: 0 0 14px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #eef4ff;
  border: 1px solid #dbe6ff;
  color: #1c4e9c;
  font-size: 13.5px;
  font-weight: 600;
}
.cp-chip::before { content: '✓'; font-size: 12px; }

.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin: 26px 0 34px;
  align-items: stretch;
}
.cp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 22px;
  border-radius: 20px;
  border: 1px solid var(--ct-line);
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 29, 51, .07);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.cp-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cp-accent) 40%, var(--ct-line));
  box-shadow: 0 22px 48px rgba(15, 29, 51, .13);
}
.cp-card-ribbon {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cp-accent), color-mix(in srgb, var(--cp-accent) 35%, #fff));
}
.cp-card-head { display: flex; align-items: center; gap: 14px; }
.cp-card-icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--cp-soft);
}
.cp-card-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--ct-ink); line-height: 1.2; }
.cp-card-sub { font-size: 13px; color: var(--ct-muted); margin-top: 2px; }
.cp-card-text { margin: 0; color: var(--ct-ink-2); font-size: 15.5px; line-height: 1.6; }
.cp-card-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cp-card-point { position: relative; padding-left: 22px; font-size: 14.5px; color: #3d4c66; line-height: 1.45; }
.cp-card-point span { position: absolute; left: 0; top: 0; font-weight: 700; }
.cp-card-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ct-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cp-card-price { font-size: 14px; font-weight: 700; color: var(--cp-accent); }
.cp-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-btn, .cp-btn-ghost {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform .08s ease, filter .16s ease, background .16s ease;
  border: 1px solid transparent;
}
.cp-btn { background: var(--cp-accent); color: #fff !important; }
.cp-btn:hover { transform: translateY(-1px); filter: brightness(1.07); color: #fff !important; }
.cp-btn-ghost { border-color: color-mix(in srgb, var(--cp-accent) 45%, #fff); color: var(--cp-accent) !important; background: #fff; }
.cp-btn-ghost:hover { background: var(--cp-soft); }

/* the call-to-action strip under the cards */
.cp-order-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 30px 0;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid #cddcfb;
  background: linear-gradient(135deg, #eaf1ff, #f8fbff);
}
.cp-order-cta-title { font-size: 20px; font-weight: 700; color: var(--ct-ink); margin-bottom: 5px; }
.cp-order-cta-text { color: var(--ct-ink-2); font-size: 15px; }
.cp-order-cta a {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--ct-brand), var(--ct-brand-dark));
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(31, 111, 235, .26);
}
.cp-order-cta a:hover { filter: brightness(1.07); }

/* ---------------------------------------------------------------- language switch */
.lang-desktop { position: relative; }
.lang-flag-d { display: none !important; }
.lang-current-d, .lang-select-d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.lang-current-d a, .lang-select-d a, .lang-mobile-block a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #cfe3ff !important;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-current-d a:hover, .lang-select-d a:hover, .lang-mobile-block a:hover { background: rgba(255, 255, 255, .12); color: #fff !important; }
.lang-current-d a.active, .lang-select-d a.active, .lang-mobile-block a.active {
  background: rgba(22, 177, 201, .18);
  color: #16e0ff !important;
}

/* compact language switch: one pill with the current language, tapped to drop the other one
   (hover-only menus are a dead end on a phone, two pills side by side ate the header) */
.lang-desktop {
  position: relative;
  display: inline-block !important;
  padding: 0;
  background: none;
  border: 0;
}
.lang-current-d {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 12px 7px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  user-select: none;
}
.lang-current-d:hover { background: rgba(255, 255, 255, .14); }
.lang-current-d::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-right: 1.6px solid #9fc4ff;
  border-bottom: 1.6px solid #9fc4ff;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}
.lang-desktop.open .lang-current-d::after { transform: rotate(-135deg) translate(-2px, -2px); }
.lang-current-d a { pointer-events: none; padding: 0 !important; background: none !important; }
.lang-dropdown-d {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 100% !important;
  display: none !important;
  padding: 4px !important;
  border-radius: 10px !important;
  background: #111b2e !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 60;
}
.lang-desktop.open .lang-dropdown-d { display: block !important; }
.lang-select-d { display: block !important; }
.lang-select-d a { display: block; padding: 8px 14px; white-space: nowrap; }
.lang-mobile-block { display: flex; gap: 8px; padding: 12px 16px; }