/* HL3C v48 - dark banner hero + one-row colorful generated photo collage */
:root{
  --hl3c-ink:#eef7ff;
  --hl3c-deep:#030711;
  --hl3c-deep2:#081324;
  --hl3c-blue:#4c7dff;
  --hl3c-cyan:#66f2e7;
  --hl3c-pink:#ff78d4;
  --hl3c-yellow:#ffe96a;
  --hl3c-orange:#f08a4b;
}

body{background:#07111f!important;color:#e8f1ff!important;}
.site-header{
  background:rgba(4,9,18,.84)!important;
  backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.28)!important;
}
.site-header .brand{color:#fff!important;font-weight:1000!important;letter-spacing:-.045em!important;}
.site-header .brand::first-letter{color:#6f8fff!important;}
.top-nav a{color:rgba(255,255,255,.84)!important;font-weight:950!important;}
.top-nav a:hover{color:#7cf6ec!important;}

/* HERO：banner.png 置入框內、深色黑化，不裁切 */
.hl3c-hero-collage.brand-v4-hero{
  position:relative!important;
  overflow:hidden!important;
  display:block!important;
  min-height:calc(100vh - 74px)!important;
  padding:92px 28px 74px!important;
  background:
    radial-gradient(circle at 15% 20%, rgba(76,125,255,.28), transparent 32%),
    radial-gradient(circle at 85% 22%, rgba(102,242,231,.20), transparent 34%),
    radial-gradient(circle at 48% 85%, rgba(255,120,212,.13), transparent 38%),
    linear-gradient(180deg,#02050c 0%,#050b17 52%,#07111f 100%)!important;
  color:#fff!important;
  isolation:isolate;
}
.hl3c-hero-collage.brand-v4-hero::before{
  content:""!important;
  position:absolute!important;inset:18px 26px 24px!important;z-index:0!important;pointer-events:none!important;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.82)),
    url('../img/banner.png')!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
  border-radius:34px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 -110px 150px rgba(0,0,0,.65)!important;
  opacity:.92!important;
  filter:saturate(.92) contrast(1.1) brightness(.62)!important;
  mask-image:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.94) 72%, rgba(0,0,0,.25) 100%)!important;
}
.hl3c-hero-collage.brand-v4-hero::after{
  content:""!important;
  position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 46%, rgba(102,242,231,.14) 50%, rgba(255,255,255,.08) 54%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
  transform:translateX(-115%);
  opacity:.28;
  mix-blend-mode:screen;
  animation:hl3cLightMarquee 14s ease-in-out infinite;
}
.hl3c-hero-collage.brand-v4-hero:hover::after{opacity:.46;animation-duration:8.5s;}
@keyframes hl3cLightMarquee{
  0%,18%{transform:translateX(-120%);opacity:0;}
  36%{opacity:.34;}
  58%{transform:translateX(120%);opacity:.20;}
  100%{transform:translateX(120%);opacity:0;}
}
.hl3c-hero-line{opacity:.34!important;border-color:rgba(255,255,255,.18)!important;z-index:2!important;}
.hl3c-line-a{width:920px;height:390px;left:-140px;top:72px;transform:rotate(-8deg);}
.hl3c-line-b{width:820px;height:360px;right:-150px;bottom:150px;transform:rotate(9deg);}
.hl3c-hero-dot{z-index:2!important;background:rgba(102,242,231,.14)!important;box-shadow:0 0 0 18px rgba(102,242,231,.05), inset 0 0 0 18px rgba(76,125,255,.22)!important;}

/* 標題：黑背景下加強識別與大氣寬版 */
.hl3c-hero-copy{
  position:relative!important;z-index:4!important;
  max-width:1420px!important;width:100%!important;margin:0 auto!important;text-align:center!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
}
.hl3c-hero-copy .brand-v4-kicker{
  color:#9dfff5!important;font-size:15px!important;letter-spacing:.28em!important;font-weight:1000!important;
  margin-bottom:20px!important;text-shadow:0 0 26px rgba(102,242,231,.60)!important;
}
.hl3c-hero-copy .brand-v4-kicker::before{background:#7af7ed!important;box-shadow:0 0 20px rgba(102,242,231,.80)!important;}
.hl3c-hero-copy h1{
  width:min(1320px,100%)!important;max-width:1320px!important;margin:0 auto!important;
  color:#fff!important;font-size:clamp(50px,6.2vw,108px)!important;line-height:1.02!important;letter-spacing:-.065em!important;font-weight:1000!important;
  text-shadow:0 18px 46px rgba(0,0,0,.78), 0 0 1px rgba(255,255,255,.75)!important;
}
.hl3c-hero-copy h1 span{
  display:block!important;margin-top:10px!important;
  font-size:clamp(35px,4.35vw,74px)!important;line-height:1.06!important;letter-spacing:-.055em!important;
  background:linear-gradient(90deg,#ffffff 0%,#dffcff 42%,#ffe96a 78%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
.hl3c-hero-copy p{
  max-width:1080px!important;margin:28px auto 0!important;color:rgba(232,241,255,.92)!important;
  font-size:18px!important;line-height:2!important;font-weight:850!important;text-shadow:0 8px 26px rgba(0,0,0,.66)!important;
}
.hl3c-hero-copy p::after{content:"";display:block;width:170px;height:3px;border-radius:999px;margin:24px auto 0;background:linear-gradient(90deg,transparent,#66f2e7,#ffe96a,#ff78d4,transparent);}

.brand-v4-search{
  position:relative!important;z-index:5!important;margin:30px auto 0!important;width:min(920px,100%)!important;
  background:rgba(6,13,26,.64)!important;border:1px solid rgba(255,255,255,.20)!important;border-radius:28px!important;
  padding:10px!important;box-shadow:0 26px 72px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06)!important;backdrop-filter:blur(18px)!important;
}
.brand-v4-search input{min-height:58px!important;border-radius:18px!important;background:rgba(255,255,255,.92)!important;color:#07111f!important;font-size:17px!important;font-weight:850!important;border:0!important;padding-left:24px!important;}
.brand-v4-search input::placeholder{color:#667085!important;font-weight:800!important;}
.brand-v4-search .btn{min-height:58px!important;border-radius:18px!important;background:linear-gradient(135deg,#66f2e7,#4c7dff)!important;color:#fff!important;font-weight:1000!important;box-shadow:0 16px 34px rgba(76,125,255,.36)!important;}
.brand-v4-actions{justify-content:center!important;margin-top:24px!important;gap:18px!important;}
.brand-v4-actions .btn{min-height:52px!important;border-radius:999px!important;padding:0 28px!important;font-weight:1000!important;}
.brand-v4-actions .btn:first-child{background:linear-gradient(135deg,#ffb45d,#ef7a49)!important;color:#fff!important;box-shadow:0 18px 38px rgba(240,138,75,.34)!important;}
.btn.secondary,.brand-v4-actions .secondary{background:rgba(255,255,255,.13)!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important;box-shadow:0 18px 38px rgba(0,0,0,.22)!important;backdrop-filter:blur(12px)!important;}
.hl3c-hero-tags{display:flex!important;justify-content:center!important;flex-wrap:wrap!important;gap:12px!important;margin-top:24px!important;}
.hl3c-hero-tags span{display:inline-flex!important;align-items:center!important;padding:10px 17px!important;border-radius:999px!important;background:rgba(255,255,255,.13)!important;color:#fff!important;border:1px solid rgba(255,255,255,.23)!important;font-size:14px!important;font-weight:1000!important;box-shadow:0 10px 28px rgba(0,0,0,.18)!important;backdrop-filter:blur(10px)!important;}
.hl3c-hero-tags span::before{content:"";width:7px;height:7px;border-radius:50%;background:#ffe96a;margin-right:8px;box-shadow:0 0 16px rgba(255,233,106,.75);}

/* 拼貼：一行照片卡片，參考提供的斜放卡片方式 */
.hl3c-hero-rental-wall{
  position:relative!important;z-index:4!important;width:min(1380px,100%)!important;max-width:1380px!important;
  min-height:auto!important;margin:46px auto 0!important;overflow:visible!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:clamp(8px,1.4vw,22px)!important;
  padding:20px 20px 36px!important;
}
.hl3c-motion-ring,.hl3c-motion-streak{display:none!important;}
.hl3c-hero-rental-wall::before{content:""!important;position:absolute!important;left:50%!important;bottom:16px!important;width:min(1120px,92%)!important;height:94px!important;transform:translateX(-50%)!important;background:radial-gradient(ellipse at center,rgba(255,255,255,.35),rgba(102,242,231,.12) 38%,transparent 72%)!important;filter:blur(18px)!important;pointer-events:none!important;z-index:0!important;}
.hl3c-rental-card,
.hl3c-rental-tv,.hl3c-rental-projector,.hl3c-rental-screen,.hl3c-rental-vc,.hl3c-rental-ai,.hl3c-rental-ad{
  position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:clamp(150px,15vw,232px)!important;height:clamp(118px,12vw,185px)!important;
  display:block!important;overflow:visible!important;text-decoration:none!important;
  border-radius:22px!important;background:#fff!important;padding:8px!important;
  box-shadow:0 22px 50px rgba(0,0,0,.36),0 0 0 1px rgba(255,255,255,.86) inset!important;
  transition:transform .58s cubic-bezier(.18,.85,.22,1),box-shadow .58s ease,filter .58s ease!important;
  will-change:transform!important;animation:hl3cCardDrift 8.8s ease-in-out infinite alternate!important;z-index:3!important;
}
.hl3c-rental-tv{width:clamp(220px,22vw,340px)!important;height:clamp(150px,15vw,230px)!important;transform:rotate(0deg)!important;z-index:8!important;order:3;}
.hl3c-rental-projector{transform:rotate(-5deg)!important;order:1;z-index:4!important;}
.hl3c-rental-screen{transform:rotate(5deg)!important;order:6;z-index:4!important;}
.hl3c-rental-vc{transform:rotate(3deg)!important;order:2;z-index:5!important;}
.hl3c-rental-ad{transform:rotate(-2deg)!important;order:4;z-index:6!important;}
.hl3c-rental-ai{transform:rotate(4deg)!important;order:5;z-index:5!important;}
.hl3c-rental-card:nth-of-type(2n){animation-duration:10.4s!important;animation-delay:-2s!important;}
.hl3c-rental-card:nth-of-type(3n){animation-duration:11.6s!important;animation-delay:-3.6s!important;}
@keyframes hl3cCardDrift{from{translate:0 0;}to{translate:0 -8px;}}
.hl3c-rental-card img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:16px!important;filter:saturate(1.18) contrast(1.03) brightness(1.03)!important;transition:transform .6s cubic-bezier(.18,.85,.22,1),filter .6s ease!important;}
.hl3c-rental-card::before{content:""!important;position:absolute!important;inset:8px!important;border-radius:16px!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(180deg,rgba(255,255,255,.26),transparent 42%,rgba(0,0,0,.05))!important;}
.hl3c-rental-card span{position:absolute!important;left:18px!important;top:16px!important;bottom:auto!important;right:auto!important;z-index:6!important;display:inline-flex!important;align-items:center!important;max-width:calc(100% - 36px)!important;padding:6px 11px!important;border-radius:999px!important;background:rgba(255,255,255,.90)!important;color:#07111f!important;border:1px solid rgba(15,23,42,.10)!important;box-shadow:0 9px 20px rgba(15,23,42,.15)!important;font-size:12px!important;line-height:1.2!important;font-weight:1000!important;white-space:normal!important;backdrop-filter:blur(10px)!important;pointer-events:none!important;}
.hl3c-rental-card::after{content:attr(data-tip);position:absolute!important;left:50%!important;top:calc(100% + 12px)!important;transform:translateX(-50%) translateY(6px)!important;min-width:max-content!important;max-width:280px!important;padding:9px 14px!important;border-radius:999px!important;background:rgba(3,7,17,.96)!important;color:#fff!important;font-size:13px!important;font-weight:950!important;line-height:1.3!important;opacity:0!important;pointer-events:none!important;z-index:300!important;box-shadow:0 12px 24px rgba(0,0,0,.34)!important;transition:opacity .25s ease,transform .25s ease!important;}
.hl3c-rental-card:hover{z-index:220!important;transform:translateY(-22px) scale(1.055) rotate(0deg)!important;box-shadow:0 38px 92px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.95) inset!important;}
.hl3c-rental-card:hover img{transform:scale(1.025)!important;filter:saturate(1.26) contrast(1.05) brightness(1.08)!important;}
.hl3c-rental-card:hover::after{opacity:1!important;transform:translateX(-50%) translateY(0)!important;}

/* 下方整站顏色：深色科技，但文字清楚 */
.brand-v4-section{background:linear-gradient(180deg,#07111f 0%,#0b1828 100%)!important;color:#e8f1ff!important;}
.brand-v4-catalog{background:linear-gradient(180deg,#081426 0%,#0b1828 100%)!important;}
.brand-v4-section-head span{color:#7cf6ec!important;font-weight:1000!important;letter-spacing:.16em!important;}
.brand-v4-section-head h2{color:#fff!important;font-weight:1000!important;text-shadow:0 10px 30px rgba(0,0,0,.25)!important;}
.brand-v4-section-head p{color:rgba(232,241,255,.74)!important;font-weight:780!important;}
.brand-v4-textlink{color:#9dfff5!important;font-weight:950!important;}
.brand-v4-catalog-card,.brand-v4-photo-card,.brand-v4-product-card,.brand-v4-trust-card{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:#e8f1ff!important;box-shadow:0 20px 52px rgba(0,0,0,.22)!important;backdrop-filter:blur(14px)!important;}
.brand-v4-catalog-card h3,.brand-v4-product-card h3,.brand-v4-trust-card h2{color:#fff!important;}
.brand-v4-catalog-card p,.brand-v4-product-card p,.brand-v4-trust-card p,.brand-v4-product-card small{color:rgba(232,241,255,.72)!important;}
.brand-v4-catalog-card small,.brand-v4-catalog-icon{color:#07111f!important;background:#ffe96a!important;}
.brand-v4-scenarios{background:linear-gradient(135deg,#081426 0%,#102c35 52%,#151833 100%)!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.12)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;}
.brand-v4-scenario-card{background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:0 20px 52px rgba(0,0,0,.22)!important;color:#fff!important;backdrop-filter:blur(14px)!important;}
.brand-v4-scenario-card h3{color:#fff!important;font-weight:1000!important;}
.brand-v4-scenario-card a{background:rgba(255,255,255,.12)!important;color:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.20)!important;font-weight:900!important;}
.brand-v4-scenario-card a:hover{background:#ffe96a!important;color:#07111f!important;}
.brand-v4-featured{background:linear-gradient(180deg,#0b1828 0%,#07111f 100%)!important;}
.brand-v4-product-body .btn,.brand-v4-cta .btn{background:linear-gradient(135deg,#66f2e7,#4c7dff)!important;color:#fff!important;}
.brand-v4-trust{background:linear-gradient(135deg,#07111f 0%,#102c35 100%)!important;}
.brand-v4-cta{background:linear-gradient(135deg,#121b2b 0%,#173036 100%)!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.12)!important;}
.brand-v4-cta h2{color:#fff!important;}
.brand-v4-cta p{color:rgba(232,241,255,.72)!important;}
.site-footer{background:linear-gradient(135deg,#050a14 0%,#0c1a2c 54%,#102b31 100%)!important;color:rgba(232,241,255,.78)!important;border-top:1px solid rgba(255,255,255,.12)!important;}
.footer-v6 h2,.footer-v6 h3,.footer-v6 strong{color:#fff!important;}
.footer-v6 p,.footer-v6 li,.footer-v6 a,.footer-v6-bottom{color:rgba(232,241,255,.74)!important;}
.footer-v6 a:hover{color:#7cf6ec!important;}
.footer-v6-kicker{color:#7cf6ec!important;font-weight:1000!important;}
.footer-v6-service-area{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 16px 36px rgba(0,0,0,.18)!important;}
.footer-v6-bottom{border-top:1px solid rgba(255,255,255,.12)!important;}

@media (max-width:1050px){
  .hl3c-hero-collage.brand-v4-hero{padding:74px 20px 58px!important;}
  .hl3c-hero-copy h1{font-size:clamp(48px,8.5vw,86px)!important;}
  .hl3c-hero-copy h1 span{font-size:clamp(34px,6vw,58px)!important;}
  .hl3c-hero-rental-wall{flex-wrap:wrap!important;max-width:820px!important;gap:14px!important;margin-top:36px!important;}
  .hl3c-rental-card,.hl3c-rental-tv,.hl3c-rental-projector,.hl3c-rental-screen,.hl3c-rental-vc,.hl3c-rental-ai,.hl3c-rental-ad{width:220px!important;height:160px!important;}
  .hl3c-rental-tv{width:300px!important;height:205px!important;}
}
@media (max-width:720px){
  .site-header{background:rgba(4,9,18,.92)!important;}
  .hl3c-hero-collage.brand-v4-hero{padding:54px 16px 44px!important;min-height:auto!important;}
  .hl3c-hero-collage.brand-v4-hero::before{inset:10px!important;border-radius:22px!important;background-size:cover!important;}
  .hl3c-hero-copy h1{font-size:42px!important;line-height:1.08!important;letter-spacing:-.055em!important;}
  .hl3c-hero-copy h1 span{font-size:.76em!important;line-height:1.13!important;}
  .hl3c-hero-copy p{font-size:15px!important;line-height:1.85!important;}
  .brand-v4-search{display:block!important;margin-top:24px!important;}
  .brand-v4-search input{width:100%!important;margin-bottom:8px!important;}
  .brand-v4-search .btn{width:100%!important;}
  .hl3c-hero-tags span{font-size:12px!important;padding:8px 12px!important;}
  .hl3c-hero-rental-wall{display:flex!important;flex-wrap:wrap!important;gap:12px!important;padding:10px 0 34px!important;}
  .hl3c-rental-card,.hl3c-rental-tv,.hl3c-rental-projector,.hl3c-rental-screen,.hl3c-rental-vc,.hl3c-rental-ai,.hl3c-rental-ad{width:calc(50% - 8px)!important;height:124px!important;border-radius:18px!important;padding:6px!important;transform:rotate(0deg)!important;order:initial!important;}
  .hl3c-rental-tv{width:100%!important;height:170px!important;}
  .hl3c-rental-card img{border-radius:13px!important;}
  .hl3c-rental-card span{font-size:10px!important;padding:6px 8px!important;left:12px!important;top:12px!important;}
}