/* =========================================================================
   LUZGLO — video hero theme (loaded after wokine.css; replaces theme-3d.css)
   Same dark glass system as the 3D version, with an AI video loop as the
   hero background instead of Three.js. theme-3d.css is kept for switching back.
   ========================================================================= */

/* ---------- 1. Dark tokens (flip the whole page) ---------- */
:root{
  --bg:#0A0A0F;
  --bg-2:rgba(255,255,255,.045);
  --bg-3:rgba(255,255,255,.085);
  --ink:#F3F1EC;
  --ink-2:#E2DFD8;
  --muted:rgba(243,241,236,.66);
  --soft:rgba(243,241,236,.40);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.24);
  --on-dark:#F3F1EC;
  --on-dark-muted:rgba(243,241,236,.68);
  --on-dark-soft:rgba(243,241,236,.42);
  --line-dark:rgba(255,255,255,.12);
  --gold:#C9A36A;
  --gold-deep:#D9B67E;
  --magenta:#E85CFF;
  --cyan:#45E0FF;
  --iri:linear-gradient(100deg,#E9CF9E 0%,#C9A36A 30%,#E7A0F2 62%,#8FE3FF 100%);
  --iri-dot:conic-gradient(from 200deg,#C9A36A,#E85CFF,#45E0FF,#C9A36A);
  --glass:linear-gradient(140deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  --glass-border:rgba(255,255,255,.12);
  --glass-shadow:0 30px 70px -30px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.12);
}
html{background:#0A0A0F;color-scheme:dark}
body{background:#0A0A0F;color:var(--ink)}
/* faint fixed aurora so the glass surfaces have something to blur */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 85% 15%,rgba(232,92,255,.07),transparent 70%),
             radial-gradient(38% 34% at 10% 60%,rgba(69,224,255,.05),transparent 70%),
             radial-gradient(45% 40% at 60% 100%,rgba(201,163,106,.07),transparent 70%)}
::selection{background:var(--gold);color:#0A0A0F}

/* ---------- 2. Shared glass language ---------- */
.glass-panel,.reel-card,.service,.price,.steps li,.brief-form,.about-points li,.timing-note,.about > .frame,.contact > .frame{
  background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--glass-shadow)}
/* hairline iridescent edge on the larger panels */
.glass-panel,.about > .frame,.contact > .frame,.price.featured,.reel-card{position:relative}
.glass-panel::after,.about > .frame::after,.contact > .frame::after,.price.featured::after,.reel-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(201,163,106,.55),rgba(232,92,255,.35) 45%,rgba(69,224,255,.35) 75%,rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* labels: iridescent dot */
.kicker::before,.mini-label::before,.solution-label::before,.price-tag::before,.reel-label::before,.section-index::before,.honesty-note::before{background:var(--iri-dot)}

/* buttons */
.btn-dark{background:var(--ink);color:#0A0A0F;border-color:var(--ink)}
.btn-dark:hover{background:var(--gold);border-color:var(--gold);color:#0A0A0F}
.btn-outline,.btn-line{border-color:var(--line-strong);color:var(--ink)}
.btn-outline:hover,.btn-line:hover{background:var(--ink);border-color:var(--ink);color:#0A0A0F}
.btn-iri{background:var(--iri);background-size:200% 100%;color:#0A0A0F;border:0;font-weight:600;box-shadow:0 18px 40px -16px rgba(232,92,255,.55),0 0 0 1px rgba(255,255,255,.18) inset;transition:background-position .8s var(--ease),transform .3s var(--ease),box-shadow .3s}
.btn-iri:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 22px 46px -16px rgba(69,224,255,.55),0 0 0 1px rgba(255,255,255,.24) inset}
.link-arrow{background:linear-gradient(90deg,var(--gold),var(--magenta)) left bottom/100% 1px no-repeat}

/* top bar + dock on the dark canvas */
.topbar{z-index:40}
.logo,.logo-lg{color:var(--ink)}
.language-picker{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.language-picker button.is-active{background:rgba(255,255,255,.14);color:var(--ink);box-shadow:none}
.dock{background:rgba(22,22,30,.62);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.dock-chat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.dock-chat:hover{background:rgba(255,255,255,.14)}
.dock-chat-icon{background:var(--iri);color:#0A0A0F}

/* sections that were light grey bands become faint glass bands */
.industries,.process{background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border-block:1px solid var(--line)}
:is(.industries,.process) h2 em{background:rgba(255,255,255,.08)}
h2 em,.statement-text mark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.marquee-track span{color:transparent;-webkit-text-stroke:1px rgba(243,241,236,.28)}
.band{border-color:var(--line)}

/* cards & components */
.service:hover{background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.04))}
.reel-card{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02))}
.reel-play{background:var(--iri);color:#0A0A0F}
.work-shot{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.solution-media{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.8)}
.solution-points li,.honesty-note{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.price.featured{background:linear-gradient(160deg,rgba(201,163,106,.22),rgba(232,92,255,.08) 55%,rgba(255,255,255,.03));color:var(--ink)}
.price.featured .price-tag,.price.featured .link-arrow{color:var(--ink)}
.price.featured p{color:var(--muted)}
.steps li{background:var(--glass)}
.steps .num{color:transparent;-webkit-text-stroke:1px rgba(243,241,236,.35)}
.brief-form select,.brief-form textarea,.brief-form input{background:rgba(10,10,15,.65);border-color:var(--line);color:var(--ink)}
.brief-form select{background-color:rgba(10,10,15,.65);background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 17px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.brief-form select option{background:#14141c;color:var(--ink)}
.faq-list{border-top-color:var(--line-strong)}
.payment-table{border-top-color:var(--line-strong)}
.about > .frame,.contact > .frame{background:radial-gradient(70% 60% at 90% 0%,rgba(232,92,255,.12),transparent 70%),radial-gradient(60% 60% at 0% 100%,rgba(69,224,255,.08),transparent 70%),var(--glass)}
.about h2 em,.contact h2 em{background:rgba(255,255,255,.1)}
.about-points .num{color:var(--gold)}
.row-arrow{border-color:var(--line-strong)}
.sector-list a:hover .row-arrow{background:var(--ink);color:#0A0A0F}
.site-footer{border-top:1px solid var(--line)}

/* ---------- 3. 3D hero ---------- */
.hero.hero-3d{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,15vh,170px) 0 clamp(80px,10vh,120px);overflow:hidden;isolation:isolate;background:#0A0A0F}
.hero-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--ease)}
.hero-3d.is-3d-ready .hero-canvas{opacity:1}
.hero-3d.is-fallback .hero-canvas{display:none}
/* static fallback: deep gradient + still light spots (also visible while the 3D loads) */
.hero-fallback{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(30% 38% at 70% 45%,rgba(232,92,255,.22),transparent 70%),
             radial-gradient(26% 32% at 78% 62%,rgba(69,224,255,.18),transparent 70%),
             radial-gradient(24% 28% at 62% 30%,rgba(201,163,106,.22),transparent 70%),
             linear-gradient(160deg,#121220 0%,#0A0A0F 55%,#07070B 100%)}
/* light flowing across */
.hero-streaks{position:absolute;inset:-20% -10%;mix-blend-mode:screen;opacity:.8}
.hero-streaks i{position:absolute;left:-40%;width:90%;height:2px;border-radius:2px;transform:rotate(-18deg);filter:blur(.6px)}
.hero-streaks i:nth-child(1){top:58%;background:linear-gradient(90deg,transparent,rgba(232,92,255,.0) 10%,rgba(232,92,255,.85) 55%,transparent)}
.hero-streaks i:nth-child(2){top:66%;height:1px;background:linear-gradient(90deg,transparent,rgba(69,224,255,.9) 60%,transparent)}
.hero-streaks i:nth-child(3){top:44%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,163,106,.9) 50%,transparent)}
/* keep the copy legible and blend into the next section */
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,15,.88) 0%,rgba(10,10,15,.55) 34%,rgba(10,10,15,0) 58%),linear-gradient(180deg,rgba(10,10,15,.55) 0%,transparent 18%,transparent 80%,#0A0A0F 100%)}

.hero-3d .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;min-height:min(70vh,720px)}
.hero-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;max-width:640px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--iri-dot);box-shadow:0 0 14px rgba(232,92,255,.6)}
.hero-3d .hero-title{display:block;margin-top:28px;font-size:clamp(2.6rem,1rem + 4.2vw,6.25rem);line-height:1.12;font-weight:500;letter-spacing:-.01em;row-gap:0}
:lang(zh-HK) .hero-3d .hero-title,:lang(zh-CN) .hero-3d .hero-title{letter-spacing:.02em}
.hero-3d .hero-title .ln{display:block;font-size:inherit;line-height:inherit;white-space:nowrap;padding:0;justify-self:auto;letter-spacing:inherit}
:lang(en) .hero-3d .hero-title{font-size:clamp(2.4rem,1rem + 3.4vw,5.25rem)}
:lang(en) .hero-3d .hero-title .ln{white-space:normal}
.hero-3d .hero-title em{font-style:normal;background:var(--iri);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(201,163,106,.35))}
.hero-3d .hero-intro{margin-top:26px;max-width:30em;font-size:var(--fs-lead);line-height:1.8;color:var(--muted)}
.hero-3d .hero-actions{margin-top:40px;display:flex}
.hero-3d .hero-note{position:static;margin-top:36px;font-size:13px;color:var(--soft)}

/* floating glass cards — real copy only, tilt with the pointer */
.hero-cards{position:relative;align-self:stretch;min-height:520px}
.glass-card{position:absolute;display:block;padding:16px;border-radius:18px;color:var(--ink);background:linear-gradient(140deg,rgba(30,30,42,.72),rgba(14,14,20,.62));border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 30px 60px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.22)}
.tilt{--d:1;transform:perspective(900px) rotateX(calc(var(--my,0) * -7deg * var(--d))) rotateY(calc(var(--mx,0) * 9deg * var(--d))) translate3d(calc(var(--mx,0) * 14px * var(--d)),calc(var(--my,0) * 10px * var(--d)),0);transform-style:preserve-3d;will-change:transform}
.card-demo{--d:1.25;top:2%;right:2%;width:min(290px,42%)}
.card-demo img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top;border-radius:10px;margin-bottom:12px}
.card-demo strong{display:block;margin-top:4px;font-size:16px;font-weight:500}
.card-flag{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.card-flag::before{content:"";width:5px;height:5px;border-radius:50%;border:1px solid var(--gold)}
.card-price{--d:.8;bottom:6%;left:0;width:min(250px,40%)}
.card-price p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted)}
.card-sectors{--d:1;bottom:20%;right:0;width:min(260px,42%)}
.card-sectors ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.card-sectors li{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px}
.card-sectors li.more{background:none;padding-left:2px;color:var(--muted)}
.card-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--iri-dot)}
a.glass-card:hover{border-color:rgba(255,255,255,.3)}

/* ---------- 4. Client reviews (honest placeholder) ---------- */
.reviews{display:flex;justify-content:center}
.reviews-card{width:100%;max-width:880px;margin-inline:auto;padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);border-radius:var(--radius-lg);text-align:center;display:flex;flex-direction:column;align-items:center}
.reviews-label{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-caption);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reviews-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--iri-dot)}
.reviews-title{margin-top:0}
.reviews-body{margin-top:24px;max-width:36em;font-size:var(--fs-lead);line-height:1.85;color:var(--muted)}

/* ---------- 5. Motion (all off for reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-streaks i{animation:streak 9s cubic-bezier(.5,0,.3,1) infinite}
  .hero-streaks i:nth-child(2){animation-duration:11s;animation-delay:-4s}
  .hero-streaks i:nth-child(3){animation-duration:13s;animation-delay:-8s}
  .hero-3d .hero-title em{animation:shimmer 6s ease-in-out infinite}
  .glass-card{animation:cardFloat 7s ease-in-out infinite}
  .card-price{animation-delay:-2.5s}
  .card-sectors{animation-delay:-5s}
  .hero-copy > *{animation:heroIn 1.1s var(--ease) both}
  .hero-copy > :nth-child(2){animation-delay:.12s}
  .hero-copy > :nth-child(3){animation-delay:.24s}
  .hero-copy > :nth-child(4){animation-delay:.36s}
}
@keyframes streak{0%{translate:-30% 0;opacity:0}15%{opacity:1}60%{opacity:.9}100%{translate:160% 0;opacity:0}}
@keyframes shimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---------- 6. Phone: 3D becomes a 50% background layer, copy on top ---------- */
@media (max-width:760px){
  .hero.hero-3d{min-height:auto;padding:120px 0 64px;justify-content:flex-start}
  .hero-3d .hero-canvas{opacity:0}
  .hero-3d.is-3d-ready .hero-canvas{opacity:.5}
  .hero-shade{background:linear-gradient(180deg,rgba(10,10,15,.35) 0%,rgba(10,10,15,.25) 40%,rgba(10,10,15,.75) 75%,#0A0A0F 100%)}
  .hero-3d .hero-inner{grid-template-columns:1fr;min-height:0;gap:40px}
  .hero-3d .hero-title{font-size:min(10.2vw,3rem)}
  :lang(en) .hero-3d .hero-title{font-size:clamp(2.2rem,10vw,3rem)}
  .hero-3d .hero-actions,.hero-3d .hero-actions .btn{width:100%}
  .hero-cards{min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 8px}
  .hero-cards::-webkit-scrollbar{display:none}
  .glass-card{position:relative;inset:auto;width:auto;scroll-snap-align:start;animation:none!important}
  .tilt{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .tilt{transform:none}
}

/* ---------- 7. Video hero (replaces the WebGL canvas) ---------- */
.hero-video-bg .hero-canvas,.hero-video-bg .hero-streaks{display:none}
/* video fills the right two-thirds and dissolves into the dark left third */
.hero-video{position:absolute;top:0;right:0;bottom:0;width:66.667%;height:100%;object-fit:cover;object-position:center;background:#0A0A0F;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%)}
.hero-video-bg.is-fallback .hero-video{display:none}
.hero-video-bg .hero-shade{background:linear-gradient(90deg,#0A0A0F 0%,rgba(10,10,15,.92) 22%,rgba(10,10,15,.55) 38%,rgba(10,10,15,0) 56%),linear-gradient(180deg,rgba(10,10,15,.55) 0%,transparent 18%,transparent 78%,#0A0A0F 100%)}
/* foreground parallax: copy drifts against the pointer, cards keep their 3D tilt */
.hero-video-bg .hero-copy{translate:calc(var(--mx,0) * -10px) calc(var(--my,0) * -8px)}

/* ---------- 8. Reviews: floating glass card set ---------- */
.reviews{display:block}
.reviews-head{text-align:center;margin-bottom:clamp(40px,5vw,72px)}
.reviews-head .reviews-title{margin:0;display:inline-flex;align-items:center;gap:16px}
.reviews-head .reviews-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--iri-dot);box-shadow:0 0 16px rgba(232,92,255,.55)}
.reviews-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:1180px;margin-inline:auto;align-items:start}
.review-card{position:relative;display:flex;flex-direction:column;gap:18px;min-height:220px;padding:clamp(24px,2.6vw,36px);border-radius:22px;
  background:linear-gradient(140deg,rgba(30,30,42,.72),rgba(14,14,20,.6));border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.review-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,rgba(201,163,106,.6),rgba(232,92,255,.4) 45%,rgba(69,224,255,.4) 75%,rgba(255,255,255,.05));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.review-card:nth-child(2){margin-top:44px}
.review-card:nth-child(3){margin-top:12px}
.review-no{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--soft)}
.review-card p{font-size:clamp(1.2rem,1rem + .7vw,1.6rem);line-height:1.5;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .review-card{animation:cardFloat 8s ease-in-out infinite}
  .review-card:nth-child(2){animation-delay:-3s}
  .review-card:nth-child(3){animation-delay:-5.5s}
}

/* ---------- 9. Phone: video keeps playing as a full-width backdrop ---------- */
@media (max-width:760px){
  .hero-video{width:100%;opacity:.6;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 60%,transparent 100%)}
  .hero-video-bg .hero-shade{background:linear-gradient(180deg,rgba(10,10,15,.45) 0%,rgba(10,10,15,.35) 40%,rgba(10,10,15,.8) 75%,#0A0A0F 100%)}
  .hero-video-bg .hero-copy{translate:none}
  .reviews-cards{grid-template-columns:1fr;gap:14px}
  .review-card,.review-card:nth-child(2),.review-card:nth-child(3){margin-top:0;min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-video-bg .hero-copy{translate:none}
}