
.ix-hero, .ix-hero *, .ix-hero *::before, .ix-hero *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ix-hero {
  --ix-ink:     #1A1A18;
  --ix-cream:   #FAFAF8;
  --ix-accent:  #C9A96E;
  --ix-accent2: #8C7D5E;
  --ix-text:    #423D36;    
  --ix-muted:   #5F584D;    
  --ix-faint:   #A8A093;    
  --ix-border:  #EEEDE9;
  --ix-green:   #247A45;
  --ix-radius:  14px;

  position: relative;
  margin-inline: calc(50% - 50vw);
  background: var(--ix-cream);
  overflow-x: clip;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ix-hero__inner { display: flex; flex-direction: column; margin: 0 auto; }

 
.ix-hero__micro {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;                  
  column-gap: 7px; row-gap: 5px;
  padding: 9px 12px; background: var(--ix-ink); order: -2;
}
.ix-hero__micro-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.95);
  letter-spacing: 0; white-space: nowrap;
}
.ix-hero__micro-item svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ix-accent); }
.ix-hero__micro-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.3); flex-shrink: 0; }
 
@media (max-width: 429px) { .ix-hero__micro-opt { display: none; } }

 
.ix-hero__media {
  position: relative; width: 100%; order: -1;
  background: linear-gradient(180deg, #E8E5E0 0%, #DDD9D4 100%); overflow: hidden;
}
.ix-hero__video-wrap {
  position: relative; width: 100%;
  aspect-ratio: 4 / 5; max-height: 44vh; overflow: hidden;
}
.ix-hero__video {
   
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  background: linear-gradient(180deg, #E8E5E0 0%, #DDD9D4 100%);
}
 
@media (max-height: 720px) {
  .ix-hero__video-wrap { max-height: 38vh; }
}

 
.ix-hero__badge {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(26,26,24,0.88);
  border-radius: 12px; padding: 11px 15px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.ix-hero__badge-num { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: 30px; color: var(--ix-accent); line-height: 1; }
.ix-hero__badge-label { display: flex; flex-direction: column; gap: 2px; }
.ix-hero__badge-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.ix-hero__badge-desc { font-size: 11.5px; color: rgba(255,255,255,0.75); line-height: 1.25; }
.ix-hero__badge-trust { display: none; }

 
.ix-hero__content {
  position: relative; z-index: 2; padding: 18px 20px 26px;
  display: flex; flex-direction: column; gap: 13px;
  text-align: center; align-items: center;
}

 
.ix-tp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ix-tp__stars { display: inline-flex; align-items: center; gap: 1.5px; }
.ix-tp__star { display: block; width: 18px; height: 18px; color: var(--ix-accent); }
.ix-tp__text { font-size: 14px; color: var(--ix-text); line-height: 1; }
.ix-tp__text strong { font-weight: 700; color: var(--ix-ink); }
.ix-tp__sep { color: var(--ix-faint); font-size: 13px; }

 
.ix-hero__headline {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 400;
  color: var(--ix-ink); line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance;
   
  font-size: clamp(26px, 7vw, 40px);
  hyphens: none; -webkit-hyphens: none;    
}
.ix-hero__h1-main { display: block; font-style: italic; }
.ix-hero__h1-turn { display: block; font-style: italic; }
.ix-hero__sub {
  font-family: inherit; font-weight: 400;
  font-size: 16.5px; line-height: 1.55; color: var(--ix-text);
  margin: 0 auto; letter-spacing: 0.005em; max-width: 36ch; text-wrap: pretty;
}
.ix-hero__sub strong { color: var(--ix-ink); font-weight: 600; }
.ix-accent-word { position: relative; white-space: nowrap; }
.ix-accent-word::after {
  content: ''; position: absolute; left: 0; bottom: 0.02em; width: 100%; height: 2px;
  background: var(--ix-accent); border-radius: 2px; transform: scaleX(1); transform-origin: left;
}

 
.ix-hero__cta-wrap { display: flex; flex-direction: column; gap: 11px; align-items: center; width: 100%; }
.ix-hero__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 380px; background: var(--ix-ink); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; text-align: center;
  padding: 20px 20px; border-radius: var(--ix-radius); border: none; cursor: pointer;
  position: relative; overflow: hidden; min-height: 60px;
  transition: transform 0.25s ease, box-shadow 0.25s ease; -webkit-tap-highlight-color: transparent;
}
.ix-hero__cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--ix-accent), var(--ix-accent2)); opacity: 0; transition: opacity 0.35s ease; }
.ix-hero__cta:hover::before, .ix-hero__cta:active::before { opacity: 1; }
.ix-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,169,110,0.32); }
.ix-hero__cta:focus-visible { outline: 3px solid var(--ix-accent); outline-offset: 3px; }
.ix-hero__cta > * { position: relative; z-index: 1; }
.ix-hero__cta svg { width: 17px; height: 17px; flex-shrink: 0; transition: transform 0.3s ease; }
.ix-hero__cta:hover svg { transform: translateX(4px); }

 
.ix-hero__guarantee { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ix-muted); }
.ix-hero__guarantee svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ix-accent); }
.ix-hero__proof { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ix-muted); font-weight: 500; }
.ix-hero__proof-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ix-green); flex-shrink: 0; }

 
.ix-hero__benefits-desk { display: none; }

 
@media (prefers-reduced-motion: no-preference) {
  .ix-hero__anim { opacity: 0; transform: translateY(12px); animation: ix-fade-up 0.5s ease-out forwards; }
  .ix-hero__anim--1 { animation-delay: 0.05s; }
  .ix-hero__anim--2 { animation-delay: 0.12s; }
  .ix-hero__anim--3 { animation-delay: 0.19s; }
  .ix-hero__anim--4 { animation-delay: 0.26s; }
  .ix-hero__media { opacity: 0; animation: ix-fade-in 0.45s 0.05s ease-out forwards; }
  .ix-hero__badge { opacity: 0; animation: ix-fade-up 0.6s 0.55s ease-out forwards; }
  .ix-accent-word::after { transform: scaleX(0); animation: ix-underline 0.7s 0.7s ease-out forwards; }
  .ix-hero__proof-dot { animation: ix-pulse 2.4s ease-in-out infinite; }
}
@keyframes ix-fade-up { to { opacity: 1; transform: translateY(0); } }
@keyframes ix-fade-in { to { opacity: 1; } }
@keyframes ix-underline { to { transform: scaleX(1); } }
@keyframes ix-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

 
@media (max-width: 359px) {
  .ix-hero__content { padding-inline: 16px; }
  .ix-hero__headline { font-size: 24px; }
  .ix-hero__sub { font-size: 15.5px; }
  .ix-hero__cta { font-size: 12.5px; letter-spacing: 0.02em; padding-inline: 14px; gap: 8px; }
  .ix-hero__cta svg { width: 15px; height: 15px; }
}

 
@media (min-width: 600px) {
  .ix-hero__content { padding: 26px 28px 30px; gap: 15px; }
  .ix-hero__sub { font-size: 17.5px; }
  .ix-hero__micro { column-gap: 10px; padding: 10px 16px; }
  .ix-hero__micro-item { font-size: 13px; letter-spacing: 0.01em; }
  .ix-hero__micro-item svg { width: 13px; height: 13px; }
  .ix-hero__cta { width: auto; max-width: none; letter-spacing: 0.07em; padding: 20px 34px; }
  .ix-tp__star { width: 19px; height: 19px; }
  .ix-tp__text { font-size: 15px; }
  .ix-hero__video-wrap { aspect-ratio: 16 / 11; max-height: 52vh; }
  .ix-hero__badge { bottom: 16px; left: 16px; padding: 13px 17px; gap: 11px; }
  .ix-hero__badge-num { font-size: 34px; }
  .ix-hero__badge-title { font-size: 12px; }
  .ix-hero__badge-desc { font-size: 12px; }
}

 
@media (min-width: 960px) {
  .ix-hero__inner { flex-direction: row; align-items: stretch; min-height: 640px; }
  .ix-hero__content { order: 0; flex: 1 1 58%; padding: 44px 40px; justify-content: center; gap: 19px; text-align: left; align-items: flex-start; }
  .ix-hero__media { order: 1; flex: 1 1 42%; border-radius: var(--ix-radius) 0 0 var(--ix-radius); background: linear-gradient(135deg, #EDEBE7 0%, #E2DEDA 50%, #D8D4D0 100%); }
  .ix-hero__micro { order: 99; display: none; }
  .ix-tp { justify-content: flex-start; }
  .ix-hero__cta-wrap { align-items: flex-start; }
   
  .ix-hero__headline { font-size: clamp(34px, 3.7vw, 50px); }
  .ix-hero__sub { font-size: 18px; margin-inline: 0; max-width: 48ch; }
  .ix-hero__cta { font-size: 14px; padding: 21px 40px; }
  .ix-hero__video-wrap { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
  .ix-hero__video { object-fit: contain; object-position: center bottom; }
  .ix-hero__badge {
    bottom: auto; left: auto; top: 36px; right: 36px;
    background: rgba(250,246,240,0.96); padding: 17px 22px; max-width: 272px;
    border-radius: 16px; flex-direction: column; align-items: flex-start; gap: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  }
  .ix-hero__badge-num { font-size: 36px; color: var(--ix-accent); }
  .ix-hero__badge-title { color: var(--ix-ink); font-size: 12.5px; }
  .ix-hero__badge-desc { color: var(--ix-muted); font-size: 12.5px; }
  .ix-hero__badge-trust { display: flex; align-items: center; gap: 7px; padding-top: 7px; margin-top: 2px; border-top: 1px solid rgba(95,88,77,0.14); }
  .ix-hero__badge-check { width: 17px; height: 17px; flex-shrink: 0; }
  .ix-hero__badge-trust span { font-size: 12.5px; color: var(--ix-text); font-weight: 500; }
  .ix-hero__benefits-desk { display: flex !important; align-items: center; column-gap: 18px; row-gap: 10px; flex-wrap: wrap; }
  .ix-hero__benefit-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ix-muted); font-weight: 500; }
  .ix-hero__benefit-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ix-accent); }
}

@media (min-width: 1200px) {
  .ix-hero__content { padding: 56px 60px; gap: 21px; }
}
