/* Homepage section hierarchy, using the Services typography tokens.
   Section containers, columns, alignment and text animations remain owned
   by their existing components. Card titles and form labels are excluded. */
html[data-theme] body.home #main-content :is(.section-label,.hero-eyebrow) {
  display:inline-flex!important;
  align-items:center;
  gap:.7rem;
  min-height:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  margin-top:0!important;
  margin-bottom:.95rem!important;
  font-family:var(--font-body)!important;
  font-size:var(--type-label)!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
  color:var(--section-accent,var(--accent-teal))!important;
}
html[data-theme] body.home #main-content :is(.section-label,.hero-eyebrow)::before {
  content:"";
  flex:0 0 26px;
  width:26px;
  height:1px;
  background:currentColor!important;
  opacity:.62;
}
html[data-theme] body.home #main-content :is(.section-title,.hero-heading) {
  margin-top:0!important;
  margin-bottom:0!important;
  font-family:var(--font-display)!important;
  font-size:var(--type-section)!important;
  font-weight:750!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
  background:none!important;
  color:var(--section-text,var(--text-primary))!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-theme] body.home #main-content :is(.section-sub,.hero-sub,.about-text-wrap>.about-p) {
  font-family:var(--font-body)!important;
  font-size:var(--type-lead)!important;
  font-weight:400!important;
  line-height:1.68!important;
  letter-spacing:-.012em!important;
  margin-top:1rem!important;
  color:var(--section-secondary,var(--text-secondary))!important;
}
/* The hero keeps its centered composition and text reveal behavior. */
html[data-theme] body.home #main-content .hero {
  --section-text:#f4fbfb;
  --section-secondary:#c8e1e0;
  --section-accent:#67e8ed;
}
html[data-theme] body.home #main-content .hero-eyebrow span {
  color:inherit!important;
}
html[data-theme] body.home #main-content .hero-heading :is(.hero-custom,.hero-line-inner,.hero-service-phrase) {
  font-family:inherit!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  background:none!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
}

/* Reference 8: hero typography only; all other section headings stay unchanged. */
@font-face {
  font-family: 'Manova Orbitron'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/orbitron-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Manova Orbitron'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/orbitron-semibold.ttf') format('truetype');
}
html[data-theme] body.home #main-content #home .hero-heading--smart {
  font-family: 'Manova Orbitron', sans-serif !important;
  font-size: clamp(46px,min(6.8vw,10svh),112px) !important;
  font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: .01em !important;
  text-transform: none; margin: 0 !important;
}
html[data-theme] body.home #home .hero-heading--smart > span { display: block; }
html[data-theme] body.home #home .hero-smart {
  color: #f4fbfb !important; -webkit-text-fill-color: #f4fbfb !important;
  font-size: .86em; letter-spacing: -.035em;
}
html[data-theme] body.home #home .hero-solutions {
  color: #24d6d7 !important; -webkit-text-fill-color: #24d6d7 !important;
  font-weight: 400; letter-spacing: .055em; margin-top: .025em;
}
html[data-theme] body.home #home #heroSmartRotator {
  position: relative; display: inline-grid; width: max-content; min-width: 0; height: 1.08em;
  overflow: hidden; vertical-align: bottom; text-align: center;
}
html[data-theme] body.home #home .hero-smart-word {
  grid-area: 1 / 1; display: block; width: max-content; white-space: nowrap; text-align: center;
  color: #f4fbfb !important; -webkit-text-fill-color: #f4fbfb !important;
  opacity: 0; transform: none !important;
  transition: opacity .55s ease;
}
html[data-theme] body.home #home .hero-smart-word.is-active { opacity: 1; transform: translateY(0); }
html[data-theme] body.home #home .hero-smart-word b {
  color: #24d6d7 !important; -webkit-text-fill-color: #24d6d7 !important; font-weight: 400;
}
html[data-theme] body.home #home .hero-connected {
  color: #b6eceb !important; -webkit-text-fill-color: #b6eceb !important;
  font-family: var(--font-body); font-size: clamp(13px,1.2vw,18px);
  font-weight: 400; line-height: 1.5; letter-spacing: .005em; margin-top: .45em;
}
html[data-theme] body.home #main-content #home .hero-service-list {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .8em;
  margin: 17px auto 20px !important; font-size: clamp(12px,1vw,15px) !important;
  color: #67e8ed !important; line-height: 1.5 !important; letter-spacing: .035em !important;
}
html[data-theme] body.home #home .hero-service-list span { color: inherit !important; }
body.home #home .hero-service-list i { font-style: normal; opacity: .6; }
body.home #home .hero-btns .btn {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 36px; font-size: 12px; gap: 9px;
  transition: transform .25s ease, box-shadow .3s ease, background-color .3s ease !important;
}
body.home #home .hero-btns .btn-fill { width: auto; min-width: 0; padding: 0 17px; min-height: 36px; font-size: 12px; }
body.home #home .hero-btns .btn-fill::after {
  content: ''; display: block; position: absolute; inset: -50% auto -50% -65%; width: 40%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  pointer-events: none; transform: skewX(-22deg);
  animation: hero-cta-shine 6s ease-in-out 1s infinite !important;
}
body.home #home .hero-btns .btn:is(:hover,:focus-visible) { transform: translateY(-3px) !important; }
html[data-theme] body.home #home .hero-btns .btn-fill:is(:hover,:focus-visible) { box-shadow: 0 7px 26px rgba(0,215,215,.32) !important; }
body.home #home .hero-btns .btn .arrow { transition: transform .25s ease !important; }
body.home #home .hero-btns .btn:is(:hover,:focus-visible) .arrow { transform: translateX(4px) !important; }
body.home #home .hero-btns .hero-secondary { padding: 0 4px; }
body.home #home .hero-btns .hero-secondary::after {
  content: ''; display: block; position: absolute; left: 4px; right: 25px; bottom: 3px;
  height: 1px; background: #67e8ed; transform: scaleX(.25); transform-origin: left;
  transition: transform .3s ease !important;
}
body.home #home .hero-btns .hero-secondary:is(:hover,:focus-visible)::after { transform: scaleX(1); }
@keyframes hero-cta-shine { 0%,65% { left: -65%; } 90%,100% { left: 130%; } }
@media(max-width:600px) {
  html[data-theme] body.home #main-content #home .hero-heading--smart { font-size: clamp(36px,10.4vw,62px) !important; }
  body.home #home .hero-btns .btn { min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-theme] body.home #home .hero-smart-word { transition: none !important; }
  body.home #home .hero-btns .btn,
  body.home #home .hero-btns .btn .arrow,
  body.home #home .hero-btns .btn::after { animation: none !important; transition: none !important; }
  body.home #home .hero-btns .btn:is(:hover,:focus-visible),
  body.home #home .hero-btns .btn:is(:hover,:focus-visible) .arrow { transform: none !important; }
  body.home #home .hero-btns .btn-fill::after { display: none; }
}
/* Keep the complete headline together at every viewport width. */
html[data-theme] body.home #main-content #home .hero-heading--smart {
  font-size: clamp(22px,min(5.6vw,9svh),100px) !important;
}
html[data-theme] body.home #home .hero-heading--smart > .hero-smart-row {
  display: inline-grid; align-items: baseline; justify-content: center; gap: 0;
  white-space: nowrap;
}
html[data-theme] body.home #home .hero-smart-row .hero-smart { font-size: 1em; }
@media(max-width:600px) {
  html[data-theme] body.home #main-content #home .hero-heading--smart { font-size: clamp(18px,5.4vw,32px) !important; }
}
