/* HEXTECPRO product showcase. Device images use the real panel as references. */
.hero{ padding:40px 0 24px; }
.hero > .container{ max-width:1480px; }
.hero-shell{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  min-height:0;
  border-radius:28px;
  background:linear-gradient(120deg,rgba(17,35,61,.86),rgba(11,23,42,.96) 62%);
  isolation:isolate;
}
.hero-shell::before{
  inset:0;
  background:radial-gradient(ellipse at 3% 0%,rgba(37,99,235,.16),transparent 64%);
  opacity:1;
  z-index:-1;
}
html[data-theme="light"] .hero-shell{ background:linear-gradient(120deg,#f8fbff,#edf4ff); }
.hero-intro{ align-self:center; padding:52px 8px 52px 44px; min-width:0; }
.hero-kicker{ display:flex; align-items:center; gap:9px; font-size:.68rem; font-weight:800; letter-spacing:.13em; color:#a7bbd8; }
html[data-theme="light"] .hero-kicker{ color:#536983; }
.hero-kicker > span,.hero-showcase-label > span{ width:6px; height:6px; background:#3b82f6; border-radius:50%; flex:none; }
.hero .hero-title{ margin:25px 0 22px; font-size:clamp(2.75rem,4.5vw,4.85rem); font-weight:800; letter-spacing:-.055em; line-height:1.06; }
.hero .hero-title span{ color:#54ddae; }
html[data-theme="light"] .hero .hero-title span{ color:#047857; }
.hero-product{ max-width:440px; margin:0 0 16px; font-size:1.05rem; line-height:1.5; font-weight:700; color:var(--text); }
.hero .hero-copy{ max-width:430px; margin:0; font-size:.98rem; line-height:1.75; color:var(--muted); }
.hero .hero-actions{ margin-top:28px; gap:10px; }
.hero-actions .btn{ display:inline-flex; align-items:center; justify-content:center; gap:16px; padding:13px 19px; font-size:.9rem; min-height:48px; font-weight:700; }
.hero-actions .btn-pro{ background:#2563eb; box-shadow:0 8px 24px rgba(37,99,235,.22); }
.hero-benefits{ list-style:none; display:flex; gap:7px 16px; flex-wrap:wrap; padding:0; margin:27px 0 0; color:var(--muted); font-size:.73rem; }
.hero-benefits li{ display:flex; align-items:center; gap:5px; }
.hero-benefits i{ color:#54ddae; font-size:1rem; }
html[data-theme="light"] .hero-benefits i{ color:#047857; }
.hero-ecosystem{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.72rem; color:var(--muted); margin-top:25px; }
.hero-online-dot{ width:5px; height:5px; background:#54ddae; border-radius:50%; }
.hero-ecosystem-separator{ margin:0 3px; opacity:.45; }
.hero-showcase{ margin:18px; margin-left:20px; padding:16px 22px 13px; border:1px solid rgba(143,174,221,.14); border-radius:20px; background:linear-gradient(155deg,#102139,#081321 70%); color:#f3f7fc; min-width:0; position:relative; }
.hero-showcase:focus{ outline:none; }
.hero-showcase:focus-visible{ outline:3px solid #60a5fa; outline-offset:4px; }
.hero-showcase-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero-showcase-label{ display:flex; align-items:center; gap:8px; font-size:.61rem; font-weight:700; letter-spacing:.14em; color:#99afd0; }
.hero-scenes{ position:relative; aspect-ratio:3 / 2; margin:5px -10px 10px; touch-action:pan-y; }
.hero-slide{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity 420ms ease,visibility 420ms; }
.hero-slide.is-active{ opacity:1; visibility:visible; }
.hero-slide img{ display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.hero-slide-info{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding-bottom:17px; }
.hero-slide-info > div:first-child{ min-width:0; }
.hero-slide-info p{ margin:0 0 5px; color:#94a9c8; font-size:.68rem; }
.hero-slide-info h2{ margin:0; font-size:clamp(.92rem,1.1vw,1.08rem); font-weight:700; line-height:1.4; letter-spacing:-.015em; }
.hero-slide-arrows{ display:flex; gap:6px; }
.hero-icon-button{ width:44px; height:44px; border:1px solid rgba(151,180,223,.19); border-radius:12px; background:rgba(162,185,222,.05); color:#d9e5f7; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; flex:none; cursor:pointer; transition:background 160ms ease,border-color 160ms ease; }
.hero-icon-button:hover{ background:rgba(162,185,222,.13); border-color:rgba(151,180,223,.42); }
.hero-expand{ width:36px; height:36px; border-radius:10px; font-size:.83rem; }
.hero-slider-footer{ display:flex; align-items:center; gap:10px; border-top:1px solid rgba(151,180,223,.14); padding-top:13px; }
.hero-slider-tabs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; flex:1; min-width:0; }
.hero-slider-tab{ min-height:44px; border:1px solid transparent; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:8px; color:#a6b8d2; background:transparent; font-size:.72rem; padding:8px 6px; font-weight:600; cursor:pointer; transition:background 160ms ease,color 160ms ease; }
.hero-slider-tab i{ font-size:.95rem; }
.hero-slider-tab:hover{ color:#fff; background:rgba(115,155,215,.08); }
.hero-slider-tab.is-active{ background:rgba(37,99,235,.17); border-color:rgba(96,165,250,.3); color:#e1eeff; }
.hero-slider-play{ width:36px; height:36px; border-radius:10px; }
.hero-showcase:not(.is-enhanced) :is(.hero-slide-arrows,.hero-slider-footer,.hero-expand){ visibility:hidden; }
.hero-demo-note{ margin:11px 0 0; color:#7f94b3; font-size:.62rem; text-align:center; line-height:1.5; }
.hero-showcase :is(button,a):focus-visible,.hero-image-dialog button:focus-visible{ outline:3px solid #60a5fa; outline-offset:3px; }
.hero-image-dialog{ width:min(1280px,96vw); max-width:96vw; max-height:94dvh; padding:18px; border:1px solid #29405e; border-radius:20px; background:#0a1626; color:#f3f7fc; overflow:auto; box-shadow:0 30px 90px #0008; }
.hero-image-dialog::backdrop{ background:rgba(2,8,19,.86); backdrop-filter:blur(6px); }
.hero-dialog-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hero-dialog-bar h2{ font-size:1rem; margin:0; font-weight:700; }
.hero-image-dialog img{ display:block; width:100%; height:auto; max-height:calc(94dvh - 125px); object-fit:contain; }
.hero-image-dialog p{ font-size:.73rem; margin:8px 0 0; color:#91a6c3; text-align:center; }
html:has(.hero-image-dialog[open]){ overflow:hidden; }
@media (min-width:1600px){ .hero-intro{ padding-left:52px; } }
@media (max-width:1199px){
  .hero-intro{ padding:36px 6px 36px 28px; }
  .hero-showcase{ margin:14px; padding:13px 15px; }
  .hero .hero-title{ font-size:clamp(2.65rem,4.8vw,3.7rem); }
  .hero-product{ font-size:.94rem; }
  .hero .hero-copy{ font-size:.89rem; }
  .hero-benefits{ gap:7px 12px; }
  .hero-slider-tab{ gap:5px; font-size:.65rem; }
}
@media (max-width:991px){
  .hero{ padding:28px 0 16px; }
  .hero-shell{ grid-template-columns:minmax(0,1fr); }
  .hero-intro{ padding:34px 28px 20px; }
  .hero .hero-title{ margin:19px 0 16px; font-size:clamp(3rem,7vw,4.1rem); }
  .hero-product,.hero .hero-copy{ max-width:580px; }
  .hero-product{ font-size:1rem; }
  .hero .hero-copy{ font-size:.95rem; }
  .hero-benefits{ margin-top:20px; }
  .hero-ecosystem{ margin-top:16px; }
  .hero-showcase{ margin:10px 18px 18px; padding:15px 20px 12px; }
  .hero-slide-info h2{ font-size:1.1rem; }
  .hero-slider-tab{ font-size:.78rem; gap:8px; }
}
@media (max-width:575px){
  .hero > .container{ padding-left:12px; padding-right:12px; }
  .hero{ padding-top:20px; }
  .hero-shell{ border-radius:22px; }
  .hero-intro{ padding:28px 21px 15px; }
  .hero-kicker{ font-size:.56rem; letter-spacing:.1em; gap:7px; }
  .hero .hero-title{ font-size:clamp(2.5rem,10.5vw,3.5rem); }
  .hero-product{ font-size:.87rem; margin-bottom:12px; }
  .hero .hero-copy{ font-size:.86rem; line-height:1.7; }
  .hero .hero-actions{ margin-top:22px; gap:8px; }
  .hero .hero-actions .btn{ flex:1 1 auto; padding:12px; gap:9px; font-size:.8rem; }
  .hero-benefits{ font-size:.63rem; gap:6px 12px; }
  .hero-ecosystem{ font-size:.64rem; gap:6px; }
  .hero-showcase{ margin:10px; padding:10px 11px; border-radius:16px; }
  .hero-showcase-label{ font-size:.53rem; letter-spacing:.1em; }
  .hero-expand{ width:44px; height:44px; }
  .hero-scenes{ margin:0 -8px 6px; }
  .hero-slide-info{ padding-bottom:12px; gap:7px; }
  .hero-slide-info h2{ font-size:.82rem; }
  .hero-slide-info p{ font-size:.59rem; }
  .hero-slide-arrows{ gap:4px; }
  .hero-slide-arrows .hero-icon-button{ border-radius:10px; }
  .hero-slider-footer{ gap:5px; padding-top:10px; }
  .hero-slider-tab{ font-size:.58rem; gap:4px; padding:8px 2px; flex-direction:column; line-height:1.25; }
  .hero-slider-tab i{ font-size:.9rem; }
  .hero-slider-play{ width:44px; height:44px; }
  .hero-demo-note{ font-size:.56rem; }
  .hero-image-dialog{ padding:12px; border-radius:16px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-icon-button,.hero-slider-tab{ transition:none; }
}