/**
Theme Name: astra child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700&display=swap');

/* ============================================================================
   FILE MAP — порядок секций
   1. TOKENS        → :root
   2. BASE          → reset, focus, [lang] fonts
   3. HERO A3       → .kb-hero-a3
   4. EXPERTISE     → .kb-expertise
   5. CALCULATOR    → .kb-calc
   6. PRINCIPLES    → .kb-principles
   7. PORTFOLIO     → .kb-portfolio
   ============================================================================ */


/* ============================================================================
   1. TOKENS — single source of truth  →  :root
   ============================================================================ */
:root {
  /* Surfaces */
  --kb-bg: #FAFAF7;
  --kb-surface: #FFFFFF;
  --kb-surface-alt: #F4F6F8;

  /* Text */
  --kb-text: #0F172A;
  --kb-text-mid: #334155;
  --kb-text-soft: #475569;
  --kb-text-muted: #64748B;

  /* Borders */
  --kb-border: #E2E8F0;
  --kb-border-soft: #F1F5F9;
  --kb-border-strong: #CBD5E1;

  /* Amber (primary accent) */
  --kb-amber: #D97706;
  --kb-amber-dark: #B45309;
  --kb-amber-soft: rgba(217, 119, 6, 0.08);
  --kb-amber-tint: rgba(217, 119, 6, 0.04);

  /* Sky (secondary accent) */
  --kb-sky: #0284C7;
  --kb-sky-dark: #0369A1;
  --kb-sky-soft: rgba(2, 132, 199, 0.08);

  /* Emerald */
  --kb-emerald: #059669;
  --kb-emerald-dark: #047857;
  --kb-emerald-soft: rgba(5, 150, 105, 0.08);

  /* Violet */
  --kb-violet: #7C3AED;
  --kb-violet-dark: #6D28D9;
  --kb-violet-soft: rgba(124, 58, 237, 0.08);

  /* Shadows */
  --kb-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.04);
  --kb-shadow-md: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
  --kb-shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.08);
  --kb-shadow-amber: 0 8px 24px -4px rgba(217, 119, 6, 0.3);

  /* Fonts */
  --kb-font-ko: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --kb-font-ru: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kb-font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kb-font-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  /* Resolved by [lang] in BASE */
  --kb-font-base: var(--kb-font-en);
	
  /* Slate (для «честного» пункта в comparison) */
  --kb-slate: #475569;
  --kb-slate-dark: #334155;
  --kb-slate-soft: rgba(71, 85, 105, 0.06);
}


/* ============================================================================
   2. BASE — applies to every .kb-* section
   ============================================================================ */

/* --- BASE: language → font resolution --- */
html body [lang="ko"] { --kb-font-base: var(--kb-font-ko); }
html body [lang="ru"] { --kb-font-base: var(--kb-font-ru); }
html body [lang="en"] { --kb-font-base: var(--kb-font-en); }

/* --- BASE: scoped reset (once for all sections) --- */
html body .kb-hero-a3,
html body .kb-hero-a3 *,
html body .kb-hero-a3 *::before,
html body .kb-hero-a3 *::after,
html body .kb-expertise,
html body .kb-expertise *,
html body .kb-expertise *::before,
html body .kb-expertise *::after,
html body .kb-calc,
html body .kb-calc *,
html body .kb-calc *::before,
html body .kb-calc *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- BASE: shared focus ring --- */
html body .kb-hero-a3 :focus-visible,
html body .kb-expertise :focus-visible,
html body .kb-calc :focus-visible {
  outline: 2px solid var(--kb-sky) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}


/* ============================================================================
   3. HERO A3 SECTION  →  .kb-hero-a3
   ============================================================================ */

/* --- HERO: layout --- */
html body .kb-hero-a3 {
  position: relative !important;
  background: var(--kb-bg) !important;
  padding: 80px 24px 64px !important;
  overflow: hidden !important;
  font-family: var(--kb-font-base) !important;
  color: var(--kb-text) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- HERO: background grid pattern --- */
html body .kb-hero-a3::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  pointer-events: none !important;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%) !important;
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%) !important;
  z-index: 0 !important;
}

html body .kb-hero-a3-inner {
  position: relative !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  text-align: center !important;
  z-index: 1 !important;
}

/* --- HERO: badge --- */
html body .kb-hero-a3-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  color: var(--kb-sky) !important;
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 16px !important;
  border-radius: 30px !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 28px !important;
  text-decoration: none !important;
  text-transform: none !important;
}

html body .kb-hero-a3-badge .dot {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--kb-sky) !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* --- HERO: title --- */
html body .kb-hero-a3-title {
  font-family: var(--kb-font-base) !important;
  font-size: 50px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.5px !important;
  color: var(--kb-text) !important;
  margin: 0 0 24px 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  word-break: keep-all !important;
  -webkit-hyphens: none !important;
          hyphens: none !important;
}

html body .kb-hero-a3[lang="ko"] .kb-hero-a3-title { letter-spacing: -0.6px !important; }
html body .kb-hero-a3[lang="ru"] .kb-hero-a3-title { letter-spacing: -0.3px !important; }
html body .kb-hero-a3[lang="en"] .kb-hero-a3-title { letter-spacing: -0.5px !important; }

html body .kb-hero-a3-title .markets {
  display: inline-block !important;
  position: relative !important;
  z-index: 1 !important;
  color: var(--kb-text) !important;
  text-decoration: none !important;
}

html body .kb-hero-a3-title .markets::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 2px !important;
  height: 12px !important;
  background: var(--kb-amber-soft) !important;
  z-index: -1 !important;
  border-radius: 2px !important;
}

/* --- HERO: subtitle --- */
html body .kb-hero-a3-sub {
  font-family: var(--kb-font-base) !important;
  font-size: 17px !important;
  color: var(--kb-text-soft) !important;
  line-height: 1.65 !important;
  max-width: 720px !important;
  margin: 0 auto 36px !important;
  text-align: center !important;
}

/* --- HERO: actions / buttons --- */
html body .kb-hero-a3-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  margin-bottom: 48px !important;
}

html body .kb-hero-a3-actions .divider {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 1px !important;
  margin: 0 8px !important;
}

html body .kb-hero-a3-actions .kb-btn-primary,
html body .kb-hero-a3 .kb-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--kb-amber) !important;
  background-color: var(--kb-amber) !important;
  color: #ffffff !important;
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 15px 28px !important;
  border-radius: 12px !important;
  border: none !important;
  border-width: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: 0 6px 16px -4px rgba(217, 119, 6, 0.35) !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

html body .kb-hero-a3-actions .kb-btn-primary:hover,
html body .kb-hero-a3 .kb-btn-primary:hover {
  background: var(--kb-amber-dark) !important;
  background-color: var(--kb-amber-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px -4px rgba(217, 119, 6, 0.4) !important;
  text-decoration: none !important;
}

html body .kb-hero-a3-actions .kb-btn-primary:active,
html body .kb-hero-a3 .kb-btn-primary:active {
  transform: translateY(0) !important;
}

html body .kb-hero-a3-actions .kb-btn-primary svg,
html body .kb-hero-a3 .kb-btn-primary svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

html body .kb-hero-a3-actions .kb-btn-secondary,
html body .kb-hero-a3 .kb-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--kb-surface) !important;
  background-color: var(--kb-surface) !important;
  color: var(--kb-text) !important;
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 15px 24px !important;
  border-radius: 12px !important;
  border: 1px solid var(--kb-border) !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: var(--kb-shadow-sm) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
}

html body .kb-hero-a3-actions .kb-btn-secondary:hover,
html body .kb-hero-a3 .kb-btn-secondary:hover {
  background: var(--kb-border-soft) !important;
  background-color: var(--kb-border-soft) !important;
  border-color: #94A3B8 !important;
  color: var(--kb-text) !important;
  text-decoration: none !important;
}

html body .kb-hero-a3-actions .kb-btn-secondary svg,
html body .kb-hero-a3 .kb-btn-secondary svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* --- HERO: markets bar --- */
html body .kb-hero-a3-markets-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-radius: 16px !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 24px 32px !important;
  box-shadow: var(--kb-shadow-sm) !important;
}

html body .kb-hero-a3-market-cell {
  flex: 1 !important;
  text-align: center !important;
  padding: 0 16px !important;
}

html body .kb-hero-a3-market-cell .label {
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  font-weight: 500 !important;
}

html body .kb-hero-a3-market-cell .value {
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

html body .kb-hero-a3-market-cell .value .flag {
  font-size: 20px !important;
  line-height: 1 !important;
  display: inline-block !important;
  margin-right: 0 !important;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
}

html body .kb-hero-a3-market-divider {
  width: 1px !important;
  height: 40px !important;
  background: var(--kb-border) !important;
  flex-shrink: 0 !important;
}

/* --- HERO: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html body .kb-hero-a3 .kb-btn-primary,
  html body .kb-hero-a3 .kb-btn-secondary {
    transition: none !important;
  }
  html body .kb-hero-a3 .kb-btn-primary:hover,
  html body .kb-hero-a3 .kb-btn-secondary:hover {
    transform: none !important;
  }
}

/* --- HERO: responsive (1024) --- */
@media (max-width: 1024px) {
  html body .kb-hero-a3-title {
    font-size: 42px !important;
  }
}

/* --- HERO: responsive (768) --- */
@media (max-width: 768px) {
  html body .kb-hero-a3 {
    padding: 48px 16px 40px !important;
  }
  html body .kb-hero-a3-title {
    font-size: 30px !important;
    letter-spacing: -0.3px !important;
  }
  html body .kb-hero-a3-sub {
    font-size: 15px !important;
  }
  html body .kb-hero-a3-actions {
    flex-direction: column !important;
    width: 100% !important;
  }
  html body .kb-hero-a3-actions .kb-btn-primary,
  html body .kb-hero-a3-actions .kb-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
  }
  html body .kb-hero-a3-actions .divider {
    display: none !important;
  }
  html body .kb-hero-a3-markets-bar {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  html body .kb-hero-a3-market-divider {
    width: 100% !important;
    height: 1px !important;
  }
  html body .kb-hero-a3-market-cell .value .flag {
    font-size: 18px !important;
  }
}


/* ============================================================================
   4. EXPERTISE SECTION  →  .kb-expertise
   ============================================================================ */

/* --- EXPERTISE: layout --- */
html body .kb-expertise {
  position: relative !important;
  background: var(--kb-bg) !important;
  padding: 96px 24px 80px !important;
  font-family: var(--kb-font-base) !important;
  color: var(--kb-text) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body .kb-expertise-inner {
  position: relative !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* --- EXPERTISE: header --- */
html body .kb-expertise-header {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 56px !important;
}

html body .kb-expertise-eyebrow {
  display: inline-block !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--kb-amber-dark) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  padding: 6px 14px !important;
  background: var(--kb-amber-soft) !important;
  border-radius: 4px !important;
}

html body .kb-expertise-title {
  font-family: var(--kb-font-base) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  color: var(--kb-text) !important;
  margin: 0 0 16px 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  word-break: keep-all !important;
  -webkit-hyphens: none !important;
          hyphens: none !important;
}

html body .kb-expertise[lang="ko"] .kb-expertise-title { letter-spacing: -0.6px !important; }
html body .kb-expertise[lang="ru"] .kb-expertise-title { letter-spacing: -0.3px !important; }
html body .kb-expertise[lang="en"] .kb-expertise-title { letter-spacing: -0.5px !important; }

html body .kb-expertise-desc {
  font-family: var(--kb-font-base) !important;
  font-size: 17px !important;
  color: var(--kb-text-soft) !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
  margin: 0 auto !important;
}

/* --- EXPERTISE: grid 2x2 --- */
html body .kb-expertise-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
}

/* --- EXPERTISE: card base --- */
html body .kb-expertise-card {
  position: relative !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: var(--kb-shadow-sm) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

html body .kb-expertise-card.is-hidden-init {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

html body .kb-expertise-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- EXPERTISE: card color variants (left border accent) --- */
html body .kb-expertise-card--amber   { border-left: 4px solid var(--kb-amber) !important; }
html body .kb-expertise-card--sky     { border-left: 3px solid var(--kb-sky) !important; }
html body .kb-expertise-card--violet  { border-left: 3px solid var(--kb-violet) !important; }
html body .kb-expertise-card--emerald { border-left: 3px solid var(--kb-emerald) !important; }

html body .kb-expertise-card:hover,
html body .kb-expertise-card:focus-within {
  transform: translateY(-4px) !important;
  box-shadow: var(--kb-shadow-md) !important;
}

html body .kb-expertise-card--amber:hover,
html body .kb-expertise-card--amber:focus-within {
  border-color: var(--kb-amber) !important;
  border-left: 4px solid var(--kb-amber) !important;
}
html body .kb-expertise-card--sky:hover,
html body .kb-expertise-card--sky:focus-within {
  border-color: var(--kb-sky) !important;
  border-left: 3px solid var(--kb-sky) !important;
}
html body .kb-expertise-card--violet:hover,
html body .kb-expertise-card--violet:focus-within {
  border-color: var(--kb-violet) !important;
  border-left: 3px solid var(--kb-violet) !important;
}
html body .kb-expertise-card--emerald:hover,
html body .kb-expertise-card--emerald:focus-within {
  border-color: var(--kb-emerald) !important;
  border-left: 3px solid var(--kb-emerald) !important;
}

/* --- EXPERTISE: card meta (number + icon) --- */
html body .kb-expertise-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

html body .kb-expertise-number {
  font-family: var(--kb-font-mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kb-amber) !important;
  letter-spacing: 1px !important;
}

html body .kb-expertise-card--amber   .kb-expertise-number { color: var(--kb-amber) !important; }
html body .kb-expertise-card--sky     .kb-expertise-number { color: var(--kb-sky) !important; }
html body .kb-expertise-card--violet  .kb-expertise-number { color: var(--kb-violet) !important; }
html body .kb-expertise-card--emerald .kb-expertise-number { color: var(--kb-emerald) !important; }

html body .kb-expertise-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body .kb-expertise-card--amber .kb-expertise-icon-wrap {
  background: var(--kb-amber-soft) !important;
  color: var(--kb-amber) !important;
}
html body .kb-expertise-card--sky .kb-expertise-icon-wrap {
  background: var(--kb-sky-soft) !important;
  color: var(--kb-sky) !important;
}
html body .kb-expertise-card--violet .kb-expertise-icon-wrap {
  background: var(--kb-violet-soft) !important;
  color: var(--kb-violet) !important;
}
html body .kb-expertise-card--emerald .kb-expertise-icon-wrap {
  background: var(--kb-emerald-soft) !important;
  color: var(--kb-emerald) !important;
}

html body .kb-expertise-icon-wrap svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2 !important;
}

/* --- EXPERTISE: card title + desc --- */
html body .kb-expertise-card-title {
  font-family: var(--kb-font-base) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.35 !important;
  color: var(--kb-text) !important;
  margin: 0 0 10px 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

html body .kb-expertise-card-desc {
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 0 16px 0 !important;
}

/* --- EXPERTISE: card list (checkmark list) --- */
html body .kb-expertise-list {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--kb-border-soft) !important;
  flex: 1 !important;
}

html body .kb-expertise-list li {
  font-family: var(--kb-font-base) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--kb-text-mid) !important;
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 8px !important;
}

html body .kb-expertise-list li:last-child { margin-bottom: 0 !important; }

html body .kb-expertise-list li svg {
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 3 !important;
}

html body .kb-expertise-card--amber   .kb-expertise-list li svg { color: var(--kb-amber) !important; }
html body .kb-expertise-card--sky     .kb-expertise-list li svg { color: var(--kb-sky) !important; }
html body .kb-expertise-card--violet  .kb-expertise-list li svg { color: var(--kb-violet) !important; }
html body .kb-expertise-card--emerald .kb-expertise-list li svg { color: var(--kb-emerald) !important; }

/* --- EXPERTISE: card comparison --- */
html body .kb-expertise-comparison {
  list-style: none !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
}

html body .kb-expertise-comparison li {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: var(--kb-surface-alt) !important;
}

html body .kb-expertise-comparison-label {
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-expertise-comparison-text {
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--kb-text-mid) !important;
}

/* Honest advisor item — теперь с токенами из :root */
html body .kb-expertise-comparison-honest {
  background: var(--kb-slate-soft) !important;
  border-left: 3px solid var(--kb-slate) !important;
  padding-left: 12px !important;
}

html body .kb-expertise-comparison-honest .kb-expertise-comparison-label {
  color: var(--kb-slate-dark) !important;
}

/* --- EXPERTISE: card footer (badge) --- */
html body .kb-expertise-card-footer {
  padding-top: 16px !important;
  border-top: 1px solid var(--kb-border-soft) !important;
  margin-top: auto !important;
}

html body .kb-expertise-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
}

html body .kb-expertise-card--amber .kb-expertise-card-badge {
  background: var(--kb-amber-soft) !important;
  color: var(--kb-amber-dark) !important;
}
html body .kb-expertise-card--sky .kb-expertise-card-badge {
  background: var(--kb-sky-soft) !important;
  color: var(--kb-sky-dark) !important;
}
html body .kb-expertise-card--violet .kb-expertise-card-badge {
  background: var(--kb-violet-soft) !important;
  color: var(--kb-violet-dark) !important;
}
html body .kb-expertise-card--emerald .kb-expertise-card-badge {
  background: var(--kb-emerald-soft) !important;
  color: var(--kb-emerald-dark) !important;
}

/* --- EXPERTISE: contrast block --- */
html body .kb-expertise-contrast {
  margin: 48px auto 0 !important;
  padding: 40px !important;
  border-radius: 20px !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  box-shadow: var(--kb-shadow-sm) !important;
  text-align: center !important;
  max-width: 800px !important;
}

html body .kb-expertise-contrast-title {
  font-family: var(--kb-font-base) !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
  color: var(--kb-text) !important;
}

html body .kb-expertise-contrast-desc {
  font-family: var(--kb-font-base) !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 0 20px !important;
}

html body .kb-expertise-contrast-text {
  font-family: var(--kb-font-base) !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: var(--kb-text-mid) !important;
  margin: 0 auto !important;
  max-width: 640px !important;
}

/* --- EXPERTISE: bridge to next section --- */
html body .kb-expertise-bridge {
  margin: 40px auto 0 !important;
  text-align: center !important;
  max-width: 640px !important;
  font-family: var(--kb-font-base) !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  color: var(--kb-text-mid) !important;
  font-weight: 500 !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--kb-border) !important;
}

/* --- EXPERTISE: focus-within (keyboard nav) --- */
html body .kb-expertise-card:focus-within {
  outline: 2px solid var(--kb-sky) !important;
  outline-offset: 3px !important;
}

/* --- EXPERTISE: responsive (1024) --- */
@media (max-width: 1024px) {
  html body .kb-expertise {
    padding: 80px 24px 64px !important;
  }
  html body .kb-expertise-title {
    font-size: 34px !important;
  }
  html body .kb-expertise-card {
    padding: 28px !important;
  }
  html body .kb-expertise-card-title {
    font-size: 19px !important;
  }
}

/* --- EXPERTISE: responsive (768) — 1 column --- */
@media (max-width: 768px) {
  html body .kb-expertise {
    padding: 56px 16px 48px !important;
  }
  html body .kb-expertise-header {
    margin-bottom: 40px !important;
  }
  html body .kb-expertise-title {
    font-size: 28px !important;
    letter-spacing: -0.3px !important;
  }
  html body .kb-expertise-desc {
    font-size: 15px !important;
  }
  html body .kb-expertise-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .kb-expertise-card {
    padding: 24px !important;
  }
  html body .kb-expertise-card-title {
    font-size: 18px !important;
  }
  html body .kb-expertise-card-desc {
    font-size: 14px !important;
  }
  html body .kb-expertise-list li,
  html body .kb-expertise-comparison li {
    font-size: 13px !important;
  }
  html body .kb-expertise-comparison-text {
    font-size: 12px !important;
  }
  html body .kb-expertise-card:hover {
    transform: none !important;
    box-shadow: var(--kb-shadow-sm) !important;
  }
  html body .kb-expertise-contrast {
    padding: 28px 20px !important;
    margin-top: 32px !important;
  }
  html body .kb-expertise-bridge {
    margin-top: 28px !important;
    padding-top: 20px !important;
    font-size: 1rem !important;
  }
}

/* --- EXPERTISE: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html body .kb-expertise-card {
    transition: none !important;
    animation: none !important;
  }
  html body .kb-expertise-card:hover,
  html body .kb-expertise-card:focus-within {
    transform: none !important;
    box-shadow: var(--kb-shadow-sm) !important;
  }
  html body .kb-expertise-card.is-hidden-init {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- EXPERTISE: print --- */
@media print {
  html body .kb-expertise {
    padding: 24px 0 !important;
    background: #fff !important;
  }
  html body .kb-expertise-card {
    break-inside: avoid !important;
    box-shadow: none !important;
    transform: none !important;
  }
}

/* --- EXPERTISE: Astra override guards --- */
html body.ast-page-builder-template .kb-expertise,
html body.ast-no-sidebar .kb-expertise,
html body.ast-separate-container .kb-expertise {
  background: var(--kb-bg) !important;
  padding: 96px 24px 80px !important;
}

html body .entry-content .kb-expertise-card-title,
html body.ast-single-post .entry-content .kb-expertise-card-title {
  color: var(--kb-text) !important;
  font-weight: 700 !important;
}

html body .entry-content .kb-expertise-card-desc,
html body.ast-single-post .entry-content .kb-expertise-card-desc {
  color: var(--kb-text-soft) !important;
}

/* ============================================================================
   5. CALCULATOR SECTION v2 — with timeline  →  .kb-calc
   ============================================================================ */

/* --- CALC: layout --- */
html body .kb-calc {
  position: relative !important;
  background: var(--kb-bg) !important;
  padding: 96px 24px 80px !important;
  font-family: var(--kb-font-base) !important;
  color: var(--kb-text) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body .kb-calc-inner {
  position: relative;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* --- CALC: header --- */
html body .kb-calc-header {
  text-align: center !important;
  max-width: 720px !important;
  margin: 0 auto 56px !important;
}

html body .kb-calc-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kb-amber-dark) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
  padding: 7px 14px !important;
  background: var(--kb-amber-soft) !important;
  border-radius: 4px !important;
}

html body .kb-calc-eyebrow .live-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--kb-emerald) !important;
  border-radius: 50% !important;
  animation: kb-calc-pulse 2s infinite !important;
}

@keyframes kb-calc-pulse {
  0%, 100% { opacity: 1 !important; transform: scale(1) !important; }
  50% { opacity: 0.5 !important; transform: scale(1.3) !important; }
}

html body .kb-calc-title {
  font-family: var(--kb-font-base) !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px !important;
  color: var(--kb-text) !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
  text-decoration: none !important;
}

html body .kb-calc[lang="ko"] .kb-calc-title { letter-spacing: -0.6px !important; }
html body .kb-calc[lang="ru"] .kb-calc-title { letter-spacing: -0.3px !important; }
html body .kb-calc[lang="en"] .kb-calc-title { letter-spacing: -0.5px !important; }

html body .kb-calc-subtitle {
  font-family: var(--kb-font-base) !important;
  font-size: 17px !important;
  color: var(--kb-text-soft) !important;
  line-height: 1.65 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
}

/* --- CALC: grid (options + sticky price) --- */
html body .kb-calc-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 32px !important;
  align-items: start !important;
}

html body .kb-calc-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
}

/* --- CALC: step header --- */
html body .kb-calc-step { display: flex !important; flex-direction: column !important; gap: 20px !important; }
html body .kb-calc-step-header { display: flex !important; align-items: center !important; gap: 14px !important; }

html body .kb-calc-step-number {
  width: 36px !important;
  height: 36px !important;
  background: var(--kb-text) !important;
  color: #ffffff !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body .kb-calc-step-meta { display: flex !important; flex-direction: column !important; gap: 2px !important; }

html body .kb-calc-step-title {
  font-family: var(--kb-font-base) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
  letter-spacing: -0.2px !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

html body .kb-calc-step-hint {
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  color: var(--kb-text-muted) !important;
  font-weight: 500 !important;
}

html body .kb-calc-step-hint.required { color: var(--kb-amber) !important; }

/* --- CALC: radio cards (Step 01) --- */
html body .kb-calc-options-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

html body .kb-calc-radio-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .kb-calc-radio-card {
  position: relative !important;
  display: block !important;
  background: var(--kb-surface) !important;
  border: 2px solid var(--kb-border) !important;
  border-radius: 14px !important;
  padding: 20px 16px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
  text-align: left !important;
  height: 100% !important;
}

html body .kb-calc-radio-input:checked + .kb-calc-radio-card {
  border-color: var(--kb-amber) !important;
  background: var(--kb-amber-tint) !important;
}

html body .kb-calc-radio-input:focus-visible + .kb-calc-radio-card {
  outline: 2px solid var(--kb-sky) !important;
  outline-offset: 2px !important;
}

html body .kb-calc-radio-card:hover {
  border-color: var(--kb-border-strong) !important;
  transform: translateY(-1px) !important;
}

html body .kb-calc-radio-input:checked + .kb-calc-radio-card:hover {
  border-color: var(--kb-amber) !important;
}

html body .kb-calc-radio-card-title {
  display: block !important;
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

html body .kb-calc-radio-card-desc {
  display: block !important;
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  color: var(--kb-text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  min-height: 39px !important;
}

html body .kb-calc-radio-card-pricetime {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

html body .kb-calc-radio-card-price {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  font-family: var(--kb-font-mono) !important;
  font-weight: 700 !important;
}

html body .kb-calc-radio-card-price .currency {
  font-size: 13px !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-radio-card-price .amount {
  font-size: 17px !important;
  color: var(--kb-text) !important;
}

html body .kb-calc-radio-input:checked + .kb-calc-radio-card .kb-calc-radio-card-price .amount {
  color: var(--kb-amber-dark) !important;
}

html body .kb-calc-radio-card-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-radio-card-time svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2 !important;
}

html body .kb-calc-radio-input:checked + .kb-calc-radio-card .kb-calc-radio-card-time {
  color: var(--kb-amber-dark) !important;
}

html body .kb-calc-radio-card-badge {
  position: absolute !important;
  top: -10px !important;
  right: 12px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: var(--kb-amber) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* --- CALC: checkbox cards (Step 02) --- */
html body .kb-calc-addons-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

html body .kb-calc-check-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .kb-calc-check-card {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  background: var(--kb-surface) !important;
  border: 1.5px solid var(--kb-border) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

html body .kb-calc-check-input:checked + .kb-calc-check-card {
  border-color: var(--kb-sky) !important;
  background: var(--kb-sky-soft) !important;
}

html body .kb-calc-check-input:focus-visible + .kb-calc-check-card {
  outline: 2px solid var(--kb-sky) !important;
  outline-offset: 2px !important;
}

html body .kb-calc-check-card:hover {
  border-color: var(--kb-border-strong) !important;
}

html body .kb-calc-check-input:checked + .kb-calc-check-card:hover {
  border-color: var(--kb-sky) !important;
}

html body .kb-calc-check-box {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid var(--kb-border-strong) !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  position: relative !important;
  transition: border-color 0.2s ease, background-color 0.2s ease !important;
}

html body .kb-calc-check-input:checked + .kb-calc-check-card .kb-calc-check-box {
  background: var(--kb-sky) !important;
  border-color: var(--kb-sky) !important;
}

html body .kb-calc-check-box svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 14px !important;
  height: 14px !important;
  color: #ffffff !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  stroke-width: 3.5 !important;
}

html body .kb-calc-check-input:checked + .kb-calc-check-card .kb-calc-check-box svg {
  opacity: 1 !important;
}

html body .kb-calc-check-content {
  flex: 1 !important;
  min-width: 0 !important;
}

html body .kb-calc-check-title {
  display: block !important;
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
  margin-bottom: 4px !important;
  line-height: 1.35 !important;
}

html body .kb-calc-check-desc {
  display: block !important;
  font-family: var(--kb-font-base) !important;
  font-size: 13px !important;
  color: var(--kb-text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}

html body .kb-calc-check-pricetime {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

html body .kb-calc-check-price {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  font-family: var(--kb-font-mono) !important;
  font-weight: 600 !important;
}

html body .kb-calc-check-price .currency {
  font-size: 12px !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-check-price .amount {
  font-size: 14px !important;
  color: var(--kb-text-mid) !important;
}

html body .kb-calc-check-time {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-check-time svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2 !important;
}

html body .kb-calc-check-input:checked + .kb-calc-check-card .kb-calc-check-time {
  color: var(--kb-sky-dark) !important;
}

/* --- CALC: sticky price card --- */
html body .kb-calc-price-card {
  position: sticky !important;
  top: 24px !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-radius: 20px !important;
  padding: 28px !important;
  box-shadow: var(--kb-shadow-md) !important;
}

html body .kb-calc-price-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--kb-border-soft) !important;
}

html body .kb-calc-price-title {
  font-family: var(--kb-font-base) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
  text-decoration: none !important;
}

html body .kb-calc-live-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--kb-font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--kb-emerald) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

html body .kb-calc-live-badge .dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--kb-emerald) !important;
  border-radius: 50% !important;
  animation: kb-calc-pulse 2s infinite !important;
}

/* --- CALC: empty state --- */
html body .kb-calc-empty {
  text-align: center !important;
  padding: 40px 16px !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-empty p {
  font-family: var(--kb-font-base) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

html body .kb-calc-empty .arrow {
  display: block !important;
  margin-top: 12px !important;
  font-size: 20px !important;
  color: var(--kb-amber) !important;
}

html body .kb-calc-filled.kb-hidden,
html body .kb-calc-empty.kb-hidden { display: none !important; }

/* --- CALC: breakdown / total / timeline --- */
html body .kb-calc-breakdown {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}

html body .kb-calc-breakdown li {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  align-items: baseline !important;
  gap: 10px !important;
  font-family: var(--kb-font-base) !important;
  font-size: 14px !important;
  color: var(--kb-text-mid) !important;
  line-height: 1.4 !important;
}

html body .kb-calc-breakdown-label {
  word-break: keep-all !important;
}

html body .kb-calc-breakdown-time {
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
  white-space: nowrap !important;
}

html body .kb-calc-breakdown-price {
  font-family: var(--kb-font-mono) !important;
  font-weight: 600 !important;
  color: var(--kb-text) !important;
  white-space: nowrap !important;
}

html body .kb-calc-divider {
  height: 1px !important;
  background: var(--kb-border-soft) !important;
  margin: 0 0 20px 0 !important;
}

html body .kb-calc-total {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}

html body .kb-calc-from-label {
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

html body .kb-calc-total-display {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-family: var(--kb-font-mono) !important;
}

html body .kb-calc-total-display .currency {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-total-display .amount {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--kb-text) !important;
  letter-spacing: -1px !important;
  line-height: 1.1 !important;
}

html body .kb-calc-timeline {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
  padding: 10px 14px !important;
  background: var(--kb-surface-alt) !important;
  border-radius: 10px !important;
}

html body .kb-calc-timeline-label {
  font-family: var(--kb-font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

html body .kb-calc-timeline-value {
  font-family: var(--kb-font-mono) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kb-text) !important;
}

html body .kb-calc-disclaimer {
  font-family: var(--kb-font-base) !important;
  font-size: 12px !important;
  color: var(--kb-text-muted) !important;
  line-height: 1.5 !important;
  margin-bottom: 20px !important;
}

html body .kb-calc-disclaimer strong {
  color: var(--kb-text-soft) !important;
  font-weight: 600 !important;
}

/* --- CALC: CTA + trust --- */
html body .kb-calc-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: var(--kb-amber) !important;
  color: #ffffff !important;
  font-family: var(--kb-font-base) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 15px 24px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  text-transform: none !important;
  border: none !important;
  box-shadow: var(--kb-shadow-amber) !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  cursor: pointer !important;
}

html body .kb-calc-cta:hover {
  background: var(--kb-amber-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

html body .kb-calc-cta:active { transform: translateY(0) !important; }

html body .kb-calc-cta svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2.5 !important;
}

html body .kb-calc-trust {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--kb-border-soft) !important;
}

html body .kb-calc-trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--kb-font-base) !important;
  font-size: 12px !important;
  color: var(--kb-text-muted) !important;
}

html body .kb-calc-trust-item svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--kb-emerald) !important;
  stroke-width: 3 !important;
  flex-shrink: 0 !important;
}

/* --- CALC: mobile sticky bar --- */
html body .kb-calc-mobile-bar {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--kb-surface) !important;
  border-top: 1px solid var(--kb-border) !important;
  padding: 12px 16px !important;
  box-shadow: 0 -8px 24px -8px rgba(15, 23, 42, 0.12) !important;
  z-index: 100 !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

html body .kb-calc-mobile-price {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

html body .kb-calc-mobile-price .from {
  font-family: var(--kb-font-mono) !important;
  font-size: 10px !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

html body .kb-calc-mobile-price .total {
  font-family: var(--kb-font-mono) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--kb-text) !important;
}

html body .kb-calc-mobile-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--kb-amber) !important;
  color: #ffffff !important;
  font-family: var(--kb-font-base) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

html body .kb-calc-mobile-cta:hover {
  background: var(--kb-amber-dark) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* --- CALC: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html body .kb-calc *,
  html body .kb-calc *::before,
  html body .kb-calc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- CALC: responsive (1024) --- */
@media (max-width: 1024px) {
  html body .kb-calc-grid { grid-template-columns: 1fr !important; }
  html body .kb-calc-price-card {
    position: static !important;
    order: -1 !important;
    margin-bottom: 32px !important;
  }
  html body .kb-calc-title { font-size: 36px !important; }
}

/* --- CALC: responsive (768) --- */
@media (max-width: 768px) {
  html body .kb-calc { padding: 56px 16px 100px !important; }
  html body .kb-calc-header { margin-bottom: 40px !important; }
  html body .kb-calc-title {
    font-size: 28px !important;
    letter-spacing: -0.3px !important;
  }
  html body .kb-calc-subtitle { font-size: 15px !important; }
  html body .kb-calc-options { gap: 32px !important; }
  html body .kb-calc-options-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  html body .kb-calc-radio-card-desc { min-height: 0 !important; }
  html body .kb-calc-price-card { padding: 20px !important; margin-bottom: 24px !important; }
  html body .kb-calc-total-display .amount { font-size: 30px !important; }
  html body .kb-calc-breakdown li { grid-template-columns: 1fr auto !important; }
  html body .kb-calc-breakdown-time { grid-column: 2 !important; }
  html body .kb-calc-breakdown-price { grid-column: 2 !important; }
  html body .kb-calc-mobile-bar { display: flex !important; }
}


/* ============================================================================
   6. PRINCIPLES SECTION  →  .kb-principles
   Локальные токены (дублируют :root — можно позже удалить)
   ============================================================================ */

/* --- PRINCIPLES: local color tokens --- */
html body .kb-principles {
  --kb-bg: #FAFAF7;
  --kb-surface: #FFFFFF;
  --kb-surface-alt: #F4F6F8;

  --kb-text: #0F172A;
  --kb-text-mid: #334155;
  --kb-text-soft: #475569;
  --kb-text-muted: #64748B;

  --kb-border: #E2E8F0;
  --kb-border-soft: #F1F5F9;

  --kb-amber: #D97706;
  --kb-amber-dark: #B45309;
  --kb-amber-soft: rgba(217, 119, 6, 0.08);

  --kb-sky: #0284C7;
  --kb-sky-dark: #0369A1;
  --kb-sky-soft: rgba(2, 132, 199, 0.08);

  --kb-emerald: #059669;
  --kb-emerald-dark: #047857;
  --kb-emerald-soft: rgba(5, 150, 105, 0.08);

  --kb-violet: #7C3AED;
  --kb-violet-dark: #6D28D9;
  --kb-violet-soft: rgba(124, 58, 237, 0.08);
}

/* --- PRINCIPLES: scoped reset --- */
html body .kb-principles,
html body .kb-principles *,
html body .kb-principles *::before,
html body .kb-principles *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .kb-principles * {
  border: 0 !important;
  font: inherit !important;
  vertical-align: baseline !important;
}

/* --- PRINCIPLES: layout --- */
html body .kb-principles {
  display: block !important;
  background: var(--kb-bg) !important;
  color: var(--kb-text) !important;
  padding: 96px 0 !important;
  margin: 0 !important;
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html body .kb-principles-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* --- PRINCIPLES: header --- */
html body .kb-principles-header {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 56px auto !important;
}

html body .kb-principles-eyebrow {
  display: inline-block !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kb-text-muted) !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: var(--kb-surface-alt) !important;
  border-radius: 6px !important;
}

html body .kb-principles-title {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: var(--kb-text) !important;
  margin: 0 0 16px 0 !important;
}

html body .kb-principles-desc {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 !important;
}

/* --- PRINCIPLES: grid 2x2 (desktop) → 1 col (mobile) --- */
html body .kb-principles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}

/* --- PRINCIPLES: card base --- */
html body .kb-principles-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-top-width: 4px !important;
  border-radius: 12px !important;
  padding: 32px !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .kb-principles-card.is-hidden-init {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

html body .kb-principles-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- PRINCIPLES: card color variants (top border accent) --- */
html body .kb-principles-card--amber {
  border-top-color: var(--kb-amber) !important;
}
html body .kb-principles-card--sky {
  border-top-color: var(--kb-sky) !important;
}
html body .kb-principles-card--violet {
  border-top-color: var(--kb-violet) !important;
}
html body .kb-principles-card--emerald {
  border-top-color: var(--kb-emerald) !important;
}

html body .kb-principles-card:hover,
html body .kb-principles-card:focus-within {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08) !important;
}

/* --- PRINCIPLES: card meta (number + icon) --- */
html body .kb-principles-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

html body .kb-principles-number {
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kb-text-muted) !important;
  letter-spacing: 0.04em !important;
}

html body .kb-principles-icon-wrap {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

html body .kb-principles-card--amber .kb-principles-icon-wrap {
  background: var(--kb-amber-soft) !important;
  color: var(--kb-amber) !important;
}
html body .kb-principles-card--sky .kb-principles-icon-wrap {
  background: var(--kb-sky-soft) !important;
  color: var(--kb-sky) !important;
}
html body .kb-principles-card--violet .kb-principles-icon-wrap {
  background: var(--kb-violet-soft) !important;
  color: var(--kb-violet) !important;
}
html body .kb-principles-card--emerald .kb-principles-icon-wrap {
  background: var(--kb-emerald-soft) !important;
  color: var(--kb-emerald) !important;
}

html body .kb-principles-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

/* --- PRINCIPLES: card content --- */
html body .kb-principles-card-title {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.3 !important;
  color: var(--kb-text) !important;
  margin: 0 0 12px 0 !important;
}

html body .kb-principles-card-promise {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--kb-text-mid) !important;
  margin: 0 0 12px 0 !important;
}

html body .kb-principles-card-mechanic {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 0 20px 0 !important;
  flex-grow: 1 !important;
}

/* --- PRINCIPLES: card badge --- */
html body .kb-principles-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  align-self: flex-start !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
}

html body .kb-principles-card--amber .kb-principles-card-badge {
  background: var(--kb-amber-soft) !important;
  color: var(--kb-amber-dark) !important;
}
html body .kb-principles-card--sky .kb-principles-card-badge {
  background: var(--kb-sky-soft) !important;
  color: var(--kb-sky-dark) !important;
}
html body .kb-principles-card--violet .kb-principles-card-badge {
  background: var(--kb-violet-soft) !important;
  color: var(--kb-violet-dark) !important;
}
html body .kb-principles-card--emerald .kb-principles-card-badge {
  background: var(--kb-emerald-soft) !important;
  color: var(--kb-emerald-dark) !important;
}

/* --- PRINCIPLES: focus-visible --- */
html body .kb-principles-card:focus-within {
  outline: 2px solid var(--kb-amber) !important;
  outline-offset: 2px !important;
}

html body .kb-principles-card a:focus-visible,
html body .kb-principles-card button:focus-visible {
  outline: 2px solid var(--kb-amber) !important;
  outline-offset: 2px !important;
}

/* --- PRINCIPLES: responsive (1024) --- */
@media (max-width: 1024px) {
  html body .kb-principles {
    padding: 80px 0 !important;
  }
  html body .kb-principles-title {
    font-size: 36px !important;
  }
  html body .kb-principles-card {
    padding: 28px !important;
  }
  html body .kb-principles-card-title {
    font-size: 20px !important;
  }
}

/* --- PRINCIPLES: responsive (768) — 1 column --- */
@media (max-width: 768px) {
  html body .kb-principles {
    padding: 64px 0 !important;
  }
  html body .kb-principles-inner {
    padding: 0 16px !important;
  }
  html body .kb-principles-header {
    margin-bottom: 40px !important;
  }
  html body .kb-principles-title {
    font-size: 28px !important;
    letter-spacing: -0.3px !important;
  }
  html body .kb-principles-desc {
    font-size: 15px !important;
  }
  html body .kb-principles-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .kb-principles-card {
    padding: 24px !important;
  }
  html body .kb-principles-card-title {
    font-size: 19px !important;
  }
  html body .kb-principles-card-promise {
    font-size: 14px !important;
  }
  html body .kb-principles-card-mechanic {
    font-size: 13px !important;
  }
  html body .kb-principles-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* --- PRINCIPLES: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html body .kb-principles-card {
    transition: none !important;
    animation: none !important;
  }
  html body .kb-principles-card:hover,
  html body .kb-principles-card:focus-within {
    transform: none !important;
    box-shadow: none !important;
  }
  html body .kb-principles-card.is-hidden-init {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- PRINCIPLES: print --- */
@media print {
  html body .kb-principles {
    padding: 24px 0 !important;
    background: #fff !important;
  }
  html body .kb-principles-card {
    break-inside: avoid !important;
    box-shadow: none !important;
    transform: none !important;
  }
}


/* ============================================================================
   7. PORTFOLIO SECTION  →  .kb-portfolio
   Локальные токены (дублируют :root — можно позже удалить)
   ============================================================================ */

/* --- PORTFOLIO: local color tokens --- */
html body .kb-portfolio {
  --kb-bg: #FAFAF7;
  --kb-surface: #FFFFFF;
  --kb-surface-alt: #F4F6F8;

  --kb-text: #0F172A;
  --kb-text-mid: #334155;
  --kb-text-soft: #475569;
  --kb-text-muted: #64748B;

  --kb-border: #E2E8F0;
  --kb-border-soft: #F1F5F9;

  --kb-amber: #D97706;
  --kb-amber-dark: #B45309;
  --kb-amber-soft: rgba(217, 119, 6, 0.08);

  --kb-sky: #0284C7;
  --kb-sky-dark: #0369A1;
  --kb-sky-soft: rgba(2, 132, 199, 0.08);

  --kb-emerald: #059669;
  --kb-emerald-dark: #047857;
  --kb-emerald-soft: rgba(5, 150, 105, 0.08);

  --kb-violet: #7C3AED;
  --kb-violet-dark: #6D28D9;
  --kb-violet-soft: rgba(124, 58, 237, 0.08);
}

/* --- PORTFOLIO: scoped reset --- */
html body .kb-portfolio,
html body .kb-portfolio *,
html body .kb-portfolio *::before,
html body .kb-portfolio *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .kb-portfolio * {
  border: 0 !important;
  font: inherit !important;
  vertical-align: baseline !important;
}

/* --- PORTFOLIO: layout --- */
html body .kb-portfolio {
  display: block !important;
  background: var(--kb-bg) !important;
  color: var(--kb-text) !important;
  padding: 96px 0 !important;
  margin: 0 !important;
  font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

html body .kb-portfolio-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* --- PORTFOLIO: header --- */
html body .kb-portfolio-header {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 56px auto !important;
}

html body .kb-portfolio-eyebrow {
  display: inline-block !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--kb-text-muted) !important;
  margin-bottom: 16px !important;
  padding: 6px 12px !important;
  background: var(--kb-surface-alt) !important;
  border-radius: 6px !important;
}

html body .kb-portfolio-title {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: var(--kb-text) !important;
  margin: 0 0 16px 0 !important;
}

html body .kb-portfolio-desc {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 !important;
}

/* --- PORTFOLIO: grid 3x2 desktop / 2x3 tablet / 1x6 mobile --- */
html body .kb-portfolio-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* --- PORTFOLIO: card base --- */
html body .kb-portfolio-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--kb-surface) !important;
  border: 1px solid var(--kb-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .kb-portfolio-card.is-hidden-init {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

html body .kb-portfolio-card.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- PORTFOLIO: card color variants (top border accent) --- */
html body .kb-portfolio-card--amber {
  border-top: 4px solid var(--kb-amber) !important;
}
html body .kb-portfolio-card--sky {
  border-top: 4px solid var(--kb-sky) !important;
}
html body .kb-portfolio-card--violet {
  border-top: 4px solid var(--kb-violet) !important;
}
html body .kb-portfolio-card--emerald {
  border-top: 4px solid var(--kb-emerald) !important;
}

html body .kb-portfolio-card:hover,
html body .kb-portfolio-card:focus-within {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.10) !important;
}

html body .kb-portfolio-card--amber:hover,
html body .kb-portfolio-card--amber:focus-within {
  border-color: var(--kb-amber) !important;
}
html body .kb-portfolio-card--sky:hover,
html body .kb-portfolio-card--sky:focus-within {
  border-color: var(--kb-sky) !important;
}
html body .kb-portfolio-card--violet:hover,
html body .kb-portfolio-card--violet:focus-within {
  border-color: var(--kb-violet) !important;
}
html body .kb-portfolio-card--emerald:hover,
html body .kb-portfolio-card--emerald:focus-within {
  border-color: var(--kb-emerald) !important;
}

/* --- PORTFOLIO: card image --- */
html body .kb-portfolio-card-image {
  position: relative !important;
  width: 100% !important;
  height: 160px !important;
  overflow: hidden !important;
  background: var(--kb-surface-alt) !important;
}

html body .kb-portfolio-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body .kb-portfolio-card:hover .kb-portfolio-card-img,
html body .kb-portfolio-card:focus-within .kb-portfolio-card-img {
  transform: scale(1.04) !important;
}

html body .kb-portfolio-card-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
              rgba(15, 23, 42, 0.0) 0%,
              rgba(15, 23, 42, 0.0) 40%,
              rgba(15, 23, 42, 0.55) 100%) !important;
  pointer-events: none !important;
}

html body .kb-portfolio-card-industry {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  padding: 5px 9px !important;
  background: rgba(15, 23, 42, 0.7) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* --- PORTFOLIO: card body --- */
html body .kb-portfolio-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  padding: 18px !important;
}

html body .kb-portfolio-card-type {
  display: inline-block !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

html body .kb-portfolio-card--amber .kb-portfolio-card-type {
  color: var(--kb-amber-dark) !important;
}
html body .kb-portfolio-card--sky .kb-portfolio-card-type {
  color: var(--kb-sky-dark) !important;
}
html body .kb-portfolio-card--violet .kb-portfolio-card-type {
  color: var(--kb-violet-dark) !important;
}
html body .kb-portfolio-card--emerald .kb-portfolio-card-type {
  color: var(--kb-emerald-dark) !important;
}

html body .kb-portfolio-card-title {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  line-height: 1.4 !important;
  color: var(--kb-text) !important;
  margin: 0 0 10px 0 !important;
}

/* --- PORTFOLIO: card summary --- */
html body .kb-portfolio-card-summary {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--kb-text-soft) !important;
  margin: 0 0 14px 0 !important;
  
  /* Обрезка до 4 строк в спокойном состоянии */
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  
  /* Плавная анимация для текста */
  transition: opacity 0.3s ease-in-out !important;
  opacity: 0.9 !important; /* Чуть приглушаем обрезанный текст */
}

/* --- ЭФФЕКТ НАВЕДЕНИЯ НА КАРТОЧКУ --- */
html body .kb-portfolio-card:hover .kb-portfolio-card-summary,
html body .kb-portfolio-card:focus-within .kb-portfolio-card-summary {
  -webkit-line-clamp: unset !important; /* Снимаем ограничение строк */
  overflow: visible !important; /* Открываем весь текст */
  opacity: 1 !important; /* Делаем текст полностью насыщенным */
}

/* --- PORTFOLIO: highlights list --- */
html body .kb-portfolio-card-highlights {
  list-style: none !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
}

html body .kb-portfolio-card-highlights li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important; 
  font-size: 13.5px !important; 
  line-height: 1.5 !important;
  color: var(--kb-text-mid) !important; 
  margin-bottom: 8px !important; 
}

html body .kb-portfolio-card-highlights li:last-child {
  margin-bottom: 0 !important;
}

html body .kb-portfolio-card-highlights li svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

html body .kb-portfolio-card--amber .kb-portfolio-card-highlights li svg {
  color: var(--kb-amber) !important;
}
html body .kb-portfolio-card--sky .kb-portfolio-card-highlights li svg {
  color: var(--kb-sky) !important;
}
html body .kb-portfolio-card--violet .kb-portfolio-card-highlights li svg {
  color: var(--kb-violet) !important;
}
html body .kb-portfolio-card--emerald .kb-portfolio-card-highlights li svg {
  color: var(--kb-emerald) !important;
}

/* --- PORTFOLIO: status (archive / live) --- */
html body .kb-portfolio-card-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--kb-border-soft) !important;
  font-family: 'JetBrains Mono', 'Menlo', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html body .kb-portfolio-card-status-note {
  font-family: 'Pretendard', 'Inter', sans-serif !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 0.7 !important;
}

html body .kb-portfolio-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Archive — amber dot */
html body .kb-portfolio-card-status--archive {
  color: var(--kb-amber-dark) !important;
}
html body .kb-portfolio-card-status--archive .kb-portfolio-dot {
  background: var(--kb-amber) !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25),
              0 0 8px 2px rgba(217, 119, 6, 0.6) !important;
}

/* Live — emerald dot */
html body .kb-portfolio-card-status--live {
  color: var(--kb-emerald-dark) !important;
}
html body .kb-portfolio-card-status--live .kb-portfolio-dot {
  background: var(--kb-emerald) !important;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25),
              0 0 8px 2px rgba(5, 150, 105, 0.6) !important;
}

/* --- PORTFOLIO: focus-visible --- */
html body .kb-portfolio-card:focus-within {
  outline: 2px solid var(--kb-amber) !important;
  outline-offset: 2px !important;
}

html body .kb-portfolio-card a:focus-visible,
html body .kb-portfolio-card button:focus-visible {
  outline: 2px solid var(--kb-amber) !important;
  outline-offset: 2px !important;
}

/* --- PORTFOLIO: responsive (1024) — 2x3 grid --- */
@media (max-width: 1024px) {
  html body .kb-portfolio {
    padding: 80px 0 !important;
  }
  html body .kb-portfolio-title {
    font-size: 36px !important;
  }
  html body .kb-portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
  html body .kb-portfolio-card-title {
    font-size: 15px !important;
  }
}

/* --- PORTFOLIO: responsive (768) — 1 column --- */
@media (max-width: 768px) {
  html body .kb-portfolio {
    padding: 64px 0 !important;
  }
  html body .kb-portfolio-inner {
    padding: 0 16px !important;
  }
  html body .kb-portfolio-header {
    margin-bottom: 40px !important;
  }
  html body .kb-portfolio-title {
    font-size: 28px !important;
    letter-spacing: -0.3px !important;
  }
  html body .kb-portfolio-desc {
    font-size: 15px !important;
  }
  html body .kb-portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .kb-portfolio-card-image {
    height: 180px !important;
  }
  html body .kb-portfolio-card-body {
    padding: 16px !important;
  }
  html body .kb-portfolio-card-title {
    font-size: 16px !important;
  }
  html body .kb-portfolio-card-summary {
    font-size: 13px !important;
    -webkit-line-clamp: unset !important;
  }
  html body .kb-portfolio-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  html body .kb-portfolio-card:hover .kb-portfolio-card-img {
    transform: none !important;
  }
}

/* --- PORTFOLIO: responsive (480) --- */
@media (max-width: 480px) {
  html body .kb-portfolio-card-image {
    height: 160px !important;
  }
  html body .kb-portfolio-card-industry {
    font-size: 9px !important;
    bottom: 8px !important;
    left: 8px !important;
    padding: 4px 7px !important;
  }
}

/* --- PORTFOLIO: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html body .kb-portfolio-card,
  html body .kb-portfolio-card-img {
    transition: none !important;
    animation: none !important;
  }
  html body .kb-portfolio-card:hover,
  html body .kb-portfolio-card:focus-within {
    transform: none !important;
    box-shadow: none !important;
  }
  html body .kb-portfolio-card:hover .kb-portfolio-card-img,
  html body .kb-portfolio-card:focus-within .kb-portfolio-card-img {
    transform: none !important;
  }
  html body .kb-portfolio-card.is-hidden-init {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- PORTFOLIO: print --- */
@media print {
  html body .kb-portfolio {
    padding: 24px 0 !important;
    background: #fff !important;
  }
  html body .kb-portfolio-card {
    break-inside: avoid !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body .kb-portfolio-card-overlay {
    display: none !important;
  }
  html body .kb-portfolio-card-img {
    transform: none !important;
  }
}

/* --- PORTFOLIO: Astra override guards --- */
html body.ast-page-builder-template .kb-portfolio,
html body.ast-no-sidebar .kb-portfolio,
html body.ast-separate-container .kb-portfolio {
  background: var(--kb-bg) !important;
  padding: 96px 0 !important;
}

html body .entry-content .kb-portfolio-card-title,
html body.ast-single-post .entry-content .kb-portfolio-card-title {
  color: var(--kb-text) !important;
  font-weight: 700 !important;
}

/* ============================================
   LIGHT THEME — ОБЪЕДИНЁННАЯ СЕКЦИЯ ABOUT + CTA
   ============================================ */
.kb-lt-about {
  --lt-bg: #F7F8FA;
  --lt-card: #FFFFFF;
  --lt-border: #E5E7EB;
  --lt-border-strong: #D1D5DB;
  --lt-text: #111827;
  --lt-text-body: #374151;
  --lt-muted: #6B7280;
  --lt-orange: #D97706;
  --lt-orange-hover: #B45309;
  --lt-sky: #0284C7;
  --lt-violet: #7C3AED;
  --lt-emerald: #059669;
  --lt-radius: 16px;
  --lt-radius-lg: 20px;
  --lt-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.04);
  --lt-shadow-hover: 0 2px 4px rgba(17,24,39,.06), 0 16px 40px rgba(17,24,39,.08);
  --lt-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', Roboto, sans-serif;

  background: var(--lt-bg);
  font-family: var(--lt-font);
  color: var(--lt-text-body);
  padding: 96px 24px;
  box-sizing: border-box;
}

/* --- Языковые шрифты --- */
html body [lang="ko"].kb-lt-about { --lt-font: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif; }
html body [lang="ru"].kb-lt-about { --lt-font: 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
html body [lang="en"].kb-lt-about { --lt-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

.kb-lt-container { max-width: 1080px; margin: 0 auto; }

/* --- Общие элементы --- */
.kb-lt-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--lt-orange);
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.kb-lt-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.8px;
  color: var(--lt-text);
  margin: 0 0 16px;
}
.kb-lt-title-accent { color: var(--lt-orange); }

.kb-lt-subtitle {
  font-size: 17px;
  line-height: 1.65;
  color: var(--lt-muted);
  max-width: 560px;
  margin: 0;
}

.kb-lt-about-header {
  text-align: center;
  margin-bottom: 64px;
}
.kb-lt-about-header .kb-lt-subtitle { margin: 0 auto; }

/* --- Сетка: фото + (лид / факты / CTA) --- */
.kb-lt-about-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}

.kb-lt-about-media {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 32px;
}

.kb-lt-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--lt-radius-lg);
  overflow: hidden;
  background: #F3F4F6;
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow);
}

.kb-lt-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.kb-lt-photo-frame:hover .kb-lt-photo { transform: scale(1.03); }

.kb-lt-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17,24,39,.35) 100%);
  pointer-events: none;
}

.kb-lt-photo-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.6);
  padding: 8px 14px;
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.kb-lt-photo-badge-number { font-size: 18px; font-weight: 800; color: var(--lt-orange); letter-spacing: -0.3px; }
.kb-lt-photo-badge-label { font-size: 12px; font-weight: 600; color: var(--lt-text-body); text-transform: uppercase; letter-spacing: .5px; }

.kb-lt-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.kb-lt-name { font-size: 22px; font-weight: 800; color: var(--lt-text); letter-spacing: -0.3px; }
.kb-lt-role { font-size: 13px; line-height: 1.45; color: var(--lt-muted); }
.kb-lt-location { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lt-muted); margin-top: 4px; }
.kb-lt-location svg { color: var(--lt-orange); }

/* --- Правая колонка --- */
.kb-lt-about-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kb-lt-about-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--lt-text-body);
  margin: 0;
}
.kb-lt-about-lead strong { color: var(--lt-text); font-weight: 700; }

.kb-lt-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-lt-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  background: var(--lt-card);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  box-shadow: var(--lt-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kb-lt-fact:hover {
  transform: translateY(-2px);
  box-shadow: var(--lt-shadow-hover);
  border-color: var(--lt-border-strong);
}
.kb-lt-fact-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kb-lt-fact-icon svg { width: 15px; height: 15px; }
.kb-lt-fact-icon--orange  { background: #FFF7ED; color: var(--lt-orange); }
.kb-lt-fact-icon--sky     { background: #EFF6FF; color: var(--lt-sky); }
.kb-lt-fact-icon--violet  { background: #F5F3FF; color: var(--lt-violet); }
.kb-lt-fact-icon--emerald { background: #ECFDF5; color: var(--lt-emerald); }

.kb-lt-fact-text { font-size: 15px; line-height: 1.55; color: var(--lt-muted); }
.kb-lt-fact-text strong { color: var(--lt-text); font-weight: 700; }

.kb-lt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 700;
  color: var(--lt-orange);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.kb-lt-link:hover { color: var(--lt-orange-hover); border-bottom-color: currentColor; gap: 12px; }
.kb-lt-link svg { transition: transform .2s ease; }
.kb-lt-link:hover svg { transform: translateX(3px); }

/* ============================================
   CTA — встроенная карточка внутри правой колонки
   ============================================ */
.kb-lt-about-cta {
  margin-top: 8px;
  background: var(--lt-card);
  border: 1px solid var(--lt-border);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: var(--lt-shadow);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.kb-lt-about-cta::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(217,119,6,.10), transparent 70%);
  pointer-events: none;
}

.kb-lt-cta-head {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto 28px;
}
.kb-lt-cta-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--lt-text);
  margin: 0 0 14px;
}
.kb-lt-cta-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--lt-muted);
  margin: 0;
}

.kb-lt-cta-actions {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.kb-lt-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  cursor: pointer;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 280px;
}
.kb-lt-btn:visited, .kb-lt-btn:hover, .kb-lt-btn:active, .kb-lt-btn:focus { text-decoration: none; }

.kb-lt-btn-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kb-lt-btn-icon svg { width: 22px; height: 22px; }

.kb-lt-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  flex-grow: 1;
  line-height: 1.2;
}
.kb-lt-btn-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; opacity: .75; }
.kb-lt-btn-action { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.kb-lt-btn-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.kb-lt-btn:hover .kb-lt-btn-arrow { opacity: 1; transform: translateX(0); }

/* --- WHATSAPP --- */
.kb-lt-btn--whatsapp {
  background: #25D366; color: #FFFFFF; border: 1px solid #25D366;
  box-shadow: 0 4px 0 #188540, 0 8px 20px rgba(37,211,102,.22);
}
.kb-lt-btn--whatsapp:hover { background: #20BD5A; border-color: #20BD5A; transform: translateY(1px); box-shadow: 0 3px 0 #156B34, 0 6px 16px rgba(37,211,102,.28); }
.kb-lt-btn--whatsapp:active { transform: translateY(3px); box-shadow: 0 1px 0 #156B34, 0 3px 8px rgba(37,211,102,.3); }
.kb-lt-btn--whatsapp .kb-lt-btn-icon { background: rgba(255,255,255,.18); }
.kb-lt-btn--whatsapp .kb-lt-btn-label { color: #FFFFFF; opacity: .8; }
.kb-lt-btn--whatsapp .kb-lt-btn-action { color: #FFFFFF; }

/* --- TELEGRAM --- */
.kb-lt-btn--telegram {
  background: #229ED9; color: #FFFFFF; border: 1px solid #229ED9;
  box-shadow: 0 4px 0 #15668C, 0 8px 20px rgba(34,158,217,.22);
}
.kb-lt-btn--telegram:hover { background: #1E8EC4; border-color: #1E8EC4; transform: translateY(1px); box-shadow: 0 3px 0 #125474, 0 6px 16px rgba(34,158,217,.28); }
.kb-lt-btn--telegram:active { transform: translateY(3px); box-shadow: 0 1px 0 #125474, 0 3px 8px rgba(34,158,217,.3); }
.kb-lt-btn--telegram .kb-lt-btn-icon { background: rgba(255,255,255,.18); }
.kb-lt-btn--telegram .kb-lt-btn-label { color: #FFFFFF; opacity: .8; }
.kb-lt-btn--telegram .kb-lt-btn-action { color: #FFFFFF; }

/* --- CTA META --- */
.kb-lt-cta-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--lt-border);
}
.kb-lt-cta-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--lt-muted);
  font-weight: 500;
}
.kb-lt-cta-meta-item svg { color: var(--lt-orange); flex-shrink: 0; }
.kb-lt-cta-meta-divider { width: 4px; height: 4px; border-radius: 50%; background: var(--lt-border-strong); }

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */
@media (max-width: 960px) {
  .kb-lt-about { padding: 72px 20px; }
  .kb-lt-title { font-size: 32px; }
  .kb-lt-about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 560px;
    margin: 0 auto;
  }
  .kb-lt-about-media { position: static; max-width: 340px; margin: 0 auto; width: 100%; }
  .kb-lt-about-cta { padding: 32px 24px; }
  .kb-lt-cta-title { font-size: 24px; }
}

@media (max-width: 600px) {
  .kb-lt-about { padding: 56px 16px; }
  .kb-lt-title { font-size: 26px; letter-spacing: -0.4px; }
  .kb-lt-subtitle, .kb-lt-about-lead { font-size: 15px; }
  .kb-lt-fact { padding: 12px 14px; }
  .kb-lt-about-cta { padding: 28px 18px; border-radius: 18px; }
  .kb-lt-cta-title { font-size: 22px; }
  .kb-lt-cta-actions { flex-direction: column; align-items: stretch; }
  .kb-lt-btn { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 100%; justify-content: flex-start; }
  .kb-lt-cta-meta { flex-direction: column; gap: 8px; align-items: center; }
  .kb-lt-cta-meta-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kb-lt-photo, .kb-lt-fact, .kb-lt-btn, .kb-lt-link, .kb-lt-btn-arrow { transition: none; }
}

/* ============================================================================
   8. CTA BUTTONS — KakaoTalk + Email (light theme, .kb-lt-*)
   ============================================================================ */

/* --- KakaoTalk --- */
.kb-lt-btn--kakao {
  background: #FEE500;
  color: #3C1E1E;
  border: 1px solid #FEE500;
  box-shadow: 0 4px 0 #C7B400, 0 8px 20px rgba(254, 229, 0, 0.25);
}
.kb-lt-btn--kakao:hover {
  background: #F5DC00;
  border-color: #F5DC00;
  color: #3C1E1E;
  transform: translateY(1px);
  box-shadow: 0 3px 0 #B8A600, 0 6px 16px rgba(254, 229, 0, 0.3);
}
.kb-lt-btn--kakao:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #B8A600, 0 3px 8px rgba(254, 229, 0, 0.3);
}
.kb-lt-btn--kakao .kb-lt-btn-icon { background: rgba(60, 30, 30, 0.08); }
.kb-lt-btn--kakao .kb-lt-btn-label { color: #3C1E1E; opacity: .75; }
.kb-lt-btn--kakao .kb-lt-btn-action { color: #3C1E1E; }

/* --- Email (white / outline) --- */
.kb-lt-btn--email,
.kb-lt-btn--email:hover,
.kb-lt-btn--email:active,
.kb-lt-btn--email:focus,
.kb-lt-btn--email:focus-visible {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #dedede !important;
  /* Делаем рамку темнее, чтобы кнопка читалась на белом фоне */
  border: 1px solid #9CA3AF !important;
  /* Более заметная тень */
  box-shadow: 0 4px 0 #CBD5E1, 0 8px 20px rgba(17, 24, 39, 0.08) !important;
}

/* Наведение: легкий серый фон и темная рамка */
.kb-lt-btn--email:hover {
  background: #F9FAFB !important;
  border-color: #4B5563 !important;
  transform: translateY(1px);
  box-shadow: 0 3px 0 #94A3B8, 0 6px 16px rgba(17, 24, 39, 0.12) !important;
}

/* Нажатие: эффект вдавливания */
.kb-lt-btn--email:active {
  background: #F3F4F6 !important;
  transform: translateY(3px);
  box-shadow: 0 1px 0 #94A3B8, 0 3px 8px rgba(17, 24, 39, 0.1) !important;
}

/* Иконка внутри кнопки: делаем её красной, чтобы кнопка не была полностью безликой */
.kb-lt-btn--email .kb-lt-btn-icon {
  background: #FEF2F2 !important; /* Светло-красный фон под иконкой */
  color: #DC2626 !important;      /* Красная иконка */
}

/* Текст в кнопке */
.kb-lt-btn--email .kb-lt-btn-label { color: #6B7280 !important; opacity: 1 !important; }
.kb-lt-btn--email .kb-lt-btn-action { color: #111827 !important; }

/* ============================================================================
   9. CONTACT MODAL — минимализм 480px (усиленные селекторы против Astra)
   ============================================================================ */

html body .kb-modal[hidden] { display: none !important; }

html body .kb-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  font-family: var(--lt-font, 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}

html body .kb-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(17, 24, 39, 0.55) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  animation: kb-fade-in .2s ease-out !important;
}

@keyframes kb-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Панель --- */
html body .kb-modal__panel {
  position: relative !important;
  width: min(480px, 100%) !important;
  max-height: calc(100vh - 32px) !important;
  overflow-y: auto !important;
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 32px 28px !important;
  box-shadow: 0 24px 64px rgba(17, 24, 39, 0.22) !important;
  color: #111827 !important;
  animation: kb-modal-in .32s cubic-bezier(.16, 1, .3, 1) !important;
}

@keyframes kb-modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Крестик: аккуратный квадрат, без пилюли --- */
html body .kb-modal__close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #9CA3AF !important;
  line-height: 1 !important;
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background .15s, color .15s !important;
}
html body .kb-modal__close:hover { background: #F3F4F6 !important; color: #111827 !important; }
html body .kb-modal__close svg { width: 18px !important; height: 18px !important; display: block !important; }

/* --- Шапка --- */
html body .kb-modal__header { margin: 0 0 24px !important; text-align: center !important; }
html body .kb-modal__eyebrow {
  display: inline-block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #D97706 !important;
  background: #FFF7ED !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  margin: 0 0 12px !important;
}
html body .kb-modal__title {
  margin: 0 0 6px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  color: #111827 !important;
  line-height: 1.25 !important;
}
html body .kb-modal__subtitle { margin: 0 !important; color: #6B7280 !important; font-size: 14px !important; line-height: 1.55 !important; }
html body .kb-modal__subtitle strong { color: #111827 !important; font-weight: 700 !important; }

/* --- Форма --- */
html body .kb-contact-form { display: grid !important; gap: 14px !important; margin: 0 !important; padding: 0 !important; }

/* Stagger-анимация полей */
html body .kb-field, html body .kb-consent, html body .kb-submit {
  opacity: 0;
  transform: translateY(8px);
  animation: kb-field-in .4s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes kb-field-in { to { opacity: 1; transform: translateY(0); } }
html body .kb-field[data-field-index="0"] { animation-delay: .06s; }
html body .kb-field[data-field-index="1"] { animation-delay: .12s; }
html body .kb-field[data-field-index="2"] { animation-delay: .18s; }
html body .kb-field[data-field-index="3"] { animation-delay: .24s; }
html body .kb-consent[data-field-index="4"] { animation-delay: .30s; }
html body .kb-submit[data-field-index="5"] { animation-delay: .36s; }

html body .kb-field { display: grid !important; gap: 6px !important; margin: 0 !important; }
html body .kb-field label {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #374151 !important;
}
html body .kb-req { color: #DC2626 !important; font-weight: 600 !important; }
html body .kb-opt { font-size: 11px !important; font-weight: 500 !important; color: #9CA3AF !important; letter-spacing: .5px !important; }

/* --- Инпуты: белые, вопреки теме --- */
html body .kb-field input,
html body .kb-field textarea {
  width: 100% !important;
  padding: 11px 13px !important;
  margin: 0 !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #111827 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body .kb-field input::placeholder,
html body .kb-field textarea::placeholder { color: #9CA3AF !important; opacity: 1 !important; }
html body .kb-field input:hover,
html body .kb-field textarea:hover { border-color: #D1D5DB !important; }
html body .kb-field input:focus,
html body .kb-field textarea:focus {
  outline: none !important;
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.12) !important;
}
html body .kb-field textarea { resize: vertical !important; min-height: 92px !important; }

html body .kb-field.is-error input,
html body .kb-field.is-error textarea { border-color: #DC2626 !important; background: #FEF2F2 !important; }

html body .kb-error { display: block !important; color: #DC2626 !important; font-size: 12px !important; min-height: 1em !important; margin: 0 !important; }

/* Honeypot */
html body .kb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* --- Согласие: аккордеон без нативного маркера ▶ --- */
html body .kb-consent {
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  background: #FAFAF9 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body .kb-consent[open] { background: #FFFFFF !important; border-color: #D1D5DB !important; }

html body .kb-consent summary {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}
html body .kb-consent summary::-webkit-details-marker { display: none !important; }
html body .kb-consent summary::marker { content: "" !important; }

html body .kb-consent__icon { color: #D97706 !important; flex-shrink: 0 !important; }
html body .kb-consent__summary-text { flex: 1 !important; }
html body .kb-consent__chevron { color: #9CA3AF !important; flex-shrink: 0 !important; transition: transform .25s ease !important; }
html body .kb-consent[open] .kb-consent__chevron { transform: rotate(180deg) !important; }

html body .kb-consent__body { padding: 0 14px 14px !important; animation: kb-consent-in .25s ease-out !important; }
@keyframes kb-consent-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

html body .kb-consent__box {
  background: #F9FAFB !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin: 0 0 12px !important;
  font-size: 12.5px !important;
  color: #4B5563 !important;
  line-height: 1.6 !important;
}
html body .kb-consent__box p { margin: 0 0 6px !important; }
html body .kb-consent__box p:last-child { margin: 0 !important; }
html body .kb-consent__box strong { color: #111827 !important; font-weight: 600 !important; }

/* --- Кастомные чекбоксы --- */
html body .kb-check {
  position: relative !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-start !important;
  margin: 8px 0 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #374151 !important;
  cursor: pointer !important;
  transition: background .15s !important;
}
html body .kb-check:hover { background: #F9FAFB !important; }

html body .kb-check input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
}
html body .kb-check__box {
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #D1D5DB !important;
  border-radius: 5px !important;
  background: #FFFFFF !important;
  position: relative !important;
  margin-top: 1px !important;
  transition: all .15s ease !important;
}
html body .kb-check__box::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #FFFFFF !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) scale(0) !important;
  transition: transform .15s ease !important;
}
html body .kb-check input:checked + .kb-check__box { background: #D97706 !important; border-color: #D97706 !important; }
html body .kb-check input:checked + .kb-check__box::after { transform: rotate(45deg) scale(1) !important; }
html body .kb-check input:focus-visible + .kb-check__box { outline: 2px solid #D97706 !important; outline-offset: 2px !important; }
html body .kb-check strong { color: #D97706 !important; font-weight: 700 !important; font-size: 12px !important; }

/* --- Submit: чёрная, минимализм --- */
html body .kb-submit {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 13px 16px !important;
  margin: 6px 0 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #111827 !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .15s, transform .1s !important;
}
html body .kb-submit:hover:not(:disabled) { background: #000000 !important; }
html body .kb-submit:active:not(:disabled) { transform: scale(.99) !important; }
html body .kb-submit:disabled { opacity: .6 !important; cursor: progress !important; }

html body .kb-submit__spinner { display: none; }
html body .kb-submit.is-loading .kb-submit__text { visibility: hidden; }
html body .kb-submit.is-loading .kb-submit__spinner {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: #FFFFFF !important;
  animation: kb-spin .8s linear infinite !important;
}
@keyframes kb-spin { to { transform: rotate(360deg); } }

html body .kb-form-status { margin: 4px 0 0 !important; font-size: 13px !important; text-align: center !important; min-height: 1em !important; color: #6B7280 !important; }
html body .kb-form-status.is-error { color: #DC2626 !important; }

/* --- Success state --- */
html body .kb-modal__state-success { padding: 20px 10px 10px !important; text-align: center !important; animation: kb-success-in .45s cubic-bezier(.16, 1, .3, 1) !important; }
@keyframes kb-success-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

html body .kb-success { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 14px !important; }
html body .kb-success__check {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important;
  display: grid !important;
  place-items: center !important;
  color: #059669 !important;
  margin-bottom: 4px !important;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.18) !important;
}
html body .kb-success__path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: kb-check-draw .5s .15s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes kb-check-draw { to { stroke-dashoffset: 0; } }

html body .kb-success__title { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.3px !important; color: #111827 !important; }
html body .kb-success__text { margin: 0 !important; font-size: 14px !important; line-height: 1.6 !important; color: #6B7280 !important; max-width: 280px !important; }
html body .kb-success__close {
  margin-top: 8px !important;
  padding: 10px 28px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: #374151 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}
html body .kb-success__close:hover { background: #F9FAFB !important; border-color: #D1D5DB !important; }

/* --- Адаптив --- */
@media (max-width: 520px) {
  html body .kb-modal__panel { padding: 26px 20px !important; border-radius: 18px !important; }
  html body .kb-modal__title { font-size: 20px !important; }
  html body .kb-modal__subtitle { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html body .kb-field, html body .kb-consent, html body .kb-submit,
  html body .kb-modal__panel, html body .kb-modal__backdrop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  html body .kb-success__path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ==========================================
   ФИКС КОНФЛИКТОВ: Модалка и форма
   ========================================== */

/* 1. Фикс кнопки при клике (фокусе) */
#kb-contact-modal .kb-submit,
#kb-contact-modal .kb-submit:focus,
#kb-contact-modal .kb-submit:active,
#kb-contact-modal .kb-submit:hover {
  background: #D97706 !important;
  color: #FFFFFF !important;
  outline: none !important;
}
#kb-contact-modal .kb-submit:focus-visible {
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.4) !important;
}

/* 2. Фикс полей ввода (чтобы не было черного фона и текста) */
#kb-contact-modal .kb-contact-form input,
#kb-contact-modal .kb-contact-form textarea {
  background-color: #FFFFFF !important;
  color: #111827 !important;
  border: 1px solid #D1D5DB !important;
}

/* Автозаполнение браузера (чтобы не делало фон синим/черным) */
#kb-contact-modal .kb-contact-form input:-webkit-autofill,
#kb-contact-modal .kb-contact-form input:-webkit-autofill:hover, 
#kb-contact-modal .kb-contact-form input:-webkit-autofill:focus, 
#kb-contact-modal .kb-contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: #111827 !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Фикс плейсхолдера (текста-подсказки) */
#kb-contact-modal .kb-contact-form input::placeholder,
#kb-contact-modal .kb-contact-form textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}

/* 3. Фикс фокуса на полях */
#kb-contact-modal .kb-contact-form input:focus,
#kb-contact-modal .kb-contact-form textarea:focus {
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15) !important;
}

/* 4. Фикс текста в чекбоксах */
#kb-contact-modal .kb-check span {
  color: #111827 !important;
}

.kb-lt-btn,
.kb-lt-btn:hover,
.kb-lt-btn:focus,
.kb-lt-btn:active,
.kb-lt-btn:visited {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Убираем псевдоэлементы темы, которые рисуют линию */
.kb-lt-btn::after,
.kb-lt-btn:hover::after {
  display: none !important;
  content: none !important;
}