/* =========================================================
   KRAUSE DESIGN SYSTEM — CLEAN & WARTBAR (FULL REWRITE)
   Zweck:
   - Tokens (Farbe/Spacing/Typo/Layout) zentral, logisch & harmonisch
   - Komponenten in klaren Sektionen (Header, Hero, Menüs, etc.)
   - Redundanzen entfernt (insb. doppelte "FIX"-Blöcke konsolidiert)
   - Breakpoints: Bootstrap-konform inkl. XL/XXL/Ultra-Wide
========================================================= */


/* =========================================================
   0) TOKENS / DESIGN SYSTEM
========================================================= */
:root{
  /* --- Meta / Defaults --- */
  color-scheme: light;
  --kr-tap: 44px;

  /* --- Breakpoints (Bootstrap) --- */
  --kr-bp-sm: 576px;
  --kr-bp-md: 768px;
  --kr-bp-lg: 992px;
  --kr-bp-xl: 1200px;
  --kr-bp-xxl: 1400px;
  --kr-bp-3xl: 1600px;

  /* =========================================================
     1) BRAND PRIMITIVES (2 Farben + definierte Abstufungen)
  ========================================================= */
  --kr-accent:  #00A4CB;  /* Aqua / Brand */
  --kr-primary: #1E88FF;  /* Blue / Secondary */

  /* Accent tints */
  --kr-accent-50:  color-mix(in srgb, var(--kr-accent) 6%,  #fff);
  --kr-accent-100: color-mix(in srgb, var(--kr-accent) 10%, #fff);
  --kr-accent-150: color-mix(in srgb, var(--kr-accent) 14%, #fff);
  --kr-accent-200: color-mix(in srgb, var(--kr-accent) 18%, #fff);
  --kr-accent-300: color-mix(in srgb, var(--kr-accent) 26%, #fff);
  --kr-accent-400: color-mix(in srgb, var(--kr-accent) 36%, #fff);
  --kr-accent-500: color-mix(in srgb, var(--kr-accent) 55%, #fff);

  /* Accent shades */
  --kr-accent-600: color-mix(in srgb, var(--kr-accent) 82%, #000);
  --kr-accent-700: color-mix(in srgb, var(--kr-accent) 72%, #000);

  /* Primary tints / shades */
  --kr-primary-50:  color-mix(in srgb, var(--kr-primary) 6%,  #fff);
  --kr-primary-100: color-mix(in srgb, var(--kr-primary) 10%, #fff);
  --kr-primary-200: color-mix(in srgb, var(--kr-primary) 16%, #fff);
  --kr-primary-300: color-mix(in srgb, var(--kr-primary) 24%, #fff);
  --kr-primary-600: color-mix(in srgb, var(--kr-primary) 82%, #000);

  /* Semantik (links/accents) */
  --kr-link:       color-mix(in srgb, var(--kr-primary) 62%, var(--kr-accent));
  --kr-link-hover: color-mix(in srgb, var(--kr-primary) 72%, var(--kr-accent));

  /* =========================================================
     2) NEUTRALS (Slate)
  ========================================================= */
  --kr-ink:     rgba(11,44,61,.96);
  --kr-text:    rgba(11,44,61,.90);
  --kr-muted:   rgba(18,48,67,.72);
  --kr-muted-2: rgba(18,48,67,.56);
  --kr-faint:   rgba(18,48,67,.42);

  --kr-line:        rgba(11,44,61,.10);
  --kr-line-strong: rgba(11,44,61,.16);
  --kr-line-soft:   rgba(11,44,61,.08);

  --kr-hover:  rgba(11,44,61,.035);
  --kr-active: rgba(11,44,61,.055);

  /* =========================================================
     3) SURFACES
  ========================================================= */
  --kr-bg-1: #ffffff;
  --kr-bg-2: rgba(11,44,61,.96);

  --kr-surface-1: rgba(255,255,255,.92);
  --kr-surface-2: rgba(255,255,255,.98);
  --kr-surface-3: color-mix(in srgb, var(--kr-accent) 2.5%, #fff);
  --kr-surface-muted: color-mix(in srgb, var(--kr-accent) 4%, #fff);

  /* Back-Compat */
  --kr-section-bg-5: var(--kr-accent-100);
  --kr-section-bg-6: var(--kr-accent-150);

  /* =========================================================
     4) SPACING SCALE (8px grid + fluid)
  ========================================================= */
  --kr-space-0: 0;
  --kr-space-1: .25rem;  /* 4px  */
  --kr-space-2: .5rem;   /* 8px  */
  --kr-space-3: 1rem;    /* 16px */
  --kr-space-4: 1.5rem;  /* 24px */
  --kr-space-5: 3rem;    /* 48px */
  --kr-space-6: 4rem;    /* 64px */
  --kr-space-7: 6rem;    /* 96px */
  --kr-space-8: 8rem;    /* 128px */
  --kr-space-9: 10rem;   /* 160px */
  --kr-space-10: 12rem;  /* 192px */
  --kr-space-11: 14rem;  /* 224px */
  --kr-space-12: 16rem;  /* 256px */

  --kr-space-xs:  var(--kr-space-1);
  --kr-space-sm:  var(--kr-space-2);
  --kr-space-md:  var(--kr-space-3);
  --kr-space-lg:  var(--kr-space-4);
  --kr-space-xl:  var(--kr-space-5);
  --kr-space-2xl: var(--kr-space-7);
  --kr-space-3xl: var(--kr-space-9);

  --kr-space-fluid-xs: clamp(.5rem,  1vw,  .875rem);
  --kr-space-fluid-sm: clamp(.75rem, 1.4vw, 1.125rem);
  --kr-space-fluid-md: clamp(1rem,  2.2vw, 1.75rem);
  --kr-space-fluid-lg: clamp(1.5rem, 3.6vw, 2.75rem);
  --kr-space-fluid-xl: clamp(2rem,  5vw,  3.75rem);

  --kr-inset-sm: var(--kr-space-2);
  --kr-inset-md: var(--kr-space-3);
  --kr-inset-lg: var(--kr-space-4);
  --kr-inset-xl: var(--kr-space-5);

  --kr-gap-xs: var(--kr-space-1);
  --kr-gap-sm: var(--kr-space-2);
  --kr-gap-md: var(--kr-space-3);
  --kr-gap-lg: var(--kr-space-4);
  --kr-gap-xl: var(--kr-space-5);

  /* Section rhythm (ein Prinzip für alle Sections) */
  --kr-section-pad:    clamp(3rem, 5.6vw, 5.75rem);
  --kr-section-pad-sm: clamp(2.25rem, 4.2vw, 3.5rem);
  --kr-section-pad-lg: clamp(4rem, 6.8vw, 7.5rem);

  /* =========================================================
     5) TYPO
  ========================================================= */
  --kr-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --kr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --kr-fs-body: 1rem;
  --kr-lh-body: 1.65;
  --kr-fs-lead: clamp(1rem, .35vw + .95rem, 1.125rem);
  --kr-prose: 68ch;

  /* =========================================================
     6) RADIUS
  ========================================================= */
  --kr-radius-sm: 12px;
  --kr-radius-md: 16px;
  --kr-radius-lg: 20px;
  --kr-radius-xl: 26px;
  --kr-radius-2xl: 32px;
  --kr-radius-pill: 999px;

  /* =========================================================
     7) SHADOWS
  ========================================================= */
  --kr-shadow-1: 0 8px 22px rgba(11,44,61,.06);
  --kr-shadow-2: 0 12px 30px rgba(11,44,61,.07);
  --kr-shadow-3: 0 18px 46px rgba(11,44,61,.08);
  --kr-shadow-4: 0 24px 72px rgba(0,0,0,.10);

  --kr-shadow-soft: var(--kr-shadow-3);
  --kr-shadow-sm:   var(--kr-shadow-2);
  --kr-shadow-lg:   var(--kr-shadow-4);

  /* =========================================================
     8) MOTION / FOCUS
  ========================================================= */
  --kr-ease: cubic-bezier(.2,.8,.2,1);
  --kr-ease-in: cubic-bezier(.4,0,1,1);

  --kr-dur-1: .14s;
  --kr-dur-2: .18s;
  --kr-dur-3: .22s;

  --kr-focus:        0 0 0 3px color-mix(in srgb, var(--kr-accent) 18%, transparent),
                     0 0 0 7px color-mix(in srgb, var(--kr-accent) 10%, transparent);
  --kr-focus-header: 0 0 0 3px color-mix(in srgb, var(--kr-accent) 20%, transparent),
                     0 0 0 6px color-mix(in srgb, var(--kr-accent) 12%, transparent);

  /* =========================================================
     9) LAYOUT / CONTAINER
  ========================================================= */
  --kr-container: 1160px;
  --kr-container-wide: 1280px;
  --kr-container-xxl: 1440px;
  --kr-container-3xl: 1520px;

  --kr-container-pad: clamp(1rem, 2.6vw, 1.5rem);
  --kr-safe-b: env(safe-area-inset-bottom, 0px);

  /* =========================================================
     10) Z-INDEX SYSTEM
  ========================================================= */
  --kr-z-overlay: 1050;
  --kr-z-nav: 1060;
  --kr-z-topbar: 1070;
  --kr-z-dropdown: 1080;
  --kr-z-modal: 1100;
  --kr-z-toast: 1200;

  /* =========================================================
     11) HEADER / COMPONENT TOKENS
  ========================================================= */
  --kr-topbar-h: 44px;
  --kr-topbar-ctrl: 36px;
  --kr-topbar-fs: .875rem;
  --kr-topbar-pad-x: .70rem;

  --kr-nav-min-h: 72px;
  --kr-nav-pad-y: .38rem;
  --kr-nav-cta-size: 44px;

  /* JS (script setzt) */
  --kr-nav-h: 72px;
  --kr-header-h: calc(var(--kr-topbar-h) + var(--kr-nav-h));

  /* Mobile Menu tokens */
  --kr-mm-gap: .70rem;
  --kr-mm-pad-y: .72rem;
  --kr-mm-pad-x: .85rem;
  --kr-mm-icon: 34px;
  --kr-mm-icon-sm: 30px;
  --kr-mm-radius: 12px;

  --kr-mm-bg: var(--kr-surface-2);
  --kr-mm-hover: var(--kr-hover);
  --kr-mm-accent-bg: var(--kr-accent-100);
  --kr-mm-accent-line: color-mix(in srgb, var(--kr-accent) 22%, transparent);

  /* =========================================================
     12) LEGACY ALIASES
  ========================================================= */
  --ltn__secondary-color: var(--kr-accent);
  --ltn__primary-color:   var(--kr-primary);
  --ltn__heading-color:   rgba(11,44,61,.95);
  --ltn__paragraph-color: rgba(18,48,67,.74);
}

/* XL/XXL/3XL: Container & Lesebreite aktiv nutzen */
@media (min-width: 1200px){
  :root{ --kr-container: var(--kr-container-wide); --kr-prose: 70ch; }
}
@media (min-width: 1400px){
  :root{ --kr-container: var(--kr-container-xxl); --kr-prose: 74ch; }
}
@media (min-width: 1600px){
  :root{ --kr-container: var(--kr-container-3xl); --kr-prose: 78ch; }
}


/* =========================================================
   1) BASE / A11Y
========================================================= */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

body{
  color: var(--kr-text);
  background: var(--kr-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  font-size: var(--kr-fs-body);
  line-height: var(--kr-lh-body);
  font-family: var(--kr-font-sans);
}

/* Skip link */
.kr-skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden; z-index:2000;
}
.kr-skip:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  padding:.6rem .9rem; background:#fff;
  border:1px solid rgba(11,44,61,.12);
  border-radius:999px; box-shadow: var(--kr-shadow-sm);
  text-decoration:none;
  color: var(--kr-text);
  font-weight: 800;
}

/* Global focus ring */
:where(a, button, [role="button"], .btn, .nav-link, input, textarea, select):focus-visible{
  outline:none;
  box-shadow: var(--kr-focus);
  border-radius: 14px;
}

/* Global underline policy in Header */
.kr-topbar a,
.kr-nav a{ text-decoration:none; }


/* =========================================================
   2) TYPO UTILITIES
========================================================= */
.kr-accent{ color: var(--kr-accent); }

.kr-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  margin:0;
  color: rgba(18,48,67,.70);
}
.kr-eyebrow::before{
  content:"";
  width:10px; height:10px;
  border-radius: 3px;
  background: var(--kr-accent);
  box-shadow: 0 0 0 6px rgba(0,164,203,.10);
  transform: translateY(-1px);
}

.kr-title{
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  color: rgba(11,44,61,.95);
  text-wrap: balance;
}
.kr-lead{
  margin: 12px 0 0;
  color: var(--kr-muted);
  line-height: 1.7;
  max-width: var(--kr-prose);
  font-size: var(--kr-fs-lead);
}


/* =========================================================
   3) LAYOUT PRIMITIVES
========================================================= */
.kr-section{
  padding: var(--kr-section-pad) 0;
  scroll-margin-top: calc(var(--kr-nav-h) + 1rem);
  position: relative;
  overflow:hidden;
  isolation: isolate;
}

/* Optional: eigener Wrapper, falls du ihn nutzt */
.kr-wrap{
  max-width: var(--kr-container);
  margin-inline: auto;
  padding-inline: var(--kr-container-pad);
}


/* =========================================================
   4) HEADER SYSTEM (TOPBAR + NAV + MENÜS)
========================================================= */

/* -------------------------
   4.1 TOPBAR
-------------------------- */
.kr-topbar{
  position: relative;
  z-index: var(--kr-z-topbar);

  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kr-accent) 88%, #ffffff 12%) 0%,
    color-mix(in srgb, var(--kr-accent) 76%, var(--kr-primary) 24%) 55%,
    color-mix(in srgb, var(--kr-primary) 22%, var(--kr-accent) 78%) 100%);

  color: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
  font-size: var(--kr-topbar-fs);
  line-height: 1.1;
}

.kr-topbar__inner{
  min-height: var(--kr-topbar-h);
  align-items:center;
  padding-block: .18rem;
}
@media (min-width: 768px){
  .kr-topbar__inner{
    height: var(--kr-topbar-h);
    padding-block: 0;
    align-items:center;
  }
}

.kr-topbar__left{ display:flex; align-items:center; }
.kr-topbar__right{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-left:auto;
}

/* Topbar interactives baseline */
.kr-topbar :is(.kr-topbar__locationToggle, .kr-topbar__socialLink, .kr-topbar__helpBtn){
  color:#fff;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
.kr-topbar :is(.kr-topbar__locationToggle, .kr-topbar__socialLink, .kr-topbar__helpBtn):focus-visible{
  outline:none;
  box-shadow: var(--kr-focus-header);
  border-radius: 12px;
}

/* Standort (Dropdown Button, aber “Link-look”) */
.kr-topbar__location{ position:relative; }

.kr-topbar__locationToggle{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  height: auto;
  padding: .25rem .1rem;
  border-radius: 12px;

  display:inline-flex;
  align-items:center;
  gap:.5rem;

  font-size: inherit;
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1.05;

  opacity:.96;
  transition: opacity var(--kr-dur-1) var(--kr-ease),
              transform var(--kr-dur-1) var(--kr-ease);
}
@media (hover:hover){
  .kr-topbar__locationToggle:hover{ opacity:1; transform: translateY(-.5px); }
}

.kr-topbar__locationToggle .fa-location-dot{
  font-size: 13px;
  color: rgba(255,255,255,.98);
}
.kr-topbar__locationLabel{
  color: rgba(255,255,255,.82);
  font-weight: 650;
  font-size: .86em;
  opacity: .92;
}
.kr-topbar__locationValue{
  color:#fff;
  font-weight: 860;
  letter-spacing: -.01em;
}
.kr-topbar__locationToggle.dropdown-toggle::after{
  margin-left: .35rem;
  vertical-align: .12em;
  border-top-color: rgba(255,255,255,.92);
  opacity: .95;
}

/* Standort Menü */
.kr-topbar__locationMenu{
  margin-top: .6rem !important;
  min-width: 300px;
  border: 1px solid var(--kr-line-soft);
  border-radius: 16px;
  padding: .6rem;
  background: var(--kr-surface-2);
  box-shadow: 0 18px 46px rgba(11,44,61,.14);
  color: var(--kr-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.kr-topbar__locationHeader{
  color: var(--kr-muted-2);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem .65rem .55rem;
  margin: 0;
}
.kr-topbar__locationMenu .dropdown-divider{
  margin: .5rem .25rem;
  border-top-color: var(--kr-line-soft);
}

.kr-topbar__locationItem,
.kr-topbar__locationAction{
  display:block;
  width:100%;
  border:0;
  border-radius: 12px;
  padding: .72rem .85rem;
  background: transparent;
  color: rgba(11,44,61,.92) !important;
  font-weight: 720;
  line-height: 1.2;
  text-align:left;
  transition: background-color var(--kr-dur-1) var(--kr-ease);
}
@media (hover:hover){
  .kr-topbar__locationItem:hover,
  .kr-topbar__locationAction:hover{
    background: var(--kr-hover);
    text-decoration:none;
  }
}
.kr-topbar__locationAction{
  color: color-mix(in srgb, var(--kr-accent) 78%, rgba(11,44,61,.88)) !important;
  font-weight: 850;
}
.kr-topbar__locationItem.is-active{
  background: var(--kr-accent-100);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kr-accent) 18%, transparent);
}

/* Social links */
.kr-topbar__social{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  flex-wrap:wrap;
}
.kr-topbar__socialLink{
  width: var(--kr-topbar-ctrl);
  height: var(--kr-topbar-ctrl);
  display:inline-grid;
  place-items:center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px;
  opacity:.92;
  transition: opacity var(--kr-dur-1) var(--kr-ease),
              transform var(--kr-dur-1) var(--kr-ease);
}
.kr-topbar__socialLink i{
  font-size: 14px;
  color: rgba(255,255,255,.96);
}
@media (hover:hover){
  .kr-topbar__socialLink:hover{ opacity:1; transform: translateY(-1px); }
}

/* Soforthilfe (Overhang, ohne Shadow) */
.kr-topbar__helpBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: calc(var(--kr-topbar-h) + 10px);
  transform: translateY(-5px);

  padding: 0 1.05rem;
  margin: 0;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  box-shadow: none !important;

  font-size: inherit;
  font-weight: 900;
  letter-spacing: -.01em;
  white-space: nowrap;

  transition: transform var(--kr-dur-1) var(--kr-ease),
              background-color var(--kr-dur-1) var(--kr-ease),
              border-color var(--kr-dur-1) var(--kr-ease);
}
.kr-topbar__helpBtn::before,
.kr-topbar__helpBtn::after{ content:none !important; display:none !important; }
@media (hover:hover){
  .kr-topbar__helpBtn:hover{
    transform: translateY(-6px);
    background: rgba(255,255,255,.11);
    border-color: rgba(255,255,255,.34);
  }
}
.kr-topbar__helpBtn:focus-visible{
  outline:none !important;
  box-shadow: var(--kr-focus-header) !important;
}

/* Topbar Mobile */
@media (max-width: 767.98px){
  .kr-topbar{ font-size: .88rem; }
  .kr-topbar__social{ display:none !important; }

  .kr-topbar__locationText,
  .kr-topbar__locationLabel,
  .kr-topbar__locationValue{ display:none !important; }

  .kr-topbar__inner{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: .65rem !important;
    padding-block: .35rem;
  }

  .kr-topbar__locationToggle{
    min-width: 44px;
    min-height: 44px;
    padding: .25rem .5rem !important;
    justify-content:center;
  }
  .kr-topbar__locationToggle.dropdown-toggle::after{ display:none !important; }

  .kr-topbar__right{
    flex: 1 1 auto;
    justify-content: flex-end !important;
    align-self: center !important;
  }

  .kr-topbar__helpBtn{
    height: 44px;
    transform: translateY(0);
    padding: 0 .95rem;
    border-radius: 14px;
  }

  .kr-topbar__locationMenu{
    min-width: min(94vw, 380px);
    padding: .65rem;
  }
}


/* -------------------------
   4.2 NAVBAR
-------------------------- */
.kr-nav{
  z-index: var(--kr-z-nav);

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.92) 62%,
    var(--kr-surface-3) 100%
  );

  border-bottom: 1px solid var(--kr-line-soft);
  box-shadow: var(--kr-shadow-1);

  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);

  padding-block: var(--kr-nav-pad-y);

  /* Bootstrap navbar vars */
  --bs-navbar-padding-y: var(--kr-nav-pad-y);
  --bs-navbar-color: rgba(11,44,61,.78);
  --bs-navbar-hover-color: rgba(11,44,61,.95);
  --bs-navbar-active-color: rgba(11,44,61,.98);

  --bs-navbar-toggler-border-color: rgba(11,44,61,.16);
  --bs-navbar-toggler-focus-width: 0;

  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,44,61,0.66)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.6' d='M5 8h20M5 15h20M5 22h20'/%3e%3c/svg%3e");
}

.kr-nav > .container{
  min-height: var(--kr-nav-min-h);
  align-items: center;
}
@media (max-width: 991.98px){
  .kr-nav > .container{ min-height: 70px; }
}

/* Brand */
.kr-brand img{
  height: 32px;
  width: auto;
  display:block;
}
@media (max-width: 575.98px){
  .kr-brand img{ height: 28px; }
}

/* Toggler */
.kr-nav .navbar-toggler{
  border-radius: 14px;
  padding: .55rem .7rem;
}

/* Nav links */
.kr-nav :is(.nav-link, .kr-mega-toggle){
  font-weight: 820;
  letter-spacing: -0.01em;
  border-radius: 14px;
  text-decoration:none;
  position: relative;
  isolation: isolate;
}

.kr-nav .nav-link{
  padding: .58rem .84rem;
  transition: background-color var(--kr-dur-1) var(--kr-ease),
              color var(--kr-dur-1) var(--kr-ease),
              transform var(--kr-dur-1) var(--kr-ease);
}
@media (hover:hover){
  .kr-nav .nav-link:hover{
    background: var(--kr-hover);
    color: rgba(11,44,61,.95);
    transform: translateY(-.5px);
  }
}

/* Underline nur für nav-link/mega-toggle (nicht für Icon-CTAs) */
.kr-nav :is(.nav-link, .kr-mega-toggle)::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom:.38rem;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, rgba(11,44,61,.92) 60%, var(--kr-accent));
  transform: scaleX(0);
  transform-origin: left;
  opacity: .9;
  transition: transform var(--kr-dur-2) var(--kr-ease);
  pointer-events:none;
}
@media (hover:hover){
  .kr-nav :is(.nav-link, .kr-mega-toggle):hover::after{ transform: scaleX(1); }
}

.kr-nav .nav-link.active{
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(11,44,61,.96);
}
.kr-nav .nav-link.active::after{ transform: scaleX(1); }

.kr-mega-toggle{
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.kr-nav .kr-mega-toggle.is-open{
  background: var(--kr-active);
  box-shadow: inset 0 0 0 1px var(--kr-line-soft);
}
.kr-nav .kr-mega-toggle.is-open::after{ transform: scaleX(1); }

/* Focus */
.kr-nav :is(.nav-link, .kr-mega-toggle, .kr-nav-cta):focus-visible{
  outline:none;
  box-shadow: var(--kr-focus-header) !important;
}

/* Nav icon CTAs (ABSOLUT keine Linie/Box/Underline) */
.kr-nav-ctas{
  display:flex;
  align-items:center;
  gap: .55rem;
}
@media (min-width: 992px){
  .kr-nav-ctas{ margin-left: 1rem; }
}
.kr-nav-cta,
.kr-nav-cta:hover,
.kr-nav-cta:active,
.kr-nav-cta:focus,
.kr-nav-cta:focus-visible{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}
.kr-nav-cta::before,
.kr-nav-cta::after{ content:none !important; display:none !important; }

.kr-nav-cta{
  width: var(--kr-nav-cta-size);
  height: var(--kr-nav-cta-size);
  display:grid;
  place-items:center;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: visible;
  transition: transform var(--kr-dur-1) var(--kr-ease),
              opacity var(--kr-dur-1) var(--kr-ease);
}
.kr-nav-cta i{
  font-size: 16px;
  line-height: 1;
  color: rgba(11,44,61,.74);
}
.kr-nav-cta--help i{
  color: color-mix(in srgb, var(--kr-accent) 82%, rgba(11,44,61,.70));
}
.kr-nav-cta--primary i{
  color: color-mix(in srgb, var(--kr-accent) 92%, rgba(11,44,61,.65));
}
@media (hover:hover){
  .kr-nav-cta:hover{ transform: translateY(-1px); opacity: 1; }
}
.kr-nav-cta:focus-visible{ box-shadow: var(--kr-focus-header) !important; }


/* -------------------------
   4.3 MOBILE MENU
-------------------------- */
@media (max-width: 991.98px){
  .kr-mobileMenu{
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + .45rem);
    z-index: 1075;
    padding: 0 .75rem .5rem;
  }

  .kr-mobileMenu__inner{
    border-radius: 18px;
    background: var(--kr-mm-bg);
    border: 1px solid rgba(11,44,61,.10);
    box-shadow: 0 22px 48px rgba(11,44,61,.12);
    padding: .6rem;
    max-height: min(78vh, 640px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* L1 */
  .kr-mobileMenu__link,
  .kr-mobileMenu__summary,
  .kr-mobileMenu__subsummary{
    border-radius: var(--kr-mm-radius);
    padding: var(--kr-mm-pad-y) var(--kr-mm-pad-x);
    gap: var(--kr-mm-gap);
    -webkit-tap-highlight-color: transparent;
  }

  .kr-mobileMenu__link{
    display:flex;
    align-items:center;
    width: 100%;
    min-height: 46px;
    text-decoration: none;
    color: rgba(11,44,61,.92);
    font-weight: 900;
    line-height: 1.2;
  }
  .kr-mobileMenu__link:hover{
    background: rgba(11,44,61,.04);
    color: rgba(11,44,61,.95);
    text-decoration: none;
  }

  .kr-mobileMenu__group{
    border-radius: 14px;
    border: 1px solid rgba(11,44,61,.08);
    background: rgba(11,44,61,.015);
    margin: .25rem 0;
    overflow: hidden;
  }

  .kr-mobileMenu__summary{
    list-style: none;
    cursor: pointer;
    user-select: none;
    min-height: 46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color: rgba(11,44,61,.92);
    font-weight: 900;
  }
  .kr-mobileMenu__summary::-webkit-details-marker{ display:none; }
  .kr-mobileMenu__summary::after{
    content: "";
    width: 10px; height: 10px;
    border-right: 2px solid rgba(11,44,61,.45);
    border-bottom: 2px solid rgba(11,44,61,.45);
    transform: rotate(45deg);
    transition: transform var(--kr-dur-2) var(--kr-ease);
    margin-left: auto;
    flex: 0 0 auto;
  }

  .kr-mobileMenu__group[open] .kr-mobileMenu__summary{
    background: rgba(11,44,61,.03);
    border-bottom: 1px solid rgba(11,44,61,.08);
  }
  .kr-mobileMenu__group[open] .kr-mobileMenu__summary::after{
    transform: rotate(-135deg);
    border-color: var(--kr-accent);
  }

  .kr-mobileMenu__panel{
    padding: .35rem;
    display:grid;
    gap: .2rem;
    background: #fff;
  }

  /* L2/L3 panel links */
  .kr-mobileMenu__panel a,
  .kr-mobileMenu__subpanel a{
    display:flex;
    align-items:center;
    gap: var(--kr-mm-gap);
    text-decoration:none;
    color: rgba(11,44,61,.86);
    font-weight: 800;
    line-height: 1.25;
    padding: .62rem .70rem;
    border-radius: 12px;
  }
  .kr-mobileMenu__panel a:hover,
  .kr-mobileMenu__subpanel a:hover{
    background: rgba(0,164,203,.06);
    color: rgba(11,44,61,.95);
    text-decoration:none;
  }

  /* CTA row */
  .kr-mobileMenu__ctaRow{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-top: .45rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(11,44,61,.08);
  }

  .kr-mobileMenu__cta{
    min-height: 44px;
    border-radius: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap: .45rem;
    text-decoration:none;
    font-weight: 900;
    border: 1px solid rgba(11,44,61,.16);
    padding: .7rem .75rem;
  }
  .kr-mobileMenu__cta:hover{ text-decoration:none; }
  .kr-mobileMenu__cta--ghost{
    background:#fff;
    color: rgba(11,44,61,.92);
  }
  .kr-mobileMenu__cta--primary{
    background: var(--kr-accent);
    border-color: var(--kr-accent);
    color:#fff;
    box-shadow: 0 12px 30px rgba(11,44,61,.10);
  }
  .kr-mobileMenu__cta--primary:hover{ color:#fff; }

  #krMobileMenuBtn[aria-expanded="true"]{
    border-color: rgba(11,44,61,.24);
    background: rgba(11,44,61,.03);
  }

  /* Sublevel groups */
  .kr-mobileMenu__subgroup{
    border-radius: 12px;
    border: 1px solid rgba(11,44,61,.08);
    background: rgba(11,44,61,.01);
    overflow: hidden;
  }

  .kr-mobileMenu__subsummary{
    list-style:none;
    cursor:pointer;
    user-select:none;
    min-height: 44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color: rgba(11,44,61,.90);
    font-weight: 900;
  }
  .kr-mobileMenu__subsummary::-webkit-details-marker{ display:none; }
  .kr-mobileMenu__subsummary::after{
    content:"";
    width: 9px; height: 9px;
    border-right: 2px solid rgba(11,44,61,.45);
    border-bottom: 2px solid rgba(11,44,61,.45);
    transform: rotate(45deg);
    transition: transform var(--kr-dur-2) var(--kr-ease);
    margin-left:auto;
    flex: 0 0 auto;
  }

  .kr-mobileMenu__subgroup[open] .kr-mobileMenu__subsummary{
    background: rgba(11,44,61,.02);
    border-bottom: 1px solid rgba(11,44,61,.08);
  }
  .kr-mobileMenu__subgroup[open] .kr-mobileMenu__subsummary::after{
    transform: rotate(-135deg);
    border-color: var(--kr-accent);
  }

  .kr-mobileMenu__subpanel{
    padding: .35rem;
    display:grid;
    gap: .2rem;
    background:#fff;
  }

  /* Icon layout helpers */
  .kr-mobileMenu__sumLeft{
    display:inline-flex;
    align-items:center;
    gap: var(--kr-mm-gap);
    min-width:0;
  }
  .kr-mobileMenu__sumLeft > span,
  .kr-mobileMenu__link > span{ min-width:0; }

  /* Icon chips */
  .kr-mobileMenu__link > i,
  .kr-mobileMenu__summary .kr-mobileMenu__sumLeft > i,
  .kr-mobileMenu__subsummary .kr-mobileMenu__sumLeft > i{
    width: var(--kr-mm-icon);
    height: var(--kr-mm-icon);
    border-radius: 12px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 var(--kr-mm-icon);

    background: rgba(0,164,203,.08);
    color: rgba(0,164,203,.95);
    box-shadow: inset 0 0 0 1px rgba(0,164,203,.14);

    transition: transform var(--kr-dur-2) var(--kr-ease),
                background-color var(--kr-dur-2) var(--kr-ease),
                box-shadow var(--kr-dur-2) var(--kr-ease),
                color var(--kr-dur-2) var(--kr-ease);
  }

  .kr-mobileMenu__panel a > i,
  .kr-mobileMenu__subpanel a > i{
    width: var(--kr-mm-icon-sm);
    height: var(--kr-mm-icon-sm);
    border-radius: 11px;
    display:inline-grid;
    place-items:center;
    flex: 0 0 var(--kr-mm-icon-sm);

    background: rgba(11,44,61,.04);
    color: rgba(11,44,61,.62);
    box-shadow: inset 0 0 0 1px rgba(11,44,61,.08);

    transition: transform var(--kr-dur-2) var(--kr-ease),
                background-color var(--kr-dur-2) var(--kr-ease),
                box-shadow var(--kr-dur-2) var(--kr-ease),
                color var(--kr-dur-2) var(--kr-ease);
  }

  /* Micro-interactions */
  .kr-mobileMenu__link:hover,
  .kr-mobileMenu__summary:hover,
  .kr-mobileMenu__subsummary:hover{ background: var(--kr-mm-hover); }

  .kr-mobileMenu__link:active,
  .kr-mobileMenu__summary:active,
  .kr-mobileMenu__subsummary:active{ transform: translateY(1px); }

  @media (hover:hover){
    .kr-mobileMenu__panel a:hover > i,
    .kr-mobileMenu__subpanel a:hover > i{
      transform: translateY(-1px);
      background: rgba(0,164,203,.10);
      color: rgba(0,164,203,.95);
      box-shadow: inset 0 0 0 1px rgba(0,164,203,.18);
    }
  }

  .kr-mobileMenu__group[open] > .kr-mobileMenu__summary{
    background: rgba(0,164,203,.05);
    box-shadow: inset 0 0 0 1px rgba(0,164,203,.14);
  }
  .kr-mobileMenu__group[open] > .kr-mobileMenu__summary .kr-mobileMenu__sumLeft > i{
    background: rgba(0,164,203,.12);
    box-shadow: inset 0 0 0 1px rgba(0,164,203,.22);
    animation: krMmIconPop 220ms var(--kr-ease) both;
  }

  .kr-mobileMenu__subgroup[open] > .kr-mobileMenu__subsummary{
    background: rgba(0,164,203,.04);
    box-shadow: inset 0 0 0 1px rgba(0,164,203,.12);
  }
  .kr-mobileMenu__subgroup[open] > .kr-mobileMenu__subsummary .kr-mobileMenu__sumLeft > i{
    background: rgba(0,164,203,.11);
    box-shadow: inset 0 0 0 1px rgba(0,164,203,.20);
    animation: krMmIconPop 220ms var(--kr-ease) both;
  }

  @keyframes krMmIconPop{
    0%   { transform: translateY(0) scale(1); }
    45%  { transform: translateY(-1px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
  }

  .kr-mobileMenu__group[open] > .kr-mobileMenu__panel,
  .kr-mobileMenu__subgroup[open] > .kr-mobileMenu__subpanel{
    animation: krMmPanelIn 180ms var(--kr-ease) both;
  }
  @keyframes krMmPanelIn{
    from{ opacity:0; transform: translateY(-6px); }
    to  { opacity:1; transform: translateY(0); }
  }

  /* Focus */
  .kr-mobileMenu__link:focus-visible,
  .kr-mobileMenu__summary:focus-visible,
  .kr-mobileMenu__subsummary:focus-visible,
  .kr-mobileMenu__panel a:focus-visible,
  .kr-mobileMenu__subpanel a:focus-visible{
    outline:none;
    box-shadow: 0 0 0 3px rgba(0,164,203,.14);
  }

  @media (prefers-reduced-motion: reduce){
    .kr-mobileMenu__group[open] > .kr-mobileMenu__panel,
    .kr-mobileMenu__subgroup[open] > .kr-mobileMenu__subpanel,
    .kr-mobileMenu__group[open] > .kr-mobileMenu__summary .kr-mobileMenu__sumLeft > i,
    .kr-mobileMenu__subgroup[open] > .kr-mobileMenu__subsummary .kr-mobileMenu__sumLeft > i{
      animation:none !important;
    }
    .kr-mobileMenu__link,
    .kr-mobileMenu__summary,
    .kr-mobileMenu__subsummary,
    .kr-mobileMenu__panel a,
    .kr-mobileMenu__subpanel a,
    .kr-mobileMenu__link > i,
    .kr-mobileMenu__panel a > i,
    .kr-mobileMenu__subpanel a > i{
      transition:none !important;
    }
  }
}


/* =========================================================
   5) BUTTONS (global)
========================================================= */
.kr-btn{
  border-radius: 14px;
  padding: .92rem 1.08rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  position: relative;
  overflow: hidden;
  transition: transform var(--kr-dur-1) var(--kr-ease),
              filter var(--kr-dur-1) var(--kr-ease),
              box-shadow var(--kr-dur-1) var(--kr-ease),
              background var(--kr-dur-1) var(--kr-ease);
  border: 1px solid transparent;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
}
a.kr-btn, a.kr-btn:hover, a.kr-btn:focus{ text-decoration:none; }

.kr-btn--primary{
  background: var(--kr-accent);
  border-color: var(--kr-accent);
  color:#fff;
  box-shadow: 0 16px 48px rgba(0,0,0,.10), 0 10px 26px rgba(0,164,203,.14);
}
.kr-btn--primary:hover{ transform: translateY(-1px); filter: brightness(.98); color:#fff; }

.kr-btn--outline{
  background: rgba(255,255,255,.72);
  border-color: rgba(11,44,61,.16);
  color: rgba(11,44,61,.88);
  box-shadow: 0 16px 40px rgba(11,44,61,.06);
}
.kr-btn--outline:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.92);
  color: rgba(11,44,61,.92);
}

.kr-btn__icon{
  display:inline-block;
  margin-left: .25rem;
  transform: translateX(0);
  transition: transform var(--kr-dur-1) var(--kr-ease);
  opacity: .95;
}
.kr-btn:hover .kr-btn__icon{ transform: translateX(3px); }

.kr-btn--shine::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-55%;
  width: 58%;
  height: 200%;
  transform: rotate(18deg) translateX(-30%);
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 46%, rgba(255,255,255,0) 72%);
  opacity: 0;
  pointer-events:none;
}
.kr-btn--shine:hover::before{ animation: krBtnShine 780ms ease-out both; }
@keyframes krBtnShine{
  0%   { opacity:0; transform: rotate(18deg) translateX(-55%); }
  15%  { opacity:.85; }
  100% { opacity:0; transform: rotate(18deg) translateX(190%); }
}


/* =========================================================
   6) HERO (kr-hero)
========================================================= */
.kr-hero{
  padding: clamp(64px, 7vw, 108px) 0 clamp(56px, 6vw, 92px);
  background: linear-gradient(
    to bottom,
    var(--kr-section-bg-5) 0%,
    var(--kr-section-bg-5) 22%,
    rgba(255,255,255,0.18) 44%,
    rgba(255,255,255,0.60) 70%,
    #ffffff 100%
  );
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kr-hero::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 42%,
      color-mix(in srgb, var(--kr-accent) 10%, transparent) 0%,
      transparent 65%),
    radial-gradient(780px 520px at 18% 12%,
      rgba(11,44,61,.06) 0%,
      transparent 62%);
  opacity: .95;
}
.kr-hero .container{ position:relative; z-index:2; }

.kr-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .5rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(11,44,61,.10);
  color: rgba(11,44,61,.80);
  font-weight: 900;
  font-size: .9rem;
}
.kr-hero-title{
  margin: 14px 0 0;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(34px, 4.1vw, 56px);
  color: rgba(11,44,61,.95);
  text-wrap: balance;
}
.kr-hero-title .accent{ color: var(--kr-accent); }
.kr-hero-lead{
  margin-top: 14px;
  color: var(--kr-muted);
  line-height: 1.75;
  max-width: 62ch;
}


/* =========================================================
   7) MEGA MENU (Backdrop + Panel + Content)
========================================================= */
.kr-mega-backdrop{
  position: fixed;
  left:0; right:0;
  top: var(--kr-nav-h);
  height: calc(100vh - var(--kr-nav-h));
  background: rgba(11,44,61,.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kr-dur-2) var(--kr-ease);
  z-index: 1050;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .kr-mega-backdrop{
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
  }
}
.kr-mega-backdrop.active{ opacity: 1; pointer-events: auto; }

.kr-mega-panel{
  display:none;
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.12);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kr-shadow-lg);
  overflow:hidden;
  padding: 1.05rem;
  z-index: 1065;
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .kr-mega-panel{
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
  }
}
.kr-mega-panel.is-open{ display:block; }

@media (min-width: 992px){
  .kr-mega-panel{
    position:absolute;
    top: calc(100% + .75rem);
    left:0; right:0;
    width: min(var(--kr-container), 100%);
    margin-left:auto;
    margin-right:auto;
    animation: krMegaIn .14s ease-out;
    transform-origin: 50% 0%;
  }
  @keyframes krMegaIn{
    from{ opacity:0; transform: translateY(-8px); }
    to{ opacity:1; transform: translateY(0); }
  }
}
@media (max-width: 991.98px){
  .kr-mega-panel{
    position: static;
    width:100%;
    margin-top: .5rem;
    background:#fff;
    box-shadow:none;
    border-radius: var(--kr-radius-lg);
  }
}

.kr-mega-feature{
  border-radius: var(--kr-radius-xl);
  overflow:hidden;
  border: 1px solid rgba(11,44,61,.10);
  background: #fff;
  box-shadow: var(--kr-shadow-sm);
  height:100%;
}
.kr-mega-feature .top{
  padding: 16px 16px 12px;
  background:
    radial-gradient(circle at 18% 22%, rgba(0,164,203,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
}
.kr-mega-feature h3{
  margin:0;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(11,44,61,.95);
  font-size: 1.05rem;
  line-height: 1.2;
  max-width: 28ch;
}
.kr-mega-feature p{
  margin:.5rem 0 0;
  color: var(--kr-muted);
  opacity:.9;
  line-height: 1.55;
  font-size: .95rem;
  max-width: 48ch;
}
.kr-mega-feature .media{ height: 220px; position:relative; }
.kr-mega-feature .media img{ width:100%; height:100%; object-fit: cover; display:block; }
.kr-mega-feature .media::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 25%, rgba(0,164,203,.18), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%);
}

.kr-mega-sectionTitle{
  font-size: .78rem;
  letter-spacing: .16em;
  font-weight: 900;
  color: rgba(18,48,67,.66);
  text-transform: uppercase;
  margin: .15rem 0 .75rem;
}

.kr-mega-link{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(11,44,61,.02);
  text-decoration:none;
  transition: transform var(--kr-dur-1) var(--kr-ease),
              background var(--kr-dur-1) var(--kr-ease),
              border-color var(--kr-dur-1) var(--kr-ease);
  color: inherit;
}
.kr-mega-link:hover{
  transform: translateY(-1px);
  background: rgba(11,44,61,.03);
  border-color: rgba(11,44,61,.12);
}
.kr-mega-ico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,164,203,.10);
  color: var(--kr-accent);
  flex: 0 0 40px;
  margin-top: 2px;
}
.kr-mega-ico i{ font-size: 16px; }
.kr-mega-title{ font-weight: 900; color: rgba(11,44,61,.95); margin:0; line-height: 1.15; }
.kr-mega-sub{ margin-top: 4px; font-size: .95rem; color: var(--kr-muted); opacity: .85; line-height: 1.35; }

.kr-mega-footer{
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(11,44,61,.10);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Mega resources */
.kr-mega-resources{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.86);
  box-shadow: var(--kr-shadow-soft);
  overflow:hidden;
  padding: 14px;
}
.kr-mega-group{
  background: rgba(11,44,61,.035);
  border-radius: 16px;
  padding: 12px;
  height:100%;
  border: 1px solid rgba(11,44,61,.08);
}
.kr-mega-item{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 14px;
  transition: transform var(--kr-dur-2) var(--kr-ease),
              background-color var(--kr-dur-2) var(--kr-ease);
  color: inherit;
  text-decoration:none;
}
.kr-mega-item:hover{ background: rgba(11,44,61,.05); transform: translateY(-1px); }
.kr-mega-itemIco{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex: 0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,164,203,.10);
  color: var(--kr-primary);
  font-weight: 800;
  line-height: 1;
}
.kr-mega-itemIco i{ font-size: 16px; }
.kr-mega-itemTitle{ font-weight: 900; line-height: 1.15; margin: 0; color: rgba(11,44,61,.95); }
.kr-mega-itemDesc{ margin-top: 4px; font-size: .95rem; line-height: 1.35; color: var(--kr-muted); opacity: 0.85; }

.kr-mega-promo{
  height: 100%;
  display:block;
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  background: var(--kr-bg-2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--kr-shadow-lg);
  text-decoration:none;
  transition: transform .20s var(--kr-ease), box-shadow .20s var(--kr-ease);
}
.kr-mega-promo:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 86px rgba(0,0,0,.14);
  color:#fff;
}
.kr-mega-promoBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--kr-accent);
  color: #fff;
  font-weight: 900;
  font-size: .86rem;
}
.kr-mega-promoArrow{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 900;
}
.kr-mega-promoTitle{
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 14px 0 18px;
  max-width: 26ch;
}
.kr-mega-promoKpi{ font-weight: 950; font-size: 2.1rem; line-height: 1; }
.kr-mega-promoSub{ margin-top: 6px; color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.4; }


/* =========================================================
   8) COOKIE BANNER
========================================================= */
#krCookieBanner{ z-index: var(--kr-z-toast, 1200); }
.kr-cc-wrap{ max-width: min(var(--kr-container), 100%); margin-inline:auto; }

.kr-cc{
  border-radius: var(--kr-radius-2xl, 32px);
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kr-shadow-3, 0 18px 46px rgba(11,44,61,.08));
  overflow:hidden;
  position:relative;
  isolation:isolate;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.kr-cc::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(920px 360px at 14% 18%, color-mix(in srgb, var(--kr-accent,#00A4CB) 12%, transparent), transparent 62%),
    radial-gradient(760px 360px at 90% 32%, color-mix(in srgb, var(--kr-primary,#1E88FF) 7%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.97));
  opacity:.95;
  pointer-events:none;
  z-index:-1;
}

.kr-cc-inner{
  display:grid;
  grid-template-columns: 1.30fr 1fr;
  gap: 16px;
  padding: 16px;
  align-items:start;
}
@media (max-width: 991.98px){ .kr-cc-inner{ grid-template-columns:1fr; } }
@media (max-width: 575.98px){ .kr-cc-inner{ padding: 14px; } }
@media (min-width: 992px){ .kr-cc-left{ padding-top: 10px; } }

.kr-cc-title{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: rgba(11,44,61,.96);
  line-height:1.12;
  font-size: 1.08rem;
}
.kr-cc-sub{
  margin-top: 8px;
  color: rgba(18,48,67,.74);
  line-height: 1.62;
  max-width: 78ch;
  font-size: .95rem;
}
.kr-cc-sub strong{ font-weight: 950; color: rgba(11,44,61,.88); }

.kr-cc-mini{
  margin-top: 10px;
  color: rgba(18,48,67,.62);
  font-size: .90rem;
  font-weight: 720;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}
.kr-cc-dot{
  width: 6px; height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kr-accent,#00A4CB) 70%, #fff);
  opacity:.9;
}

.kr-cc-links{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  font-size: .92rem;
}
.kr-cc-links a{
  color: rgba(18,48,67,.72);
  font-weight: 850;
  text-decoration:none;
}
.kr-cc-links a:hover{ text-decoration: underline; }

.kr-cc-panel{
  border-radius: 20px;
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.72);
  padding: 12px;
}
.kr-cc-panelTitle{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,44,61,.92);
  font-size: .95rem;
}
.kr-cc-panelHint{
  margin-top: 6px;
  color: rgba(18,48,67,.62);
  font-size: .88rem;
  line-height:1.35;
}

.kr-cc-switchRow{ margin-top: 10px; display:grid; gap: 10px; }
.kr-cc-switchItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(11,44,61,.08);
  background: rgba(11,44,61,.02);
}
.kr-cc-switchText{ min-width:0; }
.kr-cc-switchName{
  font-weight: 950;
  color: rgba(11,44,61,.92);
  letter-spacing: -0.01em;
  line-height:1.15;
}
.kr-cc-switchDesc{
  margin-top: 4px;
  color: rgba(18,48,67,.62);
  font-size: .86rem;
  line-height:1.25;
}

.kr-cc-switch .form-check-input{
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(11,44,61,.16);
  box-shadow: none;
  margin:0;
}
.kr-cc-switch .form-check-input:checked{
  background-color: var(--kr-accent,#00A4CB);
  border-color: var(--kr-accent,#00A4CB);
}
.kr-cc-switch .form-check-input:disabled{ opacity: .65; }

.kr-cc-actions{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.kr-cc-btn{
  border-radius: 16px;
  font-weight: 950;
  letter-spacing: -0.01em;
  padding: .78rem 1.05rem;
  min-height: 46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  transition: transform .18s var(--kr-ease, cubic-bezier(.2,.8,.2,1)),
              filter .18s var(--kr-ease, cubic-bezier(.2,.8,.2,1)),
              box-shadow .18s var(--kr-ease, cubic-bezier(.2,.8,.2,1));
}
@media (hover:hover){ .kr-cc-btn:hover{ transform: translateY(-1px); filter: brightness(.99); } }

.kr-cc-btnPrimary{
  background: var(--kr-accent,#00A4CB);
  border: 1px solid var(--kr-accent,#00A4CB);
  color:#fff;
  box-shadow: 0 16px 46px rgba(0,0,0,.10), 0 10px 26px rgba(0,164,203,.12);
  flex: 1 1 auto;
}
.kr-cc-btnPrimary:hover{ color:#fff; }

.kr-cc-btnLink{
  background: transparent;
  border: 0;
  padding: .25rem .25rem;
  color: rgba(18,48,67,.72);
  font-weight: 850;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.kr-cc-btnLink:hover{ text-decoration: underline; }

/* Modal (cookie settings) */
.kr-cc-modal .modal-content{
  border-radius: var(--kr-radius-2xl, 32px);
  border: 1px solid rgba(11,44,61,.10);
  box-shadow: 0 26px 86px rgba(0,0,0,.14);
  overflow:hidden;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.kr-cc-modal .modal-header{
  border-bottom: 1px solid rgba(11,44,61,.08);
  background:
    radial-gradient(860px 260px at 16% 12%, color-mix(in srgb, var(--kr-accent,#00A4CB) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
}
.kr-cc-modal .modal-title{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,44,61,.96);
}
.kr-cc-acc .accordion-item{
  border: 1px solid rgba(11,44,61,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(11,44,61,.02);
  margin-bottom: 10px;
}
.kr-cc-acc .accordion-button{
  background: rgba(255,255,255,.72);
  box-shadow:none;
  font-weight: 950;
  color: rgba(11,44,61,.92);
}
.kr-cc-acc .accordion-button:focus{ box-shadow:none; }
.kr-cc-acc .accordion-body{
  color: rgba(18,48,67,.70);
  line-height:1.55;
  background: rgba(255,255,255,.68);
}

@keyframes krCcIn{ from{opacity:0; transform: translateY(14px);} to{opacity:1; transform: translateY(0);} }
#krCookieBanner[aria-hidden="false"] .kr-cc{ animation: krCcIn .22s var(--kr-ease, cubic-bezier(.2,.8,.2,1)) both; }
@media (prefers-reduced-motion: reduce){
  #krCookieBanner[aria-hidden="false"] .kr-cc{ animation:none !important; }
  .kr-cc-btn{ transition:none !important; }
}


/* =========================================================
   9) SERVICES MOSAIC
========================================================= */
.kr-services{
  background: color-mix(in srgb, var(--kr-accent) 10%, #ffffff);
  position:relative;
  isolation:isolate;
}
.kr-services::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,.96) 28%, rgba(255,255,255,.72) 52%, rgba(255,255,255,0) 82%),
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--kr-accent) 14%, transparent), transparent 55%),
    radial-gradient(circle at 92% 28%, color-mix(in srgb, var(--kr-accent) 10%, transparent), transparent 58%);
}
.kr-serv-wrap{ max-width: var(--kr-container-wide); margin:0 auto; }

.kr-serv-hero{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.10);
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--kr-accent) 10%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 100%);
  box-shadow: var(--kr-shadow-soft);
  padding: 28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 16px;
  height:100%;
}
.kr-serv-heroTitle{
  font-weight: 950;
  letter-spacing: -0.035em;
  color: rgba(11,44,61,.95);
  line-height: 1.05;
  font-size: clamp(30px, 3.0vw, 50px);
  margin: 0;
}
.kr-serv-heroAccent{ color: var(--kr-accent); }
.kr-serv-heroText{
  color: var(--kr-muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 58ch;
  margin: 10px 0 0;
}
.kr-serv-note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(11,44,61,.58);
  font-weight: 800;
}

.kr-tile{ display:block; text-decoration:none; color: inherit; }
.kr-media{
  position:relative;
  height: clamp(150px, 12.2vw, 190px);
  border-radius: var(--kr-radius-lg);
  overflow:hidden;
  border: 1px solid rgba(11,44,61,.10);
  background: #eaf3ff;
  box-shadow: var(--kr-shadow-sm);
  transform: translateZ(0);
}
.kr-media img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  transition: transform .30s var(--kr-ease);
}
.kr-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 24% 22%, color-mix(in srgb, var(--kr-accent) 16%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%);
  opacity:0;
  transition: opacity var(--kr-dur-3) var(--kr-ease);
  pointer-events:none;
}
.kr-tile:hover .kr-media img{ transform: scale(1.05); }
.kr-tile:hover .kr-overlay{ opacity:1; }

.kr-tileTitle{
  margin: 12px 0 0 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(11,44,61,.88);
  font-size: clamp(17px, 1.1vw, 19px);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

/* Wide tile */
.kr-wide{ display:block; text-decoration:none; color:inherit; height:100%; }
.kr-wideMedia{
  position:relative;
  border-radius: var(--kr-radius-xl);
  overflow:hidden;
  border: 1px solid rgba(11,44,61,.10);
  background:#eaf3ff;
  box-shadow: var(--kr-shadow-soft);
  aspect-ratio: 21 / 9;
}
@media (min-width: 992px){
  .kr-wideMedia{ min-height: clamp(210px, 16vw, 260px); height: 100%; aspect-ratio: auto; }
}
.kr-wideMedia img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .38s var(--kr-ease); }
.kr-wide:hover img{ transform: scale(1.03); }
.kr-wideOverlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--kr-accent) 10%, transparent), transparent 58%),
    radial-gradient(circle at 55% 55%, rgba(0,0,0,.18), transparent 62%);
  opacity:.95;
  pointer-events:none;
}
.kr-wideCenter{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.kr-wideBtn{
  pointer-events:none;
  border-radius: 14px;
  padding: 14px 26px;
  font-weight: 900;
  background: var(--kr-accent);
  border: 1px solid var(--kr-accent);
  color:#fff;
  box-shadow: 0 16px 48px rgba(0,0,0,.14), 0 10px 26px rgba(0,164,203,.14);
}
.kr-wideFoot{
  position:absolute; left: 16px; right: 16px; bottom: 14px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

/* CTA card */
.kr-serv-cta{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.14);
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--kr-accent) 18%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(11,44,61,.96), rgba(11,44,61,.90));
  box-shadow: var(--kr-shadow-soft);
  padding: 22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap: 12px;
  height:100%;
}
.kr-serv-ctaTitle{
  margin-top: 4px;
  color:#fff;
  font-weight: 950;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.kr-serv-ctaText{ margin-top: 8px; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.65; }
.kr-serv-ctaMini{ margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.62); font-weight: 800; }


/* =========================================================
   10) FLOW
========================================================= */
.kr-flow{ background: #fff; }
.kr-flowGrid{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 991.98px){
  .kr-flowGrid{ grid-template-columns: 1fr; }
}
.kr-flowCard{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kr-shadow-sm);
  padding: 18px;
}
.kr-flowTop{
  display:flex; align-items:center; gap: 12px;
  font-weight: 950; color: rgba(11,44,61,.95);
}
.kr-flowNr{
  width: 38px; height: 38px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(0,164,203,.10);
  color: var(--kr-accent);
  font-weight: 950;
}
.kr-flowText{
  margin-top: 10px;
  color: var(--kr-muted);
  line-height: 1.65;
  max-width: 60ch;
}


/* =========================================================
   11) ABOUT
========================================================= */
.kr-about{
  background: linear-gradient(
    to bottom,
    var(--kr-section-bg-5) 0%,
    var(--kr-section-bg-5) 22%,
    rgba(255,255,255,0.12) 44%,
    rgba(255,255,255,0.55) 70%,
    #ffffff 100%
  );
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.kr-about::before{
  content:"";
  position:absolute; left:0; right:0; top:-2px;
  height:4px;
  background: var(--kr-section-bg-5);
  pointer-events:none;
  z-index: 0;
}
.kr-about-bg, .kr-about-ov{ position:absolute; inset:0; pointer-events:none; }
.kr-about-bg{
  opacity:.08;
  transform: scale(1.03);
  background-image: url("https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=1800&q=70");
  background-size: cover;
  background-position:center;
  filter: saturate(.98) contrast(.98);
}
.kr-about-ov{
  background:
    radial-gradient(900px 520px at 50% 42%,
      color-mix(in srgb, var(--kr-accent) 10%, transparent) 0%,
      transparent 65%),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.08) 28%,
      rgba(255,255,255,0.28) 55%,
      rgba(255,255,255,0.68) 80%,
      rgba(255,255,255,0.94) 100%
    );
}

.kr-cardImg, .kr-tallImg{
  overflow:hidden;
  border-radius: var(--kr-radius-xl);
  background: #fff;
  border: 1px solid rgba(11,44,61,.10);
  box-shadow: var(--kr-shadow-soft);
}
.kr-cardImg img, .kr-tallImg img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.001);
}
.kr-cardImg{ height: clamp(260px, 42vw, 320px); }
.kr-tallImg{ height: clamp(360px, 64vw, 460px); }
@media (min-width: 992px){
  .kr-cardImg{ height: 340px; }
  .kr-tallImg{ height: 580px; }
  .kr-mini{ margin-top: 18px; }
}
.kr-claim{ font-weight: 850; line-height: 1.35; max-width: 30ch; color: rgba(11,44,61,.95); }
.kr-profileAvatar{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: var(--kr-shadow-sm); }
.kr-profileName{ font-weight: 900; color: rgba(11,44,61,.95); line-height:1.1; }
.kr-profileRole{ font-size: 13px; opacity: .75; color: var(--kr-muted); margin-top: 2px; }


/* =========================================================
   12) HELP CARDS
========================================================= */
.kr-helpCard{
  border-radius: var(--kr-radius-xl);
  padding:16px;
  background:#fff;
  box-shadow: var(--kr-shadow-sm);
  border: 1px solid rgba(11,44,61,.10);
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.kr-helpCard .kr-mega-ico{ flex: 0 0 40px; }


/* =========================================================
   13) FAQ (classic)
========================================================= */
.kr-faq{ background: var(--kr-section-bg-5); position: relative; isolation: isolate; }
.kr-faq::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(980px 680px at 18% 18%, rgba(0,164,203,.10), transparent 60%),
    radial-gradient(860px 620px at 88% 32%, rgba(30,136,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.95));
  pointer-events:none;
  z-index:0;
}
.kr-faq .container{ position:relative; z-index:1; }

.kr-acc{
  border-top: 1px solid rgba(0,0,0,.10);
  background: transparent;
}
.kr-acc .accordion-item{
  border:0;
  background:transparent;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.kr-acc .accordion-button{
  padding: clamp(1.05rem, 1.6vw, 1.35rem) 0;
  background: transparent;
  color: rgba(11,44,61,.95);
  font-weight: 900;
  letter-spacing: -0.012em;
  line-height: 1.25;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:.95rem;
}
.kr-acc .accordion-button::after{ display:none !important; }

.kr-qmeta{
  display:inline-flex;
  align-items:baseline;
  gap:.6rem;
  padding-right:.95rem;
  border-right: 1px solid rgba(0,0,0,.10);
  flex: 0 0 auto;
  min-width: clamp(7.25rem, 10vw, 9.5rem);
}
.kr-qnr{ font-weight: 900; opacity:.70; }
.kr-qtag{
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--kr-muted);
  opacity: .85;
}
.kr-qtext{ flex: 1 1 auto; min-width: 0; display:block; }
.kr-chev{
  margin-left:auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(0,0,0,.45);
  border-bottom: 2px solid rgba(0,0,0,.45);
  transform: rotate(45deg);
  transition: transform 220ms var(--kr-ease), border-color 220ms var(--kr-ease);
}
.kr-acc .accordion-button:not(.collapsed) .kr-chev{
  transform: rotate(-135deg);
  border-color: var(--kr-accent);
}
.kr-acc .accordion-body{
  padding: .15rem 0 clamp(1.2rem, 1.8vw, 1.6rem) 0;
  color: var(--kr-muted);
  opacity: .92;
  line-height: 1.75;
  max-width: 60ch;
}
@media (max-width: 575.98px){ .kr-qmeta{ display:none; } }


/* =========================================================
   14) CONTACT (classic)
========================================================= */
.kr-contact{ background:#fff; position: relative; isolation: isolate; }
.kr-contact::before{
  content:"";
  position:absolute; inset:-40px;
  pointer-events:none;
  background:
    radial-gradient(12px 12px at 10% 22%, rgba(0,164,203,.16), rgba(0,164,203,0) 62%),
    radial-gradient(16px 16px at 86% 16%, rgba(0,164,203,.12), rgba(0,164,203,0) 64%),
    radial-gradient(14px 14px at 74% 76%, rgba(0,164,203,.10), rgba(0,164,203,0) 64%),
    radial-gradient(10px 10px at 18% 84%, rgba(0,164,203,.10), rgba(0,164,203,0) 62%);
  opacity: .65;
  filter: saturate(1.02);
}
.kr-contact .container{ position:relative; z-index:2; }

.kr-contact-layout{
  display:grid;
  grid-template-columns: 1.04fr 1.26fr;
  gap: clamp(18px, 3.2vw, 52px);
  align-items: start;
  margin-top: clamp(18px, 3vw, 34px);
}
@media (max-width: 991.98px){ .kr-contact-layout{ grid-template-columns: 1fr; } }

.kr-aside{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.90);
  box-shadow: var(--kr-shadow-soft);
  padding: 22px;
}
.kr-aside-brand{ font-weight: 950; letter-spacing: -0.02em; color: rgba(11,44,61,.95); }
.kr-aside-sub{ margin-top:6px; color: rgba(18,48,67,.62); font-size: 13px; line-height:1.35; }

.kr-facts{ margin-top: 16px; display:flex; flex-direction:column; gap: 10px; }
.kr-fact{
  display:flex; gap: 12px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(11,44,61,.02);
  transition: transform var(--kr-dur-1) var(--kr-ease),
              background var(--kr-dur-1) var(--kr-ease),
              border-color var(--kr-dur-1) var(--kr-ease);
}
.kr-fact:hover{ transform: translateY(-1px); background: rgba(11,44,61,.03); border-color: rgba(11,44,61,.12); }
.kr-factIcon{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,164,203,.10);
  color: var(--kr-accent);
  flex: 0 0 42px;
  margin-top: 2px;
}
.kr-factTop{ font-weight: 900; color: rgba(11,44,61,.82); font-size: 13px; letter-spacing:-0.01em; }
.kr-factMain{ margin-top:2px; font-weight: 950; color: rgba(11,44,61,.92); }
.kr-factMeta{ margin-top:4px; color: rgba(18,48,67,.62); font-size: 13px; line-height: 1.35; }

.kr-asideNote{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(18,48,67,.70);
  font-size: 13px;
  line-height: 1.4;
  max-width: 56ch;
}
.kr-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--kr-accent);
  box-shadow: 0 0 0 8px rgba(0,164,203,.12);
  margin-top: 3px;
}

/* Form */
.kr-form{
  border-radius: var(--kr-radius-xl);
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kr-shadow-soft);
  padding: 22px;
}
.kr-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 991.98px){ .kr-grid{ grid-template-columns: 1fr; } }

.kr-field{ position:relative; }
.kr-field--full{ grid-column: 1 / -1; }

.kr-input{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(11,44,61,.14);
  background: rgba(255,255,255,.99);
  padding: 16px 14px 12px;
  color: rgba(11,44,61,.92);
  outline:none;
  box-shadow: 0 10px 30px rgba(11,44,61,.05);
  transition: box-shadow var(--kr-dur-1) var(--kr-ease),
              border-color var(--kr-dur-1) var(--kr-ease);
}
.kr-fieldLabel{
  position:absolute;
  left: 14px;
  top: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(18,48,67,.55);
  pointer-events:none;
  transform-origin: left top;
  transition: transform var(--kr-dur-1) var(--kr-ease),
              top var(--kr-dur-1) var(--kr-ease),
              color var(--kr-dur-1) var(--kr-ease);
}
.kr-input:focus{
  border-color: rgba(0,164,203,.44);
  box-shadow: 0 0 0 3px rgba(0,164,203,.12), 0 16px 40px rgba(11,44,61,.08);
}
.kr-input:focus + .kr-fieldLabel,
.kr-input:not(:placeholder-shown) + .kr-fieldLabel{
  top: 6px;
  transform: scale(.92);
  color: rgba(11,44,61,.70);
}
.kr-textarea{ min-height: 150px; resize: vertical; line-height: 1.55; padding-top: 18px; }

.kr-formFooter{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(11,44,61,.10);
}
.kr-consent{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(18,48,67,.70);
  font-size: 13px;
  line-height: 1.35;
  max-width: 62ch;
  margin: 0;
}
.kr-consent input{
  width:18px; height:18px; margin-top:2px;
  accent-color: var(--kr-accent);
}


/* =========================================================
   15) FOOTER
========================================================= */
.kr-footer{
  border-top: 1px solid rgba(11,44,61,.08);
  padding: 22px 0;
  color: rgba(18,48,67,.70);
}
.kr-footer a{
  color: rgba(18,48,67,.70);
  text-decoration:none;
  font-weight: 800;
}
.kr-footer a:hover{ text-decoration: underline; }


/* =========================================================
   16) MOBILE STICKY CTA
========================================================= */
.kr-mobileCta{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1080;
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(11,44,61,.10);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  padding:.65rem .8rem;
  display:none;
}
@media (max-width: 991.98px){
  .kr-mobileCta{ display:block; }
  body{ padding-bottom: 84px; }
}
.kr-mobileBtn{
  border-radius:16px;
  font-weight:900;
  width:50%;
  padding:.8rem .9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  text-decoration:none;
}
.kr-mobileBtn--call{
  border:1px solid rgba(11,44,61,.22);
  color: rgba(11,44,61,.92);
  background: transparent;
}
.kr-mobileBtn--call:hover{ background: rgba(11,44,61,.04); }
.kr-mobileBtn--msg{
  background: var(--kr-accent);
  border:1px solid var(--kr-accent);
  color:#fff;
  box-shadow: 0 16px 40px rgba(11,44,61,.10);
}
.kr-mobileBtn--msg:hover{ filter: brightness(.98); color:#fff; }

.kr-scrollLock{ overflow:hidden; }


/* =========================================================
   17) CONTACT HERO 6 (Pro)
========================================================= */
.kr-contactHero6{
  position: relative;
  border-radius: var(--kr-radius-2xl);
  background: var(--kr-bg-2);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--kr-shadow-3);
  overflow:hidden;
  isolation:isolate;
  --kr-hero-img: url("https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=2400&q=75");
}
@media (min-width: 992px){
  .kr-contactHero6{ min-height: clamp(560px, 40vw, 680px); }
}
.kr-contactHero6__inner{
  position: relative;
  z-index: 2;
  padding: clamp(18px, 3vw, 46px);
}
.kr-contactHero6__bg{
  position:absolute;
  inset:-12px;
  z-index:0;
  background-image: var(--kr-hero-img);
  background-size: cover;
  background-position: center;
  opacity: .38;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.04);
}
.kr-contactHero6__ov{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(900px 560px at 18% 22%,
      color-mix(in srgb, var(--kr-accent) 12%, transparent),
      transparent 64%),
    linear-gradient(90deg,
      rgba(11,44,61,.62) 0%,
      rgba(11,44,61,.50) 46%,
      rgba(11,44,61,.32) 82%,
      rgba(11,44,61,.20) 100%);
}
.kr-contactHero6::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  background: radial-gradient(680px 240px at 74% 18%, rgba(255,255,255,.06), transparent 62%);
  opacity: .34;
  mix-blend-mode: screen;
}
@media (max-width: 991.98px){
  .kr-contactHero6__bg{ opacity: .42; }
  .kr-contactHero6__ov{
    background:
      radial-gradient(560px 320px at 18% 12%,
        color-mix(in srgb, var(--kr-accent) 10%, transparent),
        transparent 64%),
      linear-gradient(180deg,
        rgba(11,44,61,.64) 0%,
        rgba(11,44,61,.50) 56%,
        rgba(11,44,61,.30) 100%);
  }
  .kr-contactHero6::after{ opacity: .28; }
}

/* Left */
.kr-leftWrap{ max-width: 600px; padding-right: clamp(0px, 1vw, 10px); }
.kr-leftEyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight: 950;
  color: rgba(255,255,255,.86);
}
.kr-leftDot{
  width:10px; height:10px;
  border-radius: 3px;
  background: var(--kr-accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--kr-accent) 10%, transparent);
  flex: 0 0 auto;
}
.kr-leftTitle{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1.02;
  font-size: clamp(30px, 3.6vw, 56px);
  color:#fff;
  text-wrap: balance;
  text-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.kr-leftAccent{ color: var(--kr-accent); position: relative; }
.kr-leftAccent::after{
  content:"";
  position:absolute;
  left: 0; right: 0;
  bottom: -0.18em;
  height: 0.40em;
  background: color-mix(in srgb, var(--kr-accent) 12%, transparent);
  border-radius: 999px;
  filter: blur(6px);
  opacity: .78;
  z-index: -1;
}
.kr-leftLead{
  margin-top: 14px;
  color: rgba(255,255,255,.88);
  line-height: 1.72;
  font-weight: 520;
  max-width: 62ch;
}

/* Trustline */
.kr-trustLine{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.80);
  font-size: .92rem;
  line-height: 1.3;
  margin-top: 12px;
}
.kr-trustItem{
  display:inline-flex;
  align-items:center;
  gap: .5rem;
  font-weight: 650;
  color: rgba(255,255,255,.90);
}
.kr-trustItem i{ font-size: 13px; opacity: .92; color: rgba(255,255,255,.92); }
.kr-trustSep{ opacity:.55; }
@media (max-width: 420px){
  .kr-trustSep{ display:none; }
  .kr-trustLine{ gap: 8px; }
}

/* Hero actions */
.kr-heroActions .kr-btn{
  min-height: 48px;
  border-radius: 16px;
  padding-inline: 16px;
  font-weight: 950;
  box-shadow: none;
  white-space: nowrap;
  transition: transform var(--kr-dur-2) var(--kr-ease), filter var(--kr-dur-2) var(--kr-ease);
}
.kr-contactHero6 .kr-btn--primary{
  box-shadow: 0 10px 28px rgba(0,0,0,.14), 0 12px 30px rgba(0,164,203,.10);
}
.kr-contactHero6 .kr-btn--outline{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (hover:hover){
  .kr-heroActions .kr-btn:hover{ transform: translateY(-1px); filter: brightness(.99); }
  .kr-contactHero6 .kr-btn--outline:hover{
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.30);
    color: #fff;
  }
}
@media (max-width: 575.98px){
  .kr-heroActions .kr-btn{
    width:100%;
    justify-content:center;
    white-space: normal;
  }
}
.kr-leftMicro{
  color: rgba(255,255,255,.80);
  line-height: 1.45;
  font-size: .92rem;
  max-width: 62ch;
}

/* Bottom meta */
.kr-leftMeta6{
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:center;
  color: rgba(255,255,255,.86);
  font-weight: 650;
}
.kr-metaLink6{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  color: rgba(255,255,255,.92);
  text-decoration: none !important;
  padding: .34rem .45rem;
  border-radius: 12px;
  transition: background-color var(--kr-dur-2) var(--kr-ease), transform var(--kr-dur-2) var(--kr-ease);
}
.kr-metaLink6 i{ font-size: 14px; opacity: .92; }
.kr-metaLink6:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  color:#fff;
}
.kr-metaLink6:focus-visible{
  outline:none;
  box-shadow: var(--kr-focus-header);
}
.kr-metaText6{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding: .34rem .45rem;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
}
.kr-metaText6 i{ font-size: 14px; opacity: .90; }
@media (max-width: 767.98px){
  .kr-leftMeta6{ gap: 10px; }
  .kr-metaLink6, .kr-metaText6{ width: 100%; }
}

/* Pro form */
.kr-formPro6{
  width: min(590px, 100%);
  align-self: center;
  background: rgba(255,255,255,.98);
  border-radius: var(--kr-radius-2xl);
  border: 1px solid rgba(11,44,61,.10);
  box-shadow: 0 18px 54px rgba(0,0,0,.14);
  padding: clamp(16px, 2.2vw, 26px);
  position: relative;
  overflow: hidden;
}
.kr-formPro6::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), inset 0 0 0 1px rgba(0,0,0,.03);
}
@media (min-width: 992px){
  .kr-formPro6{ transform: translateY(-6px); }
}
.kr-formHead6{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(11,44,61,.10);
}
.kr-formH6{
  margin:0;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(11,44,61,.96);
  font-size: 1.25rem;
  line-height: 1.2;
}
.kr-formP6{
  color: rgba(18,48,67,.70);
  line-height: 1.55;
  font-weight: 520;
  font-size: .95rem;
  max-width: 62ch;
}
.kr-miniBadge6{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: var(--kr-radius-pill);
  background: color-mix(in srgb, var(--kr-accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--kr-accent) 18%, transparent);
  color: rgba(11,44,61,.88);
  font-size: .78rem;
  font-weight: 900;
  white-space: nowrap;
}
.kr-fLbl6{
  display:block;
  font-size: .70rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 950;
  color: rgba(18,48,67,.60);
  margin: 0 0 8px;
}
.kr-input--pro6{
  width:100%;
  background: rgba(11,44,61,.03);
  border: 1px solid rgba(11,44,61,.10);
  box-shadow: none;
  padding: 13px 14px;
  border-radius: 14px;
  color: rgba(11,44,61,.92);
  transition:
    border-color var(--kr-dur-2) var(--kr-ease),
    box-shadow var(--kr-dur-2) var(--kr-ease),
    background-color var(--kr-dur-2) var(--kr-ease);
}
.kr-input--pro6::placeholder{ color: rgba(18,48,67,.46); }
.kr-input--pro6:focus{
  outline: none;
  background:#fff;
  border-color: color-mix(in srgb, var(--kr-accent) 40%, rgba(11,44,61,.14));
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--kr-accent) 12%, transparent);
}
@media (hover:hover){
  .kr-input--pro6:hover{
    background: rgba(11,44,61,.02);
    border-color: rgba(11,44,61,.14);
  }
}
.kr-textarea--pro6{
  min-height: 120px;
  padding-top: 13px;
  resize: vertical;
}

/* Topic cards */
.kr-topicFieldset6{ margin:0; padding:0; border:0; min-width:0; }
.kr-topicHint6{
  color: rgba(18,48,67,.56);
  font-size: .82rem;
  font-weight: 520;
  line-height: 1.2;
}
.kr-topicGrid6{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px){
  .kr-topicGrid6{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.kr-topicCard6{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 4px;
  min-height: 74px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11,44,61,.10);
  background: rgba(11,44,61,.02);
  cursor:pointer;
  user-select:none;
  transition:
    transform var(--kr-dur-2) var(--kr-ease),
    border-color var(--kr-dur-2) var(--kr-ease),
    background-color var(--kr-dur-2) var(--kr-ease),
    box-shadow var(--kr-dur-2) var(--kr-ease);
}
.kr-topicCard6__title{
  display:inline-flex;
  align-items:center;
  gap: .55rem;
  font-weight: 950;
  color: rgba(11,44,61,.92);
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-size: .92rem;
}
.kr-topicCard6__title i{ font-size: 13px; opacity:.85; }
.kr-topicCard6__sub{
  color: rgba(11,44,61,.62);
  font-size: .78rem;
  line-height: 1.2;
  padding-left: 22px;
}
.btn-check:checked + .kr-topicCard6{
  background: #fff;
  border-color: color-mix(in srgb, var(--kr-accent) 30%, rgba(11,44,61,.12));
  box-shadow: 0 12px 30px rgba(11,44,61,.10);
  transform: translateY(-1px);
}
.btn-check:focus + .kr-topicCard6,
.btn-check:focus-visible + .kr-topicCard6{
  border-color: color-mix(in srgb, var(--kr-accent) 34%, rgba(11,44,61,.12));
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--kr-accent) 12%, transparent);
  outline: 0;
}
@media (hover:hover){
  .kr-topicCard6:hover{
    background:#fff;
    border-color: rgba(11,44,61,.16);
    transform: translateY(-1px);
  }
}

.kr-submit6{
  min-height: 52px;
  border-radius: 16px;
  font-weight: 950;
  box-shadow: 0 16px 46px rgba(0,0,0,.10), 0 10px 26px rgba(0,164,203,.11);
}
.kr-formFine6{
  color: rgba(18,48,67,.60);
  font-size: .88rem;
  line-height: 1.35;
  font-weight: 520;
}
@media (max-width: 399.98px){
  .kr-leftTitle{ font-size: 30px; line-height: 1.08; }
  .kr-topicCard6__sub{ padding-left: 0; }
}
@media (prefers-reduced-motion: reduce){
  .kr-heroActions .kr-btn,
  .kr-topicCard6,
  .kr-input--pro6,
  .kr-metaLink6{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   18) SCROLLBAR (Accent)
========================================================= */
html{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--kr-accent) 70%, #0b2c3d 30%)
                   color-mix(in srgb, var(--kr-accent) 10%, #ffffff 90%);
}
::-webkit-scrollbar{ width: 12px; }
::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--kr-accent) 10%, #ffffff 90%);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--kr-accent) 88%, #ffffff 12%),
    color-mix(in srgb, var(--kr-accent) 76%, var(--kr-primary) 24%),
    color-mix(in srgb, var(--kr-primary) 22%, var(--kr-accent) 78%)
  );
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--kr-accent) 10%, #ffffff 90%);
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--kr-accent) 92%, #ffffff 8%),
    color-mix(in srgb, var(--kr-accent) 78%, var(--kr-primary) 22%),
    color-mix(in srgb, var(--kr-primary) 26%, var(--kr-accent) 74%)
  );
}


/* =========================================================
   19) HERO02 (Topbar gradient + neutral scrim)
========================================================= */
.Hero02{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(30px, 5vw, 86px) 0;

  background: linear-gradient(135deg,
    color-mix(in srgb, var(--kr-accent) 88%, #ffffff 12%) 0%,
    color-mix(in srgb, var(--kr-accent) 76%, var(--kr-primary) 24%) 55%,
    color-mix(in srgb, var(--kr-primary) 22%, var(--kr-accent) 78%) 100%);

  --hero02-img: url("assets/img/hero/17.webp");
  --hero02-img-opacity: .10;
  --hero02-scrim: .34;
  --hero02-scrim-m: .40;
}

.Hero02__bg{
  position:absolute;
  inset:-26px;
  z-index:0;
  background-image: var(--hero02-img);
  background-size: cover;
  background-position: center;
  opacity: var(--hero02-img-opacity);
  transform: scale(1.06);
  filter: grayscale(.10) contrast(1.05) saturate(.80);
}
.Hero02__ov{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,var(--hero02-scrim)) 0%,
      rgba(0,0,0,calc(var(--hero02-scrim) - .06)) 52%,
      rgba(0,0,0,calc(var(--hero02-scrim) - .12)) 100%),
    radial-gradient(680px 260px at 78% 12%,
      rgba(255,255,255,.12),
      transparent 62%);
}
@media (max-width: 991.98px){
  .Hero02__ov{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,var(--hero02-scrim-m)) 0%,
        rgba(0,0,0,calc(var(--hero02-scrim-m) - .06)) 56%,
        rgba(0,0,0,calc(var(--hero02-scrim-m) - .12)) 100%),
      radial-gradient(560px 240px at 70% 10%,
        rgba(255,255,255,.12),
        transparent 62%);
  }
}
.Hero02::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 42%),
    radial-gradient(900px 320px at 50% -12%, rgba(255,255,255,.10), transparent 55%);
  opacity:.16;
  mix-blend-mode: screen;
}
.Hero02__inner{ position: relative; z-index:2; }

.Hero02__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.Hero02__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight: 950;
  color: rgba(255,255,255,.94);
}
.Hero02__dot{
  width:10px; height:10px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255,255,255,.18);
  flex:0 0 auto;
}
.Hero02__kicker{ display:inline-flex; align-items:center; gap:.5rem; }
.Hero02__kicker i{ opacity:.92; }

.Hero02__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--kr-radius-pill);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  color: rgba(255,255,255,.96);
  font-weight: 900;
  font-size: .80rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
}

.Hero02__title{
  color:#fff;
  font-weight: 950;
  letter-spacing: -0.055em;
  line-height: 1.03;
  text-wrap: balance;
  font-size: clamp(34px, 3.8vw, 64px);
  text-shadow: 0 12px 30px rgba(0,0,0,.16);
  max-width: 20ch;
}
.Hero02__lead{
  color: rgba(255,255,255,.92);
  line-height: 1.72;
  font-weight: 520;
  max-width: 76ch;
}

.Hero02__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  font-weight: 650;
}
.Hero02__metaSep{ opacity:.60; }

.Hero02__metaLink,
.Hero02__metaText{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding: .34rem .45rem;
  border-radius: 12px;
  color: rgba(255,255,255,.96);
  text-decoration: none !important;
}
.Hero02__metaLink{
  transition: transform var(--kr-dur-2) var(--kr-ease),
              background-color var(--kr-dur-2) var(--kr-ease);
}
@media (hover:hover){
  .Hero02__metaLink:hover{
    background: rgba(255,255,255,.14);
    transform: translateY(-1px);
  }
}
.Hero02__metaLink:focus-visible{
  outline:none;
  box-shadow: var(--kr-focus-header);
}

.Hero02__card{
  width: min(420px, 100%);
  margin-left: auto;
  padding: 18px 18px;
  border-radius: var(--kr-radius-2xl);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 54px rgba(0,0,0,.10);
}
.Hero02__cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.Hero02__cardTitle{ color:#fff; font-weight: 950; letter-spacing: -0.02em; }
.Hero02__cardPill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .26rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.94);
  font-weight: 900;
  font-size: .78rem;
  white-space: nowrap;
}
.Hero02__cardText{
  color: rgba(255,255,255,.92);
  line-height: 1.55;
  font-weight: 520;
  font-size: .96rem;
}
.Hero02__cardActions{ display:flex; flex-direction:column; gap: 10px; }
.Hero02__cardBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  color:#fff;
  text-decoration:none !important;
  font-weight: 950;
  transition: transform var(--kr-dur-2) var(--kr-ease),
              background-color var(--kr-dur-2) var(--kr-ease);
}
@media (hover:hover){
  .Hero02__cardBtn:hover{
    background: rgba(255,255,255,.22);
    transform: translateY(-1px);
  }
}
.Hero02__cardMini{
  color: rgba(255,255,255,.88);
  font-size: .90rem;
  font-weight: 650;
  text-align:center;
}

/* Mobile urgent */
.Hero02__urgent{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.Hero02__urgentIco{ color:#fff; opacity:.95; }
.Hero02__urgentText{
  color: rgba(255,255,255,.94);
  line-height: 1.35;
  font-weight: 520;
  flex: 1 1 auto;
}
.Hero02__urgentText strong{ font-weight: 950; }
.Hero02__urgentBtn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .52rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  color:#fff;
  text-decoration:none !important;
  font-weight: 950;
  white-space: nowrap;
}

@media (max-width: 575.98px){
  .Hero02__title{ max-width: none; }
  .Hero02__metaSep{ display:none; }
  .Hero02__meta{ gap: 8px; }
}
@media (prefers-reduced-motion: reduce){
  .Hero02__metaLink,
  .Hero02__cardBtn{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   20) FAQ5 (Hub/tiles/search)
========================================================= */
.kr-faq5{
  position: relative;
  isolation: isolate;
  background: var(--kr-bg-1);
}
.kr-faq5::before{
  content:"";
  position:absolute;
  inset:-40px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 18% 18%, color-mix(in srgb, var(--kr-accent) 10%, transparent), transparent 62%),
    radial-gradient(520px 260px at 82% 22%, color-mix(in srgb, var(--kr-primary) 7%, transparent), transparent 62%),
    radial-gradient(12px 12px at 12% 64%, rgba(0,164,203,.16), rgba(0,164,203,0) 62%),
    radial-gradient(14px 14px at 76% 78%, rgba(0,164,203,.12), rgba(0,164,203,0) 64%);
  opacity:.70;
}

.kr-faq5__head{
  max-width: 980px;
  margin-inline:auto;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kr-line);
}
.kr-faq5__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:950;
  color: var(--kr-muted-2);
  justify-content:center;
}
.kr-faq5__dot{
  width:10px; height:10px;
  border-radius:3px;
  background: var(--kr-accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--kr-accent) 10%, transparent);
  flex:0 0 auto;
}
.kr-faq5__title{
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--kr-ink);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.1;
  text-wrap: balance;
}
.kr-faq5__lead{
  margin-top: 10px;
  color: var(--kr-muted);
  font-weight: 520;
  line-height: 1.6;
  max-width: 80ch;
  margin-inline: auto;
}

.kr-faq5__hub{
  position: relative;
  border-radius: 22px;
  border: 1px solid var(--kr-line-soft);
  background: rgba(255,255,255,.92);
  box-shadow: var(--kr-shadow-2);
  overflow:hidden;
}
.kr-faq5__hubBg{
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(920px 360px at 14% 18%, color-mix(in srgb, var(--kr-accent) 12%, transparent), transparent 62%),
    radial-gradient(760px 360px at 90% 32%, color-mix(in srgb, var(--kr-primary) 7%, transparent), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.98));
  opacity:.96;
}
.kr-faq5__hubTop{
  position: relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr minmax(320px, 520px);
  gap: 14px;
  align-items:end;
  padding: 14px;
  border-bottom: 1px solid var(--kr-line-soft);
}
@media (max-width: 991.98px){
  .kr-faq5__hubTop{
    grid-template-columns: 1fr;
    align-items: start;
  }
}
.kr-faq5__hubTitle{
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--kr-ink);
  line-height: 1.2;
}
.kr-faq5__hubSub{
  margin-top: 4px;
  color: var(--kr-muted);
  font-weight: 520;
  font-size: .92rem;
  line-height: 1.35;
  max-width: 70ch;
}

/* Search */
.kr-faq5__searchWrap{ position: relative; }
.kr-faq5__search{
  width:100%;
  min-height: 54px;
  padding: 0 46px 0 46px;
  border-radius: 16px;
  background: var(--kr-hover);
  border: 1px solid var(--kr-line);
  color: var(--kr-text);
  transition: border-color var(--kr-dur-2) var(--kr-ease),
              box-shadow var(--kr-dur-2) var(--kr-ease),
              background-color var(--kr-dur-2) var(--kr-ease);
}
.kr-faq5__search::placeholder{ color: var(--kr-faint); }
.kr-faq5__search:focus{
  outline:none;
  background:#fff;
  border-color: color-mix(in srgb, var(--kr-accent) 40%, var(--kr-line-strong));
  box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--kr-accent) 12%, transparent);
}
.kr-faq5__searchIco{
  position:absolute;
  left: 16px;
  top: 27px;
  transform: translateY(-50%);
  opacity:.70;
  color: rgba(11,44,61,.62);
}
.kr-faq5__clear{
  position:absolute;
  right: 10px;
  top: 27px;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 12px;
  border: 1px solid var(--kr-line);
  background: rgba(255,255,255,.96);
  color: rgba(11,44,61,.76);
}
.kr-faq5__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: .55rem;
  color: var(--kr-muted-2);
  font-weight: 520;
  font-size: .92rem;
  line-height: 1.35;
}
.kr-faq5__metaDot{
  width:8px; height:8px;
  border-radius:3px;
  background: var(--kr-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--kr-accent) 10%, transparent);
  flex:0 0 auto;
}
.kr-faq5__metaSep{ opacity:.55; }

/* Tiles */
.kr-faq5__grid{
  position: relative;
  z-index:1;
  padding: 14px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1199.98px){
  .kr-faq5__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px){
  .kr-faq5__grid{ grid-template-columns: 1fr; }
}
.kr-faq5__tile{
  width:100%;
  text-align:left;
  border-radius: 16px;
  border: 1px solid var(--kr-line);
  background: rgba(11,44,61,.015);
  padding: 12px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  cursor:pointer;
  transition: transform var(--kr-dur-2) var(--kr-ease),
              background-color var(--kr-dur-2) var(--kr-ease),
              border-color var(--kr-dur-2) var(--kr-ease),
              box-shadow var(--kr-dur-2) var(--kr-ease);
}
.kr-faq5__tile.is-active{
  background: var(--kr-accent-100);
  border-color: color-mix(in srgb, var(--kr-accent) 28%, var(--kr-line));
  box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--kr-accent) 10%, transparent);
}
.kr-faq5__tileIco{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  flex: 0 0 40px;
  background: #fff;
  border: 1px solid var(--kr-line-soft);
  color: color-mix(in srgb, var(--kr-accent) 90%, rgba(11,44,61,.35));
}
.kr-faq5__tileIco i{ font-size: 16px; }
.kr-faq5__tileBody{ min-width:0; display:flex; flex-direction:column; gap: 4px; }
.kr-faq5__tileTitle{
  font-weight: 950;
  letter-spacing: -0.01em;
  color: var(--kr-ink);
  line-height: 1.15;
}
.kr-faq5__tileText{
  color: var(--kr-muted);
  font-weight: 520;
  font-size: .92rem;
  line-height: 1.35;
}
.kr-faq5__tileArrow{
  margin-left:auto;
  color: rgba(11,44,61,.55);
  font-weight: 950;
  transition: transform var(--kr-dur-2) var(--kr-ease);
  flex: 0 0 auto;
  padding-top: 2px;
}
@media (hover:hover){
  .kr-faq5__tile:hover{
    transform: translateY(-1px);
    background: rgba(11,44,61,.02);
    border-color: var(--kr-line-strong);
  }
  .kr-faq5__tile:hover .kr-faq5__tileArrow{ transform: translateX(2px); }
  .kr-faq5__tile.is-active:hover{ background: var(--kr-accent-100); }
}
.kr-faq5__tile:focus-visible{
  outline:none;
  box-shadow: var(--kr-focus-header);
}

/* Hub bottom */
.kr-faq5__hubBottom{
  position: relative;
  z-index:1;
  padding: 14px;
  border-top: 1px solid var(--kr-line-soft);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 991.98px){
  .kr-faq5__hubBottom{ justify-content:stretch; }
  .kr-faq5__hubBottom .kr-btn{ width:100%; justify-content:center; }
}

/* Accordion list */
.kr-faq5Acc .accordion-item{
  border: 0;
  border-bottom: 1px solid var(--kr-line);
  padding: 2px 0;
}
.kr-faq5Btn{
  padding: 18px 2px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--kr-ink) !important;
  font-weight: 950;
  letter-spacing: -0.01em;
  gap: 10px;
  align-items: center;
}
.kr-faq5Btn::after{ opacity:.50; }
.kr-faq5Btn:focus{ box-shadow:none !important; outline:none; }
.kr-faq5Btn:focus-visible{
  box-shadow: var(--kr-focus-header) !important;
  border-radius: 12px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  margin-left: -12px;
  margin-right: -12px;
}
.kr-faq5Btn__q{ display:inline-block; max-width: 68ch; text-wrap: balance; }
.kr-faq5Btn__tag{
  margin-left:auto;
  font-weight: 900;
  font-size: .82rem;
  color: var(--kr-muted-2);
  border: 1px solid var(--kr-line);
  padding: .26rem .5rem;
  border-radius: 999px;
  background: rgba(11,44,61,.02);
  white-space: nowrap;
  flex: 0 0 auto;
}
.kr-faq5Ans{
  padding: 0 2px 18px 2px;
  color: var(--kr-muted);
  font-weight: 520;
  line-height: 1.72;
  max-width: 88ch;
}
.kr-faq5 mark{
  background: color-mix(in srgb, var(--kr-accent) 16%, transparent);
  color: inherit;
  padding: 0 .14em;
  border-radius: 6px;
}

/* Empty / assist */
.kr-faq5__empty{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(11,44,61,.22);
}
.kr-faq5__emptyTitle{ font-weight: 950; letter-spacing: -0.01em; color: var(--kr-ink); }
.kr-faq5__emptyText{
  margin-top: 6px;
  color: var(--kr-muted);
  font-weight: 520;
  line-height: 1.5;
  max-width: 78ch;
}
.kr-faq5__assist{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--kr-line);
  margin-top: 18px;
}
@media (min-width: 768px){
  .kr-faq5__assist{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}
.kr-faq5__assistText{
  color: var(--kr-ink);
  display:flex;
  flex-wrap:wrap;
  gap: .45rem;
  line-height: 1.4;
}
.kr-faq5__assistText span{ color: var(--kr-muted); font-weight: 520; }
.kr-faq5__assistActions{ display:flex; gap: 10px; flex-wrap:wrap; }

@media (max-width: 575.98px){
  .kr-faq5__hub{ border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .kr-faq5__tile{ transition:none !important; transform:none !important; }
  .kr-faq5__tileArrow{ transition:none !important; }
}