:root{color-scheme:light;--blue:#197fb3;--ink:#123047;--muted:#5d7180;--yellow:#ffcd00;--paper:#f7f9fa}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 89% 40%,#e7f1f7 0,transparent 55%);z-index:-1}.wrap{width:calc(100% - 112px);max-width:1320px;margin-inline:auto}.header{display:flex;align-items:center;justify-content:space-between;padding-block:34px;gap:24px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}.brand img{width:57px;height:57px;object-fit:contain}.brand strong{display:block;font-size:27px;letter-spacing:2px;line-height:1.1}.brand small{display:block;font-size:11px;letter-spacing:.55px;margin-top:6px}.header-note{font-size:12px;color:var(--muted)}.main{min-height:calc(100svh - 216px);display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:54px;padding-block:55px 85px}.status{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:2px;color:var(--blue);margin-bottom:28px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px #197fb30c}h1{font-size:clamp(48px,4.7vw,76px);letter-spacing:-3.4px;line-height:1.08;margin:0 0 28px;font-weight:700}h1 span{color:var(--blue);position:relative;white-space:nowrap}h1 span::after{content:"";position:absolute;left:0;right:2px;bottom:-7px;height:5px;background:var(--yellow);border-radius:4px}.intro{font-size:20px;margin:0 0 14px;line-height:1.5}.description{font-size:15px;line-height:1.9;color:var(--muted);max-width:410px;margin:0}.return-note{display:flex;gap:14px;align-items:stretch;margin-top:38px}.note-line{width:3px;background:var(--yellow);border-radius:3px;flex-shrink:0}.return-note p{font-size:12px;line-height:1.9;margin:0;color:var(--muted)}.return-note strong{color:var(--ink);font-weight:600}.visual{position:relative;width:100%;max-width:550px;aspect-ratio:1.08;justify-self:center;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #d9e6ed;border-radius:50%;width:94%;aspect-ratio:1}.orbit-two{width:75%;border-style:dashed;transform:rotate(-15deg)}.window{width:78%;background:white;border:1px solid #d5e3ec;border-radius:17px;overflow:hidden;transform:rotate(-5deg);box-shadow:0 28px 55px #24465e14;z-index:2}.window-bar{height:37px;background:#f5f8fb;border-bottom:1px solid #e6edf2;display:flex;gap:5px;align-items:center;padding:0 15px}.window-bar>span{width:6px;height:6px;border-radius:50%;background:#c5d4de}.window-bar>span:first-child{background:var(--yellow)}.window-bar>div{height:6px;width:33%;border-radius:5px;background:#e5edf2;margin-left:auto}.window-body{padding:25px 25px 16px}.logo-tile{background:#f0f6fa;border:1px solid #e4eef4;border-radius:17px;width:112px;height:112px;margin:0 auto 22px;display:grid;place-items:center}.logo-tile img{width:100px;height:100px;object-fit:contain}.placeholder{height:7px;border-radius:5px;background:#dfebf2;margin:9px auto}.long{width:58%}.short{width:39%;background:#edf2f6}.building{display:flex;gap:6px;margin:24px 0 21px;align-items:end;height:39px}.building span{flex:1;background:#d8eaf4;border-radius:4px 4px 0 0;height:45%}.building span:nth-child(2){height:66%;background:#aed3e8}.building span:nth-child(3){height:81%;background:#65add2}.building span:nth-child(4){height:100%;background:var(--blue)}.window-bottom{border-top:1px solid #edf1f4;padding-top:13px;display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#7c909e}.window-bottom>span:last-child{color:var(--blue);font-size:14px}.floating-label{position:absolute;z-index:3;bottom:10%;left:0;display:flex;gap:12px;align-items:center;background:white;border:1px solid #e0e8ec;border-radius:12px;padding:17px 19px;box-shadow:0 12px 30px #24465e0b;transform:rotate(2deg)}.tool-icon{background:#fff6ce;color:#a17b00;border-radius:9px;padding:9px;font-size:23px}.floating-label strong,.floating-label div>span{display:block;font-size:11px}.floating-label div>span{color:var(--muted);font-size:10px;margin-top:6px}.spark{position:absolute;color:var(--blue);font-size:31px;font-weight:300}.spark-one{top:7%;left:12%;transform:rotate(15deg)}.spark-two{bottom:22%;right:0;color:#dcb200;font-size:25px}.little-dot{position:absolute;right:13%;top:7%;width:9px;height:9px;border-radius:50%;background:var(--yellow)}.yellow-block{position:absolute;right:5%;bottom:14%;background:var(--yellow);width:56px;height:56px;border-radius:12px;transform:rotate(13deg);z-index:1}.visual-caption{position:absolute;bottom:-6%;font-size:9px;letter-spacing:2.1px;color:#8b9ba6}.footer{border-top:1px solid #dce5eb;display:flex;justify-content:space-between;gap:20px;padding-block:24px;color:#7b8d9a;font-size:10px}.footer p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 320–480px: small phones */
@media(max-width:480px){.wrap{width:calc(100% - 40px)}.header{padding-block:23px}.brand img{width:45px;height:45px}.brand strong{font-size:22px}.brand small{font-size:9px}.header-note{display:none}.main{grid-template-columns:1fr;gap:37px;padding-block:39px 52px;min-height:0}.status{font-size:9px;letter-spacing:1.5px;margin-bottom:23px}h1{font-size:clamp(39px,10.8vw,51px);letter-spacing:-1.8px;margin-bottom:26px}.intro{font-size:17px}.description{font-size:14px;line-height:1.8}.return-note{margin-top:26px}.visual{max-width:360px}.floating-label{padding:12px;gap:8px;left:0;bottom:7%}.floating-label strong{font-size:9px}.floating-label div>span{font-size:9px}.tool-icon{padding:7px;font-size:19px}.window-body{padding:18px 18px 12px}.logo-tile{width:83px;height:83px;margin-bottom:16px}.logo-tile img{width:76px;height:76px}.building{height:29px;margin:17px 0 14px}.window-bottom{font-size:7px}.window-bar{height:29px}.visual-caption{font-size:8px;letter-spacing:1.4px;bottom:-7%}.yellow-block{width:40px;height:40px}.footer{flex-direction:column;gap:10px;font-size:9px;padding-block:21px}}
/* 481–767px: standard phones */
@media(min-width:481px) and (max-width:767px){.wrap{width:calc(100% - 64px)}.header-note{display:none}.main{grid-template-columns:1fr;gap:40px;padding-block:45px 65px;min-height:0}h1{font-size:60px;letter-spacing:-2.8px}.visual{max-width:410px}.description{max-width:460px}.footer{font-size:9px}.visual-caption{bottom:-5%}}
/* 768–1023px: portrait tablets */
@media(min-width:768px) and (max-width:1023px){.wrap{width:calc(100% - 88px)}.main{gap:18px;padding-block:70px 95px;min-height:calc(100svh - 215px)}h1{font-size:48px;letter-spacing:-2.4px}.intro{font-size:17px}.description{font-size:14px}.floating-label{padding:12px;gap:8px;left:-9%;bottom:5%}.floating-label strong{font-size:9px}.floating-label div>span{font-size:9px}.logo-tile{width:85px;height:85px}.logo-tile img{width:78px;height:78px}.window-body{padding:20px 19px 14px}.visual-caption{font-size:7px;letter-spacing:1.5px;bottom:-13%}.window-bottom{font-size:7px}}
/* 1024–1279px: landscape tablets and small laptops */
@media(min-width:1024px) and (max-width:1279px){.wrap{width:calc(100% - 96px)}.main{gap:35px}h1{font-size:57px;letter-spacing:-2.7px}.floating-label{padding:14px}.floating-label strong{font-size:10px}}
/* 1280–1439px: standard laptops */
@media(min-width:1280px) and (max-width:1439px){.main{gap:62px}h1{font-size:66px}}
/* 1440–1919px: desktops */
@media(min-width:1440px) and (max-width:1919px){.main{gap:90px}.visual{max-width:550px}}
/* 1920px+: large monitors; bounded content keeps lines readable */
@media(min-width:1920px){.wrap{max-width:1480px}.header{padding-block:44px}.main{gap:130px;min-height:calc(100svh - 238px)}h1{font-size:86px}.intro{font-size:23px}.description{font-size:17px;max-width:470px}.visual{max-width:610px}.footer{font-size:12px}}

/* One consistent typographic style for the full company name. */
.brand{gap:14px;min-width:0}
.brand img{width:52px;height:52px;flex-shrink:0}
.brand-wordmark{display:flex;align-items:center;white-space:nowrap;border-left:1px solid #cddbe4;padding:8px 0 8px 16px}
.brand-name{font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:1.3;letter-spacing:-.35px;font-weight:600;color:#123047}
@media(min-width:768px) and (max-width:1023px){.header-note{max-width:155px;text-align:right;line-height:1.6}.brand-name{font-size:20px}.brand-wordmark{padding-left:12px}}
@media(min-width:481px) and (max-width:767px){.brand{gap:10px}.brand img{width:46px;height:46px}.brand-wordmark{padding-left:12px}.brand-name{font-size:20px}}
@media(max-width:480px){.brand{gap:8px}.brand img{width:34px;height:34px}.brand-wordmark{border:0;padding:0}.brand-name{font-size:clamp(14px,4.375vw,20px);letter-spacing:-.3px}}
/* Keep the desktop/tablet tagline intact beside the company name. */
.header-note{white-space:nowrap;flex-shrink:0;max-width:none;text-align:right;line-height:1.5}
@media(min-width:768px) and (max-width:1023px){.header{gap:16px}.header-note{font-size:10px}}
/* Brand typography echoes the page's blue accent and clean heading style. */
.brand-wordmark{border-left:0;padding-left:0}
.brand-name{color:var(--blue);font-weight:700;letter-spacing:-.45px}
.brand{gap:12px}
@media(max-width:480px){.brand{gap:8px}.brand-name{letter-spacing:-.3px}}
/* Heavy sans-serif lettering inspired by the supplied FASTEK reference. */
.brand-name{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.35px;font-size:21px}
@media(min-width:481px) and (max-width:1023px){.brand-name{font-size:18px;letter-spacing:-.55px}}
@media(max-width:480px){.brand-name{font-size:clamp(12px,3.8vw,18px);letter-spacing:-.45px}}

/* Seasonal design: enabled by the Philippine calendar in script.js. */
.seasonal-scene,.seasonal-greeting,.halloween-pumpkin{display:none}
html.halloween{color-scheme:dark;--paper:#151422;--ink:#f7f1e8;--muted:#b9b2c6;--blue:#ffb465;--yellow:#f7aa53}
.halloween body::before{background:radial-gradient(ellipse at 80% 35%,#3e284c88 0,transparent 56%),radial-gradient(ellipse at 0 95%,#34233c66,transparent 45%)}
.halloween .seasonal-scene{display:block;position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.halloween .halloween-moon{position:absolute;right:9%;top:14%;width:140px;aspect-ratio:1;border-radius:50%;background:#ffdda0;box-shadow:0 0 70px #f3c47615;opacity:.14}
.halloween .bat{position:absolute;fill:#957aab;opacity:.5;width:65px;right:8%;top:25%;transform:rotate(16deg)}
.halloween .bat-two{right:20%;top:17%;width:35px;transform:rotate(-17deg)}
.halloween .web-corner{position:absolute;width:210px;height:210px;right:-60px;top:-60px;border-radius:50%;opacity:.16;background:repeating-radial-gradient(circle at 100% 0,transparent 0 30px,#b6a1c6 31px 32px,transparent 33px 47px);transform:rotate(10deg)}
.halloween .brand-name{color:#f7f1e8}
.halloween .brand img{background:#ffffff0a;border-radius:9px}
.halloween .seasonal-greeting{display:block;color:#e5b98c;font-size:11px;line-height:1.6;letter-spacing:.7px;margin:0 0 23px}
.halloween .status{color:#c9b8dd}
.halloween .status-dot{background:#c9b8dd;box-shadow:0 0 0 5px #c9b8dd0c}
.halloween .window{background:#252235;border-color:#54435d;box-shadow:0 28px 80px #0003}
.halloween .window-bar{background:#30293e;border-color:#44384f}
.halloween .window-bar>span{background:#776382}
.halloween .window-bar>div{background:#4b3e58}
.halloween .logo-tile{background:#f2f5f8;border-color:#ffffff33}
.halloween .placeholder{background:#51415f}
.halloween .placeholder.short{background:#3c3349}
.halloween .building span{background:#624b71}
.halloween .building span:nth-child(2){background:#947090}
.halloween .building span:nth-child(3){background:#c58d75}
.halloween .building span:nth-child(4){background:#ffb465}
.halloween .window-bottom{border-color:#4c3d56;color:#c5b8cf}
.halloween .floating-label{background:#30283d;border-color:#594662;box-shadow:0 12px 30px #0002}
.halloween .tool-icon{background:#f6ab5420;color:#ffbd73}
.halloween .orbit{border-color:#76578755}
.halloween .visual-caption{color:#b3a2bf}
.halloween .yellow-block{display:none}
.halloween .halloween-pumpkin{display:block;position:absolute;width:110px;right:0;bottom:7%;z-index:4;transform:rotate(8deg);filter:drop-shadow(0 10px 18px #0003)}
.halloween .spark{color:#c4a4d8}
.halloween .spark-two{color:#ffb465}
.halloween .footer{border-color:#45364f;color:#b9acc3}
@media(max-width:480px){.halloween .halloween-pumpkin{width:65px;right:-2%;bottom:10%}.halloween .seasonal-greeting{font-size:10px;letter-spacing:.3px;margin-bottom:18px}.halloween .halloween-moon{width:100px;right:4%;top:20%}.halloween .bat-one{top:24%;width:40px}.halloween .bat-two{top:16%}}
@media(min-width:481px) and (max-width:1023px){.halloween .halloween-pumpkin{width:80px;right:-2%}}

/* Expected launch countdown, shared by the regular and seasonal designs. */
.launch-countdown{margin-top:30px;max-width:360px}
.launch-countdown[hidden]{display:none}
.launch-label{font-size:9px;font-weight:700;letter-spacing:1.3px;line-height:1.7;color:var(--muted);margin:0 0 14px}
.countdown-digits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.countdown-digits>div{border:1px solid #dce5eb;border-radius:10px;padding:13px 5px 11px;text-align:center;background:#ffffff66}
.countdown-digits strong{display:block;font-size:29px;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--ink)}
.countdown-digits span{display:block;font-size:9px;letter-spacing:.4px;margin-top:7px;color:var(--muted)}
.launch-time{font-size:10px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.halloween .countdown-digits>div{border-color:#594662;background:#30283d88}
.halloween .countdown-digits strong{color:#ffb465}
@media(max-width:480px){.launch-countdown{margin-top:25px}.countdown-digits{gap:8px}.countdown-digits strong{font-size:25px}.launch-label{font-size:8px;letter-spacing:.8px}}