/* KS Dynamics — Homepage (dark premium) */

:root{
  --ks-bg: #0b0c0f;
  --ks-bg-2: #0f1218;
  --ks-surface: rgba(255,255,255,0.06);
  --ks-surface-2: rgba(255,255,255,0.10);
  --ks-text: rgba(255,255,255,0.92);
  --ks-muted: rgba(255,255,255,0.70);
  --ks-muted-2: rgba(255,255,255,0.58);
  --ks-line: rgba(255,255,255,0.10);
  --ks-accent: rgba(255,255,255,0.95);

  --ks-radius-lg: 18px;
  --ks-radius-md: 14px;

  --ks-container: 1180px;

  /* Hero image (rename file if you want to keep paths stable) */
  --ks-hero-image: url("/assets/img/karelisen535d.jpg");

  /* Mid card image (Philosophy) */
  --ks-philosophy-image: url("/assets/img/philosophy.jpg");

  /* Footer brand mark height (match header logo) */
  --ks-brandmark-h: 42px;

}

/* Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--ks-text);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Smooth premium background (less banding) */
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(255,255,255,0.04), transparent 55%),
    radial-gradient(900px 520px at 30% 85%, rgba(255,255,255,0.03), transparent 55%),
    linear-gradient(180deg, var(--ks-bg) 0%, var(--ks-bg-2) 100%);
}

/* optional subtle “grain” to hide gradient transitions */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.ks-container{
  width: min(var(--ks-container), calc(100% - 48px));
  margin: 0 auto;
}

/* Dividers */
.ks-divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ks-line), transparent);
}

/* ===== Hero ===== */
.ks-hero{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  align-items: end;
}

/* background image */
.ks-hero-media{
  position: absolute;
  inset: 0;
  background-image: var(--ks-hero-image);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
}

/* overlay for readability */
.ks-hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.35) 40%,
      rgba(0,0,0,0.70) 100%);
}

.ks-hero-content{
  position: relative;
  z-index: 1;
  width: min(var(--ks-container), calc(100% - 48px));
  margin: 0 auto;
  padding: 96px 0 72px 0;
}

/* keep hero text clear (no “capsule”) */
.ks-hero-title{
  margin: 0;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: clamp(34px, 4.8vw, 56px);
  text-transform: uppercase;
}
.ks-hero-subtitle{
  margin: 14px 0 0 0;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
}

/* ===== Mid Cards ===== */
.ks-midcards{
  padding: 56px 0;
}

.ks-midcards-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ks-card{
  position: relative;
  border-radius: var(--ks-radius-lg);
  overflow: hidden;
  min-height: 330px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(900px 420px at 80% 80%, rgba(255,255,255,0.05), transparent 55%),
    rgba(0,0,0,0.35);


  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ks-card-ecosystem{ background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.80)),
    radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(900px 420px at 80% 80%, rgba(255,255,255,0.04), transparent 55%);
}
.ks-card-builds{ background-image:
    
    var(--ks-philosophy-image),
    radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.08) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.45));
  background-size: cover;
  background-position: center;
  border-radius: var(--ks-radius-lg);
}

.ks-card-philosophy{ background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.80)),
    var(--ks-philosophy-image),
    radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(900px 420px at 50% 90%, rgba(255,255,255,0.03), transparent 55%);
  .5%, center, center;
  background-size: cover, cover, cover, cover;
}

.ks-card-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.55));
}
.ks-card-content{
  position: relative;
  z-index: 1;
  padding: 26px 26px 24px 26px;
  height: 100%;
  display: grid;
  align-content: end;
  gap: 10px;
}

.ks-card-kicker{
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-size: 12px;
  color: rgba(255,255,255,0.70);
}

.ks-card-title{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  font-size: 26px;
}

.ks-card-body{
  margin: 0;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
  font-size: 14px;
}

.ks-card-cta{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25);
  width: fit-content;
}
.ks-card-cta:hover{
  border-color: rgba(255,255,255,0.26);
  background: rgba(0,0,0,0.35);
}

/* ===== About ===== */
.ks-about{
  padding: 56px 0 64px 0;
}

.ks-about-inner{
  max-width: 820px;
}

.ks-section-title{
  margin: 0 0 18px 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 20px;
}

.ks-about-text{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.7;
}

/* ===== Footer ===== */
.ks-footer{
  padding: 54px 0 0 0;
}

.ks-footer-inner{
  display: grid;
  justify-items: center;
  gap: 26px;
  padding-bottom: 34px;
}

.ks-footer-brand img{
  height: var(--ks-brandmark-h);
  width: auto;
  max-width: 70vw;
  opacity: 0.95;
}

.ks-footer-social{
  display: flex;
  gap: 14px;
}

.ks-social-btn{
  width: 46px;
  height: 46px;
  border-radius: 12px; /* more square */
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}

.ks-social-btn img{
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.95;
  /* if icon is black, this makes it white; if already white, it stays white */
  filter: brightness(0) invert(1);
}


/* make Instagram slightly larger than TikTok */
a.ks-social-btn[aria-label="Instagram"] img{
  width: 26px;
  height: 26px;
}

.ks-social-btn:hover{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}

.ks-footer-partner{
  display: grid;
  gap: 10px;
  justify-items: center;
}

.ks-footer-partner-label{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: rgba(255,255,255,0.58);
}

.ks-partner-logo{
  height: 36px;
  width: auto;
  max-width: min(380px, 80vw);
  opacity: 0.98;
}

.ks-footer-legal{
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 16px 0 18px 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.58);
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .ks-midcards-grid{ grid-template-columns: 1fr; }
  .ks-card{ min-height: 280px; }
  .ks-hero-content{ padding: 92px 0 56px 0; }
}


/* KSD: Philosophy iOS edge fix */
.ks-card-philosophy{
  position: relative;
  overflow: hidden;
  background-color: rgba(11,12,15,0.40); /* убирает “просветы” от фона страницы */
  background-clip: padding-box;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* гарантируем, что overlay реально 100% и со скруглением */
.ks-card-philosophy .ks-card-overlay{
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* тонкая внутренняя виньетка + 1px “сшивка” (НЕ размывает фото) */
.ks-card-philosophy::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  /* чуть затемняем самый край сверху/снизу + прячем 1px seam */
  box-shadow:
    inset 0 1px 0 rgba(11,12,15,0.14),
    inset 0 -1px 0 rgba(11,12,15,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.025);
  background:
    linear-gradient(180deg, rgba(11,12,15,0.035) 0%, transparent 22%),
    linear-gradient(0deg, rgba(11,12,15,0.045) 0%, transparent 28%);
}
/* end KSD: Philosophy iOS edge fix */




/* KSD: Card overlay OFF (debug) */
.ks-card{ background-color: transparent !important; }

.ks-card .ks-card-overlay{
  background: none !important;
  opacity: 0 !important;
}

.ks-card::after{
  background: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 18px 40px rgba(0,0,0,0.45) !important;
}
/* end KSD: Card overlay OFF (debug) */



/* KSD: shrink mid cards -5% (mobile) */
@media (max-width:520px){
  .ks-card-ecosystem,
  .ks-card-builds,
  .ks-card-philosophy{
    height: auto !important;
    min-height: 0 !important;
  }

  .ks-card-ecosystem .ks-card-content,
  .ks-card-builds .ks-card-content,
  .ks-card-philosophy .ks-card-content{
    padding: 26px 28px !important;
    font-size: 1.06em !important;
    line-height: 1.32 !important;
  }

  .ks-card-ecosystem .ks-card-title,
  .ks-card-builds .ks-card-title,
  .ks-card-philosophy .ks-card-title,
  .ks-card-ecosystem h3,
  .ks-card-builds h3,
  .ks-card-philosophy h3{
    font-size: 1.40em !important;
  }

  .ks-card-ecosystem .ks-btn,
  .ks-card-builds .ks-btn,
  .ks-card-philosophy .ks-btn{
    padding: 12px 18px !important;
  }
}
/* end KSD: shrink mid cards -5% (mobile) */

/* KSD: shrink mid cards -10% (mobile) */
@media (max-width:520px){
  .ks-card-ecosystem,
  .ks-card-builds,
  .ks-card-philosophy{
    height: auto !important;
    min-height: 0 !important;
  }

  .ks-card-ecosystem .ks-card-content,
  .ks-card-builds .ks-card-content,
  .ks-card-philosophy .ks-card-content{
    padding: 30px 30px !important;
    font-size: 1.12em !important;
    line-height: 1.34 !important;
  }

  .ks-card-ecosystem .ks-card-title,
  .ks-card-builds .ks-card-title,
  .ks-card-philosophy .ks-card-title,
  .ks-card-ecosystem h3,
  .ks-card-builds h3,
  .ks-card-philosophy h3{
    font-size: 1.48em !important;
  }

  .ks-card-ecosystem .ks-btn,
  .ks-card-builds .ks-btn,
  .ks-card-philosophy .ks-btn{
    padding: 13px 20px !important;
  }
}
/* end KSD: shrink mid cards -10% (mobile) */
/* KSD: philosophy image position (mobile override) */
@media (max-width:520px){
  .ks-card-philosophy{
    background-position: 50%  76% !important; /* было ~82%, поднимаем вверх */
  }
  .ks-card-philosophy::before{
    background-position: 50%  83.0% !important;
  }

  .ks-card-philosophy img,
  .ks-card-philosophy .ks-card-media img,
  .ks-card-philosophy .ks-card-image,
  .ks-card-philosophy .ks-card-bg{
    object-position: 50%  76% !important;
  }
}
/* end KSD: philosophy image position (mobile override) */


/* KSD: edge ring (no blur, no dark overlay) */
.ks-card{ position:relative; overflow:hidden; }
.ks-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.07),
    inset 0 0 18px rgba(0,0,0,0.18);
}
/* keep layers above the ring */
.ks-card .ks-card-overlay{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.ks-card .ks-card-content{ position:relative; z-index:3; }
/* end KSD: edge ring (no blur, no dark overlay) */


/* =========================
   KSD FINAL (MID CARDS)
   - edge ring: no blur, no dark overlay (iOS safe)
   - mobile sizing: current
   - philosophy image position: current
   ========================= */

/* KSD: footer instagram icon bigger */
.ks-social a[href*="instagram"] svg,
.ks-social a[href*="instagram.com"] svg,
.ks-social a[href*="instagram"] img,
.ks-social a[href*="instagram.com"] img{
  width: 26px !important;
  height: 26px !important;
  transform: scale(1.12);
  transform-origin: center;
}
/* end KSD */

/* KSD release polish: keep public page headings on the same vertical rhythm.
   Collection and Philosophy are the visual baseline. */
:root{
  --ks-release-page-top: 120px;
  --ks-release-page-top-mobile: 96px;
}

main.ks-integrations,
main.ks-conversions{
  padding: var(--ks-release-page-top) 0 70px;
}

main.ks-page > .ks-container > .ks-title,
main.ks-page > .ks-container > h1:first-child{
  margin-top: 0;
}

main.ks-page > .ks-container > .ks-title + .ks-lead,
main.ks-page > .ks-container > h1:first-child + .ks-lead{
  max-width: 58ch;
}

@media (max-width: 640px){
  main.ks-integrations,
  main.ks-conversions{
    padding-top: var(--ks-release-page-top-mobile);
  }
}

/* KSD: footer instagram icon bigger (robust) */
.ks-social a[href*="instagram"] img,
.ks-social a[href*="instagram"] svg,
.ks-social a[href*="instagram.com"] img,
.ks-social a[href*="instagram.com"] svg,
.ks-social img[src*="instagram"],
.ks-social svg[id*="instagram"],
.ks-social svg[class*="instagram"],
.ks-social svg[aria-label*="Instagram"]{
  transform: scale(1.38) !important;
  transform-origin: 50% 50% !important;
}

/* если это IMG — оставляем базовый размер, увеличиваем scale */
.ks-social a[href*="instagram"] img,
.ks-social a[href*="instagram.com"] img,
.ks-social img[src*="instagram"]{
  width: 26px !important;
  height: 26px !important;
  display: block !important;
}

/* KSD: footer instagram icon bigger (final) */
.ks-footer-social .ks-social-btn[aria-label="Instagram"] img{
  transform: scale(1.28) !important;
  transform-origin: 50% 50% !important;
  display: block !important;
}

/* KSD: iOS white bars fix (html/body background + full viewport height) */
html, body{
  background: #0b0f14 !important;
  height: 100%;
}
body{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
}
/* если где-то есть wrapper */
#app, .ks-page, main{
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}
/* end KSD */






/* KSD: BUILDS zoom-out (show more image) */
.ks-card-builds::before{  /* build1 */
  background-size: 120% auto !important;
}
.ks-card-builds::after{   /* build2 */
  background-size: 120% auto !important;
}
/* end KSD */

/* KSD: BUILDS build1 (turbo) center tweak */
.ks-card-builds::before{
  /* try center of turbo in left/diagonal half */
  background-position: 22% 72% !important;
}
/* end KSD */

/* KSD: BUILDS (FINAL, stable vars) */
:root{
  --ks-builds-a: url("/assets/img/build1.png");
  --ks-builds-b: url("/assets/img/build2.png");

  /* build1 (turbo) */
  --ks-build1-x: 30%;
  --ks-build1-y: 55%;
  --ks-build1-size: 135%;

  /* build2 (engine) */
  --ks-build2-x: 70%;
  --ks-build2-y: 45%;
  --ks-build2-size: 125%;

  /* diagonal split */
  --ks-builds-cut-top: 58%;
  --ks-builds-cut-bot: 72%;
}

.ks-card-builds{ position:relative; overflow:hidden; }
.ks-card-builds > *{ position:relative; z-index:1; }

.ks-card-builds::before,
.ks-card-builds::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-repeat:no-repeat;
  z-index:0;
}

.ks-card-builds::before{
  background-image: var(--ks-builds-a);
  background-size: var(--ks-build1-size) auto;
  background-position: var(--ks-build1-x) var(--ks-build1-y);
}

.ks-card-builds::after{
  background-image: var(--ks-builds-b);
  background-size: var(--ks-build2-size) auto;
  background-position: var(--ks-build2-x) var(--ks-build2-y);
  clip-path: polygon(var(--ks-builds-cut-top) 0%, 100% 0%, 100% 100%, var(--ks-builds-cut-bot) 100%);
}
/* end KSD: BUILDS (FINAL, stable vars) */


/* =========================================================
   KSD: BUILDS single image (builds.png) — FINAL
   цель: показывать ВСЮ картинку без увеличения (contain)
   ========================================================= */

:root{
  --ks-builds-img: url("/assets/img/builds.png");
}

.ks-card-builds{
  position: relative;
  overflow: hidden;
}

/* основной фон */
.ks-card-builds::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ks-builds-img) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important; /* ВАЖНО: без зума */
  z-index: 0;
}

/* отключаем любые старые "вторые слои"/диагонали */
.ks-card-builds::after{
  content: none !important;
  background: none !important;
}

/* текст/кнопки поверх картинки */
.ks-card-builds > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   KSD: BUILDS — remove background + stretch builds.png (COVER)
   ========================================================= */
.ks-card-builds{
  background: #0b0f14 !important;      /* убираем любое фоновое фото */
  background-image: none !important;
}

.ks-card-builds::before{
  background-image: var(--ks-builds-img) !important; /* /assets/img/builds.png */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;   /* заполняем карточку полностью */
}

.ks-card-builds::after{
  content: none !important;
  background: none !important;
}

/* KSD: BUILDS photo nudge down */
.ks-card-builds,
.ks-card-builds::before{
  background-position:         50% 54% !important;
}


/* KSD: BUILDS glass overlay (like PHILOSOPHY) */
.ks-card-builds{ position:relative; overflow:hidden; }

/* background image layer */
.ks-card-builds::before{ z-index:1; }

/* overlay layer */
.ks-card-builds::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.28) 60%,
    rgba(0,0,0,.36) 100%
  );
  backdrop-filter: blur(10px) saturate(120%);
  px) saturate(120%);
  pointer-events:none;
}

/* content above overlay */
.ks-card-builds > *{ position:relative; z-index:3; }

/* KSD: BUILDS glass overlay (STRONG override) */
.ks-card-builds,
.ks-card--builds,
.ks-card.builds{
  position: relative !important;
  overflow: hidden !important;
}

/* background image layer */
.ks-card-builds::before,
.ks-card--builds::before,
.ks-card.builds::before{
  z-index: 1 !important;
}

/* overlay layer */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.45) 55%,
    rgba(0,0,0,.55) 100%
  ) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  px) saturate(120%) !important;
  pointer-events: none !important;
}

/* content above overlay */
.ks-card-builds > *,
.ks-card--builds > *,
.ks-card.builds > *{
  position: relative !important;
  z-index: 3 !important;
}

/* px) saturate(120%) !important;
  px) saturate(120%) !important;
  pointer-events:none !important;
}

.ks-card-builds > *{ position:relative !important; z-index:3 !important; }

/* KSD: BUILDS FINAL OVERRIDE (kill diagonal/build1/build2 leftovers) */
.ks-card-builds,
.ks-card--builds,
.ks-card.builds{
  position: relative !important;
  overflow: hidden !important;
  background: none !important;
  background-image: none !important;
  clip-path: none !important;
  filter: none !important;
  transform: none !important;
}

/* прибиваем любые старые псевдо-слои с clip-path */
.ks-card-builds::before,
.ks-card-builds::after,
.ks-card--builds::before,
.ks-card--builds::after,
.ks-card.builds::before,
.ks-card.builds::after{
  clip-path: none !important;
  mask: none !important;
  filter: none !important;
  transform: none !important;
}

/* один фон */
.ks-card-builds::before,
.ks-card--builds::before,
.ks-card.builds::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: url("/assets/img/builds.png") center/cover no-repeat !important;
  /* сдвиг картинки вниз (увеличь 8% если нужно: 10%, 12% и т.д.) */
  transform: translateY(8%) !important;
}

/* более прозрачный "glass" как просил (легче, чем было) */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.22) 55%,
    rgba(0,0,0,.30) 100%) !important;
  backdrop-filter: blur(6px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
  pointer-events: none !important;
}

/* контент поверх */
.ks-card-builds > *,
.ks-card--builds > *,
.ks-card.builds > *{
  position: relative !important;
  z-index: 3 !important;
}

/* KSD: BUILDS overlay tuning (more transparent) */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.10) 0%,
    rgba(0,0,0,.20) 55%,
    rgba(0,0,0,.30) 100%
  ) !important;
  backdrop-filter: blur(8px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

/* KSD: BUILDS overlay RESET (no blur, transparent overlay) */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.00) 0%,
    rgba(0,0,0,.18) 55%,
    rgba(0,0,0,.32) 100%
  ) !important;
}

/* KSD: BUILDS image FORCE cover+center (fix shifted/not full) */
.ks-card-builds,
.ks-card--builds,
.ks-card.builds{
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
  background-position: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* слой картинки */
.ks-card-builds::before,
.ks-card--builds::before,
.ks-card.builds::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("/assets/img/builds.png") center / cover no-repeat !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
}

/* контент поверх */
.ks-card-builds > *,
.ks-card--builds > *,
.ks-card.builds > *{
  position: relative !important;
  z-index: 2 !important;
}

/* KSD: BUILDS subtle darken for text readability */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.32) 100%
  ) !important;
  pointer-events:none !important;
}

/* KSD: BUILDS subtle darken for text readability */
.ks-card-builds::after,
.ks-card--builds::after,
.ks-card.builds::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.18) 45%,
    rgba(0,0,0,.32) 100%
  ) !important;
  pointer-events:none !important;
}

/* KSD: Ecosystem logo – responsive/stable (iPhone 13/16 fix) */
.ks-card--ecosystem,
.ks-card-ecosystem,
.ks-card.ecosystem{
  position: relative;
  --ks-eco-logo-w: clamp(120px, 24vw, 170px);
  --ks-eco-logo-r: 22px;
  padding-right: calc(var(--ks-eco-logo-w) + var(--ks-eco-logo-r) + 18px);
}

.ks-card--ecosystem::after,
.ks-card-ecosystem::after,
.ks-card.ecosystem::after{
  content: "";
  position: absolute;
  right: var(--ks-eco-logo-r);
  top: 50%;
  transform: translateY(-50%);
  width: var(--ks-eco-logo-w);
  aspect-ratio: 256 / 96;
  background: url("/assets/img/ks-dynamics-logo-white.png") center / contain no-repeat;
  opacity: .88;
  pointer-events: none;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.45));
}

/* tighter screens */
@media (max-width: 420px){
  .ks-card--ecosystem,
  .ks-card-ecosystem,
  .ks-card.ecosystem{
    --ks-eco-logo-w: clamp(110px, 30vw, 150px);
    --ks-eco-logo-r: 18px;
    padding-right: calc(var(--ks-eco-logo-w) + var(--ks-eco-logo-r) + 14px);
  }
}
@media (max-width: 390px){
  .ks-card--ecosystem,
  .ks-card-ecosystem,
  .ks-card.ecosystem{
    --ks-eco-logo-w: 120px;
    --ks-eco-logo-r: 16px;
  }
}


/* KSD: ECOSYSTEM FINAL (logo right, stable across iPhone 13 / 16 Pro Max) */
.ks-card-ecosystem{
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
}

/* kill any legacy pseudo/watermark layers on Ecosystem */
.ks-card-ecosystem::before,
.ks-card-ecosystem::after,
.ks-card-ecosystem .ks-card-content::before,
.ks-card-ecosystem .ks-card-content::after{
  content: "" !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 0 !important;
}

/* restore same left start as other cards, reserve ONLY on the right for the logo */
.ks-card-ecosystem .ks-card-content{
  padding: 26px 26px 24px 26px !important;
  padding-right: clamp(190px, 44vw, 280px) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* keep text above the logo if they ever overlap */
.ks-card-ecosystem .ks-card-content > *{
  position: relative !important;
  z-index: 3 !important;
}

/* logo strictly on the right */
.ks-card-ecosystem .ks-eco-logo{
  position: absolute !important;
  right: 26px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(140px, 30vw, 200px) !important;
  height: auto !important;
  opacity: .92 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)) !important;
}

/* tagline: 1 line on big screens, forced 2 lines on small screens */
.ks-card-ecosystem .ks-eco-br{ display: none; }
@media (max-width: 420px){
  .ks-card-ecosystem .ks-eco-br{ display: inline; }
  .ks-card-ecosystem .ks-card-content{ padding-right: 180px !important; }
  .ks-card-ecosystem .ks-eco-logo{
    width: 150px !important;
    right: 22px !important;
    opacity: .90 !important;
  }
}
/* KSD: ECOSYSTEM FINAL END */


/* KSD: ECOSYSTEM FINAL v1 */
/* цель: текст как у остальных карточек + лого строго справа без оверлапа + перенос Harmony только на small */
.ks-card-ecosystem{
  --ecoLogo: clamp(130px, 24vw, 190px);
  --ecoRight: calc(24px + var(--ecoLogo) + 22px);
}

.ks-card-ecosystem .ks-card-content{
  position: relative !important;
  padding-right: var(--ecoRight) !important; /* резерв справа, левый старт НЕ трогаем */
  overflow: hidden !important;
}

.ks-card-ecosystem .ks-card-kicker,
.ks-card-ecosystem .ks-card-title,
.ks-card-ecosystem .ks-card-body,
.ks-card-ecosystem .ks-card-cta{
  position: relative !important;
  z-index: 2 !important; /* текст всегда поверх */
}

/* лого как watermark, но строго справа и не лезет в текст */
.ks-card-ecosystem .ks-eco-logo{
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--ecoLogo) !important;
  height: auto !important;
  opacity: .92 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)) !important;
}

/* по умолчанию (large) — одна строка */
.ks-card-ecosystem .ks-eco-br{ display: none !important; }

/* small (iPhone 13 и подобные) — переносим Harmony на 2 строку + чуть меньше лого */
@media (max-width: 420px){
  .ks-card-ecosystem{
    --ecoLogo: clamp(115px, 30vw, 160px);
    --ecoRight: calc(20px + var(--ecoLogo) + 18px);
  }
  .ks-card-ecosystem .ks-eco-br{ display: block !important; }
}
/* KSD: ECOSYSTEM FINAL v1 END */


/* KSD: ECOSYSTEM FINAL NO-LOGO START */
.ks-card-ecosystem .ks-card-content{
  padding: 26px 26px 24px 26px !important; /* как у остальных карточек */
  background-image: none !important;       /* прибить любые "лого-фоны", если были */
}

.ks-card-ecosystem .ks-eco-logo,
.ks-card-ecosystem .ks-eco-mark,
.ks-card-ecosystem .ks-eco-br{
  display: none !important;
}

/* прибить псевдо-оверлеи/водяные знаки, если они где-то добавлялись */
.ks-card-ecosystem::before,
.ks-card-ecosystem::after,
.ks-card-ecosystem .ks-card-content::before,
.ks-card-ecosystem .ks-card-content::after{
  content: none !important;
  background: none !important;
  filter: none !important;
  mask: none !important;
  clip-path: none !important;
  transform: none !important;
  opacity: 0 !important;
}

/* слоган всегда в одну строку */
.ks-card-ecosystem .ks-card-body{
  white-space: nowrap !important;
}
/* KSD: ECOSYSTEM FINAL NO-LOGO END */


/* KSD: ECOSYSTEM BG START */
.ks-card-ecosystem{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.52), rgba(0,0,0,.74)),
    url('/assets/img/ecosystem-mobile.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* KSD: ECOSYSTEM BG END */


/* KSD: ECOSYSTEM BG CLEAN START */
.ks-card.ks-card-ecosystem{
  /* override default .ks-card radial highlights => no side glare */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
    url("/assets/img/ecosystem-mobile.png") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* KSD: ECOSYSTEM BG CLEAN END */


/* KSD: ECOSYSTEM BG FINAL v3 (hard edge, no seams) */
.ks-card.ks-card-ecosystem{
  position: relative !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.35) !important; /* kill any default radial highlights */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* disable legacy overlay on this card (can create side glare on iOS) */
.ks-card.ks-card-ecosystem > .ks-card-overlay{
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* image layer INSIDE border (1px inset => hard boundary) */
.ks-card.ks-card-ecosystem::before{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: calc(var(--ks-radius-lg, 28px) - 1px) !important;
  background-image: url("/assets/img/ecosystem-mobile.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* vignette to remove remaining side glare */
.ks-card.ks-card-ecosystem::after{
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: calc(var(--ks-radius-lg, 28px) - 1px) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55)),
    linear-gradient(90deg,
      rgba(0,0,0,.62),
      rgba(0,0,0,0) 22%,
      rgba(0,0,0,0) 78%,
      rgba(0,0,0,.62)
    ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* content above layers */
.ks-card.ks-card-ecosystem > .ks-card-content,
.ks-card.ks-card-ecosystem .ks-card-cta{
  position: relative !important;
  z-index: 2 !important;
}

/* hide logo inside Ecosystem (if still present in HTML) */
.ks-card.ks-card-ecosystem .ks-eco-logo{ display: none !important; }
/* KSD: ECOSYSTEM BG FINAL v3 END */


/* KSD: ECO BG FINAL START */
/* цель:
   - картинка всегда видна
   - картинка НЕ касается бордера (жесткая граница)
   - без "засветов" по бокам на iOS
*/
.ks-card.ks-card-ecosystem{
  position: relative !important;
  overflow: hidden !important;
  background-color: rgba(0,0,0,.35) !important; /* только цвет, не background: */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* фон-картинка внутри рамки (inset) */
.ks-card.ks-card-ecosystem::before{
  content:"";
  position:absolute;
  inset: 2px;                 /* <-- жесткая граница: картинка не трогает бордер */
  border-radius: 26px;        /* чуть меньше, чем радиус карточки (обычно 28px) */
  background-image: url('/assets/img/ecosystem-mobile.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
  pointer-events:none;
}

/* мягкое затемнение поверх картинки, тоже внутри inset */
.ks-card.ks-card-ecosystem::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55)),
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.45));
  z-index: 1;
  pointer-events:none;
}

/* отключаем старые overlay-эксперименты именно на этой карточке */
.ks-card.ks-card-ecosystem .ks-card-overlay{
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* контент поверх всего */
.ks-card.ks-card-ecosystem .ks-card-content,
.ks-card.ks-card-ecosystem .ks-card-cta{
  position: relative !important;
  z-index: 2 !important;
}
/* KSD: ECO BG FINAL END */


/* KSD: ECO BG FINAL START */
/* цель:
   - картинка всегда видна
   - картинка НЕ касается бордера (жесткая граница)
   - без засветов/швов на iOS
*/
.ks-card.ks-card-ecosystem{
  position: relative !important;
  overflow: hidden !important;
  background: rgba(0,0,0,.55) !important;          /* цвет рамки/подложки */
  background-image: none !important;               /* убираем любые radial highlights */
  -webkit-mask-image: -webkit-radial-gradient(white, black) !important; /* iOS seam fix */
}

.ks-card.ks-card-ecosystem::before{
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;                           /* ВОТ жесткая граница */
  border-radius: calc(var(--ks-radius-lg) - 2px) !important;
  background-image: url('/assets/img/ecosystem-mobile.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  transform: translateZ(0) !important;             /* iOS seam fix */
  pointer-events: none !important;
}

.ks-card.ks-card-ecosystem::after{
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  border-radius: calc(var(--ks-radius-lg) - 2px) !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55)),
    linear-gradient(90deg,
      rgba(0,0,0,.55),
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0) 82%,
      rgba(0,0,0,.55)
    ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* отключаем overlay именно на этой карточке (он чаще всего и даёт “засветы”) */
.ks-card.ks-card-ecosystem .ks-card-overlay{
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* контент поверх фона */
.ks-card.ks-card-ecosystem .ks-card-content,
.ks-card.ks-card-ecosystem .ks-card-cta{
  position: relative !important;
  z-index: 2 !important;
}

/* tagline: одна строка */
.ks-card.ks-card-ecosystem .ks-card-body{
  white-space: nowrap !important;
}
/* KSD: ECO BG FINAL END */

/* KSD: ECO BG LOCK v4 */
.ks-card.ks-card-ecosystem{background-color:rgba(0,0,0,.55)!important;background-image:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55)),linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.55)),url("/assets/img/ecosystem-mobile.png")!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;border:1px solid rgba(255,255,255,.08)!important;background-clip:padding-box!important;background-origin:padding-box!important;overflow:hidden!important;-webkit-transform:translateZ(0)!important;transform:translateZ(0)!important;-webkit-mask-image:-webkit-radial-gradient(white,black)!important;}
.ks-card.ks-card-ecosystem::before,.ks-card.ks-card-ecosystem::after,.ks-card.ks-card-ecosystem .ks-card-content::before,.ks-card.ks-card-ecosystem .ks-card-content::after{content:none!important;display:none!important;background:none!important;}
.ks-card.ks-card-ecosystem .ks-card-overlay{background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.35))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;}
/* KSD: ECO EDGE v4.1 */
.ks-card.ks-card-ecosystem{box-shadow:inset 0 0 0 2px rgba(0,0,0,.75),inset 0 0 28px rgba(0,0,0,.45)!important;}
/* KSD: ECO TITLE RESPONSIVE v1 */
@media (max-width: 420px){.ks-card.ks-card-ecosystem .ks-card-content{padding-right:0!important;}.ks-card.ks-card-ecosystem .ks-card-title{font-size:clamp(28px,8.2vw,36px)!important;letter-spacing:.08em!important;max-width:100%!important;}}
@media (max-width: 360px){.ks-card.ks-card-ecosystem .ks-card-title{font-size:clamp(26px,9vw,34px)!important;letter-spacing:.06em!important;}}
/* KSD: ECO RESPONSIVE START */
.ks-card-ecosystem .ks-card-content{padding-right:0!important;}
@media (max-width:420px){.ks-card-ecosystem .ks-card-title{font-size:clamp(28px,8.2vw,36px)!important;letter-spacing:.08em!important;}}
@media (max-width:360px){.ks-card-ecosystem .ks-card-title{font-size:clamp(26px,9vw,34px)!important;letter-spacing:.06em!important;}}
/* KSD: ECO RESPONSIVE END */
/* KSD: ECO TEXT FIT START */
.ks-card.ks-card-ecosystem .ks-card-content{padding-right:0!important;max-width:100%!important;}
.ks-card.ks-card-ecosystem .ks-card-title{max-width:100%!important;white-space:nowrap!important;overflow:visible!important;}
.ks-card.ks-card-ecosystem .ks-card-body{white-space:nowrap!important;}
@media (max-width:420px){.ks-card.ks-card-ecosystem .ks-card-title{white-space:normal!important;letter-spacing:.06em!important;font-size:clamp(26px,8.5vw,34px)!important;line-height:1.05!important;}.ks-card.ks-card-ecosystem .ks-card-body{white-space:normal!important;}}
@media (max-width:360px){.ks-card.ks-card-ecosystem .ks-card-title{letter-spacing:.04em!important;font-size:clamp(24px,9.2vw,32px)!important;}}
/* KSD: ECO TEXT FIT END */
/* KSD: ECO TEXT LOCK v2 START */
.ks-card-ecosystem .ks-card-content{padding-right:0!important;max-width:none!important;width:100%!important;}
.ks-card-ecosystem .ks-card-kicker,.ks-card-ecosystem .ks-card-title,.ks-card-ecosystem .ks-card-body{max-width:none!important;width:100%!important;overflow:visible!important;text-overflow:clip!important;}
.ks-card-ecosystem .ks-card-title{white-space:nowrap!important;word-break:keep-all!important;hyphens:none!important;}
.ks-card-ecosystem .ks-card-body{white-space:nowrap!important;}
@media (max-width:420px){.ks-card-ecosystem .ks-card-title{font-size:clamp(22px,7.2vw,30px)!important;letter-spacing:.06em!important;line-height:1.05!important;}.ks-card-ecosystem .ks-card-body{font-size:14px!important;}}
@media (max-width:360px){.ks-card-ecosystem .ks-card-title{font-size:clamp(20px,7.6vw,28px)!important;letter-spacing:.05em!important;}}
/* KSD: ECO TEXT LOCK v2 END */
/* KSD: ECO TEXT LOCK v5 */
.ks-card.ks-card-ecosystem .ks-card-content{padding-right:26px!important;overflow:visible!important;}
.ks-card.ks-card-ecosystem .ks-eco-logo,.ks-card.ks-card-ecosystem .ks-eco-mark,.ks-card.ks-card-ecosystem .ks-eco-br{display:none!important;}
@media (max-width:420px){.ks-card.ks-card-ecosystem .ks-card-title{font-size:clamp(32px,8.4vw,38px)!important;letter-spacing:.10em!important;}.ks-card.ks-card-ecosystem .ks-card-body{font-size:clamp(14px,3.6vw,16px)!important;}}
/* KSD: ECO TEXT LOCK v5 END */
/* KSD: ECO FONT MATCH v6 */
.ks-card.ks-card-ecosystem .ks-card-title{font-size:inherit!important;letter-spacing:inherit!important;}
@media (max-width:420px){.ks-card.ks-card-ecosystem .ks-card-title{font-size:inherit!important;letter-spacing:inherit!important;}}
/* KSD: ECO FONT MATCH v6 END */
/* KSD: ECO FONT MATCH v6 */
.ks-card.ks-card-ecosystem .ks-card-title{font-size:inherit!important;letter-spacing:inherit!important;}
@media (max-width:420px){.ks-card.ks-card-ecosystem .ks-card-title{font-size:inherit!important;letter-spacing:inherit!important;}}
/* KSD: ECO FONT MATCH v6 END */
/* KSD: ECO TYPO RESET v7 (match BUILDS/PHILOSOPHY) */
.ks-card.ks-card-ecosystem .ks-card-content{padding:26px 28px!important;}
.ks-card.ks-card-ecosystem .ks-card-kicker{font-size:12px!important;letter-spacing:.20em!important;}
.ks-card.ks-card-ecosystem .ks-card-title{font-size:26px!important;letter-spacing:.10em!important;line-height:1.10!important;}
.ks-card.ks-card-ecosystem .ks-card-body{font-size:14px!important;letter-spacing:.02em!important;white-space:nowrap!important;}
.ks-card.ks-card-ecosystem .ks-card-cta{font-size:12px!important;letter-spacing:.10em!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;gap:10px!important;}
@media (max-width:420px){.ks-card.ks-card-ecosystem .ks-card-title{font-size:26px!important;letter-spacing:.10em!important;}.ks-card.ks-card-ecosystem .ks-card-body{white-space:nowrap!important;}.ks-card.ks-card-ecosystem .ks-card-cta{white-space:nowrap!important;}}
/* KSD: ECO TYPO RESET v7 END */
/* KSD: ECO METRICS MATCH v7 (match BUILDS/PHILOSOPHY) */
.ks-card.ks-card-ecosystem .ks-card-content{
  padding: 30px 30px !important;
  font-size: 1.12em !important;
  line-height: 1.34 !important;
}
.ks-card.ks-card-ecosystem .ks-card-title{
  font-size: 1.48em !important;
}
.ks-card.ks-card-ecosystem .ks-card-body{
  word-break: normal !important;
  white-space: normal !important;
}
/* KSD: ECO METRICS MATCH v7 END */
/* KSD: MIDCARDS UNIFY SIZE v8 (ECO=BUILDS=PHILO) */
@media (max-width:520px){
  .ks-card-ecosystem,
  .ks-card-builds,
  .ks-card-philosophy{
    height: auto !important;
    min-height: 280px !important; /* чтобы карточки были одинаковые по высоте */
  }

  .ks-card-ecosystem .ks-card-content,
  .ks-card-builds .ks-card-content,
  .ks-card-philosophy .ks-card-content{
    padding: 30px 30px !important;
    font-size: 1.12em !important;
    line-height: 1.34 !important;
  }

  .ks-card-ecosystem .ks-card-title,
  .ks-card-builds .ks-card-title,
  .ks-card-philosophy .ks-card-title{
    font-size: 1.48em !important;
  }
}
/* KSD: MIDCARDS UNIFY SIZE v8 END */
/* KSD: ECO TAGLINE ONE-LINE v9 */
.ks-card-ecosystem .ks-card-body{
  white-space: nowrap !important;
  word-break: keep-all !important;
  hyphens: none !important;
}
@media (max-width:520px){
  .ks-card-ecosystem .ks-card-body{
    font-size: clamp(12px, 3.2vw, 14px) !important;
    letter-spacing: 0.01em !important;
  }
}
/* KSD: ECO TAGLINE ONE-LINE v9 END */
/* KSD: ECO TAGLINE ONE-LINE v10 (strong clamp) */
.ks-card-ecosystem .ks-card-body{
  white-space: nowrap !important;
  word-break: keep-all !important;
  hyphens: none !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

@media (max-width:520px){
  .ks-card-ecosystem .ks-card-body{
    font-size: clamp(11px, 2.6vw, 13px) !important;
    letter-spacing: 0 !important;
  }
}
@media (max-width:420px){
  .ks-card-ecosystem .ks-card-body{
    font-size: clamp(10px, 2.4vw, 12px) !important;
  }
}
@media (max-width:390px){
  .ks-card-ecosystem .ks-card-body{
    font-size: clamp(10px, 2.2vw, 11px) !important;
  }
}
/* KSD: ECO TAGLINE ONE-LINE v10 END */
/* KSD: ECO TAGLINE ONE-LINE v11 (force) */
.ks-card.ks-card-ecosystem .ks-card-body{
  white-space: nowrap !important;
  word-break: keep-all !important;
  hyphens: none !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  letter-spacing: 0 !important;
  font-size: clamp(11px, 2.8vw, 14px) !important;
}

/* если в HTML есть <br> или .ks-eco-br — прибиваем */
.ks-card.ks-card-ecosystem .ks-card-body br,
.ks-card.ks-card-ecosystem .ks-card-body .ks-eco-br{
  display: none !important;
}

@media (max-width:420px){
  .ks-card.ks-card-ecosystem .ks-card-body{
    font-size: clamp(10px, 2.6vw, 13px) !important;
  }
}
@media (max-width:360px){
  .ks-card.ks-card-ecosystem .ks-card-body{
    font-size: clamp(10px, 2.4vw, 12px) !important;
  }
}
/* KSD: ECO TAGLINE ONE-LINE v11 END */

/* KSD: MIDCARDS FINAL LOCK 1767562017 */

/* KSD: MIDCARDS FINAL LOCK 1767562123 */
/* KSD: DESKTOP IMAGE POSITION FIX v1 (HERO + PHILOSOPHY) */
@media (min-width: 900px){

  /* HERO: lift image up (show more car) */
  .ks-hero,
  .ks-hero::before,
  .ks-hero-bg{
    background-position: 50% 38% !important;
  }
  .ks-hero img,
  .ks-hero-media img,
  .ks-hero-bg img{
    object-position: 50% 38% !important;
  }

  /* PHILOSOPHY: lift image up (car not too low) */
  .ks-card-philosophy{
    background-position: 50% 58% !important;
  }
  .ks-card-philosophy::before{
    background-position: 50% 58% !important;
  }
  .ks-card-philosophy img,
  .ks-card-philosophy .ks-card-bg{
    object-position: 50% 58% !important;
  }
}
/* KSD: DESKTOP IMAGE POSITION FIX v1 END */
/* KSD: DESKTOP PHILOSOPHY LIFT v2 (more up) */
@media (min-width: 900px){
  .ks-card-philosophy{
    background-position: 50% 40% !important;
  }
  .ks-card-philosophy::before{
    background-position: 50% 40% !important;
  }
  .ks-card-philosophy img,
  .ks-card-philosophy .ks-card-bg{
    object-position: 50% 40% !important;
  }
}
/* KSD: DESKTOP PHILOSOPHY LIFT v2 END */

/* KSD: DESKTOP PHILOSOPHY LIFT FINAL (desktop-only, last-wins) */
@media (min-width: 900px){
  .ks-card-philosophy{
    background-position: 50% 64% !important;
  }
  /* если внутри карточки используется <img> вместо background */
  .ks-card-philosophy img,
  .ks-card-philosophy .ks-card-media img,
  .ks-card-philosophy .ks-card-image,
  .ks-card-philosophy .ks-card-bg{
    object-position: 50% 64% !important;
  }
}
/* KSD: DESKTOP PHILOSOPHY LIFT FINAL END */

/* KSD: DESKTOP IMAGE POSITION v1 (HERO + PHILOSOPHY) */
@media (min-width: 980px){

  /* HERO: поднять картинку вверх (Y больше = выше) */
  #hero,
  #hero::before,
  #hero .ks-hero-bg,
  .ks-hero,
  .ks-hero::before,
  .ks-hero .ks-hero-bg,
  .hero,
  .hero::before,
  .hero .hero-bg,
  .ks-hero-bg{
    background-position: 50% 50% !important; /* было ниже — стало выше */
  }

  /* если Hero сделан через <img> + object-fit */
  #hero img,
  .ks-hero img,
  .hero img,
  .ks-hero-bg img{
    object-position: 50% 70% !important;
  }

  /* PHILOSOPHY: поднять картинку вверх (зафиксируй нужный Y) */
  .ks-card-philosophy,
  .ks-card-philosophy::before,
  .ks-card-philosophy .ks-card-bg{
    background-position: 50% 64% !important;
  }
  .ks-card-philosophy img{
    object-position: 50% 64% !important;
  }
}
/* KSD: DESKTOP IMAGE POSITION v1 END */


/* KSD: HERO image position (DESKTOP override) */
@media (min-width: 1024px){
  .ks-hero-media{
    background-position: 50% 90% !important; /* больше % = картинка визуально выше */
  }
}
/* end KSD */

% !important;
  }
}
/* end KSD */

/* KSD: HERO image position (DESKTOP final override v2) */
@media (min-width: 900px){
  .ks-hero-media{
    background-position: 50% 50% !important; /* -10% вниз (с 80% -> 70%) */
  }
}
/* end KSD */







/* KSD: hero position desktop */
@media (min-width: 900px){
  .ks-hero-media,
  .ks-hero,
  .ks-hero::before,
  .ks-hero .ks-hero-bg,
  .ks-hero-bg{
    background-position: 50% 68% !important;
  }

  .ks-hero img,
  .ks-hero-media img,
  .ks-hero-bg img{
    object-position: 50% 68% !important;
  }
}
/* end KSD: hero position desktop */


/* KSD: ecosystem subtitle fix (desktop) */
@media (min-width: 900px){
  .ks-card.ks-card-ecosystem .ks-card-body,
  .ks-card-ecosystem .ks-card-body{
    white-space: nowrap !important;   /* одна строка */
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* если где-то включали clamp/box */
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
  }
}
/* end KSD: ecosystem subtitle fix (desktop) */

/* KSD: mobile hero viewport crop - keep original typography */
@media (max-width: 640px){
  .ks-hero{
    min-height: calc(100svh - 56px) !important;
  }

  .ks-hero-content{
    width: min(var(--ks-container), calc(100% - 48px)) !important;
    padding: 92px 0 56px 0 !important;
    transform: none !important;
  }
}

@media (max-width: 380px){
  .ks-hero{
    min-height: calc(100svh - 68px) !important;
  }

  .ks-hero-content{
    padding: 92px 0 54px 0 !important;
    transform: none !important;
  }
}
/* KSD: mobile hero viewport crop - keep original typography END */