.introHero{position:relative;background:#071b2f;overflow:hidden}
.introShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,31,.52),rgba(3,18,31,.05) 55%,rgba(3,18,31,.28)),linear-gradient(0deg,rgba(3,18,31,.5),transparent 55%)}
.introBrand{position:absolute;left:7vw;top:50%;transform:translateY(-42%);color:#fff;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:17px;opacity:0;animation:introBrandIn .9s .45s ease forwards}
.introBrand>span{grid-row:1/3;width:62px;height:62px;border-radius:20px 20px 20px 5px;background:var(--blue);color:#052335;display:grid;place-items:center;font-size:34px;font-weight:900}
.introBrand b{font-size:clamp(34px,5vw,76px);letter-spacing:.18em;line-height:1}
.introBrand small{font-size:14px;letter-spacing:.42em;margin-top:10px;color:#d7e8ef}
.introLine{position:absolute;left:7vw;top:calc(50% + 78px);height:1px;width:0;background:linear-gradient(90deg,var(--blue),transparent);animation:introLineIn 1.2s 1s ease forwards}
.introHint{position:absolute;left:7vw;bottom:7vh;color:#fff;font-size:14px;letter-spacing:.24em;opacity:0;animation:introFadeIn .8s 1.35s ease forwards}
.introSkip{position:absolute;right:35px;bottom:28px;border:1px solid #ffffff88;background:#071b2f66;color:#fff;padding:9px 15px;border-radius:999px;cursor:pointer;backdrop-filter:blur(8px);font:inherit;font-size:14px;letter-spacing:.12em;transition:.25s}
.introSkip:hover{background:#fff;color:#071b2f}
.heroReveal>*{overflow:hidden}
.heroReveal .heroCopy>*{opacity:0;transform:translateY(24px)}
.heroProof sup{font-size:26px}
.introHero.is-complete .introStage{height:clamp(250px,31vw,420px);min-height:0;margin:18px 18px 0;border-radius:20px}
.introHero.is-complete .introVideo{transform:scale(1)}
.introHero.is-complete .introBrand{transform:translateY(-50%) scale(.72);transform-origin:left center}
.introHero.is-complete .introHint{bottom:25px}
.introHero.is-complete .introSkip{opacity:0;pointer-events:none}
.introHero.is-complete .heroReveal{grid-template-rows:1fr;opacity:1}
.introHero.is-complete .heroRevealGrid{min-height:500px;padding-top:76px;padding-bottom:76px}
.introHero.copy-ready .heroCopy>*,.introHero.copy-ready .heroProof{animation:copyUp .65s ease forwards}
.introHero.copy-ready .heroCopy>*:nth-child(2){animation-delay:.09s}
.introHero.copy-ready .heroCopy>*:nth-child(3){animation-delay:.18s}
.introHero.copy-ready .heroCopy>*:nth-child(4){animation-delay:.27s}
.introHero.copy-ready .heroCopy>*:nth-child(5){animation-delay:.36s}
.introHero.copy-ready .heroProof{animation-delay:.3s}
@keyframes introBrandIn{to{opacity:1;transform:translateY(-50%)}}
@keyframes introLineIn{to{width:min(560px,62vw)}}
@keyframes introFadeIn{to{opacity:.8}}
@keyframes copyUp{to{opacity:1;transform:translateY(0)}}

*{box-sizing:border-box}
a{text-decoration:none;color:inherit}
.container{width:min(1160px,calc(100% - 48px));margin:auto}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:11px}
.logoMark{width:40px;height:40px;border-radius:13px 13px 13px 4px;background:linear-gradient(135deg,var(--blue),#56d8ef);display:grid;place-items:center;color:white;font-size:22px;font-weight:900;box-shadow:0 8px 24px #00b8ea44}
.logo>span:last-child{display:flex;flex-direction:column;line-height:1}
.logo b{font-size:18px;letter-spacing:.12em}
.logo small{font-size:14px;letter-spacing:.15em;color:#6c8190;margin-top:5px}
.nav nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:700}
.nav nav>a:not(.navCta):hover{color:var(--cyan)}
.navCta{display:flex;align-items:center;gap:8px;padding:10px 17px;border-radius:11px;background:var(--navy);color:#fff}
.navCta svg{width:16px}
.menu{display:none;width:46px;height:46px;padding:0;margin-right:-8px;border:0;background:none;color:var(--navy);font-size:28px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}

.hero{min-height:700px;position:relative;overflow:hidden;background:linear-gradient(118deg,#f8fbfc,#ebf7f9)}
.gridBg{position:absolute;inset:0;background-image:linear-gradient(#0a50690b 1px,transparent 1px),linear-gradient(90deg,#0a50690b 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(to right,#000,transparent 76%)}
.heroGrid{min-height:700px;display:grid;grid-template-columns:.94fr 1.06fr;align-items:center;gap:35px;position:relative}
.eyebrow,.label{color:#1783a2;letter-spacing:.16em;font-size:14px;font-weight:900}
.eyebrow{display:flex;align-items:center;gap:10px;font-style: italic;}
.eyebrow i{width:28px;height:2px;background:var(--blue)}
h1{font-size:clamp(43px,4.6vw,66px);line-height:1.14;letter-spacing:-.05em;margin:24px 0;color:var(--navy);font-weight:900}
h1 em{font-style:normal;color:var(--cyan)}
.actions{display:flex;gap:12px;margin-top:32px}
.btn{min-height:50px;padding:0 23px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:900;transition:.25s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:18px}
.primary{background:var(--blue);color:#00303e;box-shadow:0 13px 30px #00b8ea44}
.ghost{border:1px solid #b9cdd6;background:#ffffffaa}
.notes{display:flex;gap:17px;flex-wrap:wrap;margin-top:25px;font-size:14px;color:#536d7b;font-weight:700}
.notes svg{width:15px;color:#0aa67e}

.visual{position:relative;perspective:1200px}
.browser{border:1px solid #d4e2e8;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 40px 100px #05324833;transform:rotateY(-4deg)}
.browserTop{height:40px;background:#f4f7f8;border-bottom:1px solid #e1e8eb;display:flex;align-items:center;gap:6px;padding:0 13px}
.browserTop i{width:8px;height:8px;border-radius:50%;background:#ff8c7d}
.browserTop i:nth-child(2){background:#f4ca63}
.browserTop i:nth-child(3){background:#66d4a2}
.browserTop span{height:22px;width:52%;margin:auto;border:1px solid #e0e7ea;border-radius:7px;display:grid;place-items:center;font-size:14px;color:#91a2ab}
.browserBody{height:390px;display:grid;grid-template-columns:118px 1fr}
.browser aside{background:var(--navy);padding:18px 12px;color:#9cb0be}
.browser aside>b{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:var(--blue);color:var(--navy);margin:0 0 25px 7px}
.browser aside small{display:block;font-size:14px;padding:9px;margin:4px 0;border-radius:6px}
.browser aside small.active{background:#123a58;color:#fff}
.dash{padding:24px;background:#f6f9fb}
.dashHead{display:flex;justify-content:space-between;align-items:center}
.dashHead>span{display:flex;flex-direction:column}
.dashHead small{font-size:14px;color:#8ba0ac}
.dashHead b{font-size:14px}
.dashHead button{border:0;border-radius:6px;background:var(--blue);padding:7px 10px;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:18px}
.stats>div,.chartCard{background:#fff;border:1px solid #e5edf0;border-radius:10px;padding:13px;display:flex;flex-direction:column}
.stats small{font-size:14px;color:#90a0aa}
.stats b{font-size:16px}
.stats em{font-size:14px;color:#0aa47c;font-style:normal}
.stats .online{font-size:14px;color:#0aa27b;margin:6px 0}
.chartCard{height:180px;margin-top:10px;font-size:14px}
.chart{height:130px;display:flex;align-items:end;gap:10px;padding-top:14px;border-bottom:1px solid #dfe9ed;background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#eef3f5 32px)}
.chart i{flex:1;background:linear-gradient(var(--blue),#86deed);border-radius:4px 4px 0 0}
.float{position:absolute;background:#fff;border:1px solid #dce8ed;border-radius:13px;padding:13px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 15px 40px #06304326}
.float svg{color:var(--cyan)}
.float span{display:flex;flex-direction:column}
.float b{font-size:14px}
.float small{font-size:14px;color:#78909d}
.float.one{left:-26px;bottom:-30px}
.float.two{right:-17px;top:-28px}

.trustGrid>div:first-child{border:0;padding-left:0}
.trustGrid svg{color:var(--blue);width:26px}
.section{padding:108px 0}
h2{font-size:clamp(34px,4vw,40px);line-height:1.25;color:var(--navy);margin:16px 0}
.intro p,.heading>p,.faq p{color:var(--muted)}
.plans{background:var(--paper)}
.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:47px}
.heading>p{max-width:390px;margin:0}
.heading>a{display:flex;align-items:center;gap:8px;border:1px solid #c8d7de;border-radius:11px;padding:9px 14px;font-size:14px;font-weight:800}
.heading>a svg{width:15px}
.heading.center{display:block;text-align:center}
.heading.center .label{margin:auto}
.heading.center>p{margin:10px auto}
.planTop{display:flex;align-items:center;justify-content:space-between}
.planTop small{font-size:14px;color:#6a8290;background:#f2f6f8;padding:5px 8px;border-radius:12px}
.planCard h3{font-size:24px;margin:23px 0 8px}
.planCard>p{font-size:14px;color:var(--muted);min-height:68px}
.price{padding:22px 0;border-bottom:1px solid #e2eaee}
.price b{font-size:28px}
.price small{margin-left:7px;color:#80919c}
.planCard ul{list-style:none;padding:12px 0;margin:0}
.planCard li{display:flex;gap:8px;align-items:center;font-size:14px;margin:9px 0}
.planCard li svg{width:15px;color:#0aaa7d}
.planCard>a{border-top:1px solid #e2eaee;padding-top:18px;margin-top:10px;display:flex;justify-content:space-between;font-size:14px;font-weight:900}
.planCard>a svg{width:17px}
.rent>svg{color:var(--cyan)}
.rent>span{display:flex;flex-direction:column;flex:1}
.rent>a{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900}
.rent>a svg{width:17px}

.label.light{color:#8be2d0}
.why h2,.repair h2{color:#fff}
.textLink{display:inline-flex;align-items:center;gap:9px;color:var(--blue);font-size:14px;font-weight:900;margin-top:20px}
.textLink svg{width:16px}
.art2 .artUi{transform:rotate(3deg);border:7px solid #173449;border-radius:20px}
.artUi small{font-size:14px}
.artUi b{font-size:20px;line-height:1.4;margin:18px 0}
.artUi span{font-size:14px;letter-spacing:.1em}
.workCard>div:last-child small{font-size:14px;color:#6d8490}
.steps article{text-align:center;position:relative;padding:0 10px}
.steps article>b{font-size:14px;color:var(--cyan)}
.steps h3{font-size:16px;margin:0}
.steps p{font-size:14px;color:#728692}
.white{background:#fff;color:var(--navy)}
.faqItem button svg{width:18px;transition:.3s}
.faqItem>div{display:grid;grid-template-rows:0fr;transition:.3s}
.faqItem>div p{overflow:hidden;margin:0;font-size:14px}
.faqItem.open>div{grid-template-rows:1fr}
.faqItem.open>div p{padding-bottom:22px}
.faqItem.open button svg{transform:rotate(180deg);color:var(--cyan)}
.final>div>small{font-weight:900;letter-spacing:.18em}
.line{border:1px solid #00303e55;margin-left:8px}
.footerTop{display:grid;grid-template-columns:1fr 1fr 1fr}
.footerTop>p{margin:0;color:#8fa5b4;font-size:14px}
.footerTop nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:14px}
.foot{border-top:1px solid #ffffff1a;margin-top:42px;padding-top:18px;display:flex;justify-content:space-between;color:#6f8797;font-size:14px}

@media(max-width:980px){.menu{display:grid;place-items:center}
.nav nav{display:none;position:absolute;top:78px;left:0;right:0;padding:22px 24px;background:#fff;flex-direction:column;align-items:stretch;box-shadow:0 20px 35px #0002}
.nav nav.open{display:flex}
.heroGrid{grid-template-columns:1fr;padding:70px 0 100px}
.visual{width:90%;margin:auto}
.trustGrid{grid-template-columns:1fr 1fr}
.trustGrid>div{padding:20px}
.introGrid,.whyGrid,.faqGrid{grid-template-columns:1fr;gap:45px}
.planGrid{grid-template-columns:1fr}
.planCard>p{min-height:0}
.workGrid{grid-template-columns:1fr 1fr}
.workCard.large{grid-column:1/-1}
.steps{grid-template-columns:repeat(3,1fr);gap:30px}
.steps:before{display:none}
.repairGrid{grid-template-columns:80px 1fr}
.repairGrid>div:last-child{grid-column:1/-1}
}

@media(max-width:640px){.container{width:calc(100% - 32px)}
header{height:68px}
.nav nav{top:68px}
.heroGrid{padding:50px 0 70px}
.heroCopy>p{font-size:16px}
.actions{flex-direction:column}
.btn{width:100%}
.visual{width:100%}
.browser{transform:none}
.browserBody{height:270px;grid-template-columns:75px 1fr}
.browser aside{padding:12px 7px}
.browser aside small{font-size:0}
.dash{padding:12px}
.dashHead b{font-size:14px}
.stats{grid-template-columns:1fr 1fr}
.stats>div:nth-child(3){display:none}
.chartCard{height:120px}
.chart{height:75px}
.float{display:none}
.trustGrid>div{padding:17px 6px;gap:7px}
.trustGrid strong{font-size:30px}
.trustGrid span{font-size:14px}
.section{padding:72px 0}
.introGrid{gap:25px}
.heading{display:block}
.heading>p,.heading>a{margin-top:14px}
.planCard{padding:25px 22px}
.rent{flex-wrap:wrap;align-items:flex-start}
.rent>a{width:100%;padding-left:38px}
.whyGrid{gap:50px}
.workGrid{grid-template-columns:1fr}
.workCard.large{grid-column:auto}
.steps{grid-template-columns:1fr 1fr}
.repairGrid{grid-template-columns:1fr;gap:18px}
.repairGrid>div:last-child{grid-column:auto}
.final .line{margin:9px 0 0}
.footerTop{grid-template-columns:1fr;gap:30px}
.foot{display:block}
.foot span{display:block;margin-top:7px}
}

@media(max-width:980px){.heroRevealGrid{grid-template-columns:1fr;gap:42px}
.heroProof{border-left:0;border-top:1px solid #b9cfd8;padding:28px 0 0}
.introHero.is-complete .heroRevealGrid{padding-top:62px;padding-bottom:62px}
}

@media(max-width:640px){.introStage{height:calc(100svh - 68px);min-height:500px}
.introBrand{left:24px;column-gap:12px}
.introBrand>span{width:48px;height:48px;border-radius:15px 15px 15px 4px;font-size:28px}
.introBrand b{font-size:30px}
.introBrand small{font-size:14px;letter-spacing:.28em}
.introLine,.introHint{left:24px}
.introHint{right:24px;bottom:70px;line-height:1.7}
.introSkip{right:18px;bottom:18px}
.introHero.is-complete .introStage{height:230px;margin:10px 10px 0;border-radius:14px}
.introHero.is-complete .introBrand{transform:translateY(-50%) scale(.78)}
.introHero.is-complete .introHint{bottom:17px;font-size:14px}
.introHero.is-complete .heroRevealGrid{padding-top:50px;padding-bottom:54px}
.heroProof .proofNo{font-size:52px}
}

@media(prefers-reduced-motion:reduce){.introBrand,.introLine,.introHint{animation:none;opacity:1}
.introLine{width:min(560px,62vw)}
.introStage,.introVideo,.heroReveal,.heroRevealGrid{transition-duration:.01ms}
.heroReveal .heroCopy>*,.heroProof{animation-duration:.01ms}
}

/* Opening video state: no overlay copy, then collapse to a replayable banner. */
body.intro-pending{overflow:hidden}
body.intro-pending header{opacity:0;transform:translateY(-100%);pointer-events:none}
.introStage{position:relative;overflow:hidden;background:#071b2f;transition:height 1s cubic-bezier(.76,0,.24,1),border-radius 1s cubic-bezier(.76,0,.24,1),margin 1s cubic-bezier(.76,0,.24,1);height:100svh;min-height:560px;}
.introShade,.introBrand,.introLine,.introHint,.introSkip{display:none}
.videoReplay{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;align-items:center;gap:11px;padding:12px 18px;border:1px solid #ffffffaa;border-radius:999px;background:#071b2fb8;color:#fff;font:inherit;font-size:14px;font-weight:800;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(10px);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background .25s ease}
.videoReplay:hover{background:#00b8ea;color:#052335}
.videoReplayIcon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#071b2f;font-size:14px;padding-left:2px}
.introHero.is-complete .videoReplay{opacity:1;transform:translateY(0);pointer-events:auto}
.introHero.is-replaying .introStage{height:100svh;min-height:560px;margin:0;border-radius:0}
.introHero.is-replaying .videoReplay{opacity:0;pointer-events:none}
.introHero.is-replaying .heroReveal{grid-template-rows:0fr;opacity:0}
.introHero.is-replaying .heroRevealGrid{min-height:0;padding-top:0;padding-bottom:0}
.introHero.is-replaying .heroCopy>*,.introHero.is-replaying .heroProof{opacity:0;animation:none}
.introHero.is-replaying~*{visibility:hidden}
body.video-replaying{overflow:hidden}
body.video-replaying header{opacity:0;transform:translateY(-100%);pointer-events:none}

@media(max-width:640px){.introStage{height:100svh}
.introHero.is-replaying .introStage{height:100svh}
.videoReplay{padding:9px 13px;font-size:14px}
.videoReplayIcon{width:27px;height:27px}
}

/* Full-screen opening controls and original hero interactions. */
body.intro-pending header,body.video-replaying header{position:fixed;inset:0 0 auto;height:0;border:0;background:transparent;box-shadow:none}
.skipIntro,.nightTaipei{border:1px solid #ffffff9c;background:#071b2f70;color:#fff;backdrop-filter:blur(10px);font:inherit;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease}
.skipIntro:hover,.nightTaipei:hover{background:#fff;color:#071b2f}
.nightTaipei{position:absolute;right:10vw;top:10vw;z-index:4;padding:10px 14px;border-radius:999px;font-size:14px;letter-spacing:.1em}
.openingSocial{
  position:absolute;right:34px;bottom:28px;z-index:4;
  display:flex;align-items:center;gap:34px;
  padding:14px 26px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 12px 34px rgba(7,27,47,.18);
}
.openingSocial .openingSocialLink{
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:var(--blue);
  font-size:19px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
  transition:opacity .25s ease;
}
.openingSocial .openingSocialLink:hover{opacity:.65}
.openingSocialIcon{
  width:26px;height:26px;
  flex:0 0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:17%;
  line-height:1;
}
.openingFacebook .openingSocialIcon{
  border-radius:0;
  object-fit:contain;
}
.openingInstagram .openingSocialIcon{
  background:#00B9EA;
}
.openingInstagram .openingSocialIcon img{
  display:block;
  width:64%;height:64%;
  filter:brightness(0) invert(1);
}
.introHero.is-replaying .openingActions,.introHero.is-replaying .openingSocial,.introHero.is-replaying .nightTaipei{opacity:1;pointer-events:auto}
.introHero.night-mode .introVideo{filter:brightness(.36) saturate(.7) contrast(1.22) hue-rotate(8deg)}
.introHero.night-mode .nightTaipei{background:#fff;color:#071b2f;border-color:#fff}
.introVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.035);filter:saturate(.9) contrast(1.05);transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .55s ease;}

@media(max-width:640px){.openingActions{left:18px;bottom:18px}
.openingSocial{right:auto;left:50%;bottom:92px;transform:translateX(-50%);gap:22px;padding:10px 18px}
.openingSocial .openingSocialLink{font-size:16px;gap:9px}
.openingSocialIcon{width:23px;height:23px;flex-basis:23px}
.skipIntro{padding:8px 12px;font-size:14px}
.nightTaipei{right:18px;top:18px;font-size:14px;padding:8px 11px}
}

/* Reveal the over-video navigation and skip arrow after three seconds. */
body.intro-pending.intro-ui-ready header,body.video-replaying.intro-ui-ready header{height:78px;opacity:1;transform:translateY(0);pointer-events:auto;background:linear-gradient(180deg,rgba(2,16,28,.62),transparent);backdrop-filter:none}
.intro-ui-ready header .logo b,.intro-ui-ready header .nav nav>a:not(.navCta),.intro-ui-ready header .menu{color:#fff}
.intro-ui-ready header .logo small{color:#d9e8ef}
.intro-ui-ready header .navCta{background:#00b8ea;color:#052335}
.openingActions,.openingSocial,.nightTaipei{transition:opacity .3s ease,transform .3s ease;opacity:0;pointer-events:none;}
.intro-ui-ready .openingActions,.intro-ui-ready .openingSocial,.intro-ui-ready .nightTaipei{opacity:1;pointer-events:auto}
.openingActions{position:absolute;z-index:4;left:50%;bottom:27px;transform:translateX(-50%);}
.skipIntro{align-items:center;gap:13px;font-size:14px;font-weight:800;letter-spacing:.12em;width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;animation:skipBounce 1.5s ease-in-out infinite;}
.skipIntro span{font-size:30px;line-height: .7;transform: translateY(-3px);left: 1px;top: -5px;position: relative;}
@keyframes skipBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.introHero.is-complete .openingActions,.introHero.is-complete .openingSocial,.introHero.is-complete .nightTaipei{opacity:0;pointer-events:none;}
.introHero.is-replaying:not(.intro-ui-ready) .openingActions,.introHero.is-replaying:not(.intro-ui-ready) .openingSocial,.introHero.is-replaying:not(.intro-ui-ready) .nightTaipei{opacity:0;pointer-events:none}

body.intro-ui-ready .introHero.is-replaying .openingActions,body.intro-ui-ready .introHero.is-replaying .openingSocial,body.intro-ui-ready .introHero.is-replaying .nightTaipei{opacity:1;pointer-events:auto}
@media(max-width:640px){body.intro-pending.intro-ui-ready header,body.video-replaying.intro-ui-ready header{height:68px}
.openingActions{left:50%;bottom:18px}
.skipIntro{width:42px;height:42px;padding:0}
.skipIntro span{font-size:26px}
}

/* Explicit header states ensure the three-second reveal also replays reliably. */
header.intro-nav-hidden{position:fixed;inset:0 0 auto;height:78px;opacity:0;transform:translateY(-100%);pointer-events:none;background:transparent;border-color:transparent;z-index:200}
header.intro-nav-visible{position:fixed;inset:0 0 auto;height:78px;opacity:1;transform:translateY(0);pointer-events:auto;background:linear-gradient(180deg,rgba(2,16,28,.68),transparent);border-color:transparent;backdrop-filter:none;z-index:200}
header.intro-nav-visible .logo b,header.intro-nav-visible .nav nav>a:not(.navCta),header.intro-nav-visible .menu{color:#fff}
header.intro-nav-visible .logo small{color:#d9e8ef}
header.intro-nav-visible .navCta{background:#00b8ea;color:#052335}
@media(max-width:640px){header.intro-nav-hidden,header.intro-nav-visible{height:68px}
header.intro-nav-visible .nav nav.open{background:#071b2ff2}
header.intro-nav-visible .nav nav.open a{color:#fff}
}

/* ============================================================
   LUGO — CONTINUOUS SPATIAL CANVAS
   Design direction: light spatial UI / continuous one-page field
   ============================================================ */
:root{--navy:#071b2f;--blue:#00b8ea;--cyan:#008fae;--ink:#102538;--muted:#647887;--line:#dce7ec;--paper:#f4f8fa;--white:#fff;--shadow:0 24px 70px rgba(7,27,47,.13);--sp-bg:#edf5f7;--sp-bg2:#f7fbfc;--sp-navy:#071b2f;--sp-cyan:#00b8ea;--sp-cyan2:#63ddf7;--sp-coral:#ff715f;--sp-yellow:#ffd34f;--sp-violet:#7b6cff;--sp-mint:#60d6b4;--sp-glass:rgba(255,255,255,.58);--sp-glass-strong:rgba(255,255,255,.78);--sp-stroke:rgba(255,255,255,.82);--sp-ink:#0a2235;--sp-muted:#647887;--sp-shadow:0 28px 90px rgba(14,61,86,.14), inset 0 1px 0 rgba(255,255,255,.8);}

html{scroll-behavior:smooth;}

body{margin:0;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.7;background:var(--sp-bg);color:var(--sp-ink);}

/* Hero reveal becomes the bridge from video into the spatial field. */
.introHero.is-complete{background:var(--sp-bg);}

.heroReveal{position:relative;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .85s cubic-bezier(.2,.75,.2,1),opacity .5s ease;background:
    radial-gradient(circle at 76% 18%,rgba(0,184,234,.19),transparent 31%),
    radial-gradient(circle at 18% 76%,rgba(123,108,255,.10),transparent 27%),
    linear-gradient(180deg,#eaf4f7 0%,var(--sp-bg) 100%);overflow:visible;}

.heroReveal:after{content:"";position:absolute;left:50%;bottom:-90px;width:2px;height:160px;background: linear-gradient(#14b1ec, transparent);z-index:3;margin-left: -1px;}


.heroRevealGrid{min-height:0;display:grid;grid-template-columns:1.45fr .55fr;align-items:center;position:relative;padding-top:0;padding-bottom:0;transition:min-height .85s cubic-bezier(.2,.75,.2,1),padding .85s cubic-bezier(.2,.75,.2,1);perspective:1200px;gap:clamp(30px,6vw,90px);}

.heroCopy{position:relative;z-index:2;padding:48px 54px;border:1px solid rgba(255,255,255,.92);border-radius:36px;background:rgba(255,255,255,.5);backdrop-filter:blur(24px) saturate(130%);box-shadow:var(--sp-shadow);transform:rotateX(1.5deg) rotateY(-1.6deg)}

.heroCopy:after{content:"";position:absolute;right:-34px;top:32%;width:68px;height:68px;border-radius:22px;background:linear-gradient(145deg,var(--sp-yellow),#ff9f68);box-shadow:0 18px 35px rgba(255,156,72,.28);transform:rotate(13deg);z-index:-1}

.heroCopy h1{font-size:clamp(38px,5.1vw,50px);line-height:1.4;letter-spacing:.03em;margin-top:24px;color:var(--sp-navy)}

.heroCopy h1 em{color:var(--sp-cyan);font-style:normal}

.heroProof{border-left:1px solid #b9cfd8;padding-left:40px;opacity:0;border:0;padding:28px;border-radius:30px;background:rgba(7,27,47,.92);color:#fff;box-shadow:0 34px 80px rgba(7,27,47,.24);transform:translate3d(0,28px,80px) rotateY(3deg);backdrop-filter:blur(18px);position:relative;overflow:hidden;}

.heroProof:before{content:"";position:absolute;width: 150px;height: 150px;border-radius:50%;right:-48px;top:-50px;background:radial-gradient(circle,rgba(0,184,234,.25) 0% 28%,transparent 100%)}

.heroProof .proofNo{display:block;font-size:66px;line-height:1;font-weight:900;letter-spacing:-.06em;color:var(--sp-cyan2);}

.heroProof>b{display:block;margin:11px 0 22px;font-size:16px;color:#fff;}
.heroProof ul{list-style:none;margin:0;padding:0;font-size:14px;color:#bcd0dc;}
.heroProof li{padding:9px 0;border-top:1px solid #d6e4e9;border-color:#ffffff20;}

.notes span{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);padding:7px 10px;border-radius:999px;box-shadow:0 8px 20px rgba(22,74,100,.07);}

/* One continuous canvas. No visual section boundaries. */
.spatialCanvas{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(8,52,75,.055) 50%,transparent calc(50% + .5px)),
    radial-gradient(circle at 92% 7%,rgba(255,113,95,.10),transparent 17%),
    radial-gradient(circle at 5% 27%,rgba(0,184,234,.12),transparent 19%),
    radial-gradient(circle at 92% 52%,rgba(123,108,255,.10),transparent 17%),
    radial-gradient(circle at 9% 76%,rgba(255,211,79,.14),transparent 18%),
    linear-gradient(180deg,var(--sp-bg) 0%,#f8fbfb 45%,#eef5f7 100%);
}

.spatialCanvas:before{content:"";position:absolute;inset:0;z-index:-4;opacity:.3;background-image:linear-gradient(rgba(7,27,47,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(7,27,47,.045) 1px,transparent 1px);background-size:84px 84px;mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent)}

.spatialCanvas:after{content:"LUGO  /  DESIGN  ×  CODE  ×  BUSINESS";position:absolute;top:38px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:14px;font-weight:900;letter-spacing:.34em;color:#76909d;opacity:.75}

.spatialAura{position:absolute;z-index:-2;border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.65}

.auraA{width:360px;height:360px;right:-190px;top:780px;border:1px solid rgba(0,184,234,.34);box-shadow:inset 0 0 90px rgba(0,184,234,.08)}

.auraB{width:210px;height:210px;left:-110px;top:2050px;background:rgba(255,113,95,.12);border:1px solid rgba(255,113,95,.24)}

.auraC{width:480px;height:480px;right:-310px;top:4100px;border:1px dashed rgba(123,108,255,.26)}

.spatialRail{position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:linear-gradient(180deg,rgba(0,184,234,.55),rgba(0,184,234,.05) 15%,rgba(123,108,255,.16) 48%,rgba(255,113,95,.15) 75%,transparent);pointer-events:none}

.spatialRail span{position:absolute;left:50%;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--sp-cyan);box-shadow:0 0 0 9px rgba(0,184,234,.08);transform:translate(-50%,-50%)}

.spatialRail span:nth-child(1){top:7%}
.spatialRail span:nth-child(2){top:26%;border-color:var(--sp-yellow)}
.spatialRail span:nth-child(3){top:48%;border-color:var(--sp-violet)}
.spatialRail span:nth-child(4){top:70%;border-color:var(--sp-coral)}
.spatialRail span:nth-child(5){top:91%;border-color:var(--sp-mint)}

.spatialCanvas .section,.spatialCanvas .trust,.spatialCanvas .why,.spatialCanvas .process,.spatialCanvas .repair,.spatialCanvas .final{background:transparent;position:relative}

.spatialCanvas .section{padding:clamp(90px,10vw,150px) 0}

.spatialCanvas .container{position:relative;z-index:1}

.spatialCanvas h2{color:var(--sp-navy)}

.spatialCanvas .label{background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(19,69,94,.06);padding:7px 11px;border-radius:999px;width:max-content;color:#3f7185;font-size: 12px;font-style: italic;}

.spatialCanvas .label.light{font-size: 12px;font-style: italic;}

/* Trust becomes four satellites instead of a hard navy band. */
.trust{background:var(--navy);padding:88px 0 40px;color:var(--sp-ink);}

.trustGrid{display:grid;align-items:center;min-height:0;grid-template-columns:1.2fr repeat(3,1fr);gap:18px;perspective:900px;}

.trustGrid>div{display:flex;gap:14px;border-left:1px solid #ffffff22;min-height:118px;border:1px solid var(--sp-stroke);border-radius:26px;padding:24px;background:rgba(255,255,255,.52);backdrop-filter:blur(18px);box-shadow:var(--sp-shadow);align-items:flex-start;justify-content:center;position:relative;overflow:hidden;}

.trustGrid>div:nth-child(1){transform:translateY(18px) rotate(-1.5deg)}

.trustGrid>div:nth-child(2){transform:translateY(-8px) rotate(.8deg)}

.trustGrid>div:nth-child(3){transform:translateY(16px) rotate(-.6deg)}

.trustGrid>div:nth-child(4){transform:translateY(-15px) rotate(1.2deg)}

.trustGrid>div:after{content:"";position:absolute;right:-28px;bottom:-35px;width:90px;height:90px;border-radius:50%;background:rgba(0,184,234,.08)}

.trustGrid>div:nth-child(2):after{background:rgba(255,211,79,.20)}
.trustGrid>div:nth-child(3):after{background:rgba(123,108,255,.12)}
.trustGrid>div:nth-child(4):after{background:rgba(255,113,95,.13)}

.trustGrid strong{font-size:44px;color:var(--sp-cyan);}

.trustGrid b{color:var(--sp-navy);font-size:14px;}
.trustGrid span{display:flex;flex-direction:column;font-size:14px;color:#647b88;}
.trustGrid small{font-size:14px;color:#7e929d;}

/* Story area flows diagonally around the center rail. */
.introGrid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(70px,10vw,150px);align-items:center;}

.introGrid>div:first-child{transform:translateY(30px)}

.introGrid>div:last-child{padding:38px 40px;border-radius:30px;background:rgba(255,255,255,.47);border:1px solid rgba(255,255,255,.82);backdrop-filter:blur(16px);box-shadow:0 24px 65px rgba(28,76,99,.10);transform:translateY(-32px) rotate(1deg)}

.introGrid>div:last-child:before{content:"01";position:absolute;right:25px;top:-28px;color:rgba(0,184,234,.18);font-size:88px;font-weight:900;letter-spacing:-.08em;z-index:-1}

/* Solutions are a single orbiting constellation, not three equal cards. */
.plans .heading{margin-bottom:78px}

.planCard:hover{transform:translateY(-8px) scale(1.012);box-shadow:0 38px 100px rgba(15,63,86,.18);}

.planCard.hot{border:2px solid var(--blue);border-color:rgba(0,184,234,.55);}

.planCard.hot:before,.planCard:nth-child(2):before,.planCard:nth-child(3):before{content:"";position:absolute;width:62px;height:62px;border-radius:22px;right:-19px;top:-22px;z-index:-1;transform:rotate(14deg)}

.planCard.hot:before{background:linear-gradient(145deg,var(--sp-cyan2),var(--sp-cyan))}
.planCard:nth-child(2):before{background:linear-gradient(145deg,#ffe78b,var(--sp-yellow))}
.planCard:nth-child(3):before{background:linear-gradient(145deg,#a69cff,var(--sp-violet))}

.popular{position:absolute;right:17px;border-radius:20px;padding:5px 12px;font-size:14px;font-weight:900;background:var(--sp-navy);color:#fff;top:-14px;}

.planTop>i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(0,184,234,.1);color:var(--sp-cyan);border:1px solid rgba(0,184,234,.18);}

.rent{margin-top:22px;padding:18px 23px;display:flex;align-items:center;gap:15px;margin:120px auto 0;max-width:880px;background:rgba(7,27,47,.92);color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:999px;box-shadow:0 24px 65px rgba(7,27,47,.18);backdrop-filter:blur(18px);}

.rent small{color:#007f95;}
.rent a{color:var(--sp-cyan2)}

/* WHY becomes a spatial split with a dark floating object. */
.why{background:var(--navy);padding-top:130px;padding-bottom:130px;color:var(--sp-ink);}

.whyGrid{display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:center;}

.whyGrid>div:first-child{padding:46px;border-radius:38px;background:rgba(7,27,47,.94);box-shadow:0 36px 95px rgba(7,27,47,.24);transform:rotate(-1.2deg);position:relative;overflow:hidden}

.whyGrid>div:first-child:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-95px;bottom:-90px;background:linear-gradient(145deg,rgba(0,184,234,.8),rgba(123,108,255,.45));filter:blur(1px)}

.why h2{color:#fff}
.whyGrid>div:first-child>p{color:#adc2ce;}
.why .label{color:#9de9fa;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:none}

.whyList{padding:14px 28px;border-radius:34px;background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.86);backdrop-filter:blur(18px);box-shadow:var(--sp-shadow);transform:translateY(34px) rotate(.6deg)}

.whyList article{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:23px 0;border-bottom:1px solid #ffffff22;border-color:rgba(7,27,47,.11);}
.whyList h3{margin:0;color:var(--sp-navy);}
.whyList p{margin:5px 0;font-size:14px;color:#718590;}
.whyList article>span{font-size:14px;color:var(--sp-cyan);}

/* Selected work = a colorful spatial gallery that overlaps vertically. */
.work{padding-top:145px}

.workGrid{display:grid;grid-template-columns:1.14fr .86fr;grid-template-rows:auto auto;gap:28px 34px;align-items:start;}

.workCard.large{grid-row:1/3;grid-column:1;transform:translateY(52px)}

.workCard:nth-child(2){grid-column:2;transform:translateY(-22px) rotate(1deg)}

.workCard:nth-child(3){grid-column:2;transform:translateY(28px) rotate(-1deg)}

.workCard .art{height:340px;overflow:hidden;display:grid;place-items:center;border-radius:34px;box-shadow:0 30px 80px rgba(17,62,84,.16);border:1px solid rgba(255,255,255,.8);}

.art1 .art{background:linear-gradient(145deg,#7be3d2,#00a9dd 52%,#4463e6);}

.art2 .art{background:linear-gradient(145deg,#ffe17b,#ff9a68 55%,#ff6c76);}

.art3 .art{background:linear-gradient(145deg,#9188ff,#313a78 58%,#071b2f);}

.artUi{width:78%;height:68%;padding:28px;display:flex;flex-direction:column;justify-content:center;border-radius:24px;backdrop-filter:blur(14px);background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.78);box-shadow:0 22px 60px rgba(22,45,64,.18);}

.art3 .artUi{border:1px solid #ffffff33;background:rgba(7,27,47,.75);color:#fff;}

.workCard>div:last-child{padding:18px 8px 0;}
.workCard h3{margin:4px 0;font-size:18px;}

/* Process becomes a single curved-looking navigation dock. */
.process{background:#f5f8f9;padding-top:170px;}

.steps{display:grid;grid-template-columns:repeat(6,1fr);position:relative;margin-top:70px;padding:28px 18px 24px;border-radius:38px;background:rgba(255,255,255,.48);border:1px solid rgba(255,255,255,.84);backdrop-filter:blur(20px);box-shadow:var(--sp-shadow);}

.steps:before{content:"";position:absolute;left:8%;right:8%;top:44px;background:linear-gradient(90deg,var(--sp-cyan),var(--sp-violet),var(--sp-coral));height:2px;opacity:.42;}

.steps article>i{display:block;width:13px;height:13px;border:3px solid var(--blue);border-radius:50%;margin:21px auto;position:relative;z-index:2;box-shadow:0 0 0 8px rgba(255,255,255,.74);background:#fff;}

.steps article:nth-child(2)>i{border-color:var(--sp-mint)}
.steps article:nth-child(3)>i{border-color:var(--sp-yellow)}
.steps article:nth-child(4)>i{border-color:var(--sp-coral)}
.steps article:nth-child(5)>i{border-color:var(--sp-violet)}

/* Repair is no longer a horizontal stripe. */
.repair{background:linear-gradient(120deg,#06465e,#007e9b);color:#fff;padding:130px 0;}

.repairGrid{display:grid;align-items:center;grid-template-columns:110px .85fr 1.15fr;gap:44px;padding:48px 56px;border-radius:40px;background:linear-gradient(135deg,rgba(7,27,47,.96),rgba(8,67,91,.92));box-shadow:0 38px 100px rgba(7,27,47,.24);transform:rotate(-.5deg);position:relative;overflow:hidden;}

.repairGrid:after{content:"";position:absolute;right:-90px;top:-115px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,211,79,.9),rgba(255,113,95,.5) 38%,rgba(123,108,255,.14) 65%,transparent 67%);z-index: -1;}

.repair h2{color:#fff}
.repairGrid p{color:#cee0e8;}
.repairIcon{width:82px;height:82px;border:1px solid #ffffff55;border-radius:50%;display:grid;place-items:center;color:var(--sp-yellow);border-color:#ffffff35;}

.repair .label.light {
	    color: #9de9fa;
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: none;
}
/* FAQ floats on the opposite side of the rail. */

/* Final CTA is the destination object, not a full-width block. */
.final{text-align:center;background:var(--blue);padding:110px 0 160px;color:var(--sp-ink);}

.final>.container{max-width:980px;padding:72px 50px;border-radius:48px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.42));border:1px solid rgba(255,255,255,.92);backdrop-filter:blur(24px);box-shadow:0 42px 110px rgba(21,69,93,.18);overflow:hidden}

.final>.container:before{content:"";position:absolute;left:-80px;bottom:-130px;width:310px;height:310px;border-radius:50%;background:linear-gradient(145deg,rgba(0,184,234,.42),rgba(123,108,255,.22));filter:blur(2px);z-index:-1}

.final>.container:after{content:"";position:absolute;right:-55px;top:-70px;width:180px;height:180px;border-radius:44px;background:linear-gradient(145deg,var(--sp-yellow),var(--sp-coral));transform:rotate(24deg);opacity:.88;z-index:-1}

.final h2{font-size:clamp(32px,4vw,49px);color:var(--sp-navy);}
.final .white{background:var(--sp-navy);color:#fff}
.final .line{border-color:#7fa0af;background:rgba(255,255,255,.45)}

footer{padding:60px 0 22px;background:#061727;color:#fff;position:relative;z-index:2;}

@media(max-width:980px){
  .spatialRail{left:32px;opacity:.42}
.spatialCanvas:after{left:32px;transform:none;font-size:14px}

  .trustGrid{grid-template-columns:1fr 1fr}
.trustGrid>div{transform:none}

  .planGrid{grid-template-columns:1fr}
.planCard{transform:none}
.rent{margin-top:36px;border-radius:28px}

  .whyGrid,.faqGrid{grid-template-columns:1fr;gap:48px}
.whyGrid>div:first-child,.whyList,.faqList{transform:none}
.faqGrid>div:first-child{position:static}

  .workGrid{grid-template-columns:1fr 1fr}
.workCard.large{grid-row:auto;grid-column:1/-1;transform:none}
.workCard:nth-child(2),.workCard:nth-child(3){grid-column:auto;transform:none}

  .repairGrid{transform:none}

}

@media(max-width:640px){
  .heroCopy{padding:34px 24px;border-radius:28px;transform:none}
.heroCopy:after{display:none}
.heroProof{transform:none}

  .spatialCanvas:before{background-size:52px 52px}
.spatialRail{display:none}
.spatialCanvas:after{left:16px;right:16px;white-space:normal;line-height:1.6}

  .spatialCanvas .section{padding:78px 0}
.trust{padding:68px 0 20px}
.trustGrid{grid-template-columns:1fr;gap:12px}
.trustGrid>div{min-height:100px}

  .introGrid>div:first-child,.introGrid>div:last-child{transform:none}
.introGrid>div:last-child{padding:28px 24px}

  .planGrid{gap:16px}
.planCard{border-radius:28px;padding:26px}
.rent{padding:22px}

  .why{padding:90px 0}
.whyGrid>div:first-child{padding:32px 26px;border-radius:30px}
.whyList{padding:10px 22px}

  .work{padding-top:90px}
.workGrid{grid-template-columns:1fr}
.workCard.large,.workCard:nth-child(2),.workCard:nth-child(3){grid-column:1}
.workCard .art{height:290px;border-radius:28px}

  .process{padding-top:90px}
.steps{border-radius:28px;padding:24px 14px}

  .repair{padding:88px 0}
.repairGrid{grid-template-columns:1fr;padding:34px 26px;border-radius:30px}
.repairGrid>div:last-child{grid-column:auto}
.repairIcon{width:60px;height:60px}

  .faqList{padding:8px 22px;border-radius:28px}

  .final{padding:80px 0 100px}
.final>.container{padding:52px 24px;border-radius:34px}

}

/* =========================================================
   2026-09-01 Performance / layout refinement
   - Remove unnecessary 3D depth and hover movement
   - Make the 3 solution cards lean left / straight / right
   - Reduce expensive blur layers for smoother scrolling
   ========================================================= */

/* Flatten the spatial canvas: keep the visual language, remove 3D scene math. */
.heroRevealGrid,
.visual,
.trustGrid,
.planGrid {
  perspective: none;
}

.heroCopy,
.heroProof,
.introGrid > div:first-child,
.introGrid > div:last-child,
.whyGrid > div:first-child,
.whyList,
.workCard.large,
.workCard:nth-child(2),
.workCard:nth-child(3),
.repairGrid,
.faqList {
  transform: none;
}

/* Remove costly content blur layers while preserving translucent panels. */
.heroCopy,
.heroProof,
.trustGrid > div,
.introGrid > div:last-child,
.planCard,
.whyList,
.faqList {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.heroCopy,
.introGrid > div:last-child,
.planCard,
.whyList,
.faqList {
  background: rgba(255,255,255,.88);
}

/* 3 website solution cards: calm, intentional 2D fan layout. */
.planGrid {display:grid;perspective:1200px;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 28px;align-items: stretch;}

.planCard {border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.55);backdrop-filter:blur(22px) saturate(120%);border-radius:34px;padding:34px;position: relative;overflow: hidden;transition: none;animation: none;box-shadow: 0 18px 46px rgba(15,63,86,.10);}

.planCard:nth-child(1) {transform: rotate(-1.8deg);transform-origin: 70% 100%;}

.planCard:nth-child(2) {transform: none;}

.planCard:nth-child(3) {transform: rotate(1.8deg);transform-origin: 30% 100%;}

.planCard:hover,
.planCard:focus-within {
  transform: inherit;
  box-shadow: 0 18px 46px rgba(15,63,86,.10);
}

.planCard:nth-child(1):hover,
.planCard:nth-child(1):focus-within {
  transform: rotate(-1.8deg);
}

.planCard:nth-child(2):hover,
.planCard:nth-child(2):focus-within {
  transform: none;
}

.planCard:nth-child(3):hover,
.planCard:nth-child(3):focus-within {
  transform: rotate(1.8deg);
}

/* Remove the floating decorative blocks attached to each solution card. */
.planCard.hot:before,
.planCard:nth-child(2):before,
.planCard:nth-child(3):before {
  display: none;
}

/* Decorative layers do not need separate stacking contexts. */
.heroCopy,
.spatialCanvas .container,
footer {
  z-index: auto;
}

/* Keep only essential navigation/video stacking. */
header {height:78px;position:sticky;top:0;background:#fffffff0;backdrop-filter:blur(16px);border-bottom:1px solid #dce7ecaa;transition:opacity .55s ease,transform .7s cubic-bezier(.2,.75,.2,1);z-index: 20;}

header.intro-nav-hidden,
header.intro-nav-visible {
  z-index: 20;
}

.intro-nav-visible .nav .logo,
.lugo-night .nav .logo {
	filter: brightness(0) invert(1);
}
.lugo-night .ghost {color: #000;}

/* Smaller shadows = less repaint cost during scroll. */
.heroCopy,
.heroProof,
.introGrid > div:last-child,
.whyGrid > div:first-child,
.whyList,
.repairGrid,
.faqList {
  box-shadow: 0 18px 52px rgba(7,27,47,.11);
}

@media (max-width: 900px) {
  .planGrid {
    grid-template-columns: 1fr;
  }

  .planCard,
  .planCard:nth-child(1),
  .planCard:nth-child(2),
  .planCard:nth-child(3),
  .planCard:hover,
  .planCard:focus-within {
    transform: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .planCard {
    transition: none;
    animation: none;
  }

}

/* =========================================================
   2026-09-01 Scroll-restoration / BFCache stability fix
   ========================================================= */
.introHero.intro-no-transition .introStage,
.introHero.intro-no-transition .introVideo,
.introHero.intro-no-transition .heroReveal,
.introHero.intro-no-transition .heroRevealGrid {
  transition: none;
}

.introHero.intro-no-transition .heroCopy > *,
.introHero.intro-no-transition .heroProof {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Give anchored sections a safe offset below the sticky header. */
#services,
#work,
#process,
#faq {
  scroll-margin-top: 96px;
}

/* =========================================================
   2026-09-01 Content refinement + lightweight scroll reveal
   ========================================================= */

/* Consultation CTA: one clear conversation entry, not another pricing banner. */
.consultCta{
  background:linear-gradient(110deg,rgba(0,184,234,.12),rgba(96,214,180,.12),rgba(255,211,79,.10));
  border:1px solid rgba(0,126,155,.14);
  padding:22px 26px;
  align-items:center;
}

.consultCta b{font-size:16px;color:var(--navy)}

.consultCta small{margin-top:4px;line-height:1.65}

.consultCta>a{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;color:var(--navy)}

.consultCta>a strong{font-size:14px;color:#007f95}

.consultCta>a em{font-style:normal;font-size:14px;color:#5d7481}

/* FAQ: flatten the spatial effect. Keep the area calm, readable and tactile. */
.faqGrid{display:grid;grid-template-columns:.62fr 1.38fr;gap:84px;align-items:start;}

.faqGrid>div:first-child{top:125px;position:static;}

.faqList{backdrop-filter:blur(18px);padding:0;border-radius:0;background:transparent;border:0;box-shadow:none;transform:none;}

.faqItem{border-color:rgba(7,27,47,.12);border-top:1px solid rgba(7,27,47,.16);border-bottom:0;}

.faqItem:last-child{border-bottom:1px solid rgba(7,27,47,.16)}

.faqItem button{width:100%;border:0;background:none;display:flex;justify-content:space-between;text-align:left;font-weight:900;cursor:pointer;min-height:78px;padding:20px 4px;align-items:center;gap:24px;color:var(--navy);font-size:16px;}

.faqQuestion{display:block;line-height:1.55}

.faqToggle{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid rgba(7,27,47,.15);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:400;
  line-height:1;
  color:#007f95;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}

.faqItem.open .faqToggle{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}

.faqItem>.faqAnswer{
  display:block;
}

.faqItem>.faqAnswer[hidden]{
  display:none;
}

.faqItem>.faqAnswer>p{
  margin:0;
  max-width:720px;
  color:var(--muted);
  line-height:1.8;
  padding:0 54px 24px 4px;
  animation:faqAnswerIn .14s ease-out both;
}

@keyframes faqAnswerIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

/* Lightweight upward reveal. 2D only: no perspective, no blur, no z-index scene. */
.js .scrollReveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}

.js .scrollReveal.is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}

.js .scrollReveal[data-reveal-delay="1"]{transition-delay:.06s}

.js .scrollReveal[data-reveal-delay="2"]{transition-delay:.12s}

.js .scrollReveal[data-reveal-delay="3"]{transition-delay:.18s}

@media(max-width:900px){
  .consultCta{align-items:flex-start;flex-direction:column}

  .consultCta>a{align-items:flex-start;text-align:left}

  .faqGrid{grid-template-columns:1fr;gap:34px}

}

@media(max-width:640px){
  .faqItem button{min-height:70px;font-size:14px;padding:17px 0}

  .faqItem>.faqAnswer>p{padding-right:42px}

  .consultCta{padding:22px}

  .js .scrollReveal{transform:translateY(20px)}

}

@media(prefers-reduced-motion:reduce){
  .js .scrollReveal,.js .scrollReveal.is-visible{opacity:1;transform:none;transition:none}

}

.web-fixer-icon { width: 45px;height: 55px;}

/* =========================================================
   Replay header layering hotfix
   Keep the navigation above the fullscreen replay layer.
   This is an ESSENTIAL stacking order, not decorative 3D z-index.
   ========================================================= */
body.intro-pending header.intro-nav-visible,
body.video-replaying header.intro-nav-visible,
header.intro-nav-visible {
  z-index: 220;
}

body.intro-pending header.intro-nav-hidden,
body.video-replaying header.intro-nav-hidden,
header.intro-nav-hidden {
  z-index: 220;
}

.introHero.is-replaying {position:relative;z-index: 100;}

/* =========================================================
   2026-09-01 SEO/AEO content readability refinements
   Content-first adjustments only; no new 3D or stacking layers.
   ========================================================= */
.heroCopy>p{color:#4d6675;font-size:16px;max-width:760px;line-height:1.82;}

.introGrid p{line-height:1.85}

.workCard>div:last-child h3{line-height:1.55}

.faqGrid>div:first-child>p{max-width:420px;line-height:1.85}

@media(max-width:640px){
  .heroCopy h1{font-size:clamp(34px,11vw,52px);line-height:1.08}

  .heroCopy>p{font-size:14px;line-height:1.8}

}

/* =========================================================
   VIDEO-COORDINATE HOTSPOT
   The brightness trigger is intentionally invisible.
   Its pixel position is calculated in script.js from the
   source-video coordinate system after object-fit: cover.
   ========================================================= */
#nightTaipei.brightnessToggle{
  position:absolute;
  display:block;
  box-sizing:border-box;
  width:0;
  height:0;
  min-height:0;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.08),
    0 0 8px rgba(255,255,255,.30),
    0 0 18px rgba(0,184,234,.28);
  color:transparent;
  font-size:0;
  line-height:0;
  cursor:pointer;
  overflow:hidden;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  z-index:4;
  -webkit-tap-highlight-color:transparent;
}

#nightTaipei.brightnessToggle:hover,
#nightTaipei.brightnessToggle:focus-visible{
  border-color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.055);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.12),
    0 0 10px rgba(255,255,255,.48),
    0 0 24px rgba(0,184,234,.48);
}

#nightTaipei.brightnessToggle:active{
  box-shadow:
    inset 0 0 14px rgba(0,184,234,.18),
    0 0 7px rgba(255,255,255,.38),
    0 0 16px rgba(0,184,234,.38);
}

.introHero.night-mode #nightTaipei.brightnessToggle{
  border-color:rgba(112,220,255,.38);
  background:rgba(0,184,234,.035);
  box-shadow:
    inset 0 0 12px rgba(0,184,234,.10),
    0 0 8px rgba(255,255,255,.24),
    0 0 18px rgba(30,132,242,.34);
}

#nightTaipei.brightnessToggle:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
}

/* Do not replace this with vw/top/right coordinates.
   JS maps the hotspot to the actual visible video frame. */

/* =========================================================
   NIGHT MODE — PROFESSIONAL CONTRAST PASS
   Purpose: treat dark mode as a complete visual system rather
   than a blanket inversion. Explicit selectors target the real
   page components to keep contrast and hierarchy consistent.
   ========================================================= */
body.lugo-night{
  --night-bg:#06131f;
  --night-bg-soft:#081b29;
  --night-surface:#0c2434;
  --night-surface-raised:#112f42;
  --night-surface-strong:#163a4e;
  --night-text:#f5fbfd;
  --night-text-soft:#d7e6ec;
  --night-muted:#a9bec8;
  --night-dim:#7894a2;
  --night-line:rgba(171,220,235,.17);
  --night-line-strong:rgba(171,220,235,.28);
  --night-shadow:0 18px 46px rgba(0,0,0,.24);
}

/* 1. Video -> content bridge must already feel like night. */
body.lugo-night .introHero.is-complete{background:var(--night-bg)}

body.lugo-night .heroReveal{
  background:
    radial-gradient(circle at 78% 18%,rgba(0,184,234,.17),transparent 31%),
    radial-gradient(circle at 18% 74%,rgba(123,108,255,.12),transparent 28%),
    linear-gradient(180deg,#071d2b 0%,var(--night-bg) 100%);
}

body.lugo-night .heroReveal:after{opacity:.85}

body.lugo-night .heroCopy{
  background:linear-gradient(145deg,rgba(17,47,66,.96),rgba(10,31,45,.96));
  border-color:var(--night-line-strong);
  color:var(--night-text);
  box-shadow:var(--night-shadow);
}

body.lugo-night .heroCopy:before{color:#86a8b8}

body.lugo-night .heroCopy h1{color:var(--night-text)}

body.lugo-night .heroCopy h1 em{color:#31c8ee}

body.lugo-night .heroCopy>p{color:var(--night-text-soft)}

body.lugo-night .heroCopy .eyebrow{color:#7edff5}

body.lugo-night .notes span{
  background:rgba(255,255,255,.07);
  border-color:var(--night-line);
  color:#c9dde5;
  box-shadow:none;
}

body.lugo-night .heroProof{
  background:linear-gradient(160deg,#0b2d40,#071d2b);
  border:1px solid rgba(72,198,229,.22);
  color:var(--night-text);
  box-shadow:var(--night-shadow);
}

body.lugo-night .heroProof>b{color:var(--night-text)}

body.lugo-night .heroProof ul{color:#c2d4dc}

body.lugo-night .heroProof li{border-color:var(--night-line)}

/* 2. Continuous canvas and spatial navigation. */
body.lugo-night .spatialCanvas{
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(92,189,216,.055) 50%,transparent calc(50% + .5px)),
    radial-gradient(circle at 94% 8%,rgba(255,113,95,.075),transparent 18%),
    radial-gradient(circle at 5% 29%,rgba(0,184,234,.09),transparent 20%),
    radial-gradient(circle at 94% 53%,rgba(123,108,255,.08),transparent 18%),
    radial-gradient(circle at 7% 78%,rgba(255,211,79,.06),transparent 18%),
    linear-gradient(180deg,#06131f,#071825 48%,#06131f);
}

body.lugo-night .spatialCanvas:before{
  opacity:.22;
  background-image:linear-gradient(rgba(132,197,217,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(132,197,217,.07) 1px,transparent 1px);
}

body.lugo-night .spatialCanvas:after{color:#7594a4;opacity:.75}

body.lugo-night .spatialRail{opacity:.8}

body.lugo-night .spatialRail span{background:#0a2130;box-shadow:0 0 0 8px rgba(0,184,234,.075)}

/* Small labels should read as navigation tags, not faded pills. */
body.lugo-night .spatialCanvas .label,
body.lugo-night .label{
  background:rgba(21,57,76,.86);
  border-color:rgba(104,195,220,.22);
  color:#91def0;
  box-shadow:none;
}

body.lugo-night .label.light{color:#9ce9fa}

/* 3. Trust / proof satellites. */
body.lugo-night .trust{color:var(--night-text)}

body.lugo-night .trustGrid>div{
  background:linear-gradient(145deg,#102c3d,#0b2231);
  border-color:var(--night-line);
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}

body.lugo-night .trustGrid strong{color:#31c8ee}

body.lugo-night .trustGrid b{color:var(--night-text)}

body.lugo-night .trustGrid span{color:var(--night-text-soft)}

body.lugo-night .trustGrid small{color:var(--night-muted)}

/* 4. How-to-choose story panel. */
body.lugo-night .introGrid h2{color:var(--night-text)}

body.lugo-night .introGrid>div:last-child{
  background:linear-gradient(145deg,#102d40,#0c2231);
  border-color:var(--night-line);
  box-shadow:var(--night-shadow);
}

body.lugo-night .introGrid>div:last-child p{color:var(--night-text-soft)}

body.lugo-night .introGrid>div:last-child:before{color:rgba(55,200,237,.13)}

/* 5. Pricing: three cards need strong internal text hierarchy. */
body.lugo-night .plans .heading h2{color:var(--night-text)}

body.lugo-night .plans .heading>p{color:var(--night-muted)}

body.lugo-night .planCard{
  background:linear-gradient(155deg,#112f42,#0b2231);
  border-color:var(--night-line);
  box-shadow:0 16px 40px rgba(0,0,0,.20);
  color:var(--night-text);
}

body.lugo-night .planCard.hot{border-color:rgba(49,200,238,.55)}

body.lugo-night .planCard h3,
body.lugo-night .planCard .price b{color:var(--night-text)}

body.lugo-night .planCard>p,
body.lugo-night .planCard .price small,
body.lugo-night .planCard li{color:var(--night-text-soft)}

body.lugo-night .planCard .price,
body.lugo-night .planCard>a{border-color:var(--night-line)}

body.lugo-night .planCard>a{color:#69dcf5}

body.lugo-night .planTop>i{
  background:rgba(49,200,238,.10);
  border-color:rgba(49,200,238,.22);
  color:#54d5f2;
}

body.lugo-night .planTop small{
  color:#bdd1da;
  background:rgba(255,255,255,.07);
}

body.lugo-night .popular{background:#24c3e8;color:#051722}

body.lugo-night .consultCta{
  background:linear-gradient(110deg,rgba(0,184,234,.13),rgba(96,214,180,.09),rgba(123,108,255,.09));
  border-color:rgba(77,201,231,.22);
  color:var(--night-text);
}

body.lugo-night .consultCta b,
body.lugo-night .consultCta>a{color:var(--night-text)}

body.lugo-night .consultCta small{color:var(--night-muted)}

body.lugo-night .consultCta>a strong{color:#58d6f3}

body.lugo-night .consultCta>a em{color:#9fb8c4}

/* 6. WHY: left side is intentionally deeper; right list is raised. */
body.lugo-night .why{color:var(--night-text)}

body.lugo-night .whyGrid>div:first-child{
  background:linear-gradient(150deg,#071d2b,#0a3143);
  border:1px solid rgba(79,190,219,.16);
  box-shadow:var(--night-shadow);
}

body.lugo-night .whyGrid>div:first-child>p{color:#c4d6de}

body.lugo-night .whyList{
  background:linear-gradient(145deg,#102d40,#0b2231);
  border-color:var(--night-line);
  box-shadow:var(--night-shadow);
}

body.lugo-night .whyList article{border-color:var(--night-line)}

body.lugo-night .whyList article>span{color:#53d3f1}

body.lugo-night .whyList h3{color:var(--night-text)}

body.lugo-night .whyList p{color:var(--night-muted)}

/* 7. Work cards: preserve colorful mockups, make captions readable. */
body.lugo-night .work .heading h2{color:var(--night-text)}

body.lugo-night .workCard>div:last-child small{color:#7ed9ed}

body.lugo-night .workCard>div:last-child h3{color:var(--night-text-soft)}

body.lugo-night .workCard .art{border-color:rgba(174,222,236,.16);box-shadow:0 18px 44px rgba(0,0,0,.21)}

body.lugo-night .artUi{color:#0a2235}

body.lugo-night .art3 .artUi{color:#fff}

/* 8. Process dock: one clear raised surface. */
body.lugo-night .process .heading h2{color:var(--night-text)}

body.lugo-night .process .heading>p{color:var(--night-muted)}

body.lugo-night .steps{
  background:linear-gradient(145deg,#102d40,#0b2231);
  border-color:var(--night-line);
  box-shadow:var(--night-shadow);
}

body.lugo-night .steps article>b{color:#62d9f3}

body.lugo-night .steps h3{color:var(--night-text)}

body.lugo-night .steps p{color:var(--night-muted)}

body.lugo-night .steps article>i{
  background:#0a2130;
  box-shadow:0 0 0 7px rgba(11,34,49,.96);
}

/* 9. Repair panel already dark; lift body copy and CTA contrast. */
body.lugo-night .repairGrid{
  background:linear-gradient(135deg,#0b2d40,#07465d);
  border:1px solid rgba(93,201,228,.17);
}

body.lugo-night .repairGrid p{color:#d2e4eb}

body.lugo-night .repairGrid .btn.white{
  background:#f4fbfd;
  color:#062031;
  border-color:#f4fbfd;
}

/* 10. FAQ: dark accordion with strong question/answer distinction. */
body.lugo-night .faqGrid>div:first-child h2{color:var(--night-text)}

body.lugo-night .faqGrid>div:first-child>p{color:var(--night-muted)}

body.lugo-night .faqItem{
  background:transparent;
  border-top-color:var(--night-line);
}

body.lugo-night .faqItem:last-child{border-bottom-color:var(--night-line)}

body.lugo-night .faqItem button{color:var(--night-text)}

body.lugo-night .faqQuestion{color:var(--night-text)}

body.lugo-night .faqToggle{
  border-color:var(--night-line-strong);
  color:#5ed8f3;
  background:rgba(21,57,76,.45);
}

body.lugo-night .faqItem.open .faqToggle{
  background:#2bc4e8;
  border-color:#2bc4e8;
  color:#051722;
}

body.lugo-night .faqAnswer>p{color:#b7ccd5}

/* 11. Final CTA: make it the brightest dark-mode destination object. */
body.lugo-night .final{color:var(--night-text)}

body.lugo-night .final>.container{
  background:
    radial-gradient(circle at 12% 90%,rgba(0,184,234,.12),transparent 32%),
    radial-gradient(circle at 92% 4%,rgba(255,113,95,.10),transparent 28%),
    linear-gradient(145deg,#13364a,#0c2535);
  border-color:rgba(123,207,229,.24);
  box-shadow:0 24px 60px rgba(0,0,0,.25);
}

body.lugo-night .final h2{color:var(--night-text)}

body.lugo-night .final small{color:#79dbee}

body.lugo-night .final p{color:#c6d8e0}

body.lugo-night .final .btn.white{
  background:#2bc4e8;
  color:#051722;
  border-color:#2bc4e8;
}

body.lugo-night .final .btn.line{
  background:rgba(255,255,255,.05);
  color:#f1fafc;
  border-color:rgba(220,241,247,.28);
}

/* 12. Footer and header: preserve readable navigation. */
body.lugo-night header{background:rgba(4,16,26,.88);border-color:rgba(255,255,255,.08)}

body.lugo-night header .menu a,
body.lugo-night header .logo{color:#f4fbfd}

body.lugo-night header .navCta{background:#22bfe5;color:#06131f}

body.lugo-night footer{background:#030d15;border-top:1px solid rgba(126,188,208,.10)}

body.lugo-night footer b,
body.lugo-night footer strong{color:#eaf6fa}

body.lugo-night footer small,
body.lugo-night footer p,
body.lugo-night footer a{color:#8da9b6}

/* Transition only colors/surfaces; avoid expensive all-property animation. */
body.lugo-night .heroCopy,
body.lugo-night .heroProof,
body.lugo-night .trustGrid>div,
body.lugo-night .introGrid>div:last-child,
body.lugo-night .planCard,
body.lugo-night .whyList,
body.lugo-night .steps,
body.lugo-night .final>.container{
  transition:background-color .28s ease,border-color .28s ease,color .28s ease;
}

@media(max-width:640px){
  body.lugo-night .heroCopy,
  body.lugo-night .planCard,
  body.lugo-night .introGrid>div:last-child,
  body.lugo-night .whyList,
  body.lugo-night .steps,
  body.lugo-night .final>.container{
    box-shadow:0 12px 28px rgba(0,0,0,.20);
  }

}

/* =========================================================
   PERFORMANCE MODE — STATIC NIGHT NAV GLOW
   Keeps the neon identity without continuous text repaint.
   ========================================================= */
body.lugo-night header nav a,
body.lugo-night .siteHeader nav a,
body.lugo-night .mainNav a,
body.lugo-night .navLinks a,
body.lugo-night .wordniho {
  animation:none;
  -webkit-animation:none;
  text-shadow:
    0 0 2px rgba(255,255,255,.96),
    0 0 7px rgba(49,200,238,.58);
  color: #FFF;
}

/* Hover stays subtle and static too */
body.lugo-night header nav a:not(.btn):hover,
body.lugo-night .siteHeader nav a:not(.btn):hover {
  animation:none;
  text-shadow:
    0 0 2px rgba(255,255,255,.98),
    0 0 8px rgba(49,200,238,.72);
}

/* CTA remains completely crisp */
body.lugo-night header nav .navCta,
body.lugo-night header nav a.navCta,
body.lugo-night .siteHeader nav .navCta,
body.lugo-night .siteHeader nav a.navCta,
body.lugo-night header nav a[href*="line.me"],
body.lugo-night .siteHeader nav a[href*="line.me"] {
  animation:none;
  -webkit-animation:none;
  text-shadow:none;
  filter:none;
}


/* Hide the Taipei brightness hotspot from 37s onward */
#nightTaipei.brightnessToggle.is-hidden-by-time{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border-color:transparent;
  box-shadow:none;
}


/* =========================================================
   SCROLL FLASH FIX
   Keep the canvas painted while reveal elements are transparent.
   This prevents a white frame before cards / color blocks appear.
   ========================================================= */
html,
body{
  background:#f5f8f9;
}

.spatialCanvas{
  background-color:#f5f8f9;
  isolation:isolate;
}

body.lugo-night,
body.lugo-night .spatialCanvas{
  background-color:#06131f;
}

/* Reveal only the content itself; never reveal the section/canvas background. */
.js .scrollReveal{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translate3d(0,24px,0);
  transition:
    opacity .42s cubic-bezier(.22,1,.36,1),
    transform .42s cubic-bezier(.22,1,.36,1);
}

.js .scrollReveal.is-visible{
  transform:translate3d(0,0,0);
}

/* On smaller / touch devices, avoid delayed reveal altogether.
   This also removes scroll-compositing flashes on mobile browsers. */
@media (max-width: 900px), (hover: none){
  .js .scrollReveal,
  .js .scrollReveal.is-visible{
    opacity:1;
    transform:none;
    transition:none;
    will-change:auto;
  }
}


/* =========================================================
   INTRO VIDEO LOADING BACKGROUND
   Before the hero video has painted its first frame, use the
   Lugo cyan instead of the dark browser/compositor fallback.
   ========================================================= */
body.intro-pending,
body.video-replaying{
  background-color:#50B9DF;
}

body.intro-pending .introHero,
body.video-replaying .introHero,
.introHero:not(.is-complete){
  background-color:#50B9DF;
}

body.intro-pending .introHero video,
body.video-replaying .introHero video{
  background-color:#50B9DF;
}

.lugo-night body.intro-pending,
.lugo-night body.video-replaying{
  background-color:#0e2c3b;
}

.lugo-night body.intro-pending .introHero,
.lugo-night body.video-replaying .introHero,
.lugo-night .introHero:not(.is-complete){
  background-color:#0e2c3b;
}

.lugo-night body.intro-pending .introHero video,
.lugo-night body.video-replaying .introHero video{
  background-color:#0e2c3b;
}


/* =========================================================
   LUGO ORIGINAL-STYLE FOOTER
   Mirrors the current lugo.tw footer content hierarchy while
   remaining compatible with the redesigned homepage.
   ========================================================= */
.lugoFooter{
  padding:72px 0 28px;
  background:#061727;
  color:#fff;
  position:relative;
}

.lugoFooterInner{
  display:grid;
  grid-template-columns:minmax(240px,1.25fr) minmax(260px,1fr);
  column-gap:80px;
  row-gap:28px;
  align-items:start;
}

.lugoFooterBrand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
}

.lugoFooterLogo{
  display:inline-block;
  width:min(300px,72vw);
}

.lugoFooterLogo img{
  display:block;
  width:100%;
  height:auto;
}
.lugo-night .lugoFooterLogo img {
	filter:brightness(0) invert(1);
}

.lugoFooterServices{
  margin:0;
  color:#c7d8e1;
  font-size:16px;
  line-height:1.8;
  letter-spacing:.03em;
}



.lugoFooterContact a,
.lugoFooterContact address,
.lugoFooterSocial a{
  color:#fff;
  font-size:16px;
  line-height:1.7;
  font-style:normal;
  text-decoration:none;
}

.lugoFooterContact a:hover,
.lugoFooterSocial a:hover{
  color:#50B9DF;
}

.lugoFooterSocial{
  grid-column:2;
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
}

.lugoFooterCopyright{
  grid-column:1/-1;
  margin-top:18px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
  /*color:#7895a6;*/
  font-size:14px;
  line-height:1.6;
}

body.lugo-night .lugoFooter{
  background:#030d15;
}

body.lugo-night .lugoFooterServices{color:#b6cbd5;}
body.lugo-night .lugoFooterContact a,
body.lugo-night .lugoFooterContact address,
body.lugo-night .lugoFooterSocial a{color:#eef8fb;}
body.lugo-night .lugoFooterCopyright{color:#7895a6;}

@media(max-width:760px){
  .lugoFooter{padding:54px 0 24px;}
  .lugoFooterInner{
    grid-template-columns:1fr;
    row-gap:24px;
  }
  .lugoFooterLogo{width:min(250px,72vw);}
  .lugoFooterSocial{grid-column:1;}
  .lugoFooterCopyright{grid-column:1;margin-top:8px;}
}


/* =========================================================
   LUGO FOOTER ONLY
   Original horizontal layout + night mode.
   This block intentionally does not target header/navigation.
   ========================================================= */
.lugoFooter{
  position:relative;
  margin:0;
  padding:42px 0 38px;
  background:#eeeeee;
  border-top:1px solid #d6d6d6;
  color:#111;
}
/*.lugoFooterInner{
  width:100%;
  margin:0;
  padding:0 clamp(32px,5.6vw,116px);
  display:grid;
  grid-template-columns:minmax(280px,390px) minmax(440px,1fr) minmax(360px,600px);
  gap:42px 64px;
  align-items:start;
}*/
.lugoFooterBrand{min-width:0}
.lugoFooterLogo{display:block;width:240px;max-width:100%}
.lugoFooterLogo img{display:block;width:auto;height:100px;}
.lugoFooterInfo{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding-top:6px;
  height: 100%;
	justify-content: flex-end;
}
.lugoFooterStatement{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0 0 12px;
  line-height:1.55;
}
.lugoFooterStatement strong{font-size:18px;font-weight:700;letter-spacing:.01em}
.lugoFooterStatement span{font-size:16px;font-weight:400}
.lugoFooterServices{margin:0 0 2px;font-size:16px;line-height:1.6;font-weight:500}
.lugoFooterInfo a,
.lugoFooterInfo address{
  display:block;
  margin:0;
  color:inherit;
  font-size:16px;
  line-height:1.55;
  font-style:normal;
  text-decoration:none;
}
.lugoFooterInfo a:hover{color:#277f9f}
.lugoFooterRight{
  min-height:142px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  padding-top:2px;
  text-align:right;
   height: 100%;
}
.lugoFooterSocial{display:flex;align-items:center;justify-content:flex-end;gap:30px}
.lugoFooterSocial .footerSocial{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:inherit;
  font-size:16px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.lugoFooterSocial .footerSocial:hover{opacity:.65}
.footerSocialIcon{
  width:24px;height:24px;
  flex:0 0 24px;
  display:block;
  object-fit:contain;
}
.lugoFooterCopyright{font-size:16px;line-height:1.5;white-space:nowrap}

/* Footer follows the existing full-page night state. */
body.lugo-night .lugoFooter{
  background:#071824;
  border-top-color:rgba(171,220,235,.17);
  color:#f5fbfd;
}
body.lugo-night .lugoFooterLogo img{
  filter:invert(1) brightness(1.08);
}
body.lugo-night .lugoFooterInfo a:hover{color:#50B9DF}
body.lugo-night .footerSocialIcon{
  filter:invert(1);
}

@media(max-width:1180px){
  .lugoFooterInner{grid-template-columns:250px minmax(360px,1fr)}
  .lugoFooterRight{
    grid-column:1/-1;
    min-height:0;
    flex-direction:row;
    align-items:center;
  }
}
@media(max-width:760px){
  .lugoFooter{padding:38px 0 30px}
  .lugoFooterInner{padding:0 24px;grid-template-columns:1fr;gap:26px}
  .lugoFooterLogo{width:210px}
  .lugoFooterInfo{padding-top:0}
  .lugoFooterRight{
    grid-column:auto;
    align-items:flex-start;
    flex-direction:column;
    gap:24px;
    text-align:left;
  }
  .lugoFooterSocial{justify-content:flex-start}
  .lugoFooterCopyright{font-size:14px;white-space:normal}
}

.brandTransition{
  padding:42px 24px 26px;
  text-align:center;
  color:#8ba3af;
  font-size:14px;
  font-weight:700;
  letter-spacing:.34em;
}
body.lugo-night .brandTransition{color:#7894a2}
@media(max-width:760px){
  .brandTransition{padding:30px 20px 18px;letter-spacing:.18em}
}


/* =========================================================
   PLAN BADGE CLIPPING FIX
   Reserve space above cards so the negative-position badge
   remains fully visible inside the section/container.
   ========================================================= */
.plans .planGrid{
  padding-top:20px;
}

/* The card clips its children (overflow:hidden), which cut the badge in half.
   Let the hot card overflow, and keep its decorative blob hidden as before. */
.plans .planCard.hot{
  overflow:visible;
}

.plans .planCard.hot:before{
  display:none;
}

.plans .planCard.hot .popular{
  top:-14px;
  z-index:3;
}

@media(max-width:760px){
  .plans .planGrid{
    padding-top:18px;
  }
}

/* =========================================================
   2026-09-02 Responsive restore
   Several early mobile media queries were re-declared by base
   rules further down this file, so they never took effect and
   these blocks stayed multi-column on phones. Re-stated here
   (end of file) so the narrow-screen layout actually wins.
   ========================================================= */
@media(max-width:980px){
  .heroRevealGrid{grid-template-columns:1fr;gap:42px}

  .introGrid{grid-template-columns:1fr;gap:45px}

  .trustGrid{grid-template-columns:1fr 1fr}
  .trustGrid>div{padding:20px}

  .whyGrid{grid-template-columns:1fr;gap:48px}

  .workGrid{grid-template-columns:1fr 1fr}
  .workCard.large{grid-row:auto;grid-column:1/-1}

  .steps{grid-template-columns:repeat(3,1fr);gap:30px}

  .repairGrid{grid-template-columns:80px 1fr;padding:38px 34px}
}

@media(max-width:640px){
  header{height:68px}

  .introGrid{gap:25px}

  .planGrid{gap:16px}

  .trustGrid{grid-template-columns:1fr;gap:12px}
  .trustGrid>div{padding:17px 16px;gap:10px}
  .trustGrid strong{font-size:30px}
  .trustGrid span{font-size:14px}

  .heroProof .proofNo{font-size:52px}

  .planCard{padding:26px;border-radius:28px}

  .rent{flex-wrap:wrap;align-items:flex-start}
  .consultCta>a{padding-left:0}

  .whyGrid{gap:50px}

  .workGrid{grid-template-columns:1fr}
  .workCard.large{grid-column:auto}

  .steps{grid-template-columns:1fr 1fr;padding:22px 16px 18px;border-radius:28px}

  .repairGrid{grid-template-columns:1fr;gap:18px;padding:30px 24px;border-radius:28px}
  .repairGrid>div:last-child{grid-column:auto}

  .faqList{padding:8px 22px;border-radius:28px}
}

/* Shared LUGO navigation + footer */
.langSwitch{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;white-space:nowrap}.langSwitch>a{opacity:.58;transition:opacity .2s ease,color .2s ease}.langSwitch>a:hover,.langSwitch>a.is-active{opacity:1;color:#00b8ea}.langSwitch>span{opacity:.35}.lugoFooter{background:#ececec;color:#172c36;padding:54px 0 28px;border-top:1px solid #d7dfe2}.lugoFooterInner{width:min(1160px,calc(100% - 48px));margin:auto;display:grid;grid-template-columns:minmax(250px,1.25fr) minmax(340px,1.35fr) minmax(230px,.8fr);gap:52px 44px;align-items:start}.lugoFooterBrand{min-width:0}.lugoFooterLogo{display:block;width:230px;max-width:100%;margin-bottom:16px}.lugoFooterLogo img{display:block;width:auto;height:88px;max-width:100%;object-fit:contain}.lugoFooterStatement{display:grid;gap:4px;max-width:360px}.lugoFooterStatement strong{font-size:16px;line-height:1.6}.lugoFooterStatement span{font-size:14px;line-height:1.7;color:#60727a}.lugoFooterLinks{display:grid;grid-template-columns:1fr 1fr;gap:36px}.lugoFooterLinks section,.lugoFooterContact{display:flex;flex-direction:column;align-items:flex-start}.lugoFooterLinks h2,.lugoFooterContact h2{margin:0 0 13px;font-size:14px;line-height:1.4;letter-spacing:.08em;color:#172c36}.lugoFooterLinks a,.lugoFooterContact>a,.lugoFooterContact address{font-size:14px;line-height:1.65;color:#52666f;margin:2px 0;font-style:normal}.lugoFooterLinks a:hover,.lugoFooterContact>a:hover,.lugoFooterSocial a:hover{color:#00a9d5}.lugoFooterSocial{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:13px}.lugoFooterSocial a{font-size:14px;font-weight:700;color:#172c36}.lugoFooterBottom{grid-column:1/-1;border-top:1px solid #cfd8dc;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#72838b}.footerLang{display:flex;align-items:center;gap:7px;font-size:14px}.footerLang a{color:#60727a}.footerLang a.is-active,.footerLang a:hover{color:#00a9d5}.lugoFooterCopyright{font-size:14px;line-height:1.5}@media(max-width:980px){.langSwitch{width:max-content}.lugoFooterInner{grid-template-columns:1fr 1fr}.lugoFooterBrand{grid-column:1/-1}.lugoFooterBottom{grid-column:1/-1}}@media(max-width:640px){.lugoFooter{padding:42px 0 24px}.lugoFooterInner{width:calc(100% - 32px);grid-template-columns:1fr;gap:32px}.lugoFooterBrand,.lugoFooterBottom{grid-column:auto}.lugoFooterLinks{grid-template-columns:1fr 1fr;gap:24px}.lugoFooterLogo{width:200px}.lugoFooterLogo img{height:76px}.lugoFooterBottom{align-items:flex-start;flex-direction:column;gap:8px}}@media(max-width:420px){.lugoFooterLinks{grid-template-columns:1fr}}
.nav nav .langSwitch a{font-size:14px}.intro-ui-ready header .langSwitch a,header.intro-nav-visible .langSwitch a{color:#fff}.intro-ui-ready header .langSwitch a.is-active,header.intro-nav-visible .langSwitch a.is-active{color:#50b9df}@media(max-width:980px){.nav nav .langSwitch{padding:4px 0}}body.lugo-night .lugoFooter{background:#0b1e29;color:#eef8fb;border-color:#173542}body.lugo-night .lugoFooterStatement strong,body.lugo-night .lugoFooterLinks h2,body.lugo-night .lugoFooterContact h2,body.lugo-night .lugoFooterSocial a{color:#eef8fb}body.lugo-night .lugoFooterStatement span,body.lugo-night .lugoFooterLinks a,body.lugo-night .lugoFooterContact>a,body.lugo-night .lugoFooterContact address,body.lugo-night .footerLang a,body.lugo-night .lugoFooterCopyright{color:#a9bec8}body.lugo-night .lugoFooterBottom{border-color:#27414d}body.lugo-night .lugoFooterLogo img{filter:brightness(0) invert(1)}