/* ==========================================================================
   HISENSE HiMove IX — Landing Page Styles
   Design tokens from Figma · BEM naming · Mobile-first responsive
   Breakpoints: 320 · 375 · 480 · 768 · 1024 · 1280 (max: 1360)
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   0. CSS CUSTOM PROPERTIES 
   -------------------------------------------------------------------------- */
/* ==========================================================================
   ISOLATION RESET — Prevents CMS styles from leaking in/out
   ========================================================================== */
#hs-himove-ix-mex {
  /* Reset ALL inherited styles from CMS */
  all: initial;

  /* Re-establish rendering context */
  display: block;
  box-sizing: border-box;
  direction: ltr;
  text-align: left;
  visibility: visible;
  unicode-bidi: normal;
  text-rendering: optimizeLegibility;

  /* ── Colors ── */
  --color-black:            #000000;
  --color-white:            #FFFFFF;
  --color-base-white:       #FAFAFA;

  --color-primary:          #00AAA6;
  --color-primary-900:      #005351;
  --color-primary-700:      #00D5D0;
  --color-primary-20:       #00D5D0;
  --color-accent:           #03D2CC;
  --color-accent-bright:    #00D3F3;
  --color-accent-vivid:     #08DFD8;

  --color-text-primary:     #FFFFFF;
  --color-text-secondary:   #D1D5DC;
  --color-text-muted:       #99A1AF;
  --color-text-dim:         #6A7282;

  --color-border-dark:      #1E2939;
  --color-border-teal:      #005351;
  --color-border-teal-mid:  #00A09B;
  --color-border-accent:    rgba(0, 160, 155, 0.3);
  --color-border-accent-50: rgba(0, 160, 155, 0.5);
  --color-border-white-30:  rgba(255, 255, 255, 0.3);

  --color-card-bg-start:    rgb(16, 24, 40);
  --color-card-bg-end:      rgb(0, 0, 0);
  --color-glass-start:      rgba(16, 78, 100, 0.4);
  --color-glass-end:        rgba(0, 0, 0, 0.3);
  --color-glass-teal-start: rgba(16, 78, 100, 0.3);
  --color-glass-teal-end:   rgba(0, 95, 120, 0.3);
  --color-icon-bg:          rgba(0, 211, 243, 0.1);

  /* ── Typography ── */
  --font-primary:   'Hisense Alfabet', sans-serif;
  --font-secondary: 'Hisense Alfabet', sans-serif;

  --fs-hero:     clamp(28px, 3.5cqw, 48px);
  --fs-h1-xl:    clamp(36px, 4.2cqw, 60px);
  --fs-h2:       clamp(28px, 3cqw, 48px);
  --fs-h3:       clamp(20px, 2cqw, 30px);
  --fs-h4:       clamp(18px, 1.4cqw, 24px);
  --fs-body:     clamp(14px, 1.1cqw, 20px);
  --fs-body-sm:  clamp(13px, 1cqw, 16px);
  --fs-caption:  clamp(12px, 0.9cqw, 14px);
  --fs-button:   clamp(14px, 1.1cqw, 18px);

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.625;

  /* ── Spacing ── */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  60px;
  --space-3xl:  72px;
  --space-4xl:  96px;

  --section-py:  clamp(40px, 5cqw, 60px);
  --section-px:  clamp(16px, 8cqw, 190px);

  /* ── Layout ── */
  --max-w:      1280px;
  --max-w-sm:   896px;

  /* ── Radii ── */
  --radius-sm:   12px;
  --radius-md:   14px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --transition: 0.25s ease;

  /* Base styles (merged from html + body + .site-wrapper) */
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  /* Layout: constrains entire LP to 1360px */
  max-width: 1360px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  container-type: inline-size;
  background-color: var(--color-black);

  /* Isolation: create new stacking context */
  isolation: isolate;
  z-index: 0;
}


/* --------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex *,
#hs-himove-ix-mex *::before,
#hs-himove-ix-mex *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Prevent CMS inherited styles from leaking into children */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

#hs-himove-ix-mex img{
  display: block;
  max-width: 100%;
  height: auto;
}

#hs-himove-ix-mex a{
  color: inherit;
  text-decoration: none;
}

#hs-himove-ix-mex button{
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

#hs-himove-ix-mex ul, #hs-himove-ix-mex ol{
  list-style: none;
}

/* Focus styles */
#hs-himove-ix-mex :focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   2. SHARED COMPONENTS
   -------------------------------------------------------------------------- */

/* ── Buttons ── */
#hs-himove-ix-mex .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-button);
  line-height: 28px;
  letter-spacing: -0.44px;
  text-align: center;
  border-radius: var(--radius-full);
  padding: 16px 32px;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}

#hs-himove-ix-mex .btn:hover{
  transform: translateY(-1px);
}

#hs-himove-ix-mex .btn:active{
  transform: translateY(0);
}

#hs-himove-ix-mex .btn--outline-white{
  border: 2px solid var(--color-border-white-30);
  color: var(--color-white);
  background: transparent;
}

#hs-himove-ix-mex .btn--outline-white:hover{
  border-color: var(--color-white);
  background: rgba(255, 255, 255, 0.05);
}

#hs-himove-ix-mex .btn--outline-white:active{
  background: rgba(255, 255, 255, 0.1);
}

#hs-himove-ix-mex .btn--outline-accent{
  border: 2px solid var(--color-border-accent-50);
  color: var(--color-accent);
  background: transparent;
}

#hs-himove-ix-mex .btn--outline-accent:hover{
  border-color: var(--color-accent);
  background: rgba(3, 210, 204, 0.08);
  box-shadow: 0 0 20px rgba(3, 210, 204, 0.15);
}

#hs-himove-ix-mex .btn--outline-accent:active{
  background: rgba(3, 210, 204, 0.15);
}

#hs-himove-ix-mex .btn--cta{
  border: 2px solid var(--color-border-teal-mid);
  color: var(--color-accent);
  background: transparent;
  padding: 18px 40px;
  font-size: var(--fs-button);
}

#hs-himove-ix-mex .btn--cta:hover{
  background: rgba(0, 160, 155, 0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 30px rgba(3, 210, 204, 0.2);
}

#hs-himove-ix-mex .btn--sm{
  padding: 12px 28px;
  font-size: 16px;
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: -0.31px;
  line-height: 24px;
}

#hs-himove-ix-mex .product__cta{
  width: 214px;
  text-align: center;
  box-sizing: border-box;
}

#hs-himove-ix-mex .btn__icon{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   3. HERO
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .hero{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#hs-himove-ix-mex .hero__top-bar{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px;
}

#hs-himove-ix-mex .hero__title{
  flex: 1;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(32px, 4cqw, 56px);
  line-height: 1.4;
  color: var(--color-white);
  letter-spacing: 0.39px;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

#hs-himove-ix-mex .hero__logo{
  flex-shrink: 0;
}

#hs-himove-ix-mex .hero__logo-img{
  width: clamp(140px, 16cqw, 272px);
  height: auto;
}

#hs-himove-ix-mex .hero__card{
  position: relative;
  margin: 0 40px;
  height: clamp(250px, 30cqw, 398px);
  border-radius: var(--radius-md);
  overflow: hidden;
}

#hs-himove-ix-mex .hero__card-bg{
  position: absolute;
  inset: 0;
}

#hs-himove-ix-mex .hero__card-bg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#hs-himove-ix-mex .hero__card-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-76deg, rgba(0, 0, 0, 0.77) 21.7%, rgba(102, 102, 102, 0) 44.1%),
    linear-gradient(81deg, rgba(0, 0, 0, 0.77) 3.6%, rgba(102, 102, 102, 0) 50.7%);
}

#hs-himove-ix-mex .hero__badge{
  position: absolute;
  bottom: 5%;
  left: 24%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px 36px;
  border-radius: var(--radius-full);
  background: rgba(0, 160, 155, 0.9);
  border: 2px solid var(--color-accent);
  white-space: nowrap;
}

#hs-himove-ix-mex .hero__badge-icon{
  width: 27px;
  height: 26px;
}

#hs-himove-ix-mex .hero__badge-text{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(18px, 1.8cqw, 25px);
  line-height: 1.58;
  letter-spacing: 1.08px;
  color: var(--color-white);
}


/* --------------------------------------------------------------------------
   5. PRODUCT SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .product{
  position: relative;
  background: var(--color-black);
  padding: 0 var(--section-px) var(--section-py);
}

#hs-himove-ix-mex .product__gradient-top{
  width: calc(100% + (2 * var(--section-px)));
  margin-inline: calc(-1 * var(--section-px));
  height: 64px;
  background: linear-gradient(180deg, rgba(16,78,100,0.2) 0%, transparent 100%);
}

#hs-himove-ix-mex .product__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

#hs-himove-ix-mex .product__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

#hs-himove-ix-mex .product__showcase{
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
}

#hs-himove-ix-mex .product__image{
  position: relative;
  flex-shrink: 0;
  width: clamp(200px, 30cqw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#hs-himove-ix-mex .product__image-glow{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 160, 155, 0.2);
  filter: blur(120px);
}

#hs-himove-ix-mex .product__image-photo{
  position: relative;
  z-index: 1;
  max-height: 500px;
  width: auto;
  object-fit: contain;
}

#hs-himove-ix-mex .product__badge{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-accent);
  background: rgba(0, 160, 155, 0.2);
  width: fit-content;
}

#hs-himove-ix-mex .product__badge-icon{
  width: 16px;
  height: 16px;
}

#hs-himove-ix-mex .product__badge-text{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-caption);
  line-height: 20px;
  color: var(--color-accent);
  letter-spacing: 0.55px;
}

#hs-himove-ix-mex .product__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(28px, 3.5cqw, 52px);
  line-height: 1.15;
  color: var(--color-white);
  letter-spacing: 0.26px;
  text-align: center;
}

#hs-himove-ix-mex .product__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .product__tagline{
  font-family: var(--font-primary);
  font-size: clamp(16px, 1.5cqw, 20px);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.45px;
  text-align: center;
}

#hs-himove-ix-mex .product__features{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

#hs-himove-ix-mex .product__features--left{
  align-items: flex-end;
}

#hs-himove-ix-mex .product__features--right{
  align-items: flex-start;
}

#hs-himove-ix-mex .feature-card{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 330px;
  max-width: 100%;
  height: 92px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 211, 243, 0.2);
  background: linear-gradient(162.38deg, var(--color-card-bg-start) 0%, var(--color-black) 100%);
  transition: border-color var(--transition), transform var(--transition);
  box-sizing: border-box;
}

#hs-himove-ix-mex .feature-card:hover{
  border-color: rgba(0, 211, 243, 0.4);
  transform: translateY(-2px);
}

#hs-himove-ix-mex .feature-card__icon{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 1px solid var(--color-base-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
}

#hs-himove-ix-mex .feature-card__content{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#hs-himove-ix-mex .feature-card__title{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(13px, 1.2cqw, 17px);
  line-height: 1.4;
  color: var(--color-primary);
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#hs-himove-ix-mex .feature-card__subtitle{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.43;
  color: var(--color-text-muted);
  letter-spacing: -0.15px;
}


/* --------------------------------------------------------------------------
   6. TECHNOLOGY SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .technology{
  background: var(--color-black);
  padding: var(--section-py) var(--section-px);
}

#hs-himove-ix-mex .technology__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

#hs-himove-ix-mex .technology__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 768px;
}

#hs-himove-ix-mex .technology__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .technology__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .technology__subtitle{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.45px;
}

#hs-himove-ix-mex .technology__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
  width: 100%;
}

#hs-himove-ix-mex .tech-card{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 33px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-dark);
  background: linear-gradient(149.14deg, var(--color-card-bg-start) 0%, var(--color-black) 100%);
  transition: border-color var(--transition), transform var(--transition);
}

#hs-himove-ix-mex .tech-card:hover{
  border-color: var(--color-border-teal);
  transform: translateY(-4px);
}

#hs-himove-ix-mex .tech-card__icon{
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

#hs-himove-ix-mex .tech-card__icon--highlight{
  background: rgba(0, 213, 208, 0.2);
  border-radius: 17px;
  overflow: hidden;
}

#hs-himove-ix-mex .tech-card__video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
}

#hs-himove-ix-mex .tech-card__title{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(16px, 1.4cqw, 20px);
  line-height: 1.4;
  color: var(--color-white);
  letter-spacing: -0.45px;
}

#hs-himove-ix-mex .tech-card__text{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.625;
  color: var(--color-text-muted);
  letter-spacing: -0.31px;
  max-width: 338px;
}

/* Showcase banner */
#hs-himove-ix-mex .technology__showcase{
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 1280 / 500;
}

#hs-himove-ix-mex .technology__showcase-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hs-himove-ix-mex .technology__showcase-overlay{
  position: absolute;
  inset: 0;
}

#hs-himove-ix-mex .technology__showcase-content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-xl);
  backdrop-filter: blur(2px);
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 767px) {
  #hs-himove-ix-mex .technology__showcase{
    aspect-ratio: auto;
    min-height: 300px;
  }

  #hs-himove-ix-mex .technology__showcase-img{
    min-height: 300px;
  }

  #hs-himove-ix-mex .technology__showcase-content{
    padding: 20px;
  }

  #hs-himove-ix-mex .technology__showcase-title{
    font-size: 18px;
  }

  #hs-himove-ix-mex .technology__showcase-text{
    font-size: 14px;
  }
}

@media (max-width: 479px) {
  #hs-himove-ix-mex .technology__showcase{
    min-height: 250px;
    border-radius: var(--radius-lg);
  }

  #hs-himove-ix-mex .technology__showcase-img{
    min-height: 250px;
  }

  #hs-himove-ix-mex .technology__showcase-content{
    padding: 16px;
    gap: 8px;
  }

  #hs-himove-ix-mex .technology__showcase-title{
    font-size: 16px;
    line-height: 1.3;
  }

  #hs-himove-ix-mex .technology__showcase-text{
    font-size: 13px;
    line-height: 1.4;
  }
}

#hs-himove-ix-mex .technology__showcase-title{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: 0.4px;
}

#hs-himove-ix-mex .technology__showcase-text{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-secondary);
  letter-spacing: -0.45px;
}


/* --------------------------------------------------------------------------
   7. SPECS SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .specs{
  padding: var(--section-py) var(--section-px);
  background: linear-gradient(136.59deg, var(--color-card-bg-start) 0%, var(--color-black) 100%);
}

#hs-himove-ix-mex .specs__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

#hs-himove-ix-mex .specs__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#hs-himove-ix-mex .specs__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .specs__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .specs__subtitle{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.45px;
}

/* Highlights row */
#hs-himove-ix-mex .specs__highlights{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
}

#hs-himove-ix-mex .highlight-card{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 33px;
  height: 238px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-teal-mid);
  background: linear-gradient(149.58deg, var(--color-card-bg-start) 0%, var(--color-black) 100%);
  transition: border-color var(--transition), transform var(--transition);
}

#hs-himove-ix-mex .highlight-card:hover{
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

#hs-himove-ix-mex .highlight-card__icon{
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  position: relative;
  overflow: hidden;
}

#hs-himove-ix-mex .highlight-card__title{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(16px, 1.4cqw, 20px);
  line-height: 1.4;
  color: var(--color-white);
  letter-spacing: -0.45px;
}

#hs-himove-ix-mex .highlight-card__text{
  font-family: var(--font-primary);
  font-size: var(--fs-body-sm);
  line-height: 1.625;
  color: var(--color-text-muted);
  letter-spacing: -0.31px;
  max-width: 338px;
}

/* Spec tiles grid */
#hs-himove-ix-mex .specs__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: 100%;
}

#hs-himove-ix-mex .spec-tile{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 25px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-dark);
  background: rgba(0, 0, 0, 0.5);
  transition: border-color var(--transition), transform var(--transition);
}

#hs-himove-ix-mex .spec-tile:hover{
  border-color: var(--color-border-teal);
  transform: translateY(-2px);
}

#hs-himove-ix-mex .spec-tile__label{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.43;
  color: var(--color-text-dim);
  letter-spacing: -0.15px;
}

#hs-himove-ix-mex .spec-tile__value{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: clamp(20px, 2cqw, 30px);
  line-height: 1.2;
  color: var(--color-accent);
  letter-spacing: 0.4px;
}

/* Odometer / slot-machine animation */
#hs-himove-ix-mex .spec-tile__value--animating{
  display: flex;
  align-items: baseline;
}

#hs-himove-ix-mex .odometer-char{
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: bottom;
}

#hs-himove-ix-mex .odometer-track{
  display: block;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

#hs-himove-ix-mex .odometer-stop{
  display: block;
  height: 1.2em;
  line-height: 1.2;
}

#hs-himove-ix-mex .odometer-static{
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transition: opacity 0.4s ease;
}

#hs-himove-ix-mex .odometer-static--visible{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #hs-himove-ix-mex .odometer-track{
    transition: none !important;
  }
  #hs-himove-ix-mex .odometer-static{
    opacity: 1;
    transition: none;
  }
}

/* Package contents */
#hs-himove-ix-mex .specs__package{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  padding: 30px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-accent);
  background: linear-gradient(90deg, var(--color-glass-teal-start), var(--color-glass-teal-end));
}

#hs-himove-ix-mex .specs__package-info{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#hs-himove-ix-mex .specs__package-title{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-white);
  letter-spacing: 0.4px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-accent);
}

#hs-himove-ix-mex .specs__package-group{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#hs-himove-ix-mex .specs__package-group:first-of-type{
  padding: 29px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(3, 210, 204, 0.3);
  background: rgba(3, 210, 204, 0.05);
}

#hs-himove-ix-mex .specs__package-group-header{
  display: flex;
  align-items: center;
  gap: 10px;
}

#hs-himove-ix-mex .specs__package-group-icon{
  flex-shrink: 0;
}

#hs-himove-ix-mex .specs__package-group-title{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-accent);
  letter-spacing: 1px;
  text-transform: uppercase;
}

#hs-himove-ix-mex .specs__package-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#hs-himove-ix-mex .specs__package-item{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
}

#hs-himove-ix-mex .specs__package-item::before{
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Accessories grid */
#hs-himove-ix-mex .specs__package-accessories{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

#hs-himove-ix-mex .specs__accessory,
#hs-himove-ix-mex .specs__extra{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.47;
  color: var(--color-text-secondary);
}

#hs-himove-ix-mex .specs__accessory::before,
#hs-himove-ix-mex .specs__extra::before{
  content: '';
  width: 4px;
  height: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Extras grid */
#hs-himove-ix-mex .specs__package-extras{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

#hs-himove-ix-mex .specs__package-image{
  flex-shrink: 0;
  width: clamp(300px, 40cqw, 576px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#hs-himove-ix-mex .specs__package-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --------------------------------------------------------------------------
   8. GALLERY SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .gallery{
  background: var(--color-black);
  padding: var(--section-py) var(--section-px);
}

#hs-himove-ix-mex .gallery__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

#hs-himove-ix-mex .gallery__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
}

#hs-himove-ix-mex .gallery__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .gallery__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .gallery__subtitle{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.45px;
}

#hs-himove-ix-mex .gallery__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  width: 100%;
}

#hs-himove-ix-mex .gallery-card{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 628 / 400;
  transition: transform var(--transition);
}

#hs-himove-ix-mex .gallery-card:hover{
  transform: scale(1.02);
}

#hs-himove-ix-mex .gallery-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hs-himove-ix-mex .gallery-card__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}

#hs-himove-ix-mex .gallery-card__content{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#hs-himove-ix-mex .gallery-card__title{
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.33;
  color: var(--color-white);
  letter-spacing: 0.07px;
}

#hs-himove-ix-mex .gallery-card__text{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  letter-spacing: -0.31px;
}


/* --------------------------------------------------------------------------
   9. REVIEWS SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .reviews{
  padding: var(--section-py) var(--section-px);
  background: linear-gradient(163deg, var(--color-card-bg-start) 0%, var(--color-black) 100%);
}

#hs-himove-ix-mex .reviews__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

#hs-himove-ix-mex .reviews__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

#hs-himove-ix-mex .reviews__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .reviews__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .reviews__stars{
  display: flex;
  gap: var(--space-xs);
}

#hs-himove-ix-mex .reviews__star{
  width: 32px;
  height: 32px;
}

#hs-himove-ix-mex .reviews__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  width: 100%;
}

#hs-himove-ix-mex .review-card{
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-dark);
  background: var(--color-black);
  height: 299px;
  transition: border-color var(--transition), transform var(--transition);
}

#hs-himove-ix-mex .review-card:hover{
  border-color: var(--color-border-teal);
  transform: translateY(-4px);
}

#hs-himove-ix-mex .review-card__header{
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

#hs-himove-ix-mex .review-card__avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

#hs-himove-ix-mex .review-card__rating{
  display: flex;
  gap: 4px;
  align-items: center;
}

#hs-himove-ix-mex .review-card__star{
  width: 17px;
  height: 16px;
}

#hs-himove-ix-mex .review-card__text{
  flex: 1;
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: 1.625;
  color: var(--color-text-secondary);
  letter-spacing: -0.31px;
}

#hs-himove-ix-mex .review-card__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#hs-himove-ix-mex .review-card__author{
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-white);
  letter-spacing: -0.31px;
}

#hs-himove-ix-mex .review-card__date{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.43;
  color: var(--color-text-dim);
  letter-spacing: -0.15px;
}


/* --------------------------------------------------------------------------
   10. CTA SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .cta{
  padding: var(--section-py) var(--section-px);
  background: var(--color-black);
  border-top: 1px solid #051B34;
}

#hs-himove-ix-mex .cta__container{
  max-width: var(--max-w);
  margin: 0 auto;
}

#hs-himove-ix-mex .cta__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-accent);
  background: linear-gradient(90deg, var(--color-glass-teal-start), var(--color-glass-teal-end));
  text-align: center;
}

#hs-himove-ix-mex .cta__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .cta__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .cta__text{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-secondary);
  letter-spacing: -0.45px;
  max-width: 674px;
}


/* --------------------------------------------------------------------------
   11. FAQ SECTION
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .faq{
  padding: var(--section-py) var(--section-px);
  background: var(--color-black);
}

#hs-himove-ix-mex .faq__container{
  max-width: var(--max-w-sm);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

#hs-himove-ix-mex .faq__header{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

#hs-himove-ix-mex .faq__heading{
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.35px;
}

#hs-himove-ix-mex .faq__heading-accent{
  color: var(--color-accent);
}

#hs-himove-ix-mex .faq__subtitle{
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.45px;
}

#hs-himove-ix-mex .faq__list{
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

#hs-himove-ix-mex .faq__item{
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary-900);
  background: linear-gradient(170.12deg, rgba(16,24,40,0.5) 0%, var(--color-black) 100%);
  overflow: hidden;
  transition: border-color var(--transition);
}

#hs-himove-ix-mex .faq__item[open]{
  border-color: var(--color-accent-bright);
}

#hs-himove-ix-mex .faq__item:hover{
  border-color: var(--color-accent);
}

#hs-himove-ix-mex .faq__question{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  cursor: pointer;
  min-height: 76px;
  list-style: none;
}

#hs-himove-ix-mex .faq__question::-webkit-details-marker{
  display: none;
}

#hs-himove-ix-mex .faq__question-text{
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: var(--fs-button);
  line-height: 1.56;
  color: var(--color-base-white);
  letter-spacing: -0.44px;
  text-align: left;
  flex: 1;
  padding-right: var(--space-sm);
}

#hs-himove-ix-mex .faq__chevron{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

#hs-himove-ix-mex .faq__item[open] .faq__chevron{
  transform: rotate(180deg);
}

#hs-himove-ix-mex .faq__answer{
  padding: 0 var(--space-md) var(--space-md);
}

#hs-himove-ix-mex .faq__answer p{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-button);
  line-height: 1.56;
  color: var(--color-base-white);
  letter-spacing: -0.44px;
}

#hs-himove-ix-mex .faq__contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-accent);
  background: linear-gradient(90deg, rgba(16,78,100,0.2), rgba(0,95,120,0.2));
  text-align: center;
}

#hs-himove-ix-mex .faq__contact-text{
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.56;
  color: var(--color-text-secondary);
  letter-spacing: -0.44px;
}


/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
#hs-himove-ix-mex .footer{
  background: var(--color-black);
  border-top: 1px solid #051B34;
  padding: var(--section-py) var(--section-px);
}

#hs-himove-ix-mex .footer__container{
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

#hs-himove-ix-mex .footer__logo-img{
  width: clamp(120px, 12cqw, 166px);
  height: auto;
}

#hs-himove-ix-mex .footer__copy{
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.43;
  color: var(--color-text-dim);
  letter-spacing: -0.15px;
  text-align: center;
}


/* ==========================================================================
   RESPONSIVE BREAKPOINTS — Mobile First
   ========================================================================== */

/* ── 320px base (already handled by default styles above) ── */

/* ── 375px ── */
@media (min-width: 375px) {
  #hs-himove-ix-mex {
    --section-px: 20px;
  }
}

/* ── 480px ── */
@media (min-width: 480px) {
  #hs-himove-ix-mex {
    --section-px: 24px;
  }

  #hs-himove-ix-mex .gallery__grid{
    gap: 16px;
  }
}

/* ── 768px (tablet) ── */
@media (min-width: 768px) {
  #hs-himove-ix-mex {
    --section-px: 40px;
  }

  #hs-himove-ix-mex .product__features{
    flex-direction: column;
  }

  #hs-himove-ix-mex .technology__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  #hs-himove-ix-mex .specs__highlights{
    grid-template-columns: repeat(2, 1fr);
  }

  #hs-himove-ix-mex .specs__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  #hs-himove-ix-mex .reviews__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  #hs-himove-ix-mex .specs__package-accessories{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 1024px ── */
@media (min-width: 1024px) {
  #hs-himove-ix-mex {
    --section-px: 40px;
  }

  #hs-himove-ix-mex .product__container{
    flex-direction: column;
  }

  #hs-himove-ix-mex .product__showcase{
    flex-direction: row;
  }

  #hs-himove-ix-mex .technology__grid{
    grid-template-columns: repeat(4, 1fr);
  }

  #hs-himove-ix-mex .specs__highlights{
    grid-template-columns: repeat(3, 1fr);
  }

  #hs-himove-ix-mex .specs__grid{
    grid-template-columns: repeat(4, 1fr);
  }

  #hs-himove-ix-mex .reviews__grid{
    grid-template-columns: repeat(3, 1fr);
  }

  #hs-himove-ix-mex .specs__package{
    flex-direction: row;
  }

  #hs-himove-ix-mex .specs__package-accessories{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 1280px+ ── */
@media (min-width: 1280px) {
  #hs-himove-ix-mex {
    --section-px: 40px;
  }
}


/* ==========================================================================
   MOBILE OVERRIDES (max-width rules for small screens)
   ========================================================================== */

@media (max-width: 1023px) {
  #hs-himove-ix-mex .hero__top-bar{
    padding: 24px 20px;
  }

  #hs-himove-ix-mex .hero__card{
    margin: 0 20px;
  }

  #hs-himove-ix-mex .hero__badge{
    padding: 12px 28px;
    bottom: 20px;
    left: 30px;
  }

  #hs-himove-ix-mex .hero__badge-text{
    font-size: 18px;
  }

  #hs-himove-ix-mex .hero__badge-icon{
    width: 22px;
    height: 22px;
  }

  #hs-himove-ix-mex .product__container{
    flex-direction: column;
  }

  #hs-himove-ix-mex .product__showcase{
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  #hs-himove-ix-mex .product__features--left,
  #hs-himove-ix-mex .product__features--right{
    align-items: center;
  }

  #hs-himove-ix-mex .product__image{
    width: 100%;
    max-width: 400px;
  }

  #hs-himove-ix-mex .specs__package{
    flex-direction: column;
  }

  #hs-himove-ix-mex .specs__package-image{
    width: 100%;
  }

  #hs-himove-ix-mex .review-card{
    height: auto;
  }
}

@media (max-width: 767px) {
  #hs-himove-ix-mex .technology__grid{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .specs__highlights{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .specs__grid{
    grid-template-columns: repeat(2, 1fr);
  }

  #hs-himove-ix-mex .gallery__grid{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .reviews__grid{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .product__features{
    flex-direction: column;
  }

  #hs-himove-ix-mex .hero__top-bar{
    padding: 20px 16px;
  }

  #hs-himove-ix-mex .hero__card{
    margin: 0 16px;
    height: clamp(200px, 50vw, 300px);
  }

  #hs-himove-ix-mex .hero__badge{
    padding: 10px 22px;
    bottom: 16px;
    left: 20px;
    gap: 8px;
  }

  #hs-himove-ix-mex .hero__badge-text{
    font-size: 16px;
  }

  #hs-himove-ix-mex .hero__badge-icon{
    width: 20px;
    height: 20px;
  }

  #hs-himove-ix-mex .specs__package-accessories{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .specs__package-extras{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 479px) {
  #hs-himove-ix-mex .hero__top-bar{
    padding: 16px 12px;
    gap: 12px;
  }

  #hs-himove-ix-mex .hero__logo-img{
    width: 120px;
  }

  #hs-himove-ix-mex .hero__card{
    margin: 0 12px;
    height: clamp(180px, 55vw, 260px);
  }

  #hs-himove-ix-mex .hero__badge{
    padding: 10px 24px;
    bottom: 16px;
    left: 20px;
  }

  #hs-himove-ix-mex .hero__badge-text{
    font-size: 16px;
  }

  #hs-himove-ix-mex .hero__badge-icon{
    width: 20px;
    height: 20px;
  }

  #hs-himove-ix-mex .specs__grid{
    grid-template-columns: 1fr;
  }

  #hs-himove-ix-mex .gallery__header{
    height: auto;
    gap: var(--space-sm);
  }
}


/* ==========================================================================
   ACCESSIBILITY: Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #hs-himove-ix-mex *,
  #hs-himove-ix-mex *::before,
  #hs-himove-ix-mex *::after{
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  #hs-himove-ix-mex{
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   ACCESSIBILITY: High Contrast
   ========================================================================== */
@media (prefers-contrast: high) {
  #hs-himove-ix-mex{
    --color-text-muted: #C0C0C0;
    --color-text-dim: #A0A0A0;
    --color-border-dark: #444;
  }

  #hs-himove-ix-mex .tech-card,
  #hs-himove-ix-mex .highlight-card,
  #hs-himove-ix-mex .review-card,
  #hs-himove-ix-mex .faq__item{
    border-width: 2px;
  }
}

#hs-himove-ix-mex video {
  all: unset;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  background: transparent;
  border: none;
  box-sizing: border-box;
}