/* =========================================================
   iSONIC ONE-PAGE WEBSITE
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #101e38;
  --blue-dark: #073f82;
  --blue: #0878c9;
  --cyan: #11a9e5;

  --text: #f7fbff;
  --muted: #c8d9ed;

  --glass: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.18);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

body {
  font-family: "Inter", Arial, sans-serif;
  background: #071a35;
  color: var(--text);
  overflow-x: hidden;
  font-size: 6px;
}

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

p {
  font-size: 6px;
  line-height: 1.75;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;

  z-index: 1000;

  height: 72px;

  background: rgba(12, 27, 52, 0.96);

  border-bottom:
    1px solid rgba(80, 190, 255, 0.35);

  backdrop-filter: blur(16px);

  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.site-header.scrolled {
  background: rgba(8, 24, 47, 0.98);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12);
}

.nav-wrap {
  width: min(1170px, calc(100% - 48px));

  height: 100%;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;
}



/* =========================================================
   BRAND / LOGO
   ========================================================= */

.brand {
  display: flex;
  align-items: center;

  height: 100%;

  text-decoration: none;
}

.brand img {
  display: block;

  width: 168px;
  height: auto;

  max-height: 48px;

  object-fit: contain;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

.main-nav {
  display: flex;

  align-items: center;

  gap: 4px;
}

.nav-link {
  position: relative;

  border: 0;

  background: transparent;

  color: #c4d0e1;

  padding: 12px 15px;

  border-radius: 28px;

  font: inherit;

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.nav-link:hover {
  color: white;
}

.nav-link.active {
  color: white;

  background:
    linear-gradient(135deg,
      rgba(29, 174, 238, 0.28),
      rgba(19, 73, 139, 0.6));

  box-shadow:
    inset 0 0 0 1px rgba(69, 204, 255, 0.45),
    0 0 20px rgba(13, 157, 224, 0.12);
}

.contact-link {
  color: #ffffff;

  border:
    1px solid rgba(72, 194, 239, 0.3);
}


/* =========================================================
   MOBILE BUTTON
   ========================================================= */

.mobile-toggle {
  display: none;

  border: 0;

  background: transparent;

  cursor: pointer;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 100vh;

  position: relative;

  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 140px 0 70px;

  background:
    radial-gradient(circle at 91% 51%,
      rgba(31, 190, 246, 0.85) 0,
      rgba(31, 190, 246, 0.28) 19%,
      transparent 39%),

    radial-gradient(circle at 49% 70%,
      rgba(9, 104, 202, 0.72),
      transparent 48%),

    linear-gradient(115deg,
      #073c7e 0%,
      #075298 44%,
      #078bd0 100%);
}

.hero::after {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    radial-gradient(rgba(255, 255, 255, 0.6) 1px,
      transparent 1px);

  background-size: 280px 280px;

  opacity: 0.25;

  pointer-events: none;
}

.hero-inner {
  width: min(1170px, calc(100% - 48px));

  margin: 0 auto;

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 75px;

  align-items: center;
}

.hero-copy {
  min-width: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  border:
    1px solid rgba(159, 218, 255, 0.28);

  background:
    rgba(255, 255, 255, 0.08);

  border-radius: 30px;

  padding:
    8px 14px;

  color: #eaf7ff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.5px;
}

.eyebrow span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #4ed8ef;

  box-shadow:
    0 0 10px #4ed8ef;
}


/* =========================================================
   HERO TITLE
   ========================================================= */

h1 {
  margin-top: 25px;

  font-size:
    clamp(52px,
      5.5vw,
      78px);

  line-height: 0.96;

  letter-spacing: -4px;

  font-weight: 900;
}

h1 em {
  font-style: normal;

  color: #9eeaff;
}

.hero-description {
  max-width: 600px;

  margin-top: 26px;

  color: #dcecff;

  font-size: 15px;

  line-height: 1.8;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-actions {
  display: flex;

  gap: 14px;

  margin-top: 29px;
}

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding:
    0 26px;

  border-radius: 14px;

  font-size: 13px;

  font-weight: 800;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: #ffffff;

  color: #123e80;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.13);
}

.btn-primary span {
  margin-left: 13px;

  font-size: 19px;
}

.btn-secondary {
  border:
    1px solid rgba(164, 225, 255, 0.32);

  background:
    rgba(255, 255, 255, 0.08);

  color: white;
}


/* =========================================================
   HERO FEATURES
   ========================================================= */

.feature-row {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-top: 36px;

  max-width: 545px;
}

.feature-card {
  min-height: 92px;

  padding: 14px;

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.10);

  border:
    1px solid rgba(188, 228, 255, 0.2);

  backdrop-filter: blur(8px);
}

.feature-icon {
  color: #a9efff;

  font-size: 18px;

  height: 24px;
}

.feature-card strong,
.feature-card small {
  display: block;
}

.feature-card strong {
  margin-top: 2px;

  font-size: 12px;
}

.feature-card small {
  margin-top: 2px;

  color: #c4dbed;

  font-size: 9px;
}

.footnote {
  margin-top: 9px;

  color: #b9d2e8;

  font-size: 9px;
}


/* =========================================================
   PRODUCT PREVIEW
   ========================================================= */

.product-preview {
  width: min(545px, 100%);

  margin-top: 20px;

  padding: 13px;

  border:
    1px solid rgba(178, 226, 255, 0.18);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.07);
}

.product-frame {
  min-height: 215px;

  border-radius: 18px;

  background: #f5f7fa;

  display: grid;

  place-items: center;

  overflow: hidden;
}

.ac-unit {
  position: relative;

  width: 74%;

  height: 88px;

  border-radius:
    5px 5px 13px 13px;

  background:
    linear-gradient(#ffffff,
      #e9edf1);

  box-shadow:
    0 12px 20px rgba(0, 0, 0, 0.15);
}

.ac-unit::before {
  content: "";

  position: absolute;

  left: 6%;
  right: 6%;

  bottom: 18px;

  height: 8px;

  border-radius: 50%;

  background: #cbd0d5;
}

.ac-label {
  position: absolute;

  left: 45%;

  top: 50%;

  transform:
    translate(-50%, -50%);

  color: #9ba0a6;

  font-size: 11px;

  letter-spacing: 1px;
}

.ac-badge {
  position: absolute;

  right: 8%;

  top: 17%;

  color: #bca354;
}

.ac-display {
  position: absolute;

  right: 17%;

  top: 38%;

  color: white;

  font-size: 12px;

  text-shadow:
    0 1px 2px #777;
}


/* =========================================================
   SYSTEM PANEL
   ========================================================= */

.system-panel {
  width: 100%;

  padding: 22px;

  border-radius: 27px;

  background:
    linear-gradient(150deg,
      rgba(113, 205, 245, 0.22),
      rgba(255, 255, 255, 0.08));

  border:
    1px solid rgba(196, 235, 255, 0.25);

  backdrop-filter: blur(10px);
}

.panel-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 11px;
}

.panel-top span {
  padding:
    7px 12px;

  border-radius: 20px;

  color: #77ecff;

  background:
    rgba(28, 213, 198, 0.13);

  border:
    1px solid rgba(73, 224, 213, 0.28);

  font-size: 9px;
}


/* =========================================================
   AIRFLOW
   ========================================================= */

.airflow-display {
  height: 270px;

  position: relative;

  margin-top: 18px;

  border-radius: 19px;

  overflow: hidden;

  display: grid;

  place-items: center;

  background:
    linear-gradient(145deg,
      rgba(64, 161, 211, 0.25),
      rgba(15, 68, 127, 0.4));

  border:
    1px solid rgba(255, 255, 255, 0.13);
}

.airflow-rings {
  width: 180px;
  height: 180px;

  position: relative;

  display: grid;

  place-items: center;
}

.ring {
  position: absolute;

  border:
    1px solid rgba(178, 235, 255, 0.2);

  border-radius: 50%;
}

.ring-1 {
  inset: 0;
}

.ring-2 {
  inset: 25px;
}

.ring-3 {
  inset: 50px;
}

.snowflake {
  font-size: 68px;

  color: #bdeeff;

  text-shadow:
    0 0 25px rgba(176, 236, 255, 0.25);
}

.quiet-badge {
  position: absolute;

  bottom: 15px;
  left: 15px;

  padding:
    9px 14px;

  border-radius: 11px;

  background:
    rgba(255, 255, 255, 0.13);

  border:
    1px solid rgba(255, 255, 255, 0.22);

  font-size: 10px;

  font-weight: 700;
}


/* =========================================================
   SYSTEM FEATURES
   ========================================================= */

.system-features {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;

  margin-top: 15px;
}

.system-features div {
  min-height: 62px;

  border-radius: 13px;

  background:
    rgba(97, 195, 237, 0.22);

  display: grid;

  place-items: center;

  align-content: center;
}

.system-features strong {
  font-size: 16px;

  color: #a8ecff;
}

.system-features small {
  margin-top: 2px;

  color: #d0e9f5;

  font-size: 8px;
}


/* =========================================================
   BACKGROUND DECORATION
   ========================================================= */

.glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}

.glow-left {
  width: 300px;
  height: 300px;

  left: -145px;
  top: 75px;

  background:
    rgba(84, 159, 219, 0.14);
}

.glow-right {
  width: 390px;
  height: 390px;

  right: -100px;
  top: 120px;

  background:
    rgba(88, 210, 249, 0.13);
}

.dot {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #a5ddff;

  opacity: 0.75;
}

.dot-1 {
  left: 18%;
  top: 76%;
}

.dot-2 {
  left: 64%;
  top: 32%;
}

.dot-3 {
  right: 9%;
  top: 20%;
}


/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.content-section {
  min-height: 80vh;

  padding:
    110px 8%;

  background: #f6fbff;

  color: #102848;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.dark-section {
  background: #0c2343;

  color: white;
}

.section-heading {
  max-width: 800px;

  margin: 0 auto;

  text-align: center;
}

.section-heading .eyebrow {
  color: #0878c9;

  border-color: #b7def1;

  background: #e9f7ff;
}

.dark-section .section-heading .eyebrow {
  color: #86e5ff;

  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.16);
}

.section-heading h2 {
  margin-top: 20px;

  font-size:
    clamp(34px,
      4vw,
      55px);

  letter-spacing: -2px;
}

.section-heading p {
  margin:
    20px auto 0;

  max-width: 650px;

  color: #6c8096;

  line-height: 1.8;
}

.dark-section .section-heading p {
  color: #bfd0e2;
}


/* ==========================================
   iSONIC ABOUT US — WHITE MOUNTAIN TIMELINE
   ========================================== */

/* =========================================
   iSONIC ABOUT US — COMPANY PROFILE
   Four Highlights + Milestone Timeline
   ========================================= */

.isonic-about {
  --ia-navy: #0c2343;
  --ia-blue: #078bd0;
  --ia-bright: #0875ec;
  --ia-muted: #657b93;

  position: relative;
  overflow: hidden;
  padding: 95px 0 85px;
  background:
    radial-gradient(circle at 95% 8%,
      rgba(7, 139, 208, .055),
      transparent 24%),
    #fff;
  color: var(--ia-navy);
}

.isonic-about *,
.isonic-about *::before,
.isonic-about *::after {
  box-sizing: border-box;
}

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

/* HEADER */

.ia-profile-header {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.ia-eyebrow,
.ia-section-label {
  display: inline-block;
  color: var(--ia-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.ia-profile-header h2,
.ia-journey-header h2 {
  margin: 15px 0 0;
  color: var(--ia-navy);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -2px;
}

.ia-profile-header h2 span,
.ia-journey-header h2 span {
  color: var(--ia-bright);
}

.ia-profile-header>p,
.ia-journey-header>p {
  max-width: 650px;
  margin: 18px auto 0;
  color: var(--ia-muted);
  font-size: 16px;
  line-height: 1.8;
}

/* FOUR HIGHLIGHT POINTS */

.ia-highlights-four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 24px 12px;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(12, 35, 67, 0.035);
}

.ia-highlights-four .ia-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}

.ia-highlights-four .ia-highlight+.ia-highlight {
  border-left: 1px solid #e5edf7;
}

.ia-highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  margin-bottom: 5px;
  color: var(--cyan);
  font-size: 33px;
}

.ia-highlights-four .ia-number {
  color: var(--blue-dark);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
}

.ia-highlights-four .ia-highlight-caption {
  margin: 4px 0 0;
  color: var(--ia-navy);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

/* PROFILE SUMMARY */

.ia-profile-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 55px;
  padding: 36px 4px 58px;
}

.ia-summary-copy h3 {
  margin: 12px 0 0;
  color: var(--ia-navy);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -1px;
}

.ia-summary-copy h3 span {
  display: block;
  color: var(--ia-blue);
}

.ia-profile-summary>p {
  margin: 0;
  padding-left: 24px;
  border-left: 2px solid #a8dcfa;
  color: var(--ia-muted);
  font-size: 15px;
  line-height: 1.9;
}

/* TIMELINE HEADER */

.ia-journey-header {
  margin: 0 auto 45px;
  text-align: center;
}

.ia-journey-header h2 {
  font-size: clamp(34px, 4vw, 48px);
}

.ia-journey-header>p {
  margin-top: 13px;
}

/* ALTERNATING TIMELINE */

.ia-timeline {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 10px 0;
}

.ia-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  border-radius: 5px;
  background: linear-gradient(to bottom,
      #c8eaff,
      #078bd0 45%,
      #a7dcff);
  transform: translateX(-50%);
}

.ia-milestone {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  min-height: 150px;
  margin-bottom: 18px;
}

.ia-card {
  grid-column: 1;
  width: 100%;
  max-width: 350px;
  padding: 23px 26px;
  border: 1px solid #e1ebf4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(12, 35, 67, .045);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.ia-left .ia-card {
  justify-self: end;
  text-align: right;
}

.ia-right .ia-card {
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.ia-card:hover {
  transform: translateY(-4px);
  border-color: #b7e2fb;
  box-shadow: 0 13px 30px rgba(7, 139, 208, .08);
}

.ia-milestone-year {
  display: block;
  margin-bottom: 6px;
  color: var(--ia-blue);
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.8px;
}

.ia-card h3 {
  margin: 0 0 9px;
  color: var(--ia-navy);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.4;
}

.ia-card p {
  margin: 0;
  color: var(--ia-muted);
  font-size: 14px;
  line-height: 1.75;
}

.ia-timeline-node {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 17px;
  height: 17px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--ia-blue);
  box-shadow:
    0 0 0 2px #c5e8fc,
    0 0 13px rgba(7, 139, 208, .18);
  transform: translate(-50%, -50%);
}

/* LATEST MILESTONE */

.ia-current .ia-card {
  background: linear-gradient(145deg, #fff, #f3faff);
  border-color: #b9e2fa;
}

.ia-current .ia-milestone-year {
  color: var(--ia-bright);
}

.ia-current .ia-timeline-node {
  width: 22px;
  height: 22px;
  background: var(--ia-bright);
  box-shadow:
    0 0 0 5px rgba(7, 139, 208, .10),
    0 0 20px rgba(7, 139, 208, .25);
}

/* CLOSING STATEMENT */

.ia-journey-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
  text-align: center;
}

.ia-end-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #075298, #078bd0);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 6px 20px rgba(7, 139, 208, .2);
}

.ia-journey-end h3 {
  margin: 12px 0 0;
  color: var(--ia-navy);
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 800;
  line-height: 1.5;
}

/* TABLET */

@media (max-width: 1000px) and (min-width: 761px) {
  .ia-container {
    width: calc(100% - 40px);
  }

  .ia-profile-summary {
    gap: 30px;
  }

  .ia-highlights-four .ia-highlight {
    padding: 0 6px;
  }

  .ia-highlights-four .ia-number {
    font-size: 30px;
  }

  .ia-highlights-four .ia-highlight-caption {
    font-size: 11px;
  }
}

/* MOBILE */

@media (max-width: 760px) {
  .isonic-about {
    padding: 65px 0 60px;
  }

  .ia-container {
    width: calc(100% - 32px);
  }

  .ia-profile-header {
    margin-bottom: 30px;
  }

  .ia-profile-header h2,
  .ia-journey-header h2 {
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: -1.4px;
  }

  .ia-profile-header>p,
  .ia-journey-header>p {
    font-size: 15px;
    line-height: 1.75;
  }

  .ia-highlights-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 22px;
    padding: 22px 10px;
  }

  .ia-highlights-four .ia-highlight {
    padding: 8px 6px;
  }

  .ia-highlights-four .ia-highlight+.ia-highlight {
    border-left: none;
  }

  .ia-highlights-four .ia-highlight:nth-child(even) {
    border-left: 1px solid #e5edf7;
  }

  .ia-highlights-four .ia-highlight:nth-child(n + 3) {
    padding-top: 20px;
    border-top: 1px solid #e5edf7;
  }

  .ia-highlight-icon {
    height: 38px;
    font-size: 29px;
  }

  .ia-highlights-four .ia-number {
    font-size: clamp(27px, 7vw, 34px);
  }

  .ia-highlights-four .ia-highlight-caption {
    font-size: 11px;
  }

  .ia-profile-summary {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 32px 0 44px;
  }

  .ia-summary-copy h3 {
    font-size: 29px;
  }

  .ia-profile-summary>p {
    padding-left: 16px;
    font-size: 14px;
  }

  .ia-journey-header {
    margin-bottom: 30px;
  }

  .ia-timeline {
    padding-left: 25px;
  }

  .ia-timeline::before {
    left: 7px;
    transform: none;
  }

  .ia-milestone {
    display: block;
    min-height: 0;
    margin-bottom: 18px;
  }

  .ia-card,
  .ia-left .ia-card,
  .ia-right .ia-card {
    width: 100%;
    max-width: none;
    padding: 20px;
    text-align: left;
  }

  .ia-milestone-year {
    font-size: 25px;
  }

  .ia-card h3 {
    font-size: 16px;
  }

  .ia-card p {
    font-size: 14px;
  }

  .ia-timeline-node {
    top: 27px;
    left: -18px;
    width: 15px;
    height: 15px;
    transform: translate(-50%, 0);
  }

  .ia-current .ia-timeline-node {
    width: 19px;
    height: 19px;
  }

  .ia-journey-end h3 {
    font-size: 19px;
  }
}


/* =========================================================
   PRODUCTS / PRODUCT CATALOG
   ========================================================= */

.products-section {
  background: #0c2343;
  ;

  padding: 120px 0 110px;
}


.products-container {
  width: min(1170px,
      calc(100% - 48px));

  margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.products-heading {
  max-width: 760px;

  margin: 0 auto 65px;

  text-align: center;
}


.products-heading h2 {
  margin-bottom: 20px;
  color: white;
}


.products-heading h2 span {
  color: #078bd0;
}


.products-heading p {
  max-width: 650px;

  margin: 0 auto;

  color: white;

  font-size: 15px;

  line-height: 1.8;

}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.product-catalog {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 28px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-catalog-card {
  overflow: hidden;

  background: #ffffff;

  border:
    1px solid rgba(7, 139, 208, 0.14);

  border-radius: 24px;

  box-shadow:
    0 15px 45px rgba(12, 35, 67, 0.07);

  transition:
    transform 0.4s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.4s ease;

  will-change: transform;
}


.product-catalog-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 25px 60px rgba(12, 35, 67, 0.12);
}


/* =========================================================
   PRODUCT IMAGE AREA
   ========================================================= */

.product-image-box {
  position: relative;

  height: 310px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    linear-gradient(145deg,
      #eef8ff 0%,
      #dceffd 100%);

  border-bottom:
    1px solid rgba(7, 139, 208, 0.08);
}


.product-image-box::before {
  content: "";

  position: absolute;

  width: 230px;
  height: 230px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(7, 139, 208, 0.16),
      transparent 68%);
}


.product-image-box img {
  position: relative;

  z-index: 2;

  display: block;

  width: 75%;
  height: 75%;

  object-fit: contain;

  transition:
    transform 0.5s cubic-bezier(.22, 1, .36, 1);

  filter:
    drop-shadow(0 20px 25px rgba(12, 35, 67, 0.14));
}


.product-catalog-card:hover .product-image-box img {
  transform:
    scale(1.06) translateY(-4px);
}


/* =========================================================
   NUMBER
   ========================================================= */

.product-number {
  position: absolute;

  top: 22px;
  left: 24px;

  z-index: 5;

  color: #078bd0;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================================
   CATEGORY BADGE
   ========================================================= */

.product-category {
  position: absolute;

  top: 20px;
  right: 20px;

  z-index: 5;

  padding:
    7px 11px;

  border:
    1px solid rgba(7, 139, 208, 0.16);

  border-radius: 30px;

  color: #078bd0;

  background:
    rgba(255, 255, 255, 0.75);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1px;
}


/* =========================================================
   PRODUCT INFORMATION
   ========================================================= */

.product-info {
  padding: 30px 30px 32px;
}


.product-label {
  display: block;

  margin-bottom: 7px;

  color: #078bd0;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;
}


.product-info h3 {
  margin: 0 0 12px;

  color: #0c2343;

  font-size: 25px;

  line-height: 1.2;

  font-weight: 800;
}


.product-info p {
  min-height: 58px;

  margin: 0 0 22px;

  color: #71869c;

  font-size: 13px;

  line-height: 1.7;
}


/* =========================================================
   PRODUCT FEATURES
   ========================================================= */

.product-features {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-bottom: 25px;
}


.product-features span {
  padding:
    7px 10px;

  border-radius: 7px;

  color: #46627e;

  background: #f1f7fb;

  font-size: 10px;

  font-weight: 600;
}


/* =========================================================
   PRODUCT LINK
   ========================================================= */

.product-link {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: #078bd0;

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;

  transition:
    gap 0.3s ease,
    color 0.3s ease;
}


.product-link span {
  font-size: 16px;

  transition:
    transform 0.3s ease;
}


.product-link:hover {
  gap: 13px;

  color: #075298;
}


.product-link:hover span {
  transform:
    translateX(3px);
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.products-bottom {
  margin-top: 35px;

  padding:
    24px 28px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  border:
    1px solid rgba(7, 139, 208, 0.12);

  border-radius: 16px;
  background:
    radial-gradient(circle at 91% 51%,
      rgba(31, 190, 246, 0.85) 0,
      rgba(31, 190, 246, 0.28) 19%,
      transparent 39%),

    radial-gradient(circle at 49% 70%,
      rgba(9, 104, 202, 0.72),
      transparent 48%),

    linear-gradient(115deg,
      #073c7e 0%,
      #075298 44%,
      #078bd0 100%);
}


.products-bottom strong {
  display: block;

  margin-bottom: 5px;

  color: white;

  font-size: 14px;
}


.products-bottom span {
  color: white;

  font-size: 11px;
}


/* =========================================================
   FEATURED TALK TO ISONIC CTA
   ========================================================= */
.products-bottom-link {
  position: relative;
  overflow: hidden;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-width: 150px;
  height: 54px;

  padding: 0 18px 0 20px;

  border-radius: 14px;

  color: #ffffff;
  background: linear-gradient(135deg, #075298, #078bd0);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  text-decoration: none;

  box-shadow:
    0 8px 20px rgba(7, 139, 208, .20),
    inset 0 1px 0 rgba(255, 255, 255, .15);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


/* Moving light */
.products-bottom-link::before {
  content: "";

  position: absolute;
  top: -60%;
  left: -80%;

  width: 20%;
  height: 220%;

  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.16),
      transparent);

  transform: rotate(20deg);

  animation: buttonLight 4.4s ease-in-out infinite;

  pointer-events: none;
}


/* Make content stay above the light */
.products-cta-text,
.products-cta-ai {
  position: relative;
  z-index: 2;
}


/* Text */
.products-cta-text {
  display: flex;
  align-items: center;
  height: 100%;

  white-space: nowrap;
  line-height: 1;
}


/* Chat icon */
.products-cta-ai {
  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: #ffffff;

  font-size: 16px;
  line-height: 1;

  transition:
    transform .35s ease,
    filter .35s ease;
}

.products-cta-ai i {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1;
}


/* Hover */
.products-bottom-link:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(7, 139, 208, .32),
    0 0 18px rgba(7, 139, 208, .22),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.products-bottom-link:hover .products-cta-ai {
  transform: scale(1.15);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .7));
}


/* Light sweep animation */
@keyframes buttonLight {
  0% {
    left: -80%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  65% {
    left: 140%;
    opacity: 0;
  }

  100% {
    left: 140%;
    opacity: 0;
  }
}

/* Arrow circle */


@media (max-width: 760px) {

  .products-section {
    padding: 80px 0 80px;
  }


  .products-container {
    width:
      calc(100% - 30px);
  }


  .products-heading {
    margin-bottom: 45px;
  }


  .products-heading h2 {
    font-size: 34px;

    line-height: 1.1;
  }


  .products-heading p {
    font-size: 13px;

    line-height: 1.7;
  }


  /* One card per row */

  .product-catalog {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .product-image-box {
    height: 260px;
  }


  .product-image-box img {
    width: 72%;
    height: 72%;
  }


  .product-info {
    padding:
      24px 22px 27px;
  }


  .product-info h3 {
    font-size: 22px;
  }


  .product-info p {
    min-height: auto;

    font-size: 12px;
  }


  .product-features {
    margin-bottom: 20px;
  }


  .products-bottom {
    flex-direction: column;

    align-items: flex-start;

    padding: 22px;
  }


  .products-bottom-link {
    width: 100%;

    min-width: 0;

    height: 54px;

    justify-content: space-between;
  }

}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.cards {
  width: min(1000px, 100%);

  margin:
    55px auto 0;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.content-card {
  min-height: 280px;

  padding: 30px;

  border-radius: 22px;

  background: white;

  border:
    1px solid #d9eaf4;

  box-shadow:
    0 15px 40px rgba(16, 57, 89, 0.07);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.content-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 22px 50px rgba(16, 57, 89, 0.12);
}

.content-card>span {
  color: #0878c9;

  font-size: 11px;

  font-weight: 800;
}

.content-card h3 {
  margin-top: 65px;

  font-size: 22px;
}

.content-card p {
  margin-top: 10px;

  color: #6d8094;

  line-height: 1.6;

  font-size: 13px;
}

.card-link {
  display: inline-block;

  margin-top: 22px;

  color: #0878c9;

  font-size: 12px;

  font-weight: 800;
}


/* =========================================================
   TECHNOLOGY
   ========================================================= */
/* =========================================================
   iSONIC TECHNOLOGY SECTION
   SMART AIR TECHNOLOGY
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

.technology-section {
  position: relative;

  padding: 120px 0 130px;

  overflow: hidden;

  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #f4faff 45%,
      #eef8fd 100%);
}


/*
 * Subtle technical background glow
 */

.technology-section::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 900px;
  height: 900px;

  transform:
    translateX(-50%) translateY(-35%);

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(7, 139, 208, .07),
      transparent 68%);

  pointer-events: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.technology-container {
  position: relative;

  z-index: 2;

  width:
    min(1170px,
      calc(100% - 48px));

  margin: 0 auto;
}



/* =========================================================
   TECHNOLOGY HERO
   ========================================================= */

.technology-hero {
  position: relative;

  min-height: 600px;

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  align-items: center;

  overflow: hidden;

  padding: 70px;

  border:
    1px solid rgba(72, 216, 255, .15);

  border-radius: 35px;

  background:

    radial-gradient(circle at 78% 50%,
      rgba(7, 139, 208, .38),
      transparent 38%),

    radial-gradient(circle at 100% 0%,
      rgba(72, 216, 255, .12),
      transparent 35%),

    linear-gradient(135deg,
      #061a32 0%,
      #073c7e 55%,
      #075298 100%);

  box-shadow:
    0 30px 80px rgba(7, 60, 126, .22);
}


/*
 * Technical grid lines
 */

.technology-hero::before {

  content: "";

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255, 255, 255, .035) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(255, 255, 255, .035) 1px,
      transparent 1px);

  background-size:
    45px 45px;

  mask-image:
    linear-gradient(to right,
      transparent,
      black 45%,
      black 100%);

  pointer-events: none;
}


/*
 * Small glow at bottom
 */

.technology-hero::after {

  content: "";

  position: absolute;

  left: 50%;

  bottom: -120px;

  width: 600px;
  height: 240px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(72, 216, 255, .16);

  filter: blur(70px);

  pointer-events: none;
}



/* =========================================================
   HERO CONTENT
   ========================================================= */

.technology-hero-content {

  position: relative;

  z-index: 10;

  max-width: 470px;
}


.technology-overline {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 22px;

  color:
    #48d8ff;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2.2px;
}


/*
 * Small glowing dot
 */

.technology-overline::before {

  content: "";

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    #48d8ff;

  box-shadow:
    0 0 12px rgba(72, 216, 255, .9);

  animation:
    technologyPulse 2s ease-in-out infinite;
}


@keyframes technologyPulse {

  0%,
  100% {
    opacity: .5;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}


.technology-hero-content h2 {

  margin: 0 0 22px;

  color: #ffffff;

  font-size: 52px;

  line-height: 1.04;

  font-weight: 800;

  letter-spacing: -1.5px;
}


.technology-hero-content h2 span {

  display: block;

  color:
    #48d8ff;
}


.technology-hero-content p {

  max-width: 430px;

  margin: 0 0 30px;

  color:
    rgba(255, 255, 255, .68);

  font-size: 14px;

  line-height: 1.85;
}



/* =========================================================
   TECHNOLOGY TAGS
   ========================================================= */

.technology-tech-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}


.technology-tech-tags span {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding:
    9px 12px;

  border:
    1px solid rgba(255, 255, 255, .13);

  border-radius: 8px;

  color:
    rgba(255, 255, 255, .85);

  background:
    rgba(255, 255, 255, .07);

  backdrop-filter:
    blur(8px);

  font-size: 10px;

  font-weight: 700;
}


.technology-tech-tags i {

  color:
    #48d8ff;

  font-size: 11px;
}


.technology-tech-tags strong {

  color:
    #48d8ff;

  font-size: 11px;
}



/* =========================================================
   TECHNOLOGY VISUAL
   ========================================================= */

.technology-visual {

  position: relative;

  height: 500px;

  display: flex;

  align-items: center;

  justify-content: center;
}



/* =========================================================
   CENTRAL GLOW
   ========================================================= */

.tech-glow {

  position: absolute;

  width: 390px;
  height: 390px;

  border-radius: 50%;

  background:

    radial-gradient(circle,
      rgba(72, 216, 255, .28),
      rgba(7, 139, 208, .10) 45%,
      transparent 70%);

  filter:
    blur(5px);

  animation:
    techGlowPulse 4s ease-in-out infinite;
}


@keyframes techGlowPulse {

  0%,
  100% {
    opacity: .65;
    transform: scale(.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }

}



/* =========================================================
   ORBIT
   ========================================================= */

.tech-orbit {

  position: absolute;

  border:
    1px solid rgba(72, 216, 255, .20);

  border-radius: 50%;

  pointer-events: none;
}


.tech-orbit-1 {

  width: 430px;
  height: 430px;

  animation:
    techOrbit 14s linear infinite;
}


.tech-orbit-2 {

  width: 335px;
  height: 335px;

  border-color:
    rgba(255, 255, 255, .11);

  animation:
    techOrbitReverse 18s linear infinite;
}


@keyframes techOrbit {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes techOrbitReverse {

  from {
    transform:
      rotate(360deg);
  }

  to {
    transform:
      rotate(0deg);
  }

}



/* =========================================================
   ORBIT DOTS
   ========================================================= */

.tech-orbit-1::before {

  content: "";

  position: absolute;

  top: 28px;
  left: 50%;

  width: 8px;
  height: 8px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    #48d8ff;

  box-shadow:
    0 0 14px rgba(72, 216, 255, .9);
}


.tech-orbit-2::before {

  content: "";

  position: absolute;

  right: 18px;
  bottom: 55px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, .8);

  box-shadow:
    0 0 10px rgba(255, 255, 255, .8);
}



/* =========================================================
   AIR CONDITIONER UNIT
   ========================================================= */

.tech-ac-unit {
  position: relative;

  z-index: 5;

  width: 430px;
  height: 230px;

  display: flex;

  align-items: center;
  justify-content: center;
}




/* Real product image */

.tech-real-ac {
  position: relative;

  z-index: 5;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  filter:
    drop-shadow(0 25px 30px rgba(0, 0, 0, .28));

  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),

    filter .5s ease;
}


/* Slight floating effect */

.technology-hero:hover .tech-real-ac {

  transform:
    translateY(-5px) scale(1.02);

  filter:
    drop-shadow(0 32px 38px rgba(0, 0, 0, .34));
}

/* =========================================================
   AC BRAND
   ========================================================= */

.tech-ac-brand {

  position: absolute;

  left: 50%;
  top: 29px;

  transform:
    translateX(-50%);

  color:
    #738494;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;
}



/* =========================================================
   AC DISPLAY
   ========================================================= */

.tech-ac-display {

  position: absolute;

  right: 30px;
  top: 22px;

  color:
    #22a6d9;

  font-size: 12px;

  font-weight: 800;

  text-shadow:
    0 0 8px rgba(34, 166, 217, .35);
}



/* =========================================================
   AC LED
   ========================================================= */

.tech-ac-light {

  position: absolute;

  right: 25px;
  top: 46px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    #39d6ff;

  box-shadow:
    0 0 10px rgba(57, 214, 255, .9);

  animation:
    acLightPulse 2s ease-in-out infinite;
}


@keyframes acLightPulse {

  0%,
  100% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }

}



/* =========================================================
   AIRFLOW
   ========================================================= */

.tech-airflow {

  position: absolute;

  z-index: 3;

  display: flex;

  gap: 7px;

  opacity: .75;
}


.tech-airflow span {

  display: block;

  width: 4px;
  height: 80px;

  border-radius: 50%;

  background:
    linear-gradient(180deg,
      rgba(72, 216, 255, 0),
      rgba(72, 216, 255, .65),
      rgba(72, 216, 255, 0));

  filter:
    blur(.5px);

  animation:
    airflowMove 2.4s ease-in-out infinite;
}


.tech-airflow span:nth-child(2) {
  height: 105px;
  animation-delay: .3s;
}


.tech-airflow span:nth-child(3) {
  height: 85px;
  animation-delay: .6s;
}


.airflow-left {
  left: 0;

  transform:
    rotate(70deg);
}

.airflow-right {
  right: 0;

  transform:
    rotate(-70deg);
}


@keyframes airflowMove {

  0%,
  100% {
    opacity: .2;
    transform:
      translateY(8px) scaleY(.85);
  }

  50% {
    opacity: .85;
    transform:
      translateY(-8px) scaleY(1);
  }

}



/* =========================================================
   FLOATING TECHNOLOGY BADGES
   ========================================================= */

.tech-floating {

  position: absolute;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    10px 14px;

  border:
    1px solid rgba(255, 255, 255, .16);

  border-radius: 12px;

  color:
    #ffffff;

  background:
    rgba(255, 255, 255, .08);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, .16);

  font-size: 10px;

  font-weight: 700;

  white-space: nowrap;

  animation:
    floatingTech 4s ease-in-out infinite;
}


.tech-floating i {

  color:
    #48d8ff;

  font-size: 13px;
}


.tech-floating strong {

  color:
    #48d8ff;

  font-size: 12px;
}


.tech-floating-1 {

  top: 55px;
  left: 25px;

  animation-delay:
    0s;
}


.tech-floating-2 {

  top: 135px;
  right: 15px;

  animation-delay:
    .8s;
}


.tech-floating-3 {

  bottom: 95px;
  left: 40px;

  animation-delay:
    1.5s;
}


.tech-floating-4 {

  bottom: 45px;
  right: 30px;

  animation-delay:
    2.2s;
}


@keyframes floatingTech {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}



/* =========================================================
   TECHNOLOGY STAT BAR
   ========================================================= */

.technology-stat-bar {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  margin-top: 24px;

  border:
    1px solid rgba(7, 139, 208, .12);

  border-radius: 18px;

  overflow: hidden;

  background:
    #ffffff;

  box-shadow:
    0 15px 45px rgba(12, 35, 67, .07);
}


.technology-stat-bar>div {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 115px;

  padding:
    20px;

  text-align: center;
}


.technology-stat-bar>div:not(:last-child)::after {

  content: "";

  position: absolute;

  top: 25px;
  right: 0;

  width: 1px;
  height: 65px;

  background:
    rgba(7, 139, 208, .10);
}


.technology-stat-bar strong {

  display: block;

  margin-bottom: 7px;

  color:
    #075298;

  font-size: 22px;

  font-weight: 800;
}


.technology-stat-bar span {

  color:
    #71869c;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .5px;
}



/* =========================================================
   TECHNOLOGY GROUPS
   ========================================================= */

.technology-groups {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 25px;

  margin-top: 55px;
}


.technology-group {

  position: relative;

  padding:
    30px;

  border:
    1px solid rgba(7, 139, 208, .11);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, .92);

  box-shadow:
    0 12px 40px rgba(12, 35, 67, .05);

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),

    box-shadow .4s ease;
}


.technology-group:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 22px 55px rgba(12, 35, 67, .09);
}



/* =========================================================
   GROUP TITLE
   ========================================================= */

.technology-group-title {

  display: flex;

  align-items: center;

  gap: 17px;

  margin-bottom: 25px;
}


.technology-group-title>span {

  width: 40px;
  height: 40px;

  flex:
    0 0 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 11px;

  color:
    #078bd0;

  background:
    #eaf7fd;

  font-size: 10px;

  font-weight: 800;
}


.technology-group-title small {

  display: block;

  margin-bottom: 5px;

  color:
    #078bd0;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.technology-group-title h3 {

  margin: 0;

  color:
    #0c2343;

  font-size: 20px;

  line-height: 1.2;

  font-weight: 800;
}



/* =========================================================
   MINI FEATURE GRID
   ========================================================= */

.technology-mini-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 10px;
}


.technology-mini-card {

  min-height: 115px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding:
    15px;

  border:
    1px solid rgba(7, 139, 208, .08);

  border-radius: 12px;

  background:
    #f6fbfe;

  transition:
    background .3s ease,
    transform .3s ease,
    border-color .3s ease;
}


.technology-mini-card:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(7, 139, 208, .18);

  background:
    #eef9fe;
}


.technology-mini-card i {

  margin-bottom: 9px;

  color:
    #078bd0;

  font-size: 17px;
}


.technology-mini-card strong {

  margin-bottom: 5px;

  color:
    #0c2343;

  font-size: 11px;

  line-height: 1.3;
}


.technology-mini-card span {

  color:
    #71869c;

  font-size: 9px;

  line-height: 1.45;
}



/* =========================================================
   R32 CARD
   ========================================================= */

.technology-r32-card {

  justify-content: center;

  background:
    linear-gradient(145deg,
      #effcf3,
      #e6f8eb);
}


.technology-r32-card strong {

  color:
    #20a847;

  font-size: 22px;

  font-weight: 900;
}



/* =========================================================
   REVEAL SUPPORT
   ========================================================= */

.technology-section .reveal {

  will-change:
    opacity,
    transform;
}



/* =========================================================
   RESPONSIVE
   ONE BREAKPOINT
   ========================================================= */

@media (max-width: 760px) {


  /* ===============================================
     SECTION
     =============================================== */

  .technology-section {

    padding:
      80px 0 85px;

  }


  .technology-container {

    width:
      calc(100% - 30px);

  }



  /* ===============================================
     HERO
     =============================================== */

  .technology-hero {

    min-height:
      auto;

    display:
      flex;

    flex-direction:
      column;

    padding:
      40px 22px 30px;

    border-radius:
      25px;

  }


  .technology-hero-content {

    width:
      100%;

    max-width:
      none;

    text-align:
      center;

  }


  .technology-overline {

    justify-content:
      center;

    font-size:
      8px;

    letter-spacing:
      1.8px;

  }


  .technology-hero-content h2 {

    font-size:
      34px;

    line-height:
      1.08;

    letter-spacing:
      -.8px;

  }


  .technology-hero-content p {

    max-width:
      100%;

    font-size:
      12px;

    line-height:
      1.7;

  }


  .technology-tech-tags {

    justify-content:
      center;

  }


  .technology-tech-tags span {

    padding:
      8px 10px;

    font-size:
      9px;

  }



  /* ===============================================
     VISUAL
     =============================================== */

  .technology-visual {

    width:
      100%;

    height:
      370px;

    margin-top:
      15px;

  }


  .tech-glow {

    width:
      270px;

    height:
      270px;

  }


  .tech-orbit-1 {

    width:
      310px;

    height:
      310px;

  }


  .tech-orbit-2 {

    width:
      245px;

    height:
      245px;

  }



  /* ===============================================
     AC
     =============================================== */

  .tech-ac-unit {

    width:
      275px;

    height:
      112px;

  }


  .tech-ac-brand {

    top:
      22px;

    font-size:
      9px;

  }


  .tech-ac-display {

    top:
      17px;

    right:
      22px;

    font-size:
      9px;

  }


  .tech-ac-light {

    right:
      18px;

    top:
      35px;

    width:
      4px;

    height:
      4px;

  }


  .tech-ac-body::after {

    left:
      15px;

    right:
      15px;

    bottom:
      12px;

  }



  /* ===============================================
     AIRFLOW
     =============================================== */

  .tech-airflow {

    gap:
      5px;

  }


  .tech-airflow span {

    width:
      3px;

    height:
      60px;

  }


  .tech-airflow span:nth-child(2) {

    height:
      78px;

  }


  .tech-airflow span:nth-child(3) {

    height:
      65px;

  }


  .airflow-left {

    left:
      15px;

  }


  .airflow-right {

    right:
      15px;

  }



  /* ===============================================
     FLOATING BADGES
     =============================================== */

  .tech-floating {

    padding:
      8px 10px;

    border-radius:
      9px;

    font-size:
      8px;

    gap:
      6px;

  }


  .tech-floating i {

    font-size:
      10px;

  }


  .tech-floating strong {

    font-size:
      9px;

  }


  .tech-floating-1 {

    top:
      30px;

    left:
      0;

  }


  .tech-floating-2 {

    top:
      75px;

    right:
      0;

  }


  .tech-floating-3 {

    bottom:
      60px;

    left:
      5px;

  }


  .tech-floating-4 {

    bottom:
      25px;

    right:
      0;

  }



  /* ===============================================
     STAT BAR
     =============================================== */

  .technology-stat-bar {

    grid-template-columns:
      repeat(2, 1fr);

    margin-top:
      16px;

    border-radius:
      15px;

  }


  .technology-stat-bar>div {

    min-height:
      90px;

    padding:
      15px 10px;

  }


  .technology-stat-bar>div:nth-child(2)::after {

    display:
      none;

  }


  .technology-stat-bar>div:nth-child(1),
  .technology-stat-bar>div:nth-child(2) {

    border-bottom:
      1px solid rgba(7, 139, 208, .10);

  }


  .technology-stat-bar>div:nth-child(odd) {

    border-right:
      1px solid rgba(7, 139, 208, .10);

  }


  .technology-stat-bar>div:not(:last-child)::after {

    top:
      20px;

    height:
      50px;

  }


  .technology-stat-bar strong {

    font-size:
      18px;

  }


  .technology-stat-bar span {

    font-size:
      8px;

  }



  /* ===============================================
     TECHNOLOGY GROUPS
     =============================================== */

  .technology-groups {

    grid-template-columns:
      1fr;

    gap:
      16px;

    margin-top:
      35px;

  }


  .technology-group {

    padding:
      22px;

    border-radius:
      17px;

  }


  .technology-group-title {

    gap:
      12px;

    margin-bottom:
      18px;

  }


  .technology-group-title>span {

    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;

    border-radius:
      9px;

  }


  .technology-group-title small {

    font-size:
      7px;

  }


  .technology-group-title h3 {

    font-size:
      17px;

  }



  /* ===============================================
     MINI CARDS
     =============================================== */

  .technology-mini-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      8px;

  }


  .technology-mini-card {

    min-height:
      105px;

    padding:
      13px;

  }


  .technology-mini-card i {

    font-size:
      15px;

  }


  .technology-mini-card strong {

    font-size:
      10px;

  }


  .technology-mini-card span {

    font-size:
      8px;

  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .technology-section *,
  .technology-section *::before,
  .technology-section *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;

  }

}

/* =========================================================
   SUPPORT
   ========================================================= */

/* =========================================================
   iSONIC SUPPORT SECTION
   iSONIC CARE & SUPPORT
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

/* =========================================================
   SUPPORT SECTION
========================================================= */

.support-section {
  position: relative;
  width: 100%;
  background: #0c2343;
  color: #ffffff;
  overflow: hidden;
  padding-bottom: 7%;
}


/* subtle background decoration */

.support-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(7, 139, 208, 0.08);
  filter: blur(20px);
  pointer-events: none;
}

.support-section::after {
  content: "";
  position: absolute;
  bottom: -180px;
  left: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(7, 82, 152, 0.08);
  filter: blur(25px);
  pointer-events: none;
}


.support-container {
  position: relative;
  z-index: 2;
  width: min(1170px, calc(100% - 48px));
  margin: 0 auto;
}


/* =========================================================
   SUPPORT INTRO
========================================================= */

.support-intro {
  min-height: 620px;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 80px;
  padding: 110px 0 90px;
}


.support-intro-content {
  max-width: 570px;
}


.support-overline {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 22px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #5fc7ff;
}


.support-overline::before {
  content: "";
  width: 28px;
  height: 1px;
  background: #5fc7ff;
}


.support-intro-content h2 {
  margin: 0;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 700;
}


.support-intro-content h2 span {
  display: block;
  color: #5fc7ff;
}


.support-intro-content p {
  max-width: 520px;
  margin: 30px 0 0;

  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
}


/* =========================================================
   SUPPORT BUTTONS
========================================================= */

.support-intro-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 38px;
}


.support-primary-btn,
.support-secondary-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 0 22px;

  border-radius: 8px;
  text-decoration: none;

  font-size: 13px;
  font-weight: 700;

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease,
    color .35s ease;
}


.support-primary-btn {
  color: #06213e;
  background: #ffffff;
}


.support-primary-btn:hover {
  transform: translateY(-3px);
  background: #5fc7ff;
}


.support-secondary-btn {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}


.support-secondary-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(95, 199, 255, 0.55);
  background: rgba(95, 199, 255, 0.08);
}


/* =========================================================
   SUPPORT VISUAL
========================================================= */

.support-intro-visual {
  position: relative;
  min-height: 460px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.support-image-frame {
  position: relative;

  width: min(560px, 100%);
  height: 400px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .08),
      rgba(255, 255, 255, .025));

  overflow: hidden;
}


.support-image-frame::before {
  content: "";

  position: absolute;
  inset: 20px;

  border: 1px solid rgba(95, 199, 255, 0.12);
  border-radius: 18px;
}


.support-image-glow {
  position: absolute;

  width: 280px;
  height: 280px;

  border-radius: 50%;

  background: rgba(95, 199, 255, 0.14);

  filter: blur(55px);
}


.support-image-frame img {
  position: relative;
  z-index: 3;

  width: 82%;
  max-width: 470px;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 28px 35px rgba(0, 0, 0, .28));

  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s ease;
}


.support-image-frame:hover img {
  transform: translateY(-8px) scale(1.025);

  filter:
    drop-shadow(0 35px 42px rgba(0, 0, 0, .35));
}


/* image label */

.support-image-label {
  position: absolute;
  z-index: 5;

  left: 24px;
  bottom: 24px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 16px;

  border-radius: 10px;

  background: rgba(7, 29, 57, 0.88);
  border: 1px solid rgba(255, 255, 255, .1);

  backdrop-filter: blur(12px);
}


.support-status-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #5fc7ff;

  box-shadow:
    0 0 0 5px rgba(95, 199, 255, .1),
    0 0 16px rgba(95, 199, 255, .5);
}


.support-image-label div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}


.support-image-label strong {
  font-size: 12px;
  font-weight: 700;
}


.support-image-label small {
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
}


/* =========================================================
   SECTION HEADING
========================================================= */

.support-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;

  margin-bottom: 40px;
}


.support-section-heading>span,
.support-faq-heading>span {
  display: block;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;

  color: #5fc7ff;
}


.support-section-heading h3 {
  margin: 10px 0 0;

  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
  font-weight: 600;
}


.support-section-heading h3 strong {
  color: #5fc7ff;
  font-weight: 600;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.support-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}


.support-service-card {
  position: relative;

  min-height: 285px;

  padding: 30px;

  border-radius: 14px;

  background: #ffffff;
  color: #0c2343;

  overflow: hidden;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .4s ease;
}


.support-service-card::after {
  content: "";

  position: absolute;

  right: -40px;
  bottom: -50px;

  width: 140px;
  height: 140px;

  border-radius: 50%;

  background: rgba(7, 139, 208, .06);

  transition: transform .5s ease;
}


.support-service-card:hover {
  transform: translateY(-7px);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, .18);
}


.support-service-card:hover::after {
  transform: scale(1.5);
}


.support-service-icon {
  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: #078bd0;
  background: #edf8ff;

  font-size: 17px;
}


.support-service-number {
  position: absolute;

  top: 27px;
  right: 28px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;

  color: rgba(12, 35, 67, .28);
}


.support-service-card h4 {
  margin: 28px 0 10px;

  font-size: 21px;
  line-height: 1.2;

  letter-spacing: -.025em;
}


.support-service-card p {
  position: relative;
  z-index: 2;

  margin: 0;

  font-size: 13px;
  line-height: 1.75;

  color: rgba(12, 35, 67, .62);
}


.support-service-card a {
  position: relative;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 22px;

  color: #078bd0;

  text-decoration: none;

  font-size: 12px;
  font-weight: 800;
}


.support-service-card a i {
  font-size: 10px;

  transition:
    transform .3s ease;
}


.support-service-card:hover a i {
  transform: translateX(4px);
}


/* =========================================================
   DARK SERVICE CARD
========================================================= */

.support-service-card-dark {
  background: #075298;
  color: #ffffff;
}


.support-service-card-dark .support-service-icon {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}


.support-service-card-dark .support-service-number {
  color: rgba(255, 255, 255, .35);
}


.support-service-card-dark p {
  color: rgba(255, 255, 255, .68);
}


.support-service-card-dark a {
  color: #ffffff;
}


/* =========================================================
   FAQ SECTION
========================================================= */

.support-faq-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 90px;

  padding: 120px 0 100px;
}


.support-faq-heading {
  max-width: 400px;
}


.support-faq-heading h3 {
  margin: 12px 0 0;

  font-size: clamp(32px, 3.3vw, 48px);
  line-height: 1.05;
  letter-spacing: -.045em;
}


.support-faq-heading h3 strong {
  display: block;
  color: #5fc7ff;
  font-weight: 600;
}


.support-faq-heading p {
  margin: 22px 0 0;

  font-size: 14px;
  line-height: 1.8;

  color: rgba(255, 255, 255, .58);
}


/* FAQ */

.support-faq {
  border-top: 1px solid rgba(255, 255, 255, .16);
}


.support-faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}


.support-faq-question {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 24px 0;

  border: 0;
  outline: none;

  background: transparent;
  color: #ffffff;

  cursor: pointer;

  text-align: left;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  transition: color .3s ease;
}


.support-faq-question:hover {
  color: #5fc7ff;
}


.support-faq-question i {
  flex: 0 0 auto;

  width: 28px;
  height: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .2);

  font-size: 10px;

  transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease;
}


.support-faq-answer {
  display: grid;
  grid-template-rows: 0fr;

  transition:
    grid-template-rows .4s cubic-bezier(.22, 1, .36, 1);
}


.support-faq-answer p {
  min-height: 0;
  overflow: hidden;

  margin: 0;

  font-size: 13px;
  line-height: 1.8;

  color: rgba(255, 255, 255, .58);

  transition:
    padding .4s ease;
}


.support-faq-item.active .support-faq-answer {
  grid-template-rows: 1fr;
}


.support-faq-item.active .support-faq-answer p {
  padding: 0 50px 24px 0;
}


.support-faq-item.active .support-faq-question {
  color: #5fc7ff;
}


.support-faq-item.active .support-faq-question i {
  transform: rotate(45deg);

  background: rgba(95, 199, 255, .1);

  border-color: rgba(95, 199, 255, .4);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.support-bottom-cta {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;

  padding: 45px 48px;

  border-radius: 18px;

  background:
    linear-gradient(110deg,
      #075298,
      #078bd0);

  overflow: hidden;
}


.support-bottom-cta::before {
  content: "";

  position: absolute;

  top: -120px;
  right: 15%;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background: rgba(255, 255, 255, .08);

  filter: blur(10px);
}


.support-cta-content {
  position: relative;
  z-index: 2;
}


.support-cta-label {
  display: block;

  margin-bottom: 9px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;

  color: rgba(255, 255, 255, .65);
}


.support-cta-content h3 {
  margin: 0;

  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.04em;
}


.support-cta-content h3 span {
  color: #ffffff;
}


.support-cta-content p {
  margin: 14px 0 0;

  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}


.support-cta-button {
  position: relative;
  z-index: 3;

  min-width: 190px;
  height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 0 8px 0 20px;

  border-radius: 9px;

  background: #ffffff;
  color: #0c2343;

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;

  overflow: hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.support-cta-button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -40%;

  width: 25%;
  height: 100%;

  background: linear-gradient(90deg,
      transparent,
      rgba(7, 139, 208, .16),
      transparent);

  transform: skewX(-20deg);

  transition: left .7s ease;
}


.support-cta-button:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(0, 0, 0, .2);
}


.support-cta-button:hover::before {
  left: 120%;
}


.support-cta-icon {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;

  background: #0c2343;
  color: #ffffff;

  font-size: 15px;
}


/* =========================================================
   DESKTOP SPACING
========================================================= */

.support-help {
  padding-bottom: 20px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .support-container {
    width: min(100% - 32px, 1170px);
  }


  /* INTRO */

  .support-intro {
    min-height: auto;

    grid-template-columns: 1fr;

    gap: 45px;

    padding: 80px 0 70px;
  }


  .support-intro-content h2 {
    font-size: clamp(43px, 13vw, 62px);
  }


  .support-intro-content p {
    font-size: 14px;
  }


  .support-intro-actions {
    flex-direction: column;
    align-items: stretch;
  }


  .support-primary-btn,
  .support-secondary-btn {
    width: 100%;
  }


  /* VISUAL */

  .support-intro-visual {
    min-height: 330px;
  }


  .support-image-frame {
    height: 320px;
    border-radius: 18px;
  }


  .support-image-frame::before {
    inset: 14px;
    border-radius: 13px;
  }


  .support-image-frame img {
    width: 86%;
  }


  .support-image-label {
    left: 18px;
    bottom: 18px;
  }


  /* HEADING */

  .support-section-heading {
    display: block;
    margin-bottom: 28px;
  }


  .support-section-heading h3 {
    font-size: 31px;
  }


  /* SERVICES */

  .support-service-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }


  .support-service-card {
    min-height: auto;
    padding: 26px;
  }


  /* FAQ */

  .support-faq-section {
    grid-template-columns: 1fr;
    gap: 45px;

    padding: 85px 0 75px;
  }


  .support-faq-heading {
    max-width: 100%;
  }


  .support-faq-heading h3 {
    font-size: 34px;
  }


  .support-faq-question {
    padding: 20px 0;
    font-size: 13px;
  }


  .support-faq-item.active .support-faq-answer p {
    padding-right: 15px;
  }


  /* CTA */

  .support-bottom-cta {
    flex-direction: column;
    align-items: flex-start;

    padding: 32px 26px;

    gap: 28px;
  }


  .support-cta-button {
    width: 100%;
  }

}


/* =========================================================
   WARRANTY ASSURANCE
========================================================= */

.support-warranty {
  position: relative;

  margin-top: 70px;

  padding: 48px;

  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;

  background:
    linear-gradient(145deg,
      rgba(7, 82, 152, .72),
      rgba(7, 42, 82, .72));

  overflow: hidden;
}


.support-warranty::before {
  content: "";

  position: absolute;

  width: 380px;
  height: 380px;

  right: -150px;
  top: -180px;

  border-radius: 50%;

  background: rgba(95, 199, 255, .08);

  filter: blur(15px);

  pointer-events: none;
}


.support-warranty::after {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  left: -130px;
  bottom: -160px;

  border-radius: 50%;

  background: rgba(7, 139, 208, .08);

  filter: blur(15px);

  pointer-events: none;
}


/* =========================================================
   WARRANTY CONTENT
========================================================= */

.support-warranty-content {
  position: relative;
  z-index: 2;

  max-width: 650px;

  margin-bottom: 35px;
}


.support-warranty-label {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 17px;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;

  color: #5fc7ff;
}


.warranty-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #5fc7ff;

  box-shadow:
    0 0 10px rgba(95, 199, 255, .7);
}


.support-warranty-content h3 {
  margin: 0;

  font-size: clamp(36px, 4vw, 58px);
  line-height: .98;

  letter-spacing: -.05em;
}


.support-warranty-content h3 span {
  display: block;

  color: #5fc7ff;
}


.support-warranty-content p {
  max-width: 560px;

  margin: 20px 0 0;

  font-size: 13px;
  line-height: 1.75;

  color: rgba(255, 255, 255, .62);
}


/* =========================================================
   COMPACT WARRANTY
========================================================= */

.support-warranty {
  position: relative;

  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;

  gap: 45px;

  margin-top: 45px;

  padding: 28px 30px;

  border-radius: 16px;

  background:
    linear-gradient(135deg,
      rgba(7, 82, 152, .65),
      rgba(7, 48, 88, .55));

  border: 1px solid rgba(255, 255, 255, .1);

  overflow: hidden;
}


.support-warranty::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  right: -100px;
  top: -120px;

  border-radius: 50%;

  background: rgba(95, 199, 255, .07);

  filter: blur(15px);

  pointer-events: none;
}


/* =========================================================
   WARRANTY COVERAGE — FINAL DARK GLASS STYLE
   IMPORTANT: Put this AFTER all other support CSS
========================================================= */

.support-warranty-mini {
  position: relative !important;

  min-height: 220px !important;

  padding: 26px 28px !important;

  border-radius: 15px !important;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.025)) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 18px 40px rgba(0, 0, 0, .18) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  overflow: hidden !important;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    border-color .4s ease,
    box-shadow .4s ease !important;
}


/* Main blue glow */

.support-warranty-mini::before {
  content: "" !important;

  position: absolute !important;

  width: 280px !important;
  height: 280px !important;

  right: -120px !important;
  bottom: -150px !important;

  border-radius: 50% !important;

  background:
    radial-gradient(circle,
      rgba(95, 199, 255, .20) 0%,
      rgba(95, 199, 255, .08) 38%,
      transparent 72%) !important;

  filter: blur(10px) !important;

  pointer-events: none !important;
}


/* Small top glow */

.support-warranty-mini::after {
  content: "" !important;

  position: absolute !important;

  width: 220px !important;
  height: 100px !important;

  left: 20px !important;
  top: -70px !important;

  border-radius: 50% !important;

  background: rgba(95, 199, 255, .10) !important;

  filter: blur(30px) !important;

  pointer-events: none !important;
}


/* Hover */

.support-warranty-mini:hover {
  transform: translateY(-4px) !important;

  border-color: rgba(95, 199, 255, .32) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 22px 45px rgba(0, 0, 0, .22),
    0 0 35px rgba(95, 199, 255, .06) !important;
}


/* =========================================================
   HEADER
========================================================= */

.support-warranty-mini .warranty-mini-header {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;

  gap: 13px;
}


.support-warranty-mini .warranty-mini-icon {
  width: 42px !important;
  height: 42px !important;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px !important;

  background: rgba(95, 199, 255, .10) !important;

  border: 1px solid rgba(95, 199, 255, .20) !important;

  color: #5fc7ff !important;

  font-size: 15px;

  box-shadow:
    0 0 20px rgba(95, 199, 255, .07);
}


.support-warranty-mini .warranty-mini-header span {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .16em;

  color: #5fc7ff !important;
}


.support-warranty-mini .warranty-mini-header h4 {
  margin: 0;

  font-size: 21px;

  line-height: 1.1;

  letter-spacing: -.025em;

  color: #ffffff !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.support-warranty-mini .warranty-mini-description {
  position: relative;
  z-index: 5;

  max-width: 400px;

  margin: 18px 0 20px;

  font-size: 11px;

  line-height: 1.65;

  color: rgba(255, 255, 255, .58) !important;
}


/* =========================================================
   WARRANTY NUMBERS
========================================================= */

/* =========================================================
   PREMIUM WARRANTY NUMBERS
========================================================= */

.support-warranty-mini .warranty-mini-values {
  position: relative;
  z-index: 5;

  display: flex;
  align-items: center;

  gap: 26px;

  margin-top: 5px;
}


.support-warranty-mini .warranty-value {
  position: relative;

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 125px;
}


/* glowing background behind number */

.support-warranty-mini .warranty-value::before {
  content: "";

  position: absolute;

  left: -12px;
  top: 50%;

  width: 64px;
  height: 64px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(95, 199, 255, .16),
      rgba(95, 199, 255, .04) 55%,
      transparent 72%);

  transform: translateY(-50%);

  pointer-events: none;
}


/* BIG NUMBER */

.support-warranty-mini .warranty-value strong {
  position: relative;
  z-index: 2;

  font-size: 52px;

  line-height: .85;

  font-weight: 700;

  letter-spacing: -.07em;

  color: #ffffff !important;

  text-shadow:
    0 0 24px rgba(95, 199, 255, .16);
}


/* YEARS + COVERAGE */

.support-warranty-mini .warranty-value div {
  position: relative;
  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 3px;

  padding-top: 4px;
}


.support-warranty-mini .warranty-value span {
  font-size: 8px;

  font-weight: 800;

  letter-spacing: .16em;

  color: #5fc7ff !important;
}


.support-warranty-mini .warranty-value small {
  font-size: 9px;

  line-height: 1.2;

  color: rgba(255, 255, 255, .55) !important;
}


/* DIVIDER */

.support-warranty-mini .warranty-divider {
  width: 1px;

  height: 45px;

  background:
    linear-gradient(to bottom,
      transparent,
      rgba(95, 199, 255, .35),
      transparent) !important;
}

@media (max-width: 760px) {

  .support-warranty-mini .warranty-mini-values {
    gap: 18px;
  }

  .support-warranty-mini .warranty-value {
    min-width: 105px;
  }

  .support-warranty-mini .warranty-value strong {
    font-size: 43px;
  }

  .support-warranty-mini .warranty-value span {
    font-size: 7px;
  }

  .support-warranty-mini .warranty-value small {
    font-size: 8px;
  }

}

/* =========================================================
   WARRANTY SHIELD VISUAL
========================================================= */

.support-warranty-mini {
  position: relative !important;
}


/* Large visual area */

.warranty-shield-visual {
  position: absolute;

  z-index: 1;

  right: 35px;
  top: 50%;

  width: 185px;
  height: 185px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(-48%);

  pointer-events: none;
}


/* Soft glow */

.warranty-shield-glow {
  position: absolute;

  width: 150px;
  height: 150px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(95, 199, 255, .18) 0%,
      rgba(95, 199, 255, .08) 38%,
      transparent 72%);

  filter: blur(18px);
}


/* Shield ring */

.warranty-shield-ring {
  position: relative;

  width: 125px;
  height: 145px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(95, 199, 255, .18);

  background:
    linear-gradient(145deg,
      rgba(95, 199, 255, .07),
      rgba(255, 255, 255, .015));

  clip-path: polygon(50% 0%,
      91% 16%,
      86% 63%,
      72% 82%,
      50% 100%,
      28% 82%,
      14% 63%,
      9% 16%);

  box-shadow:
    0 0 35px rgba(95, 199, 255, .06);
}


/* Shield icon */

.warranty-shield-ring i {
  font-size: 55px;

  color: rgba(95, 199, 255, .20);

  filter:
    drop-shadow(0 0 18px rgba(95, 199, 255, .18));
}


/* subtle inner shield */

.warranty-shield-ring::after {
  content: "";

  position: absolute;

  width: 82px;
  height: 96px;

  border: 1px solid rgba(95, 199, 255, .08);

  clip-path: polygon(50% 0%,
      91% 16%,
      86% 63%,
      72% 82%,
      50% 100%,
      28% 82%,
      14% 63%,
      9% 16%);
}


/* Keep the real content above the shield */

.support-warranty-mini .warranty-mini-header,
.support-warranty-mini .warranty-mini-description,
.support-warranty-mini .warranty-mini-values,
.support-warranty-mini .warranty-mini-footer {
  position: relative;
  z-index: 5;
}

@media (max-width: 760px) {

  .warranty-shield-visual {
    right: -5px;
    top: 48%;

    width: 120px;
    height: 120px;

    opacity: .65;
  }

  .warranty-shield-ring {
    width: 82px;
    height: 98px;
  }

  .warranty-shield-ring i {
    font-size: 35px;
  }

  .warranty-shield-ring::after {
    width: 54px;
    height: 65px;
  }

  .warranty-shield-glow {
    width: 100px;
    height: 100px;
  }

}

/* =========================================================
   BOTTOM WARRANTY LINE
========================================================= */

.support-warranty-mini .warranty-mini-footer {
  position: absolute;

  z-index: 5;

  left: 28px;
  right: 28px;
  bottom: 17px;

  display: flex;

  align-items: center;

  gap: 7px;

  padding-top: 10px;

  border-top: 1px solid rgba(255, 255, 255, .10) !important;
}


.support-warranty-mini .warranty-mini-footer i {
  color: #5fc7ff !important;

  font-size: 10px;
}


.support-warranty-mini .warranty-mini-footer span {
  font-size: 8px;

  font-weight: 700;

  color: rgba(255, 255, 255, .55) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .support-warranty-mini {
    min-height: 205px !important;

    padding: 23px 21px !important;
  }

  .support-warranty-mini .warranty-mini-header h4 {
    font-size: 19px;
  }

  .support-warranty-mini .warranty-mini-description {
    margin-top: 14px;
    font-size: 10px;
  }

  .support-warranty-mini .warranty-value strong {
    font-size: 30px;
  }

}


/* =========================================================
   WARRANTY + PRODUCT CARE
========================================================= */

.support-warranty-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-top: 42px;
}


/* =========================================================
   WARRANTY MINI
========================================================= */

.support-warranty-mini {
  position: relative;

  min-height: 220px;

  padding: 26px 28px;

  border-radius: 15px;

  background: #ffffff;

  color: #0c2343;

  overflow: hidden;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .4s ease;
}


.support-warranty-mini::after {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  right: -80px;
  bottom: -90px;

  border-radius: 50%;

  background: #eef8fd;

  pointer-events: none;
}


.support-warranty-mini:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 35px rgba(0, 0, 0, .15);
}


/* HEADER */

.warranty-mini-header {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;

  gap: 13px;
}


.warranty-mini-icon {
  width: 42px;
  height: 42px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: #edf8ff;

  color: #078bd0;

  font-size: 15px;
}


.warranty-mini-header span {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .16em;

  color: #078bd0;
}


.warranty-mini-header h4 {
  margin: 0;

  font-size: 21px;

  line-height: 1.1;

  letter-spacing: -.025em;
}


/* DESCRIPTION */

.warranty-mini-description {
  position: relative;
  z-index: 2;

  max-width: 400px;

  margin: 18px 0 20px;

  font-size: 11px;

  line-height: 1.65;

  color: #71839a;
}


/* WARRANTY VALUES */

.warranty-mini-values {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;

  gap: 20px;
}


.warranty-value {
  display: flex;
  align-items: center;

  gap: 8px;
}


.warranty-value strong {
  font-size: 34px;

  line-height: 1;

  letter-spacing: -.05em;

  color: #0c2343;
}


.warranty-value div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.warranty-value span {
  font-size: 7px;

  font-weight: 800;

  letter-spacing: .12em;

  color: #078bd0;
}


.warranty-value small {
  font-size: 9px;

  color: #71839a;
}


.warranty-divider {
  width: 1px;
  height: 35px;

  background: #dce7ef;
}


/* FOOTER */

.warranty-mini-footer {
  position: absolute;

  z-index: 3;

  left: 28px;
  right: 28px;
  bottom: 17px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding-top: 10px;

  border-top: 1px solid #edf1f5;
}


.warranty-mini-footer i {
  color: #078bd0;

  font-size: 10px;
}


.warranty-mini-footer span {
  font-size: 8px;

  font-weight: 700;

  color: #61748a;
}


/* =========================================================
   PRODUCT CARE
========================================================= */

.support-product-care {
  position: relative;

  min-height: 220px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 26px 28px;

  border-radius: 15px;

  background:
    linear-gradient(135deg,
      #075298,
      #086fae);

  color: #ffffff;

  overflow: hidden;

  transition:
    transform .4s cubic-bezier(.22, 1, .36, 1),
    box-shadow .4s ease;
}


.support-product-care::before {
  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  right: -100px;
  top: -120px;

  border-radius: 50%;

  background: rgba(255, 255, 255, .07);
}


.support-product-care::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  left: -80px;
  bottom: -100px;

  border-radius: 50%;

  background: rgba(95, 199, 255, .08);
}


.support-product-care:hover {
  transform: translateY(-4px);

  box-shadow:
    0 18px 35px rgba(0, 0, 0, .18);
}


/* CONTENT */

.product-care-content {
  position: relative;
  z-index: 3;

  max-width: 340px;
}


.product-care-label {
  display: block;

  margin-bottom: 9px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .17em;

  color: #9bdfff;
}


.product-care-content h4 {
  margin: 0;

  font-size: 24px;

  line-height: 1.05;

  letter-spacing: -.04em;
}


.product-care-content h4 strong {
  color: #9bdfff;

  font-weight: 600;
}


.product-care-content p {
  margin: 12px 0 16px;

  font-size: 10px;

  line-height: 1.65;

  color: rgba(255, 255, 255, .63);
}


/* CARE LIST */

.product-care-list {
  display: flex;
  flex-direction: column;

  gap: 7px;
}


.product-care-list div {
  display: flex;
  align-items: center;

  gap: 8px;
}


.product-care-list i {
  width: 19px;
  height: 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 5px;

  background: rgba(255, 255, 255, .1);

  color: #9bdfff;

  font-size: 8px;
}


.product-care-list span {
  font-size: 9px;

  color: rgba(255, 255, 255, .72);
}


/* =========================================================
   CARE VISUAL
========================================================= */

.product-care-visual {
  position: relative;
  z-index: 3;

  flex: 0 0 125px;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 8px;
}


.care-ring {
  width: 92px;
  height: 92px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border: 1px solid rgba(155, 223, 255, .3);

  background:
    radial-gradient(circle,
      rgba(95, 199, 255, .18),
      rgba(255, 255, 255, .02) 68%);

  box-shadow:
    inset 0 0 25px rgba(95, 199, 255, .08);
}


.care-ring-inner {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, .1);

  border: 1px solid rgba(255, 255, 255, .14);

  color: #9bdfff;

  font-size: 19px;
}


.product-care-visual>span {
  font-size: 7px;

  font-weight: 800;

  letter-spacing: .14em;

  color: rgba(255, 255, 255, .5);
}

@media (max-width: 760px) {

  .support-warranty-row {
    grid-template-columns: 1fr;

    gap: 12px;

    margin-top: 32px;
  }


  .support-warranty-mini,
  .support-product-care {
    min-height: 205px;

    padding: 23px 21px;
  }


  .warranty-mini-header h4 {
    font-size: 19px;
  }


  .warranty-mini-description {
    margin-top: 14px;

    font-size: 10px;
  }


  .warranty-value strong {
    font-size: 30px;
  }


  .support-product-care {
    align-items: flex-start;
  }


  .product-care-content {
    max-width: 70%;
  }


  .product-care-content h4 {
    font-size: 21px;
  }


  .product-care-visual {
    position: absolute;

    right: 18px;
    bottom: 22px;

    flex-basis: auto;
  }


  .care-ring {
    width: 75px;
    height: 75px;
  }


  .care-ring-inner {
    width: 46px;
    height: 46px;

    font-size: 15px;
  }

}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .support-section *,
  .support-section *::before,
  .support-section *::after {
    transition: none !important;
    animation: none !important;
  }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .support-section *,
  .support-section *::before,
  .support-section *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }

}

/* =========================================================
   CONTACT
   ========================================================= */
/* =========================================================
   CONTACT SECTION — WHITE VERSION
========================================================= */

.contact-section {
  position: relative;
  width: 100%;
  background: #ffffff;
  color: #0c2343;
  overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.contact-section::before {
  content: "";

  position: absolute;

  width: 620px;
  height: 620px;

  right: -300px;
  top: -300px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(7, 139, 208, 0.08),
      rgba(7, 139, 208, 0.025) 42%,
      transparent 70%);

  filter: blur(15px);

  pointer-events: none;
}


.contact-section::after {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  left: -300px;
  bottom: -320px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(7, 82, 152, 0.06),
      transparent 70%);

  filter: blur(20px);

  pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.contact-container {
  position: relative;

  z-index: 2;

  width: min(1170px, calc(100% - 48px));

  margin: 0 auto;

  padding: 115px 0 45px;
}


/* =========================================================
   CONTACT HEADER
========================================================= */

/* =========================================================
   CONTACT HEADER — CENTERED
========================================================= */

.contact-header {
  max-width: 780px;

  margin: 0 auto 65px;

  text-align: center;
}


.contact-overline {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 18px;
}


.contact-overline::before {
  content: "";

  width: 28px;
  height: 1px;

  background: #078bd0;
}


.contact-header h2 {
  margin: 0;

  color: #0c2343;

  font-size: clamp(58px, 7vw, 92px);

  line-height: .88;

  letter-spacing: -.065em;

  font-weight: 700;
}


.contact-header h2 span {
  color: #078bd0;
}


.contact-header p {
  max-width: 680px;

  margin: 28px auto 0;

  font-size: 14px;

  line-height: 1.8;

  color: #60748a;
}

/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-main {
  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 80px;

  align-items: start;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

/* =========================
   CONTACT INFO ALIGNMENT
========================= */

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-info-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  column-gap: 16px;
  align-items: start;
  /* IMPORTANT */
  padding: 22px 0;
  border-top: 1px solid #dce7ef;
}

.contact-info-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 0;
  /* align with title */

  border-radius: 9px;
  background: #edf8fd;
  border: 1px solid #d8edf8;

  color: #078bd0;
  font-size: 14px;
  flex-shrink: 0;
}

/* Text column */
.contact-info-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Small title */
.contact-info-content>span {
  display: block;
  margin-bottom: 5px;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
  color: #078bd0;
}

/* Main information */
.contact-info-content>a,
.contact-info-content>strong {
  display: block;

  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;

  color: #0c2343;
  text-decoration: none;
}

/* Description */
.contact-info-content>small {
  display: block;
  margin-top: 5px;

  font-size: 10px;
  line-height: 1.45;
  color: #6b7f92;
}


/* =========================
   FOLLOW US — INLINE STYLE
========================= */



.contact-follow-content {
  display: flex;
  align-items: left;
}

.contact-follow-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-follow-row>span {
  display: block;
  margin: 0;

  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .14em;
  color: #078bd0;
}

.contact-social-links {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

/* =========================
   SOCIAL ICON ORIGINAL COLORS
========================= */

.contact-social-links a {
  width: 27px;
  height: 27px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #f4f8fb;
  border: 1px solid #dce8ef;

  text-decoration: none;
  font-size: 11px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* Facebook */
.contact-social-links a:nth-child(1) {
  color: #1877F2;
}

/* TikTok */
.contact-social-links a:nth-child(2) {
  color: #000000;
}

/* Telegram */
.contact-social-links a:nth-child(3) {
  color: #229ED9;
}

/* Hover */
.contact-social-links a:hover {
  transform: translateY(-2px);
  background: #ffffff;
}

.contact-social-links a:nth-child(1):hover {
  box-shadow: 0 5px 14px rgba(24, 119, 242, .20);
}

.contact-social-links a:nth-child(2):hover {
  box-shadow: 0 5px 14px rgba(0, 0, 0, .15);
}

.contact-social-links a:nth-child(3):hover {
  box-shadow: 0 5px 14px rgba(34, 158, 217, .20);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {

  .contact-info-item {
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    padding: 20px 0;
  }

  .contact-info-icon {
    width: 38px;
    height: 38px;
  }

  .contact-social-link {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   FORM WRAPPER
========================================================= */

.contact-form-wrapper {
  position: relative;

  padding: 34px;

  border-radius: 18px;

  background:
    linear-gradient(145deg,
      #f9fcfe,
      #f1f7fb);

  border: 1px solid #e0eaf1;

  box-shadow:
    0 22px 50px rgba(12, 35, 67, 0.08);

  overflow: hidden;
}


.contact-form-wrapper::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  right: -110px;
  top: -110px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(7, 139, 208, 0.08),
      transparent 70%);

  pointer-events: none;
}


/* =========================================================
   FORM HEADER
========================================================= */

.contact-form-header {
  position: relative;

  z-index: 2;

  margin-bottom: 28px;
}


.contact-form-header span {
  display: block;

  margin-bottom: 8px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.18em;

  color: #078bd0;
}


.contact-form-header h3 {
  margin: 0;

  color: #0c2343;

  font-size: 28px;

  line-height: 1.1;

  letter-spacing: -0.035em;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  gap: 17px;
}


.contact-form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}


.contact-field {
  display: flex;

  flex-direction: column;

  gap: 7px;
}


.contact-field label {
  font-size: 9px;

  font-weight: 700;

  color: #526a82;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;

  box-sizing: border-box;

  outline: none;

  border: 1px solid #dbe6ee;

  border-radius: 7px;

  background: #ffffff;

  color: #0c2343;

  font-family: inherit;

  font-size: 12px;

  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.contact-field input,
.contact-field select {
  height: 47px;

  padding: 0 14px;
}


.contact-field textarea {
  min-height: 105px;

  padding: 13px 14px;

  resize: vertical;
}


.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #9aabb9;
}


.contact-field select {
  appearance: none;

  -webkit-appearance: none;

  background-image:
    linear-gradient(45deg,
      transparent 50%,
      #078bd0 50%),
    linear-gradient(135deg,
      #078bd0 50%,
      transparent 50%);

  background-position:
    calc(100% - 17px) 20px,
    calc(100% - 12px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}


.contact-field select option {
  color: #0c2343;

  background: #ffffff;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(7, 139, 208, 0.5);

  background: #ffffff;

  box-shadow:
    0 0 0 3px rgba(7, 139, 208, 0.07);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
  position: relative;

  width: 100%;

  height: 55px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding: 0 8px 0 20px;

  margin-top: 3px;

  border: 0;

  border-radius: 8px;

  background: #0c2343;

  color: #ffffff;

  cursor: pointer;

  font-family: inherit;

  font-size: 12px;

  font-weight: 800;

  overflow: hidden;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}


.contact-submit::before {
  content: "";

  position: absolute;

  top: 0;
  left: -40%;

  width: 25%;
  height: 100%;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(95, 199, 255, 0.18),
      transparent);

  transform: skewX(-20deg);

  transition: left 0.7s ease;
}


.contact-submit:hover {
  transform: translateY(-3px);

  background: #078bd0;

  box-shadow:
    0 15px 30px rgba(12, 35, 67, 0.16);
}


.contact-submit:hover::before {
  left: 120%;
}


.contact-submit>span:first-child {
  position: relative;

  z-index: 2;
}


.contact-submit-icon {
  position: relative;

  z-index: 2;

  width: 39px;
  height: 39px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  background: #078bd0;

  color: #ffffff;

  font-size: 11px;
}


.contact-submit:hover .contact-submit-icon {
  background: #0c2343;
}


/* =========================================================
   FORM NOTE
========================================================= */

.contact-form-note {
  margin: -3px 0 0;

  font-size: 8px;

  line-height: 1.5;

  color: #98a8b6;
}



/* =========================================================
   FOLLOW US
========================================================= */

.contact-social-item {
  align-items: center;
}


.contact-social-links {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 3px;
}


.contact-social-link {
  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  background: #edf8fd;

  border: 1px solid #d9eef8;

  color: #078bd0;

  text-decoration: none;

  font-size: 13px;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease,
    border-color .3s ease;
}


.contact-social-link:hover {
  transform: translateY(-3px);

  background: #078bd0;

  border-color: #078bd0;

  color: #ffffff;

  box-shadow:
    0 8px 18px rgba(7, 139, 208, .18);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .contact-container {
    width: min(100% - 32px, 1170px);

    padding: 85px 0 30px;
  }


  .contact-header {
    margin-bottom: 45px;
  }


  .contact-header h2 {
    font-size: clamp(55px, 17vw, 76px);
  }


  .contact-header p {
    font-size: 12px;

    line-height: 1.75;
  }


  .contact-main {
    grid-template-columns: 1fr;

    gap: 45px;
  }


  .contact-info-item {
    padding: 19px 0;
  }


  .contact-form-wrapper {
    padding: 23px 19px;

    border-radius: 14px;
  }


  .contact-form-row {
    grid-template-columns: 1fr;

    gap: 17px;
  }


  .contact-form-header h3 {
    font-size: 25px;
  }


  .contact-bottom {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-top: 65px;

    padding-top: 25px;
  }


  .contact-home-button {
    justify-content: space-between;

    width: 100%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .contact-section *,
  .contact-section *::before,
  .contact-section *::after {
    transition: none !important;

    animation: none !important;
  }

}


/* =========================================================
   FOOTER
   ========================================================= */
/* =========================================================
   SIMPLE FOOTER
   ========================================================= */

.site-footer {
  padding: 32px 20px;

  text-align: center;

  background: #07182f;

  border-top:
    1px solid rgba(108, 197, 239, 0.15);
}

.footer-tagline {
  color: #8fc8e8;

  font-size: 14px;

  font-weight: 600;

  margin-bottom: 8px;
}

.footer-copyright {
  color: #71869c;

  font-size: 14px;

  line-height: 1.6;
}


/* Mobile */
@media (max-width: 760px) {

  .site-footer {
    padding: 28px 15px;
  }

  .footer-tagline {
    font-size: 12px;
  }

  .footer-copyright {
    font-size: 9px;
  }

}


/* =========================================================
   NORMAL HORIZONTAL IMAGE SLIDER
   ========================================================= */

.airflow-display {
  position: relative;
  overflow: hidden;
}

.aircon-slider {
  display: flex;

  width: 100%;
  height: 100%;

  transform: translateX(0);

  transition:
    transform 0.8s cubic-bezier(.65, 0, .35, 1);
}

.aircon-slide {
  flex: 0 0 100%;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;
}

.aircon-slide img {
  width: 82%;
  height: 82%;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
}

.quiet-badge {
  position: absolute;
  z-index: 10;
}


/* Keep Quiet button above slider */

.quiet-badge {
  position: absolute;

  z-index: 10;
}


/* Quiet badge stays above slideshow */

.quiet-badge {
  position: absolute;

  z-index: 20;
}


/* Keep quiet badge above images */

.quiet-badge {
  position: absolute;

  z-index: 10;
}

/* =========================================================
   MOBILE — ONLY ONE BREAKPOINT: 760px
   ========================================================= */

@media (max-width: 760px) {

  html {
    scroll-padding-top: 66px;
  }

  body {
    overflow-x: hidden;
  }


  /* HEADER */

  .site-header {
    height: 66px;
  }

  .nav-wrap {
    width: calc(100% - 28px);

    height: 66px;
  }


  /* BRAND */

  .brand {
    gap: 9px;

    font-size: 18px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;

    border-radius: 11px;
  }

  .brand-name {
    font-size: 18px;
  }


  /* MOBILE BUTTON */

  .mobile-toggle {
    display: flex;

    width: 42px;
    height: 42px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
      1px solid rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    background:
      rgba(255, 255, 255, 0.08);
  }

  .mobile-toggle span {
    width: 18px;
    height: 2px;

    border-radius: 10px;

    background: white;
  }


  /* MOBILE NAV */

  .main-nav {
    position: absolute;

    top: 76px;

    left: 14px;
    right: 14px;

    width: auto;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    padding: 10px;

    border-radius: 18px;

    background:
      rgba(8, 28, 55, 0.98);

    border:
      1px solid rgba(103, 194, 239, 0.22);

    box-shadow:
      0 25px 60px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(20px);
  }

  .main-nav.open {
    display: flex;
  }


  /* MOBILE LINKS */

  .nav-link {
    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    padding:
      12px 15px;

    border-radius: 12px;

    font-size: 13px;
  }

  .nav-link.active {
    background:
      linear-gradient(135deg,
        rgba(24, 169, 232, 0.25),
        rgba(18, 74, 143, 0.55));
  }


  /* HERO */

  .hero {
    min-height: auto;

    padding:
      105px 0 55px;
  }

  .hero-inner {
    width: calc(100% - 28px);

    display: flex;

    flex-direction: column;

    gap: 38px;
  }

  .hero-copy {
    width: 100%;

    text-align: center;
  }


  /* EYEBROW */

  .eyebrow {
    padding:
      7px 12px;

    font-size: 9px;

    white-space: nowrap;
  }


  /* TITLE */

  h1 {
    margin-top: 21px;

    font-size:
      clamp(42px,
        12vw,
        58px);

    line-height: 0.98;

    letter-spacing: -2.8px;
  }


  /* DESCRIPTION */

  .hero-description {
    width: 100%;

    margin:
      22px auto 0;

    font-size: 13px;

    line-height: 1.75;
  }


  /* BUTTONS */

  .hero-actions {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 25px;
  }

  .hero-actions .btn {
    width: 100%;
  }


  /* FEATURES */

  .feature-row {
    width: 100%;

    max-width: none;

    grid-template-columns:
      repeat(3, 1fr);

    gap: 7px;

    margin-top: 28px;
  }

  .feature-card {
    min-height: 84px;

    padding:
      11px 8px;

    border-radius: 12px;
  }

  .feature-card strong {
    font-size: 10px;
  }

  .feature-card small {
    font-size: 7px;
  }


  /* PRODUCT PREVIEW */

  .product-preview {
    width: 100%;

    margin:
      18px auto 0;

    padding: 9px;

    border-radius: 18px;
  }

  .product-frame {
    min-height: 175px;

    border-radius: 14px;
  }

  .ac-unit {
    width: 78%;

    height: 68px;
  }


  /* SYSTEM PANEL */

  .system-panel {
    width: 100%;

    padding: 14px;

    border-radius: 21px;
  }

  .panel-top {
    font-size: 9px;
  }

  .panel-top span {
    padding:
      6px 9px;

    font-size: 7px;
  }

  .airflow-display {
    height: 225px;

    margin-top: 12px;

    border-radius: 15px;
  }

  .airflow-rings {
    width: 155px;
    height: 155px;
  }

  .ring-2 {
    inset: 22px;
  }

  .ring-3 {
    inset: 44px;
  }

  .snowflake {
    font-size: 55px;
  }

  .quiet-badge {
    bottom: 11px;
    left: 11px;

    padding:
      8px 11px;

    font-size: 8px;
  }

  .system-features {
    gap: 7px;

    margin-top: 10px;
  }

  .system-features div {
    min-height: 55px;

    border-radius: 10px;
  }

  .system-features strong {
    font-size: 13px;
  }

  .system-features small {
    font-size: 7px;
  }


  /* CONTENT */

  .content-section {
    min-height: auto;

    padding:
      75px 20px;
  }

  .section-heading h2 {
    margin-top: 17px;

    font-size:
      clamp(30px,
        8vw,
        42px);

    line-height: 1.05;

    letter-spacing: -1.5px;
  }

  .section-heading p {
    margin-top: 16px;

    font-size: 13px;

    line-height: 1.7;
  }


  /* PRODUCTS */

  .cards {
    width: 100%;

    margin:
      35px auto 0;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .content-card {
    min-height: 200px;

    padding: 24px;

    border-radius: 18px;
  }

  .content-card h3 {
    margin-top: 45px;

    font-size: 20px;
  }


  /* TECHNOLOGY */

  .technology-grid {
    width: 100%;

    margin:
      35px auto 0;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .technology-card {
    min-height: 170px;

    padding: 24px;

    border-radius: 18px;
  }

  .technology-card h3 {
    margin-top: 35px;
  }


  /* SUPPORT */

  .support-grid {
    width: 100%;

    margin:
      35px auto 0;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .support-card {
    padding: 24px;

    border-radius: 18px;
  }


  /* CONTACT */

  .contact-section {
    min-height: 60vh;
  }

  .contact-actions {
    flex-direction: column;

    gap: 10px;
  }

  .contact-actions .btn {
    width: 100%;
  }


  /* FLOATING BUTTON */

  .telegram-float {
    right: 15px;
    bottom: 15px;

    width: 50px;
    height: 50px;

    font-size: 20px;
  }

}



/* =========================================================
   SCROLL REVEAL ANIMATION
   ========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1);

  will-change: opacity, transform;
}


.reveal.active {
  opacity: 1;

  transform: translateY(0);
}


/* From left */

.reveal-left {
  opacity: 0;

  transform: translateX(-45px);

  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
}


.reveal-left.active {
  opacity: 1;

  transform: translateX(0);
}


/* From right */

.reveal-right {
  opacity: 0;

  transform: translateX(45px);

  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
}


.reveal-right.active {
  opacity: 1;

  transform: translateX(0);
}


/* Small delay options */

.reveal-delay-1 {
  transition-delay: 0.1s;
}

.reveal-delay-2 {
  transition-delay: 0.2s;
}

.reveal-delay-3 {
  transition-delay: 0.3s;
}

.reveal-delay-4 {
  transition-delay: 0.4s;
}


/* =========================================================
   RESPECT REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-left,
  .reveal-right {

    opacity: 1;

    transform: none;

    transition: none;
  }

}


/* =========================================
   PRODUCT MODAL
========================================= */

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 20, 40, 0.78);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.product-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-modal-dialog {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 20px;
  padding: 38px 28px 28px;
  box-shadow: 0 25px 80px rgba(0, 20, 50, 0.28);
  transform: translateY(15px);
  transition: transform 0.25s ease;
}

.product-modal.is-open .product-modal-dialog {
  transform: translateY(0);
}

.product-modal-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid #d8e5f2;
  border-radius: 50%;
  background: #fff;
  color: #0c2343;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.product-modal-close:hover {
  background: #0788e8;
  color: #fff;
}

/* TOP LAYOUT */

.product-modal-main {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 30px;
  row-gap: 28px;
}

.product-visual-column,
.product-info-column {
  min-width: 0;
}

/* SINGLE PRODUCT IMAGE */

.single-product-image {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 32px 20px;
  border: 1px solid #d5eaff;
  border-radius: 14px;
  background: linear-gradient(145deg, #e9f6ff, #f7fbff);
}

.product-stage-label {
  position: absolute;
  top: 19px;
  left: 20px;
  z-index: 1;
  color: #0788e8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.single-product-image img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 16px 16px rgba(31, 91, 140, 0.12));
  transition: opacity 0.2s ease;
}

/* PRODUCT INFORMATION */

.product-eyebrow-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 5px 45px 12px 0;
}

#productCategory {
  color: #0788e8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.product-series-badge {
  padding: 5px 10px;
  color: #0879d1;
  background: #eff8ff;
  border: 1px solid #d5ebff;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}

#productModalTitle {
  margin: 0 0 13px;
  color: #0c2343;
  font-size: clamp(25px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -1px;
}

#productDescription {
  margin: 0 0 19px;
  color: #60758f;
  font-size: 13px;
  line-height: 1.8;
}

.product-section-heading {
  margin: 18px 0 10px;
  color: #0c2343;
  font-size: 16px;
  font-weight: 800;
}

/* FEATURE TILES */

.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.product-feature-card {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 5px;
  text-align: center;
  border: 1px solid #d8e7f8;
  border-radius: 10px;
  background: #fff;
}

.product-feature-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf6ff;
  color: #0788e8;
  font-size: 16px;
  font-weight: 800;
}

.product-feature-card strong {
  color: #0c2343;
  font-size: 10px;
  line-height: 1.3;
}

.product-feature-card small {
  color: #6f8299;
  font-size: 9px;
  line-height: 1.3;
}

/* CAPACITY BUTTONS */

.product-capacities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-capacity-button {
  min-width: 76px;
  padding: 8px 14px;
  border: 1px solid #0788e8;
  border-radius: 24px;
  background: #fff;
  color: #0879d1;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.product-capacity-button:hover,
.product-capacity-button.is-selected {
  background: #087fd5;
  color: #fff;
}

.product-capacity-button:focus-visible,
.product-modal button:focus-visible,
.product-catalog-button:focus-visible {
  outline: 3px solid #91ccff;
  outline-offset: 3px;
}

/* CATALOG BUTTON */

.product-catalog-button {
  width: 100%;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 9px;
  background: linear-gradient(100deg, #087bd5, #079fe8);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 136, 220, 0.14);
  transition: filter 0.2s, transform 0.2s;
}

.product-catalog-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.product-disclaimer {
  margin: 10px 0 0;
  color: #8b9bb0;
  font-size: 10px;
}

/* FULL-WIDTH SPECIFICATIONS */

.product-spec-full {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  padding-top: 24px;
  border-top: 1px solid #dfe9f3;
}

.product-spec-heading,
.product-promo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 15px;
}

.product-spec-eyebrow {
  color: #0788e8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.4px;
}

.product-spec-heading h3,
.product-promo-heading h3 {
  margin: 5px 0 0;
  color: #0c2343;
  font-size: 21px;
  line-height: 1.3;
}

.product-spec-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e0eaf4;
  border-radius: 10px;
}

.product-spec-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}

.product-spec-table tr:not(:last-child) {
  border-bottom: 1px solid #e7eef6;
}

.product-spec-table td {
  width: 50%;
  padding: 13px 16px;
  vertical-align: top;
}

.product-spec-table td:first-child {
  background: #f6faff;
  color: #60758f;
  font-weight: 600;
}

.product-spec-table td:last-child {
  color: #17375c;
  font-weight: 700;
}

/* PROMOTIONAL GALLERY */

.product-promo-section {
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 24px;
  border-top: 1px solid #dfe9f3;
}

.product-promo-controls {
  display: flex;
  gap: 8px;
}

.product-promo-controls button {
  width: 35px;
  height: 35px;
  border: 1px solid #d8e7f8;
  border-radius: 50%;
  background: #fff;
  color: #087fd5;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.product-promo-controls button:hover {
  background: #eaf6ff;
}

.product-promo-viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
}


.product-promo-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 14px;
}

.product-promo-card {
  flex: 0 0 180px;
  aspect-ratio: 4 / 5;
  height: auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #dce9f5;
  border-radius: 10px;
  background: #f2f8ff;
  cursor: zoom-in;
}

.product-promo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

.product-promo-card:hover img {
  transform: scale(1.04);
}

/* Mobile */
@media (max-width: 760px) {
  .product-promo-card {
    flex-basis: 145px;
  }
}

/* IMAGE LIGHTBOX */

.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(3, 14, 30, 0.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0.2s;
}

.product-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-lightbox img {
  max-width: 95%;
  max-height: 88vh;
  object-fit: contain;
}

.product-lightbox-close {
  position: absolute;
  top: 20px;
  right: 25px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 29px;
  cursor: pointer;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .product-modal-dialog {
    padding: 48px 22px 24px;
  }

  .product-modal-main {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 22px;
  }

  .single-product-image {
    min-height: 300px;
  }

  .single-product-image img {
    height: 245px;
  }

  .product-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .product-modal {
    padding: 8px;
  }

  .product-modal-dialog {
    max-height: calc(100vh - 16px);
    padding: 48px 14px 20px;
    border-radius: 14px;
  }

  .product-modal-close {
    top: 10px;
    right: 10px;
  }

  .single-product-image {
    min-height: 250px;
    padding: 25px 12px;
  }

  .single-product-image img {
    height: 210px;
  }

  #productModalTitle {
    font-size: 27px;
    letter-spacing: -0.5px;
  }

  .product-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-feature-card {
    min-height: 92px;
  }

  .product-spec-heading h3,
  .product-promo-heading h3 {
    font-size: 18px;
  }

  .product-spec-table td {
    padding: 11px 10px;
    font-size: 11px;
  }

  .product-promo-card {
    flex-basis: 175px;
    height: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .product-modal,
  .product-modal-dialog,
  .product-lightbox,
  .single-product-image img,
  .product-promo-card img {
    transition: none;
  }

  .product-promo-viewport {
    scroll-behavior: auto;

  }
}




/* ===== Floating Customer Support ===== */
.support-widget {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 9999;
  font-family: inherit;
}

.support-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #229ED9;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(12, 91, 150, 0.28);
  transition: transform 0.25s ease, background 0.25s ease;
}

.support-toggle:hover {
  transform: translateY(-3px);
  background: #168AC5;
}

.support-chat-icon,
.support-x-icon {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.support-x-icon {
  opacity: 0;
  transform: rotate(-45deg);
}

.support-widget.is-open .support-chat-icon {
  opacity: 0;
  transform: rotate(45deg);
}

.support-widget.is-open .support-x-icon {
  opacity: 1;
  transform: rotate(0);
}

.support-pulse {
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(34, 158, 217, 0.35);
  border-radius: 50%;
  animation: supportPulse 2s infinite;
  pointer-events: none;
}

@keyframes supportPulse {
  0% {
    transform: scale(0.92);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.support-popup {
  position: absolute;
  right: 0;
  display: none;
  bottom: 76px;
  width: 320px;
  padding: 20px;
  border: 1px solid #e1eaf3;
  border-radius: 18px;
  background: #fff;
  color: #173a5e;
  box-shadow: 0 15px 45px rgba(16, 47, 80, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.support-widget.is-open .support-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  display: block;
}

.support-popup-header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.support-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e6f4ff;
  color: #168ac5;
  font-size: 20px;
}

.support-heading {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

.support-heading strong {
  font-size: 15px;
  font-weight: 700;
}

.support-heading span {
  color: #71849a;
  font-size: 12px;
}

.support-close {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: #7d8da0;
  font-size: 24px;
  cursor: pointer;
}

.support-description {
  margin: 18px 0;
  color: #5f7287;
  font-size: 13px;
  line-height: 1.7;
}

.support-telegram-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 12px;
  border-radius: 10px;
  background: #229ED9;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.support-telegram-link:hover {
  background: #168AC5;
}

.support-note {
  margin: 13px 0 0;
  color: #8b9bad;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 600px) {
  .support-widget {
    right: 16px;
    bottom: 18px;
  }

  .support-toggle {
    width: 54px;
    height: 54px;
    font-size: 23px;
  }

  .support-popup {
    width: min(320px, calc(100vw - 32px));
    box-sizing: border-box;
    bottom: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-pulse {
    animation: none;
  }

  .support-popup,
  .support-toggle {
    transition: none;
  }
}

/* Force customer support popup to stay hidden */
#supportWidget #supportPopup {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Show only when the widget is opened */
#supportWidget.is-open #supportPopup {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}