.elementor-kit-8{--e-global-color-primary:#3D3087;--e-global-color-secondary:#E68D55;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================
   Intercool Design System (Clean) v0.2
   Decisions:
   - Elementor Site Settings control Container Padding (24 / 20 / 16)
   - Elementor global Gaps control layout spacing (24)
   - CSS controls: section rhythm + stacks (tight) + shadows + cards
   ========================= */

/* 1) Tokens (ONE :root only) */
:root{
  /* Vertical rhythm */
  --space-section: clamp(3.5rem, 6vw, 7.5rem);     /* 56 → 120 */
  --space-section-sm: clamp(2rem, 3.5vw, 4rem);    /* 32 → 64 */

  /* Tight internal spacing (when Elementor gap=24 is too much) */
  --stack-12: 12px;
  --stack-16: 16px;

  /* Card padding (plug-and-play) */
  --card-pad: 20px;

  /* Shadows */
  --shadow-s: inset 0 1px 2px rgba(255,255,255,.18),
              0 1px 2px rgba(0,0,0,.18),
              0 2px 4px rgba(0,0,0,.10);

  --shadow-m: inset 0 1px 2px rgba(255,255,255,.26),
              0 2px 4px rgba(0,0,0,.20),
              0 4px 10px rgba(0,0,0,.12);

  --shadow-l: inset 0 1px 2px rgba(255,255,255,.34),
              0 6px 14px rgba(0,0,0,.22),
              0 10px 24px rgba(0,0,0,.14);

  --shadow-hover: inset 0 1px 2px rgba(255,255,255,.22),
                  0 10px 20px rgba(0,0,0,.24),
                  0 18px 40px rgba(0,0,0,.16);

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 220ms;

  /* Card top line */
  --card-line-h: 2px;
  --card-line-h-hover: 5px;
  --card-line-radius: 8px;
  --card-line-color: #4DA3FF;
}

/* 2) Section spacing (vertical only) */
.section-pad{ padding-block: var(--space-section) !important; }
.section-pad-sm{ padding-block: var(--space-section-sm) !important; }

/* 3) Stack helpers (ONLY for tight internal groups) */
.stack-12{ display:flex; flex-direction:column; gap: var(--stack-12); }
.stack-16{ display:flex; flex-direction:column; gap: var(--stack-16); }

/* 4) Shadows */
.shadow-0{ box-shadow: none !important; }
.shadow-s{ box-shadow: var(--shadow-s) !important; }
.shadow-m{ box-shadow: var(--shadow-m) !important; }
.shadow-l{ box-shadow: var(--shadow-l) !important; }

/* 5) Card base (component wrapper) */
.card{
  border-radius: var(--radius-m);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform, box-shadow;
}

/* 6) Plug-and-play card padding component */
.card-pad{
  padding: var(--card-pad) !important;
}

/* Hover lift */
.hover-lift:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover) !important;
}
.hover-lift:active{
  transform: translateY(-1px);
}

/* Elementor-safe shadow inheritance */
.shadow-s > .elementor-widget-container,
.shadow-m > .elementor-widget-container,
.shadow-l > .elementor-widget-container{
  box-shadow: inherit !important;
}
.card > .elementor-widget-container{
  border-radius: inherit;
}

/* 7) Card top line (accent) */
.card-border{
  position: relative;
  overflow: hidden;
}
.card-border::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--card-line-h);
  background: var(--card-line-color);
  border-top-left-radius: var(--card-line-radius);
  border-top-right-radius: var(--card-line-radius);
  pointer-events: none;
  z-index: 2;
  transition: height 0.15s ease;
}
.card-border:hover::before{
  height: var(--card-line-h-hover);
}/* End custom CSS */