/* ===================== Shared tokens (color-agnostic) ===================== */
:root{
  /* fonts */
  --font-base: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-size-0: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.125rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 1.875rem;
  --font-size-6: 2.25rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-header: 2rem;

  /* padding */
  --padding-button: 0.5rem 1rem;

  /* radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-round: 9999px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 14px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.12);

  /* sizes */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 48px;
  --control-height: 40px;
  --content-max: 70ch;

  /* layout */
  --container-max: 1000px;
  --content-pad-desktop: 20px 50px;
  --content-pad-mobile: 20px;
  --grid-gutter: 1rem;
  --section-pad-y: 1rem;

  /* transitions */
  --transition-fast: .15s ease;
  --transition: .25s ease;
  --transition-slow: .4s ease;
}

/* ===== current palette (from chosen theme.json) ===== */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-header: #ffffff;
  --color-bg-footer: #000000;
  --color-surface: #f7f8fa;
  --color-elevated: #ffffff;
  --color-overlay: #000000;
  --color-border: #e5e7eb;
  --color-text: #000000;
  --color-text-header: #000000;
  --color-text-footer: #000000;
  --color-text-light: #000000;
  --color-muted: #6b7280;
  --color-link: #f97316;
  --color-link-hover: #c2410c;

  --color-primary: #03524f;
  --color-primary-light: #36d64f;
  --color-primary-dark: #0f7f14;
  --color-primary-text: #ffffff;

  --color-secondary: #05a898;
  --color-secondary-light: #04b5a3;
  --color-secondary-dark: #03998a;
  --color-secondary-text: #FFB24C;

  --color-tertiary: #FFD801;
  --color-tertiary-light: #FFE003;
  --color-tertiary-dark: #FFC200;
  --color-tertiary-text: #BE4401;

  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;


  --bg-image: url('');
  --bg-position: top;
  --bg-size: contain;
  --bg-repeat: no-repeat;

  /* THEME-VARS:START */
  /* 🎨 Auto-generated vars for ck444-top.com */
  --color-primary: #03524f;
  --color-secondary: #187c73;
  --color-bg: #08121e;
  --color-text: #fff;
  --color-muted: #877baa;
  --color-success: #31be3d;
  --color-warning: #f8ed54;
  --color-danger: #c83236;
  --radius-sm: 0.08rem;
  --radius-md: 0.33rem;
  --radius-lg: 0.11rem;
  --fontSize: 19px;
  --shadow-opacity: 0.24;
  /* THEME-VARS:END */
}

/* ===================== Base ===================== */
html, body { height: max-content; }
body {
  margin: 0;
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  background-image: var(--bg-image);
  background-position: var(--bg-position);
  background-size: var(--bg-size);
  background-repeat: var(--bg-repeat);
  min-height: 100vh;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); line-height: var(--line-tight); color: var(--color-text)!important;}
code, pre { font-family: var(--font-mono); }
a { color: var(--color-warning); text-decoration: underline}
a:hover { color: var(--color-warning); text-decoration: none}
.container { max-width: var(--container-max); }
@media (min-width: 768px) { .content { padding: var(--content-pad-mobile); } }

strong {
  color: var(--color-text);
}

.title-1 h1,
.title-1 h2,
.title-1 h3 {
  text-transform: uppercase;
}

.title-2 h1,
.title-2 h2,
.title-2 h3 {
  text-transform: capitalize;
}

.title-3 h1,
.title-3 h2,
.title-3 h3 {
  text-transform: initial;
}

.tc-1 h1,
.tc-1 h2,
.tc-1 h3 {
  color: var(--color-text)!important;
}

.tc-2 h1,
.tc-2 h2,
.tc-2 h3 {
  color: var(--color-warning)!important;
}

.tc-3 h1,
.tc-3 h2,
.tc-3 h3 {
  color: var(--color-success)!important;
}

/* ========================================================================
   Bulma overrides (apply to both themes using data-theme attribute)
   ======================================================================== */

/* Buttons */
.button {
  border: 1px solid;
  boder-color: var(--color-white)
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  padding: var(--padding-button);
  transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  border: none;
  text-decoration: none;
}

.button:hover { opacity: .95}
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem var(--color-ring); }

/* .is-* variants */
.button.is-primary { background: linear-gradient(var(--color-secondary-light), var(--color-secondary-dark)); color: var(--color-text);}
.button.is-primary:hover { background: linear-gradient(var(--color-secondary-light), var(--color-secondary-light)); text-decoration: none}
.button.is-link { background-color: var(--color-link); color: var(--color-primary-text); }
.button.is-secondary { background: linear-gradient(var(--color-tertiary-light), var(--color-tertiary-dark)); color: var(--color-black);}
.button.is-secondary:hover { background: linear-gradient(var(--color-tertiary-light), var(--color-tertiary-light)); text-decoration: none}
.button.is-success { background-color: var(--color-tertiary-dark); color: var(--color-black); }
.button.is-warning { background-color: var(--color-warning); color: #111; }
.button.is-danger { background-color: var(--color-danger); color: var(--color-primary-text); }

/* variants: outlined / light */
.button.is-primary.is-outlined { background: transparent; color: var(--color-primary); border-color: var(--color-primary); box-shadow: none; }
.button.is-light,
.button.is-light { background: transparent; color: var(--color-text); border-color: var(--color-border); box-shadow: none; }

/* button sizes */
.button.is-small { height: calc(var(--control-height) - 8px); padding-inline: var(--space-3); font-size: var(--font-size-0); }
.button.is-medium { height: calc(var(--control-height) + 4px); padding-inline: calc(var(--space-4) + .25rem); }
.button.is-large { height: calc(var(--control-height) + 10px); padding-inline: calc(var(--space-4) + .5rem); font-size: var(--font-size-3); }

/* ------------- HEADER ----------------*/

/* Navbar */

.navbar { background-color: var(--color-bg-header); min-height: var(--control-height); padding: 0.5rem 1.5rem; text-decoration: none}
.navbar .container {gap: 20px; display: flex;align-items: center;justify-content: space-between;}
.navbar .navbar-logo {display: flex; align-items: center}
.navbar .navbar-item,
.navbar .navbar-link { color: var(--color-text-header); border-radius: var(--radius-md)!important}
.navbar .navbar-item:hover,
.navbar .navbar-link:hover,
.navbar a.navbar-link:hover { background-color: transparent; text-decoration: underline}
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active { color: var(--color-primary); }
.navbar .navbar-buttons .buttons {flex-wrap: nowrap}
.navbar>.container .navbar-brand {margin-inline-start: 0; flex-shrink: 1;}
@media (max-width: 768px) {
  header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .navbar {
    padding: 0.5rem 1.5rem;

  }
}

/* Navbar burger & dropdown in navbar */

.navbar-burger { color: var(--color-white); background-color: var(--color-secondary); margin-inline-start: unset;}
.navbar-burger:hover { color: var(--color-text); }
.navbar-dropdown { background-color: var(--color-elevated); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.navbar-dropdown .navbar-item { color: var(--color-text); }
.navbar-dropdown .navbar-item:hover { background-color: var(--color-surface); color: var(--color-text); }
.navbar-divider { background-color: var(--color-border); }
.navbar>.container .navbar-menu { width: min-content; background-color: var(--color-bg-header); font-weight: var(--font-weight-bold); border-radius: var(--radius-md); flex-wrap: wrap; margin-inline-end: unset; justify-content: center;}
.navbar>.container .navbar-menu.is-active {position: fixed;width: 100vw;left: 0;top: 0;border-radius: 0; padding: 0}
.navbar>.container .navbar-menu.is-active .navbar-item {border-radius: 0!important}
.navbar>.container .navbar-menu .navbar-item {font-weight: bold; text-decoration: none}

.navbar>.container .navbar-menu.is-active + .navbar-butttons {display: block}
.navbar .navbar-butttons .buttons {flex-wrap: nowrap}

/* HEADER-1*/

body.header-1 .navbar,
body.header-1 .navbar .navbar-menu {background-color: var(--color-primary);font-weight: normal}
body.header-1 .navbar .navbar-item {color: var(--color-warning)}

/* HEADER-2*/

body.header-2 .navbar,
body.header-2 .navbar .navbar-menu {background-color: var(--color-primary);}
body.header-2 .navbar .navbar-item {color: var(--color-white)}

/* HEADER-3*/

body.header-3 .navbar,
body.header-3 .navbar .navbar-menu {background-color: var(--color-secondary); gap: 10px}
body.header-3 .navbar .navbar-item {color: var(--color-text); background-color: rgb(255, 255, 255, 0.2)}
body.header-3 .navbar>.container .navbar-menu.is-active {position: fixed;width: 100vw;left: 0;top: 0;border-radius: 0; padding: 0}
body.header-4 .navbar>.container .navbar-menu.is-active .navbar-item {border: none}

/* HEADER-4*/

body.header-4 .navbar,
body.header-4 .navbar .navbar-menu {background-color: var(--color-white); gap: 8px}
body.header-4 .navbar .navbar-item {color: var(--color-primary); background-color: var(--color-white); border: 2px solid var(--color-primary)}
body.header-4 .navbar>.container .navbar-menu.is-active .navbar-item {border: none}

/* HEADER-5*/

body.header-5 .navbar,
body.header-5 .navbar .navbar-menu {background-color: var(--color-primary); font-weight: normal}
body.header-5 .navbar .navbar-item {color: var(--color-text); background-color: var(--color-primary);}
body.header-5 .navbar .navbar-item:hover {text-decoration: none}

/* Hero */
.hero { background-color: var(--color-surface); color: var(--color-text); padding-block: var(--section-pad-y); }
@media (max-width: 768px) { .hero {padding: 0!important;} .hero .hero-inner {border-radius: 0; padding: 1.5rem!important}}
.hero .title { color: var(--color-text); }
.hero .subtitle { color: var(--color-muted); }
.hero-inner {
  background: none;
  border-radius: var(--radius-lg);
}
.hero-image-wrapper img {border-radius: var(--radius-lg)}
.hero-image-wrapper a {display: block; position: relative}

.hero-inner .columns {
  flex-direction: column;
}

/* HERO-2*/

.hero-2 .hero, .hero-2 .breadcrumbs-section  {background-color: var(--color-black); color: var(--color-white)}
.hero-2 .hero h1 {color: var(--color-white)}

/* HERO-3*/

.hero-3 .hero, .hero-3 .breadcrumbs-section {background-color: var(--color-primary); color: var(--color-white)}
.hero-3 .hero h1 {color: var(--color-white)}

/* HERO-4*/

.hero-4 .hero, .hero-4 .breadcrumbs-section  {background-color: unset; color: var(--color-white)}
.hero-4 .hero h1 {color: var(--color-white)}
.hero-4 .hero .hero-inner {background-color: var(--color-primary); padding: 2rem 3rem}

/* HERO-5*/

.hero-5 .hero, .hero-5 .breadcrumbs-section {background-color: unset; color: var(--color-white)}
.hero-5 .hero h1 {color: var(--color-white)}
.hero-5 .hero .hero-inner {background-color: var(--color-secondary); padding: 2rem}

/* HERO-6*/

.hero-6 .hero, .hero-6 .breadcrumbs-section {background-color: unset; color: var(--color-black)}
.hero-6 .hero h1 {color: var(--color-black)}
.hero-6 .hero .hero-inner {border: 3px solid var(--color-primary); padding: 2rem 3rem}

/* Cards */
.card { background-color: var(--color-elevated); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card .card-content { padding: var(--space-4); }

/* Tables */
.table { color: var(--color-text); border-color: var(--color-border); }
.table th, .table td { border-color: var(--color-border); padding: var(--space-2) var(--space-3); }
.table thead th { color: var(--color-muted); }
.table.is-striped tbody tr:not(.is-selected):nth-child(even) { background-color: rgba(255,255,255,0.02); }

.table-wrap {overflow-x: auto}

/* Forms */
.input,
.textarea,
.select select {
  background-color: var(--color-elevated);
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: var(--radius-md);
  height: var(--control-height);
}
.input::placeholder,
.textarea::placeholder { color: var(--color-muted); }
.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 .2rem rgba(23,176,29,.35);
  outline: none;
}

/* Tabs (underline) */
.tabs a { border-color: var(--color-border); color: var(--color-text); }
.tabs li.is-active a { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Tabs (boxed) */
.tabs.is-boxed a { border: 1px solid var(--color-border); background-color: var(--color-elevated); color: var(--color-text); border-bottom-color: transparent; }
.tabs.is-boxed li.is-active a { background-color: var(--color-primary); color: var(--color-primary-text); border-color: var(--color-primary); }

/* Footer */
.footer { background-color: var(--color-bg-footer); color: var(--color-text-footer); border-top: 1px solid var(--color-border); }
.footer .menu-list a { background-color: transparent; color: var(--color-text-footer); padding: 0.5em 0.75em;}
.footer .menu-list a:hover { background-color: transparent; color: white; text-decoration: underline; }

.footer-legal {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin-top: 1rem;
}
.footer-legal,
.footer-legal a { color: inherit; }
.footer-legal a { text-decoration: underline; }
.footer-legal a:hover { opacity: 0.9; }

#footer-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-lang-switcher,
.footer-lang-switcher a { color: var(--color-text-footer); }

.social-links svg {fill: var(--color-text-footer)}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius, 50%);
  transition: background-color .2s, color .2s;
}

/* FOOTER-1*/

body.footer-1 .footer {background-color: var(--color-black);color: var(--color-white);}
body.footer-1 .footer-lang-switcher,
body.footer-1 .footer-lang-switcher a { color: var(--color-white);}
body.footer-1 .social-links svg {fill: var(--color-white)}
body.footer-1 .footer .menu-list a { background-color: transparent; color: var(--color-white); }

/* FOOTER-2*/

body.footer-2 .footer {background-color: var(--color-primary);color: var(--color-white);}
body.footer-2 .footer-lang-switcher,
body.footer-2 .footer-lang-switcher a { color: var(--color-white);}
body.footer-2 .social-links svg {fill: var(--color-white)}
body.footer-2 .footer .menu-list a { background-color: transparent; color: var(--color-white); }
body.footer-2 .menu-list {line-height: var(--bulma-menu-list-line-height);display: flex;flex-wrap: wrap;text-align: center;justify-content: center;}

/* FOOTER-3*/

body.footer-3 .footer {background-color: var(--color-secondary);color: var(--color-white);}
body.footer-3 .footer-lang-switcher,
body.footer-3 .footer-lang-switcher a { color: var(--color-white);}
body.footer-3 .social-links svg {fill: var(--color-white)}
body.footer-3 .footer .menu-list a { background-color: transparent; color: var(--color-white); }
body.footer-3 .footer .info {order: 1}
body.footer-3 .footer .menu {order: 0}
body.footer-3 .footer .social {order: 2}

/* FOOTER-4*/

body.footer-4 .footer {background-color: var(--color-white); border-top: 3px solid  var(--color-secondary); color: var(--color-black)}
body.footer-4 .footer-lang-switcher,
body.footer-4 .footer-lang-switcher a { color: var(--color-black);}
body.footer-4 .social-links svg {fill: var(--color-black)}
body.footer-4 .footer .menu-list a { background-color: transparent; color: var(--color-black); }
body.footer-4 .footer .info {order: 0}
body.footer-4 .footer .menu {order: 2}
body.footer-4 .footer .social {order: 1}

/* FOOTER-5*/

body.footer-5 .footer {background-color: var(--color-white);color: var(--color-primary);border: 5px solid  var(--color-primary); border-radius:var(--radius-lg); margin: 20px; font-weight: bold;}
body.footer-5 .footer-lang-switcher,
body.footer-5 .footer-lang-switcher a { color: var(--color-primary);}
body.footer-5 .social-links svg {fill: var(--color-primary)}
body.footer-5 .footer .menu-list a { background-color: transparent; color: var(--color-primary); }
body.footer-5 .footer .info {order: 2}
body.footer-5 .footer .menu {order: 1}
body.footer-5 .footer .social {order: 0}

/* Tag / Badge */
.tag { background-color: var(--color-primary); color: var(--color-primary-text); border-radius: var(--radius-round); }

/* Notification (alerts) */
.notification { background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.notification.is-success { background-color: rgba(34,197,94,.15); color: var(--color-success); border-color: var(--color-success); }
.notification.is-warning { background-color: rgba(245,158,11,.15); color: var(--color-warning); border-color: var(--color-warning); }
.notification.is-danger { background-color: rgba(239,68,68,.15); color: var(--color-danger); border-color: var(--color-danger); }
.notification.is-info { background-color: rgba(6,182,212,.15); color: var(--color-info); border-color: var(--color-info); }

/* Modal */
.modal-background { background-color: rgba(0,0,0,.6); }
.modal-card,
.modal-content { background-color: var(--color-elevated); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Pagination */
.pagination-link,
.pagination-previous,
.pagination-next { color: var(--color-text); border-color: var(--color-border); border-radius: var(--radius-sm); }
.pagination-link.is-current { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-text); }

/* Breadcrumb */
.breadcrumbs {
  padding: 0;
  font-size: 14px;
}

.breadcrumbs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--color-text);
}

.breadcrumbs li a {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.15s;
}

.breadcrumbs li a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.breadcrumbs li::after {
  content: "›";
  margin-left: 6px;
  margin-right: 6px;
  color: var(--color-text);
}

.breadcrumbs li.current {
  font-weight: 600;
  color: var(--color-text);
}

.breadcrumbs li.current::after {
  content: "";
}



/* Dropdown */
.dropdown-content { background-color: var(--color-elevated); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.dropdown-item { color: var(--color-text); }
.dropdown-item:hover { background-color: var(--color-surface); color: var(--color-text); }
.dropdown-item.is-active { background-color: var(--color-primary); color: var(--color-primary-text); }
.dropdown-divider { background-color: var(--color-border); }

/* Menu (sidebar) */
.menu { color: var(--color-text); }
.menu-label { color: var(--color-muted); }
.menu-list a { color: var(--color-text); border-radius: var(--radius-sm); padding-left: 0; }
.menu-list a.is-active { background-color: var(--color-primary); color: var(--color-primary-text); }

/* Panel */
.panel { background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); }
.panel-heading { background-color: var(--color-elevated); color: var(--color-text); border-bottom: 1px solid var(--color-border); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
.panel-block { color: var(--color-text); border-top: 1px solid var(--color-border); }
.panel-tabs a { border-bottom-color: var(--color-border); color: var(--color-text); }
.panel-tabs a.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); }

/* Sections */
.section { padding-block: var(--section-pad-y); }

/* FOOTER-1*/

/* carousel.css */
.carousel-track {
  display:flex; gap:var(--gap, 1rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.25rem; scroll-behavior:smooth;
  cursor:grab; user-select:none;
}
.carousel-track.dragging { cursor:grabbing; }
.carousel-item {
  flex: 0 0 calc(
          (100% - (var(--gap, 1rem) * (var(--visible, 3) - 1)))
          / var(--visible, 3)
  );
  scroll-snap-align:start;
  box-sizing:border-box;
}
.carousel-item figure { margin:0; }
@media (max-width: 768px) {
  .carousel-item {
    flex: 0 0 100% !important; /* всегда одна картинка */
  }
}
.carousel-item img {
  width:100%; height:auto; display:block; object-fit:cover;
  border-radius: var(--radius-md);
  aspect-ratio: var(--ratio, auto);
}
.carousel-track { scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-prev, .carousel-next {
  top:50%;
  z-index:2;
  opacity:.9;
}


/* ========================================================================
   🖼️ IMAGE CAROUSEL — 12 вариаций (в унисон с info / faq / cta / columns)
   ======================================================================== */

.image-carousel .carousel {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Кнопки навигации */
.image-carousel .carousel-prev,
.image-carousel .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-round);
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  border: none;
}

.image-carousel .carousel-prev { left: .5rem; }
.image-carousel .carousel-next { right: .5rem; }

/* =======================================================================
   1 — PRIMARY BACKGROUND
   ======================================================================= */
.carousel-1 .carousel {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.carousel-1 .carousel-prev,
.carousel-1 .carousel-next {
  background: var(--color-white);
  color: var(--color-primary);
}

/* =======================================================================
   2 — SECONDARY BACKGROUND
   ======================================================================= */
.carousel-2 .carousel {
  background: var(--color-secondary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.carousel-2 .carousel-prev,
.carousel-2 .carousel-next {
  background: var(--color-white);
  color: var(--color-secondary);
}

/* =======================================================================
   3 — WHITE CARD + BORDER
   ======================================================================= */
.carousel-3 .carousel {
  background: var(--color-white);
  border: 3px solid var(--color-secondary);
  color: var(--color-black);
  box-shadow: none;
}
.carousel-3 .carousel-prev,
.carousel-3 .carousel-next {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* =======================================================================
   4 — TRANSPARENT + DASHED BORDER
   ======================================================================= */
.carousel-4 .carousel {
  background: transparent;
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
  text-align: center;
}
.carousel-4 .carousel-prev,
.carousel-4 .carousel-next {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =======================================================================
   5 — WHITE + SECONDARY FRAME
   ======================================================================= */
.carousel-5 .carousel {
  background: var(--color-white);
  border: 3px solid var(--color-secondary);
  color: var(--color-secondary);
}
.carousel-5 .carousel-prev,
.carousel-5 .carousel-next {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* =======================================================================
   6 — INVERTED DARK MODE
   ======================================================================= */
.carousel-6 .carousel {
  background: var(--color-black);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}
.carousel-6 .carousel-prev,
.carousel-6 .carousel-next {
  background: var(--color-white);
  color: var(--color-black);
}

/* =======================================================================
   7 — LEFT STRIPED ACCENT
   ======================================================================= */
.carousel-7 .carousel {
  background: var(--color-surface);
  border-left: 8px solid var(--color-secondary);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.carousel-7 .carousel-prev,
.carousel-7 .carousel-next {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* =======================================================================
   8 — GRADIENT BACKGROUND
   ======================================================================= */
.carousel-8 .carousel {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.carousel-8 .carousel-prev,
.carousel-8 .carousel-next {
  background: var(--color-white);
  color: var(--color-primary);
}

/* =======================================================================
   9 — WHITE CARD + TOP BORDER
   ======================================================================= */
.carousel-9 .carousel {
  background: var(--color-white);
  color: var(--color-text);
  border-top: 6px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}
.carousel-9 .carousel-prev,
.carousel-9 .carousel-next {
  background: var(--color-primary);
  color: var(--color-white);
}

/* =======================================================================
   10 — OUTLINED + GRADIENT TEXT
   ======================================================================= */
.carousel-10 .carousel {
  background: transparent;
  border: 3px solid var(--color-primary);
  color: var(--color-primary);
  text-align: center;
}
.carousel-10 .carousel-prev,
.carousel-10 .carousel-next {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
}

/* =======================================================================
   11 — SOFT SECONDARY BACKDROP
   ======================================================================= */
.carousel-11 .carousel {
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg));
  border: 2px solid var(--color-secondary);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.carousel-11 .carousel-prev,
.carousel-11 .carousel-next {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* =======================================================================
   12 — MINIMAL MONO
   ======================================================================= */
.carousel-12 .carousel {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}
.carousel-12 .carousel-prev,
.carousel-12 .carousel-next {
  background: var(--color-elevated);
  color: var(--color-text);
  border: 2px solid var(--color-text);
}
.carousel-12 .carousel-prev:hover,
.carousel-12 .carousel-next:hover {
  background: var(--color-text);
  color: var(--color-elevated);
}



/* gallery.css */
.gallery-grid {
  display: grid;
  gap: var(--gap, .75rem);
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
}
@media (min-width: 769px) {
  .gallery-grid {
    grid-template-columns: repeat(var(--cols-tablet, var(--cols)), minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(var(--cols-desktop, var(--cols-tablet, var(--cols))), minmax(0, 1fr));
  }
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 12px);
  aspect-ratio: var(--ratio, auto);
}
.gallery-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  color: var(--color-black);
  background-color: rgba(255,255,255, 0.7);
}
.gallery-caption::before {
  content: "";
  position: absolute;
  inset: -40px 0 0 0;      /* мягкий градиент сверху подписи */
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  z-index: -1;
}
.gallery-title { margin: 0 0 4px; font-weight: 700; line-height: 1.1; }
.gallery-desc  { margin: 0; opacity: .85; display: none}


.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Кнопка по центру */
.gallery-hover-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;

  padding: 0.75rem 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4d, #ff1f75);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;

  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; /* не кликается пока скрыто */
}

/* Всплытие при наведении */
.gallery-card:hover .gallery-hover-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* Дополнительный эффект затемнения */
.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .3s ease;
}

.gallery-card:hover::after {
  opacity: 1;
}
/* базовый слой — использует переменные, чтобы легко менять тему */
.md-tables table{border-collapse:collapse;width:100%; border-radius: var(--radius-md); margin-bottom: 20px;}
.md-tables th,.md-tables td{
  border:var(--tbl-border-width,1px) solid var(--tbl-border-color,#ddd);
  padding:var(--tbl-cell-py,.75rem) var(--tbl-cell-px,.75rem);
  vertical-align:top
}
.md-tables thead th{background:var(--tbl-head-bg,transparent)}
.md-tables tbody tr:nth-child(odd){background:var(--tbl-odd-bg,transparent)}
.md-tables tbody tr:nth-child(even){background:var(--tbl-even-bg,transparent)}
.md-tables tbody tr:hover{background:var(--tbl-hover-bg,inherit)}
.md-tables table{overflow:hidden}
.md-tables table img {
  max-height: 40px;
}

.table-1 table {
  --tbl-head-bg: var(--color-primary);
  --tbl-odd-bg: var(--color-elevated);
  --tbl-even-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  --tbl-border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.table-1 table thead th{ color:#fff; }

.table-2 table{
  --tbl-head-bg: var(--color-secondary-light);
  --tbl-odd-bg: var(--color-bg);
  --tbl-even-bg: color-mix(in srgb, var(--color-text) 10%, var(--color-secondary));
  --tbl-border-color: color-mix(in srgb, var(--color-secondary) 22%, var(--color-border));
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-secondary) 14%, transparent);
}
.table-2 table thead th{ color:#fff; }

.table-3 table {
  --tbl-head-bg: var(--color-tertiary);
  --tbl-odd-bg: var(--color-secondary-dark);
  --tbl-even-bg: var(--color-secondary-dark);
  --tbl-border-color: color-mix(in srgb, var(--color-tertiary) 18%, var(--color-border));
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-tertiary) 12%, transparent);
  text-align: center;
}
.table-3 table thead th{ color: var(--color-tertiary-text); }

.table-4 table{
  --tbl-head-bg: var(--color-secondary-dark);
  --tbl-odd-bg: color-mix(in srgb, var(--color-text) 16%, transparent);
  --tbl-even-bg: color-mix(in srgb, var(--color-text) 16%, transparent);
  --tbl-border-color: var(--color-border);
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-text) 6%, transparent);
}
.table-4 .md-tables thead th{ color: var(--color-text); }

.table-5 table{
  --tbl-head-bg: transparent;
  --tbl-odd-bg: var(--color-bg);
  --tbl-even-bg: color-mix(in srgb, var(--color-text) 4%, transparent);
  --tbl-border-width: 0;
  --tbl-hover-bg: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table-5 table thead th{ color: var(--color-text); }

.table-6 table{
  --tbl-head-bg: var(--color-text);
  --tbl-odd-bg: color-mix(in srgb, var(--color-text) 8%, var(--color-bg));
  --tbl-even-bg: color-mix(in srgb, var(--color-text) 12%, var(--color-bg));
  --tbl-border-color: color-mix(in srgb, var(--color-text) 25%, var(--color-border));
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-text) 16%, transparent);
}
.table-6  table thead th{ color:#fff; }

.table-7 table{
  --tbl-head-bg: color-mix(in srgb, var(--color-secondary) 90%, var(--color-bg));
  --tbl-odd-bg: var(--color-bg);
  --tbl-even-bg: color-mix(in srgb, var(--color-secondary) 74%, var(--color-bg));
  --tbl-border-color: var(--color-border);
  --tbl-border-width: 0;
  --tbl-hover-bg: color-mix(in srgb, var(--color-secondary) 84%, transparent);
  border-radius: var(--radius-lg);
}
.table-7 table thead th{ color: var(--color-text); }

.table-8 table {
  --tbl-head-bg: color-mix(in srgb, var(--color-white) 30%, var(--color-bg));
  --tbl-odd-bg: color-mix(in srgb, var(--color-white) 30%, var(--color-bg));
  --tbl-even-bg: color-mix(in srgb, var(--color-white) 30%, var(--color-bg));
  --tbl-border-color: color-mix(in srgb, var(--color-secondary) 20%, var(--color-border));
  --tbl-border-width: 1px;
  --tbl-hover-bg: color-mix(in srgb, var(--color-secondary) 12%, transparent);
}
.table-8 table thead th{ color: var(--color-white); }

/* ----------- BLOCKQUOTE --------------- */


/* ========================================================================
   💬 BLOCKQUOTE STYLES
   ======================================================================== */

/* Base */
blockquote {
  margin: 2rem 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-style: italic;
  background: var(--color-surface);
  color: var(--color-text);
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}
blockquote p {
  margin: 0;
}

/*───────────────────────────────*/
/* QUOTE 1 — Primary Highlight */
/*───────────────────────────────*/
.quote-1 blockquote {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
  border-left: 6px solid var(--color-primary);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}
.quote-1 blockquote em {
  color: var(--color-primary-dark);
}

/*───────────────────────────────*/
/* QUOTE 2 */
/*───────────────────────────────*/
.quote-2 blockquote {
  background: color-mix(in srgb, var(--color-white) 60%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-border) 50%, var(--color-white));
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-style: italic;
  position: relative;
}
.quote-2 blockquote::before {
  content: "“";
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 2.5rem;
  color: var(--color-primary);
  opacity: 0.25;
}
.quote-2 blockquote em {
  color: var(--color-text);
}

/*───────────────────────────────*/
/* QUOTE 3 */
/*───────────────────────────────*/
.quote-3 blockquote {
  position: relative;
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  font-style: italic;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
}

/* Лента слева */
.quote-3 blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
  background: linear-gradient(
          to bottom,
          var(--color-primary),
          color-mix(in srgb, var(--color-secondary) 40%, var(--color-primary))
  );
}

/* Кавычка */
.quote-3 blockquote::after {
  content: "❝";
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2.5rem;
  color: var(--color-primary);
  opacity: 0.15;
}

/* Текст */
.quote-3 blockquote em {
  color: var(--color-primary-dark);
}
.quote-3 blockquote p {
  margin: 0;
  line-height: var(--line-relaxed);
}
/*───────────────────────────────*/
/* QUOTE 4 — Soft Bubble */
/*───────────────────────────────*/
.quote-4 blockquote {
  background: var(--color-surface);
  border: 2px dashed var(--color-secondary);
  border-radius: var(--radius-round);
  color: var(--color-secondary-dark);
  font-size: var(--font-size-2);
  box-shadow: none;
}
.quote-4 blockquote em {
  color: var(--color-secondary);
}

/*───────────────────────────────*/
/* QUOTE 5 — Gradient Ribbon */
/*───────────────────────────────*/
.quote-5 blockquote {
  background: linear-gradient(
          135deg,
          color-mix(in srgb, var(--color-primary) 25%, transparent),
          color-mix(in srgb, var(--color-secondary) 25%, transparent)
  );
  color: var(--color-text);
  border-radius: var(--radius-lg);
  border-left: none;
  box-shadow: var(--shadow-md);
  position: relative;
}
.quote-5 blockquote::before {
  content: "“";
  font-size: 3rem;
  position: absolute;
  top: -10px;
  left: 20px;
  color: var(--color-primary);
  opacity: 0.2;
}

/*───────────────────────────────*/
/* QUOTE 6 — Clean Line */
/*───────────────────────────────*/
.quote-6 blockquote {
  background: transparent;
  border: none;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-4) 0;
  font-style: italic;
  text-align: center;
  color: var(--color-text);
}
.quote-6 blockquote em {
  color: var(--color-primary);
}

/*───────────────────────────────*/
/* QUOTE 7 — Elevated Bubble */
/*───────────────────────────────*/
.quote-7 blockquote {
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border-left: none;
  padding: 2rem 2rem 2rem 5rem;
  color: var(--color-text);
  position: relative;
}
.quote-7 blockquote::before {
  content: "❝";
  font-size: 3rem;
  position: absolute;
  top: 10px;
  left: 20px;
  color: var(--color-primary);
  opacity: 0.25;
}
.quote-7 blockquote em {
  color: var(--color-secondary);
}


.rich-text img {border-radius: var(--radius-lg);}

/* ========================================================================
   📋 LIST STYLES (Scoped: .list-* wraps .rich-text)
   ======================================================================== */

/* ───────────────────────────────
   BASE STYLES FOR .rich-text LISTS
   ─────────────────────────────── */
.rich-text ul,
.rich-text ol {
  padding-left: 1.5rem;
  margin-left: 0;
  margin-block: var(--space-4);
}

.rich-text li {
  margin-block: 0.5rem;
  line-height: var(--line-normal);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/*───────────────────────────────*/
/* LIST 1 — Primary Dots & Numbers */
/*───────────────────────────────*/
.list-1 .rich-text ul {
  list-style: none;
  padding-left: 0;
}

.list-1 .rich-text ul li::before {
  content: "●";
  color: var(--color-text);
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.list-1 .rich-text ol {
  list-style: none;
  counter-reset: l1;
  padding-left: 0;
}

.list-1 .rich-text ol li {
  counter-increment: l1;
  position: relative;
  padding-left: 2.5rem;
}

.list-1 .rich-text ol li::before {
  content: counter(l1);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/*───────────────────────────────*/
/* LIST 2 — Bordered Icons */
/*───────────────────────────────*/
.list-2 .rich-text ul {
  list-style: none;
  padding-left: 0;
}

.list-2 .rich-text ul li::before {
  content: "✔";
  color: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-md);
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
}

.list-2 .rich-text ol {
  list-style: none;
  counter-reset: l1;
  padding-left: 0;
}

.list-2 .rich-text ol li {
  counter-increment: l1;
  position: relative;
  padding-left: 2.5rem;
}

.list-2 .rich-text ol li::before {
  content: counter(l1);
  position: absolute;
  left: 0;
  top: -.2rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/*───────────────────────────────*/
/* LIST 3 — Accent Stripe */
/*───────────────────────────────*/
.list-3 .rich-text ul,
.list-3 .rich-text ol {
  border-left: 4px solid var(--color-secondary);
  padding-left: 1.5rem;
}

.list-3 .rich-text ul li::marker {
  content: "› ";
  color: var(--color-text);
}

.list-3 .rich-text ol li::before {
  background: var(--color-text);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

/*───────────────────────────────*/
/* LIST 4 — Primary Blocks */
/*───────────────────────────────*/
.list-4 .rich-text ol {
  list-style: none;
  counter-reset: l4;
  padding-left: 0;
}

.list-4 .rich-text ol li {
  counter-increment: l4;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: var(--radius-md);
  margin-block: var(--space-2);
  padding: 0.7rem 0.5rem 0.7rem 4rem;
  position: relative;
}

.list-4 .rich-text ol li::before {
  content: counter(l4);
  position: absolute;
  left: 1rem;
  top: 0.7rem;
  background: var(--color-primary);
  color: var(--color-text);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.list-4 .rich-text ul li::marker {
  content: "✔ ";
  color: var(--color-text);
}

/*───────────────────────────────*/
/* LIST 5 — Soft Bubble */
/*───────────────────────────────*/
.list-5 .rich-text ul {
  list-style: none;
  padding-left: 0;
}

.list-5 .rich-text ul li {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 0.7rem 0.7rem 0.7rem 2.5rem;
  margin-bottom: var(--space-2);
  position: relative;
}

.list-5 .rich-text ul li::before {
  content: "✓";
  position: absolute;
  left: 0.75rem;
  top: 0.65rem;
  color: var(--color-text);
  font-weight: bold;
}

.list-5 .rich-text ol li::before {
  background: var(--color-success);
  color: var(--color-white);
  border-radius: var(--radius-md);
}

/*───────────────────────────────*/
/* LIST 6 — Card with Shadow */
/*───────────────────────────────*/
.list-6 .rich-text ul,
.list-6 .rich-text ol {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0.4rem 1.5rem;
  margin-inline-start: 0;
}

.list-6 .rich-text ul li::marker {
  content: "✔ ";
  color: var(--color-text);
}

.list-6 .rich-text ol {
  list-style: none;
  counter-reset: l6;
}

.list-6 .rich-text ul {
  padding-left: 2.6rem;
}

.list-6 .rich-text ol li {
  counter-increment: l6;
  position: relative;
  padding-left: 2.5rem;
}

.list-6 .rich-text ol li::before {
  content: counter(l6);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/*───────────────────────────────*/
/* LIST 7 — Boxed Items */
/*───────────────────────────────*/
.list-7 .rich-text ul,
.list-7 .rich-text ol {
  list-style: none;
  padding-left: 0;
  margin-inline-start: 0;
}

.list-7 .rich-text li {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-block: var(--space-2);
  padding: 1rem 1rem 1rem 2.7rem;
  position: relative;
}

.list-7 .rich-text ul li::before {
  content: "✔";
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  color: var(--color-text);
}

.list-7 .rich-text ol li {
  counter-increment: l7;
}

.list-7 .rich-text ol li::before {
  content: counter(l7);
  position: absolute;
  left: 0.8rem;
  top: 1rem;
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-round);
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
  line-height: 1.5rem;
  font-weight: bold;
}

/*───────────────────────────────*/
/* LIST 8 — Dashed Lines */
/*───────────────────────────────*/
.list-8 .rich-text ul,
.list-8 .rich-text ol {
  list-style: none;
  padding-left: 0;
  border-left: 2px dashed var(--color-border);
  margin-left: 1rem;
}

/* добавляем reset только для нумерованных списков */
.list-8 .rich-text ol {
  counter-reset: l8;
}

.list-8 .rich-text li {
  position: relative;
  padding: 1rem 1rem 1rem 1.8rem;
  margin-bottom: var(--space-2);
}

.list-8 .rich-text ul li::before {
  content: "✓";
  position: absolute;
  left: -0.75rem;
  top: 1rem;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

/* здесь добавляем counter-increment — вот его и не хватало */
.list-8 .rich-text ol li {
  counter-increment: l8;
}

.list-8 .rich-text ol li::before {
  content: counter(l8);
  background: var(--color-secondary);
  color: var(--color-white);
  width: 1.55rem;
  height: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: absolute;
  left: -0.75rem;
  top: 1rem;
}


#backToTop {position: fixed;bottom: 20px;right: 20px;}

/* ---------------  FAQ LIST  --------------- */
.faq .faq-list .box {border-radius: var(--radius-lg);
  cursor: pointer;}
.faq .faq-list .box .content {padding-top: 1rem};
.faq-list summary::after {
  content:"+";
  font-size:1.25rem;
  font-weight:bold;
  transition:transform .2s;
}
details[open] summary::after { content:"−"; }
details summary::after { content:"+"; }

/*!* FAQ-1*!*/
/*.faq-1 .faq .faq-list .box {background-color: var(--color-primary); color: var(--color-white); border: none}*/
/*.faq-1 .faq .faq-list summary {font-size:inherit;font-weight: bold}*/
/*.faq-1 .faq .faq-list summary::after {font-size:2.25rem;font-weight: normal; line-height: 0}*/

/*!* FAQ-2*!*/
/*.faq-2 .faq .faq-list .box {background-color: var(--color-secondary); color: var(--color-white); border: none}*/
/*.faq-2 .faq .faq-list .box .content {border-top: 1px dashed}*/
/*.faq-2 .faq .faq-list summary {font-size:18px;font-style: italic}*/
/*.faq-2 .faq .faq-list summary::after {font-size:2.25rem;font-weight: normal; line-height: 0}*/
/*.faq-2 .faq .faq-list summary::after {*/
/*  font-size:1.2rem;*/
/*  content: "⌄";*/
/*}*/
/*.faq-2 .faq details[open] summary::after {*/
/*  content: "⌃";*/
/*}*/

/*!* FAQ-3*!*/
/*.faq-3 .faq .faq-list .box {padding:0; background-color: var(--color-white); color: var(--color-secondary); border: 3px solid var(--color-secondary); font-weight: bold}*/
/*.faq-2 .faq .faq-list .box .content {border-top: 1px solid}*/
/*.faq-3 .faq .faq-list summary::after {color: var(--color-secondary);font-size:2rem;font-weight: normal; line-height: 0}*/
/*.faq-3 .faq .faq-list summary,*/
/*.faq-3 .faq .faq-list .content {padding: 1rem;}*/
/*.faq-3 .faq .faq-list .content {border-top: 1px solid; color: var(--color-black); font-weight: normal}*/
/*.faq-3 .faq .faq-list summary::after {*/
/*  font-size:1.2rem;*/
/*  content: "▼";*/
/*}*/
/*.faq-3 .faq details[open] summary::after {*/
/*  content: "▲";*/
/*}*/

/*!* FAQ-4*!*/
/*.faq-4 .faq .container {background-color: var(--color-secondary); border-radius: var(--radius-lg)}*/
/*.faq-4 .faq .faq-list .box {padding:0; background-color: var(--color-secondary); color: var(--color-white); border: 1px solid var(--color-white)}*/
/*.faq-4 .faq .faq-list summary::after {color: var(--color-white);font-size:2rem;font-weight: normal; line-height: 0}*/
/*.faq-4 .faq .faq-list summary,*/
/*.faq-4 .faq .faq-list .content {padding: 1rem;}*/
/*.faq-4 .faq .faq-list .content {border-top: 1px dashed var(--color-white)}*/
/*.faq-4 .faq .title {color: var(--color-white); text-align: center}*/
/*.faq-4 .faq .faq-list summary {color: var(--color-white); font-weight: bold}*/
/*.faq-4 .faq .faq-list summary::after {*/
/*  font-size:1.2rem;*/
/*  content: "❮";*/
/*}*/
/*.faq-4 .faq details[open] summary::after {*/
/*  content: "❯";*/
/*}*/

/*!* FAQ-5*!*/
/*.faq-5 .faq .container {border: 3px solid var(--color-secondary); border-radius: var(--radius-lg)}*/
/*.faq-5 .faq .faq-list .box {background-color: var(--color-white); color: var(--color-black); border: 1px solid var(--color-white)}*/
/*.faq-5 .faq .faq-list summary::after {font-size:2rem;font-weight: normal; line-height: 0}*/
/*.faq-5 .faq .faq-list summary,*/
/*.faq-5 .faq .faq-list .content {border-top: 1px dashed var(--color-white)}*/
/*.faq-5 .faq .faq-list summary {color: var(--color-secondary); font-weight: bold }*/
/*.faq-5 .faq .title {color: var(--color-secondary)}*/




/* ========================================================================
   💬 FAQ VARIANTS — 1–12 (в духе INFO BOX STYLES)
   ======================================================================== */

/* FAQ-1 — PRIMARY BACKGROUND */
.faq-1 .faq .faq-list .box {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.faq-1 .faq .title { color: var(--color-white); text-align: center; }

/* FAQ-2 — SECONDARY BACKGROUND */
.faq-2 .faq .faq-list .box {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.faq-2 .faq .faq-list .content { border-top: 1px dashed rgba(255,255,255,0.4); }
.faq-2 .faq .title { color: var(--color-white); text-align: center; }

/* FAQ-3 — WHITE CARD WITH BORDER */
.faq-3 .faq .faq-list .box {
  background-color: var(--color-primary);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  font-weight: bold;
}
.faq-3 .faq .faq-list .content {
  border-top: 1px solid var(--color-warning);
  color: var(--color-text);
  font-weight: normal;
}
.faq-3 .faq .title { color: var(--color-warning); text-align: center; }

/* FAQ-4 — TRANSPARENT BORDERED */
.faq-4 .faq .faq-list .box {
  background-color: var(--color-warning);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  text-align: left;
}
.faq-4 .faq .title { color: var(--color-primary); text-align: center; }

/* FAQ-5 — WHITE CARD + SECONDARY BORDER */
.faq-5 .faq .faq-list .box {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
}
.faq-5 .faq .faq-list .content { border-top: 1px dashed var(--color-secondary); }
.faq-5 .faq .title { color: var(--color-secondary); text-align: center; }

/* FAQ-6 — DARK INVERTED */
.faq-6 .faq .faq-list .box {
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.faq-6 .faq .title { color: var(--color-white); text-align: center; }

/* FAQ-7 — LEFT ACCENT STRIPE */
.faq-7 .faq .faq-list .box {
  background-color: var(--color-surface);
  border-left: 8px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.faq-7 .faq .title { color: var(--color-secondary); text-align: left; }

/* FAQ-8 — GRADIENT */
.faq-8 .faq .faq-list .box {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.faq-8 .faq .title { color: var(--color-white); text-align: center; }

/* FAQ-9 — WHITE + TOP BORDER */
.faq-9 .faq .faq-list .box {
  background-color: var(--color-white);
  color: var(--color-text);
  border-top: 6px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.faq-9 .faq .title { color: var(--color-primary); text-align: center; }

/* FAQ-10 — TRANSPARENT + GRADIENT ICONS */
.faq-10 .faq .faq-list .box {
  background: transparent;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  text-align: left;
  font-weight: bold;
}
.faq-10 .faq .faq-list summary::after {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  color: transparent;
}
.faq-10 .faq .title { color: var(--color-primary); text-align: center; }

/* FAQ-11 — SOFT SECONDARY BACKDROP */
.faq-11 .faq .faq-list .box {
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg));
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.faq-11 .faq .title { color: var(--color-secondary); text-align: left; }

/* FAQ-12 — MINIMAL MONO STYLE */
.faq-12 .faq .faq-list .box {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  box-shadow: none;
}
.faq-12 .faq .title { color: var(--color-text); text-align: left; }




/* ------------- STEPS LIST ------------------ */

ol.steps-list {
  margin-inline-start: unset;
}
.steps-list {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
}
.step-item {
  position: relative;
  padding-left: 3rem;
  margin-bottom: 2rem;
  border-radius: var(--radius-lg);
}
.step-item::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  background: var(--color-secondary);
  color: var(--color-secondary-text);
  border-radius: var(--radius-md);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.step-item img{
  border-radius: var(--radius-md);
}

@media (min-width: 767px) {
  .step-item img{
  max-height: 700px;
}
}

section.section.steps .content {
  padding: 1rem;
}

/* STEPS-1*/

.steps-1 .section.steps {background-color: var(--color-secondary)}
.steps-1 .section.steps h2 {color: var(--color-white)}
.steps-1 .section.steps .columns {flex-direction: column}
.steps-1 .section.steps .step-item::before {
  background: none;
  color: var(--color-primary);
  font-size: 28px;
}

/* STEPS-2*/

.steps-2 .section.steps {background-color: unset}
.steps-2 .section.steps h2 {color: var(--color-black); text-align: center}
.steps-2 .section.steps .columns {flex-direction: column-reverse}
.steps-2 .section.steps .step-item {background: var(--color-secondary); color: var(--color-white); font-style: italic; font-size: 22px}
.steps-2 .section.steps .step-item strong {color: var(--color-white)}
.steps-2 .section.steps .step-item::before {
  background: none;
  color: var(--color-white);
  font-size: 28px;
  right: 0.5rem;
  left: auto;
}

/* STEPS-3*/

.steps-3 .section.steps {background-color: unset}
.steps-3 .section.steps h2 {color: var(--color-black); text-align: center}
.steps-3 .section.steps .columns {flex-direction: row-reverse}
.steps-3 .section.steps .step-item {background: var(--color-white); border: 3px solid var(--color-secondary);font-size: 18px; text-decoration: underline}
.steps-3 .section.steps .step-item::before {
  color: var(--color-white);
  font-size: 20px;
  font-style: italic
}

/* STEPS-4*/

.steps-4 .section.steps {background-color: unset}
.steps-4 .section.steps .columns {flex-direction: column-reverse}
.steps-4 .section.steps .step-item {background: var(--color-white); border: none;font-size: 18px; box-shadow: unset; text-align: left}
.steps-4 .section.steps .step-item::before {
  color: var(--color-white);
}

/* STEPS-5*/

.steps-5 .section.steps {background-color: unset}
.steps-5 .section.steps h2 {color: var(--color-white)}
.steps-5 .section.steps .container {background-color: var(--color-secondary); border-radius: var(--radius-lg)}
.steps-5 .section.steps .columns {flex-direction: column-reverse}
.steps-5 .section.steps .step-item {background-color: var(--color-secondary); border: none;font-size: 20px; box-shadow: unset; text-align: left; color: var(--color-white)}
.steps-5 .section.steps .step-item strong {color: var(--color-white)}
.steps-5 .section.steps .step-item::before {color: var(--color-white);border: 2px solid var(--color-white)}

/* STEPS-5*/

.steps-5 .section.steps {background-color: unset}
.steps-5 .section.steps h2 {color: var(--color-white)}
.steps-5 .section.steps .container {background-color: var(--color-secondary); border-radius: var(--radius-lg)}
.steps-5 .section.steps .columns {flex-direction: column-reverse}
.steps-5 .section.steps .step-item {background-color: var(--color-secondary); border: none;font-size: 20px; box-shadow: unset; text-align: left; color: var(--color-white)}
.steps-5 .section.steps .step-item strong {color: var(--color-white)}
.steps-5 .section.steps .step-item:before {color: var(--color-white);border: 2px solid var(--color-white)}

.steps-5 .section.steps .step-item:after {
  content: "";
  width: 1px;
  height: 90%;
  left: 1.5rem;
  top: 3.5rem;
  background: var(--color-white);
  position: absolute;
  display: block;
}

/* STEPS-6*/

.steps-6 .section.steps {background-color: unset}
.steps-6 .section.steps h2 {color: var(--color-secondary)}
.steps-6 .section.steps .container {background-color: var(--color-white); border-radius: var(--radius-lg); border: 3px solid var(--color-secondary)}
.steps-6 .section.steps .columns {flex-direction: column-reverse}
.steps-6 .section.steps .step-item {background-color: var(--color-white); border: none;font-size: 19px; box-shadow: unset; text-align: left; color: var(--color-black)}
.steps-6 .section.steps .step-item strong {color: var(--color-black)}
.steps-6 .section.steps .step-item:before {color: var(--color-white);border: 2px solid var(--color-white)}

.steps-6 .section.steps .step-item:after {
  content: "";
  width: 1px;
  height: 90%;
  left: 1.5rem;
  top: 3.5rem;
  background: var(--color-secondary);
  position: absolute;
  display: block;
}

/* ------------- CTA BANNER ------------------ */

.cta-banner .cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-base);
  transition: background var(--transition);
}

.cta-banner .cta-text {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-normal);
  flex: 1;
}

.cta-banner .cta-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA-BANNER-1*/
.cta-banner-1 .cta-banner .cta-inner {
  background: var(--color-tertiary-light);
  color: var(--color-black);
}

/* CTA-BANNER-2*/
.cta-banner-2 .cta-banner .cta-inner {
  background: var(--color-secondary);
  color: var(--color-white);
  text-transform: uppercase;
  text-align: center;
  flex-direction: column;
}

/* CTA-BANNER-3*/
.cta-banner-3 .cta-banner .cta-inner {
  background: var(--color-warning);
  color: var(--color-black);
  text-align: center;
  flex-direction: column-reverse;
  font-style: italic;
}

/* CTA-BANNER-4*/
.cta-banner-4 .cta-banner .cta-inner {
  background: rgb(255, 255, 255, 0.2);
  color: var(--color-white);
  text-align: center;
  flex-direction: column;
  font-weight: bold;
}

.cta-banner-4 .cta-banner .cta-text {
  font-size: 16px;
}

/* ------------- INFO BANNER ------------------ */

/* Базовый контейнер */
.info-box .info-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border, #ccc);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2);
  font-family: var(--font-base);
  font-size: var(--font-size-2);
  color: var(--color-text);
  line-height: var(--line-normal);
}

/* Текст */
.info-box .info-text {
  flex: 1;
}

.info-box .info-text p {
  margin: 0;
}

/* Иконки */
.info-box .info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  border-radius: var(--radius-round);
}

/* 🟢 YES */
.info-yes .info-icon {
  background: var(--color-success, #28a745);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* 🔴 NO */
.info-no .info-icon {
  background: var(--color-danger, #d93025);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}


/* ========================================================================
   🧩 INFO BOX VARIANTS (YES / NO)
   ======================================================================== */

/* INFO-1 — PRIMARY BACKGROUND */
.info-1 .info-box .info-inner {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.info-1 .info-box .info-icon {
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: bold;
}

/* INFO-2 — SECONDARY BACKGROUND */
.info-2 .info-box .info-inner {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.info-2 .info-box .info-icon {
  background: var(--color-white);
  color: var(--color-secondary);
  border-radius: var(--radius-round);
  font-size: 20px;
}

/* INFO-3 — WHITE CARD WITH BORDER */
.info-3 .info-box .info-inner {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: unset;
}
.info-3 .info-box .info-icon {
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-round);
}

/* INFO-4 — BORDERED TRANSPARENT */
.info-4 .info-box .info-inner {
  background-color: var(--color-secondary);
  border: 2px dashed var(--color-primary);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  text-align: center;
}
.info-4 .info-box .info-icon {
  background: unset;
  color: var(--color-text);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-round);
}

/* INFO-5 — SECONDARY FRAME ON WHITE */
.info-5 .info-box .info-inner {
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  color: var(--color-secondary);
}
.info-5 .info-box .info-icon {
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-round);
}

/* INFO-6 — INVERTED COLORS */
.info-6 .info-box .info-inner {
  background-color: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.info-6 .info-box .info-icon {
  background: var(--color-white);
  color: var(--color-black);
  font-weight: bold;
}

/* INFO-7 — STRIPED LEFT BORDER */
.info-7 .info-box .info-inner {
  background-color: var(--color-primary);
  border-left: 8px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  border: none;
}
.info-7 .info-box .info-icon {
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: bold;
}

/* INFO-8 — GRADIENT STYLE */
.info-8 .info-box .info-inner {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.info-8 .info-box .info-icon {
  background: var(--color-white);
  color: var(--color-primary);
  border-radius: var(--radius-round);
}


.info-9 .info-box .info-inner {
  background-color: var(--color-white);
  color: var(--color-text);
  border-top: 6px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.info-9 .info-box .info-icon {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-round);
  font-weight: bold;
}

/* INFO-10 — OUTLINED WITH GRADIENT TEXT */
.info-10 .info-box .info-inner {
  background: transparent;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-align: center;
  font-weight: bold;
  box-shadow: unset;
}
.info-10 .info-box .info-icon {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  font-size: 20px;
  border-radius: var(--radius-round);
}

/* INFO-11 — SECONDARY BORDER + SOFT BACKDROP */
.info-11 .info-box .info-inner {
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg));
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
}
.info-11 .info-box .info-icon {
  background: var(--color-secondary);
  color: var(--color-white);
  border-radius: var(--radius-round);
  font-weight: bold;
}

/* INFO-12 — MINIMAL MONO WITH ICON BORDER */
.info-12 .info-box .info-inner {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: none;
}
.info-12 .info-box .info-icon {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-round);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}


/* ========================================================================
   🧩 TWO COLUMNS (info-card variants)
   ======================================================================== */

.two-columns .info-card {
  height: 100%;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all 0.25s ease;
  font-family: var(--font-base);
}

.two-columns .info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.info-card-image img {
  height: auto;
}

.info-card-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-3);
}

.info-card-text ul {
  list-style-type: disc;
  padding-left: 1.25em;
}

.info-card-text li {
  margin: 0.3em 0;
}

.info-card-button {
  text-align: left;
}

/* COLUMNS-1 — PRIMARY BACKGROUND */
.columns-1 .info-card {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
}
.columns-1 .info-card a.button {
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: bold;
}

/* COLUMNS-2 — SECONDARY BACKGROUND */
.columns-2 .info-card {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-sm);
}
.columns-2 .info-card a.button {
  background: var(--color-white);
  color: var(--color-secondary);
}

/* COLUMNS-3 — WHITE CARD + SECONDARY BORDER */
.columns-3 .info-card {
  background-color: var(--color-white);
  color: var(--color-black);
  border: 3px solid var(--color-secondary);
  box-shadow: unset;
}
.columns-3 .info-card a.button {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* COLUMNS-4 — TRANSPARENT + DASHED PRIMARY BORDER */
.columns-4 .info-card {
  background: transparent;
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
}
.columns-4 .info-card a.button {
  background: var(--color-primary);
  color: var(--color-white);
}

/* COLUMNS-5 — WHITE + SECONDARY FRAME */
.columns-5 .info-card {
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary);
  color: var(--color-secondary);
  box-shadow: none;
}
.columns-5 .info-card a.button {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* COLUMNS-6 — INVERTED DARK MODE */
.columns-6 .info-card {
  background-color: var(--color-black);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
}
.columns-6 .info-card a.button {
  background: var(--color-white);
  color: var(--color-black);
}

/* COLUMNS-7 — STRIPED LEFT ACCENT */
.columns-7 .info-card {
  background-color: var(--color-surface);
  border-left: 8px solid var(--color-secondary);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.columns-7 .info-card a.button {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* COLUMNS-8 — GRADIENT BACKGROUND */
.columns-8 .info-card {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.columns-8 .info-card a.button {
  background: var(--color-white);
  color: var(--color-primary);
}

/* COLUMNS-9 — WHITE CARD + TOP BORDER */
.columns-9 .info-card {
  background-color: var(--color-white);
  color: var(--color-text);
  border-top: 6px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}
.columns-9 .info-card a.button {
  background: var(--color-primary);
  color: var(--color-white);
}

/* COLUMNS-10 — TRANSPARENT + GRADIENT OUTLINE */
.columns-10 .info-card {
  background: transparent;
  border: 3px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: none;
}
.columns-10 .info-card a.button {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
}

/* COLUMNS-11 — SOFT SECONDARY BACKDROP */
.columns-11 .info-card {
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg));
  border: 2px solid var(--color-secondary);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.columns-11 .info-card a.button {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* COLUMNS-12 — MINIMAL MONO */
.columns-12 .info-card {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}
.columns-12 .info-card a.button {
  background: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-text);
}
.columns-12 .info-card a.button:hover {
  background: var(--color-text);
  color: var(--color-elevated);
}


/* ------------- BANNER ------------------ */

.banner-wrapper {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition), box-shadow var(--transition);
  max-width: 450px;
  margin: 0 auto;
}


@media (max-width: 768px) {
  max-width: 100%
  margin: 0;
}

.banner-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.banner-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: inherit;
}

.banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ------------- IMAGE-BLOCK ----------------- */
.image-block .image-block-wrapper {
  width: max-content;
  margin: 0 auto;
  max-width: 450px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

@media (max-width: 768px) {
 .image-block .image-block-wrapper {
    max-width: 100%;
 } 
}

.image-block img.image-block-img {
  width: 100%;
  display: block;
}

.image-block .image-block-desc {
  background-color: var(--color-secondary-dark);
  color: var(--color-text);
  padding: 1rem;
}

/* ------------- CTA BUTTON ------------------ */

.cta-button-wrapper {
  text-align: center;
  margin: var(--space-5) 0;
}

.cta-button {
  display: inline-block;
  padding: calc(var(--space-3) * 1.2) calc(var(--space-5) * 1.5);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3);
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-primary-text);
  text-transform: uppercase;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-md);
  text-wrap: auto;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background-color: var(--color-primary-dark);
  color: var(--color-primary-text);
}


/* ========================================================================
   🚀 CTA BUTTONS — 1:1 с INFO / FAQ
   ======================================================================== */

/* CTA-1 — PRIMARY BACKGROUND (как info-1) */
.cta-1 .cta-button {
  background: var(--color-primary);
  color: var(--color-warning);
  border: 1px solid var(--color-warning);
  box-shadow: var(--shadow-md);
}
.cta-1 .cta-button:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

/* CTA-2 — SECONDARY BACKGROUND (как info-2) */
.cta-2 .cta-button {
  background: var(--color-secondary);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-sm);
}
.cta-2 .cta-button:hover {
  background: var(--color-secondary-dark);
  transform: translateY(-2px);
}

/* CTA-3 — WHITE CARD WITH SECONDARY BORDER (как info-3) */
.cta-3 .cta-button {
  background: var(--color-white);
  color: var(--color-secondary);
  border: 3px solid var(--color-secondary);
  box-shadow: none;
}
.cta-3 .cta-button:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* CTA-4 — TRANSPARENT DASHED BORDER (как info-4) */
.cta-4 .cta-button {
  background: var(--color-warning);
  color: var(--color-black);
  border: 2px dashed var(--color-warning);
  box-shadow: none;
}
.cta-4 .cta-button:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* CTA-5 — WHITE WITH SECONDARY FRAME (как info-5) */
.cta-5 .cta-button {
  background: var(--color-white);
  color: var(--color-secondary);
  border: 3px solid var(--color-secondary);
  box-shadow: none;
}
.cta-5 .cta-button:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* CTA-6 — INVERTED DARK MODE (как info-6) */
.cta-6 .cta-button {
  background: var(--color-black);
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-lg);
}
.cta-6 .cta-button:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* CTA-7 — STRIPED FEEL (LEFT ACCENT LOGIC, как info-7) */
.cta-7 .cta-button {
  background: var(--color-surface);
  color: var(--color-primary);
  border-left: 6px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding-left: calc(var(--space-5) * 2);
  position: relative;
}
.cta-7 .cta-button:hover {
  background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-surface));
  transform: translateY(-2px);
}

/* CTA-8 — GRADIENT PRIMARY → SECONDARY (как info-8) */
.cta-8 .cta-button {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
  border: none;
  box-shadow: var(--shadow-md);
}
.cta-8 .cta-button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* CTA-9 — WHITE CARD WITH TOP BORDER (как info-9) */
.cta-9 .cta-button {
  background: var(--color-white);
  color: var(--color-text);
  border-top: 6px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}
.cta-9 .cta-button:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* CTA-10 — OUTLINED WITH GRADIENT TEXT (как info-10) */
.cta-10 .cta-button {
  background: transparent;
  border: 3px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
  box-shadow: none;
  background-clip: text;
}
.cta-10 .cta-button:hover {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: var(--color-white);
}

/* CTA-11 — SOFT SECONDARY BACKDROP (как info-11) */
.cta-11 .cta-button {
  background: color-mix(in srgb, var(--color-secondary) 8%, var(--color-bg));
  border: 2px solid var(--color-secondary);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.cta-11 .cta-button:hover {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* CTA-12 — MINIMAL MONO OUTLINE (как info-12) */
.cta-12 .cta-button {
  background: var(--color-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}
.cta-12 .cta-button:hover {
  background: var(--color-text);
  color: var(--color-elevated);
}

/* ========== Hero banner CTA + sticky bar (только ck444-top.com, site.heroBannerCta.enabled) ========== */
body[data-site="ck444-top.com"] .hero .hero-text {
  position: relative;
}
body[data-site="ck444-top.com"] .button.button--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-md, 0.5rem);
  font-size: var(--font-size-0);
  line-height: 1.15;
  text-align: left;
}
body[data-site="ck444-top.com"] .button.animated {
  transform-origin: center center;
  animation: ck444-cta-breathe 2.2s linear infinite;
  will-change: transform;
}
body[data-site="ck444-top.com"] .button.animated:hover,
body[data-site="ck444-top.com"] .button.animated:active {
  animation: none;
}
@keyframes ck444-cta-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
body[data-site="ck444-top.com"] .button.button--shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: ck444-cta-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}
body[data-site="ck444-top.com"] .button.button--shine {
  position: relative;
  overflow: hidden;
}
@keyframes ck444-cta-shine {
  0%, 35% { transform: translateX(-120%); }
  60%, 100% { transform: translateX(120%); }
}
body[data-site="ck444-top.com"] .button--cta__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
body[data-site="ck444-top.com"] .button--cta__copy {
  display: block;
  text-align: left;
  line-height: 1.15;
}
body[data-site="ck444-top.com"] .button--cta__copy > .button--cta__line {
  display: block;
}
body[data-site="ck444-top.com"] .button--cta__line--subtitle {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-0);
  letter-spacing: 0.04em;
  margin-top: 0.05rem;
}
body[data-site="ck444-top.com"] .button--cta__line--lead {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-1);
}
body[data-site="ck444-top.com"] .button--cta__line:not(.button--cta__line--lead) {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-0);
}
body[data-site="ck444-top.com"] .button--cta__gift {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent, #fff);
}
body[data-site="ck444-top.com"] .button--cta__svg {
  width: 1.65rem;
  height: 1.65rem;
  transform: rotate(12deg);
}
body[data-site="ck444-top.com"] .hero .hero-banner-cta-btn.button.is-success {
  margin: 0 auto;
  min-width: 250px;
  min-height: 70px;
  max-width: 450px;
  width: 100%;
  background-color: #2ecc71;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.45);
}
body[data-site="ck444-top.com"] .hero .hero-banner-cta-btn.button.is-success:hover {
  filter: brightness(1.06);
  color: #fff;
}

body[data-site="ck444-top.com"] .hero .hero-banner-cta-btn .button--cta__line--lead {
  font-size: 1.5rem;
  text-transform: uppercase;
}
body[data-site="ck444-top.com"] .hero .hero-banner-cta-btn .button--cta__line--subtitle {
  text-transform: uppercase;
}
body[data-site="ck444-top.com"] .hero-inner .hero-banner-cta-wrap {
  position: absolute;
  bottom: 3rem;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}
body[data-site="ck444-top.com"] .hero-inner .hero-banner-cta-wrap .promo,
body[data-site="ck444-top.com"] .hero-inner .hero-banner-cta-wrap .button {
  pointer-events: auto;
}
body[data-site="ck444-top.com"] .hero-inner .hero-extra-actions {
  position: relative;
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.hero-extra-actions {display: none!important;}

body[data-site="ck444-top.com"] .hero .hero-inner .cover {
  width: 100%;
  height: -webkit-fill-available;
  min-height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75)40%);
  pointer-events: none;
  border-radius: var(--image-radius);
}
body[data-site="ck444-top.com"] .hero .hero-inner .promo {
  font-weight: bold;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.3;
  text-shadow: 2px 2px 0 #000;
  color: #fff;
  max-width: 36rem;
}
body[data-site="ck444-top.com"] #stickyCtaBar.sticky-cta-bar {
  position: fixed;
  z-index: 19;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 2rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background-color: #0d0d0d;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
}
body[data-site="ck444-top.com"] #stickyCtaBar.sticky-cta-bar.is-visible {
  display: flex;
  z-index: 100;
}
body[data-site="ck444-top.com"] #stickyCtaBar .sticky-cta-bar__buttons {
  position: static;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
body[data-site="ck444-top.com"] #stickyCtaBar .promo {
  font-weight: bold;
  text-align: left;
  font-size: 1rem;
  line-height: 1.3;
  flex: 1 1 12rem;
  color: #fff;
  max-width: min(100%, 28rem);
  text-shadow: none;
}
body[data-site="ck444-top.com"].has-sticky-cta main {
  padding-bottom: max(6rem, calc(5rem + env(safe-area-inset-bottom)));
}
body[data-site="ck444-top.com"] #stickyCtaBar.is-visible ~ #backToTop {
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}
body[data-site="ck444-top.com"] #stickyCtaBar .hero-banner-cta-btn {
  min-height: 3rem;
  min-width: 0;
  max-width: 280px;
}
body[data-site="ck444-top.com"] #stickyCtaBar .hero-banner-cta-btn .button--cta__line--lead {
  font-size: var(--font-size-1);
}