@charset "UTF-8";
.brand-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:var(--navy);
  background:radial-gradient(ellipse at 50% 20%,#fff 0%,#f7fafc 40%,#edf4f9 100%);
}
.brand-hero-content { position:relative; z-index:2; padding-top:38px; text-align:center; }
.brand-hero .eyebrow { justify-content:center; color:#57788f; font-size:9px; letter-spacing:1.7px; margin-bottom:15px; }
.brand-hero .eyebrow i { background:var(--blue); }
.brand-hero h1 { font-size:54px; line-height:1.12; letter-spacing:-2px; font-weight:650; }
.brand-hero h1 em { color:var(--blue); font-style:normal; }
.brand-hero-content>p:not(.eyebrow) { max-width:600px; margin:16px auto 0; color:#647d91; font-size:12px; line-height:1.9; }
.brand-hero-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
.brand-hero-actions .btn { min-height:45px; padding-inline:21px; font-size:12px; gap:17px; }
.brand-hero-actions .btn-outline { background:#ffffff70; border-color:#c1d4e3; }
.brand-hero-actions .btn-outline:hover { background:#fff; border-color:var(--blue); }
.brand-hero .eyebrow,.brand-hero h1,.brand-hero-content>p:not(.eyebrow),.brand-hero-actions {
  animation:hero-copy-in .65s ease-out both;
}
.brand-hero h1 { animation-delay:.08s; }
.brand-hero-content>p:not(.eyebrow) { animation-delay:.16s; }
.brand-hero-actions { animation-delay:.24s; }
.product-stage {
  position:relative;
  display:grid;
  grid-template-columns:.95fr 1.08fr 1.3fr 1.08fr .95fr;
  align-items:end;
  gap:14px;
  height:282px;
  max-width:1160px;
  margin-top:4px;
}
.product-stage-orbit {
  position:absolute;
  left:3%;
  right:3%;
  height:126px;
  bottom:25px;
  border:1px solid #bdcfe16e;
  border-radius:50%;
  transform:rotate(-4deg);
  pointer-events:none;
}
.product-stage-orbit:before {
  content:"";
  position:absolute;
  inset:19px 5%;
  border-radius:50%;
  background:radial-gradient(ellipse,#b2cbe12e,transparent 70%);
}
.product-stage-orbit:after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  left:15%;
  bottom:13px;
  box-shadow:0 0 0 5px #1677ff0c;
}
.showcase-item {
  --tilt:0deg;
  position:relative;
  z-index:1;
  display:block;
  min-width:0;
  text-align:center;
  border-radius:12px;
  mix-blend-mode:multiply;
  animation:hero-product-in .8s cubic-bezier(.2,.65,.3,1) both;
  animation-delay:calc(.24s + var(--order)*.09s);
}
.showcase-visual { position:relative; aspect-ratio:1; transform:rotate(var(--tilt)); transition:transform .35s cubic-bezier(.2,.65,.3,1); }
.showcase-display .showcase-visual { width:90%; margin-inline:auto; }
.showcase-visual img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  animation:hero-product-drift 3.4s ease-in-out 1;
  animation-delay:calc(.7s + var(--order)*.1s);
}
.showcase-label { position:relative; margin-top:2px; padding:7px 0 3px; }
.showcase-label>span { display:block; color:#7a8e9f; font-size:9px; line-height:1.7; }
.showcase-label strong { display:flex; justify-content:center; align-items:center; gap:6px; color:var(--navy); font-size:11px; font-weight:600; line-height:1.8; }
.showcase-label .icon { width:12px; height:12px; color:#7c9ab2; transition:transform .25s,color .25s; }
.showcase-memory { --tilt:-12deg; padding-bottom:38px; }
.showcase-storage { --tilt:9deg; padding-bottom:15px; }
.showcase-display { --tilt:-5deg; }
.showcase-power { --tilt:10deg; padding-bottom:15px; }
.showcase-audio { --tilt:-9deg; padding-bottom:38px; }
.showcase-item:hover .showcase-visual,.showcase-item:focus-visible .showcase-visual { transform:translateY(-9px) rotate(0deg); }
.showcase-item:hover .showcase-label strong,.showcase-item:focus-visible .showcase-label strong { color:var(--blue); }
.showcase-item:hover .showcase-label .icon,.showcase-item:focus-visible .showcase-label .icon { color:var(--blue); transform:translateX(3px); }
.brand-hero-notes { display:flex; justify-content:center; align-items:center; gap:20px; padding-block:17px 23px; }
.brand-hero-notes>span { display:flex; align-items:center; gap:7px; color:#72899c; font-size:9px; }
.brand-hero-notes .icon { color:var(--blue); width:13px; height:13px; }
.brand-hero-notes>i { width:3px; height:3px; border-radius:50%; background:#acc2d3; }
@keyframes hero-copy-in {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes hero-product-in {
  from { opacity:0; transform:translateY(28px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes hero-product-drift {
  0%,100% { transform:translateY(0); }
  45% { transform:translateY(-7px); }
}
.home-routes { background:#fff; border-bottom:1px solid var(--line); }
.home-route-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.hero-route {
  position:relative;
  display:flex;
  align-items:center;
  gap:17px;
  min-height:95px;
  padding:20px 25px;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:var(--navy);
  text-align:left;
}
.hero-route:first-child { border-left:1px solid var(--line); }
.hero-route>.icon:first-child { width:26px; height:26px; stroke-width:1.35; color:var(--blue); }
.hero-route>.icon:last-child { width:17px; height:17px; margin-left:auto; color:#8aa1b4; }
.hero-route>div { min-width:0; }
.hero-route strong { font-size:13px; line-height:1.6; font-weight:600; display:block; }
.hero-route small { display:block; font-size:10px; line-height:1.8; color:var(--muted); margin-top:3px; }
.hero-route:after { content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .22s; }
.hero-route:hover,.hero-route.is-selected { background:#f4f8fc; }
.hero-route:hover:after,.hero-route.is-selected:after { transform:scaleX(1); }
.hero-route:hover>.icon:last-child { transform:translateX(3px); color:var(--blue); }
.collection-section { scroll-margin-top:100px; }
.collection-section .scene-selection-bar { margin-bottom:29px; padding-top:0; }
.home-collection[data-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; }
.home-collection[data-count="4"] .product-name h3 { font-size:14px; min-height:44px; }
.home-collection[data-count="4"] .product-brief { font-size:11px; min-height:40px; }
.home-collection[data-count="4"] .card-detail { font-size:9px; }
@media(min-width:1500px) {
  .brand-hero-content { padding-top:48px; }
  .brand-hero h1 { font-size:60px; }
  .product-stage { max-width:1260px; height:302px; }
}
@media(max-width:1180px) {
  .brand-hero h1 { font-size:50px; }
  .product-stage { height:259px; gap:8px; }
  .showcase-label strong { font-size:10px; }
  .showcase-label>span { font-size:8px; }
  .hero-route { gap:13px; padding:18px 19px; min-height:88px; }
  .hero-route strong { font-size:12px; }
  .hero-route small { font-size:9px; }
  .home-collection[data-count="4"] { gap:20px; }
  .home-collection[data-count="4"] .product-name h3 { font-size:13px; }
  .home-collection[data-count="4"] .card-detail { font-size:8px; }
}
@media(max-width:980px) {
  .brand-hero h1 { font-size:46px; letter-spacing:-1.7px; }
  .brand-hero-content { padding-top:34px; }
  .product-stage { height:227px; gap:4px; }
  .showcase-memory,.showcase-audio { padding-bottom:28px; }
  .showcase-storage,.showcase-power { padding-bottom:12px; }
  .showcase-label strong { font-size:9px; gap:4px; }
  .showcase-label .icon { width:10px; height:10px; }
  .showcase-label>span { font-size:7px; }
  .brand-hero-notes { padding-top:16px; }
  .hero-route { padding:17px 14px; gap:10px; min-height:84px; }
  .hero-route>.icon:first-child { width:22px; height:22px; }
  .hero-route>.icon:last-child { width:13px; height:13px; }
  .hero-route strong { font-size:11px; }
  .hero-route small { font-size:8px; }
  .home-collection[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:29px 23px; }
  .home-collection[data-count="4"] .product-name h3 { font-size:15px; min-height:24px; }
  .home-collection[data-count="4"] .product-brief { font-size:12px; }
  .home-collection[data-count="4"] .card-detail { font-size:10px; }
}
@media(max-width:680px) {
  .brand-hero-content { padding-top:30px; }
  .brand-hero .eyebrow { font-size:8px; letter-spacing:1.2px; margin-bottom:15px; }
  .brand-hero h1 { font-size:39px; line-height:1.15; letter-spacing:-1.5px; }
  .brand-hero-content>p:not(.eyebrow) { max-width:380px; font-size:11px; line-height:1.9; margin-top:15px; }
  .brand-hero-actions { margin-top:21px; gap:10px; }
  .brand-hero-actions .btn { min-height:44px; font-size:11px; padding:12px 16px; gap:12px; }
  .product-stage { grid-template-columns:1fr 1.35fr 1fr; height:auto; min-height:190px; max-width:520px; margin-top:14px; gap:0; }
  .product-stage-orbit { bottom:30px; height:85px; left:0; right:0; }
  .product-stage-orbit:after { width:4px; height:4px; bottom:9px; }
  .showcase-memory,.showcase-audio { display:none; }
  .showcase-storage,.showcase-power { padding-bottom:17px; }
  .showcase-visual,.showcase-display .showcase-visual { width:calc(100% + 12px); margin-left:-6px; margin-right:0; }
  .showcase-label { padding-top:3px; margin-top:0; }
  .showcase-label>span { display:none; }
  .showcase-label strong { font-size:9px; gap:3px; }
  .showcase-label .icon { width:9px; height:9px; }
  .brand-hero-notes { padding-block:18px 20px; gap:12px; }
  .brand-hero-notes>span { font-size:8px; gap:5px; }
  .brand-hero-notes .icon { width:11px; height:11px; }
  .home-route-rail { width:100%; }
  .hero-route { min-height:95px; padding:15px 9px 13px; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; }
  .hero-route:first-child { border-left:0; }
  .hero-route:last-child { border-right:0; }
  .hero-route>.icon:first-child { width:22px; height:22px; }
  .hero-route>.icon:last-child,.hero-route small { display:none; }
  .hero-route strong { font-size:10px; line-height:1.6; }
  .collection-section { scroll-margin-top:90px; }
  .collection-section .scene-selection-bar { margin-bottom:23px; row-gap:11px; }
  .home-collection[data-count="4"] { gap:26px 15px; }
  .home-collection[data-count="4"] .product-name h3 { font-size:12px; min-height:39px; }
  .home-collection[data-count="4"] .product-brief { font-size:10px; min-height:55px; }
  .home-collection[data-count="4"] .card-detail { font-size:8px; }
}
@media(max-width:370px) {
  .brand-hero-content { padding-top:26px; }
  .brand-hero h1 { font-size:33px; letter-spacing:-1.2px; }
  .brand-hero .eyebrow { font-size:7px; letter-spacing:1px; margin-bottom:14px; }
  .brand-hero-content>p:not(.eyebrow) { font-size:10px; }
  .brand-hero-actions .btn { font-size:10px; padding-inline:12px; gap:8px; }
  .product-stage { min-height:167px; margin-top:13px; }
  .showcase-label strong { font-size:8px; }
  .showcase-label .icon { display:none; }
  .brand-hero-notes { gap:9px; }
  .hero-route { padding-inline:8px; }
  .hero-route strong { font-size:9px; }
  .home-collection[data-count="4"] { grid-template-columns:minmax(0,1fr); }
  .home-collection[data-count="4"] .product-name h3 { font-size:16px; min-height:0; }
  .home-collection[data-count="4"] .product-brief { font-size:12px; min-height:0; }
  .home-collection[data-count="4"] .card-detail { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-hero .eyebrow,.brand-hero h1,.brand-hero-content>p:not(.eyebrow),.brand-hero-actions,.showcase-item,.showcase-visual img { animation:none; }
  .showcase-visual,.showcase-label .icon,.hero-route:after { transition:none; }
  .showcase-item:hover .showcase-visual,.showcase-item:focus-visible .showcase-visual { transform:rotate(var(--tilt)); }
}