*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#061018;color:#eef6fa;font-family:Arial,sans-serif;line-height:1.45}a{color:inherit}.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px 4vw;background:#061018f2;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand img{width:64px;height:64px;border-radius:50%;background:#fff}.brand b{font-size:21px}.brand small{display:block;color:#9aadb7}.head-contact{display:flex;flex-direction:column;text-align:right}.head-contact a{text-decoration:none}.top select{background:#10202a;color:#fff;border:1px solid #ffffff2b;padding:9px;border-radius:8px}.hero{min-height:570px;display:grid;place-items:center;padding:70px 22px;background:radial-gradient(circle at 50% 45%,#05466d88,transparent 44%),linear-gradient(#07131d,#071018)}.hero-inner{text-align:center;max-width:900px;margin:auto}.eyebrow{color:#57caff;letter-spacing:.18em;font-weight:700}.hero h1{font-size:clamp(43px,7vw,78px);line-height:1.02;margin:18px 0}.hero h2{font-size:clamp(22px,3vw,34px);color:#66cfff;margin:0 auto 18px}.hero-copy{max-width:720px;margin:0 auto;color:#bfd0d8;font-size:19px}.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:28px auto}.hero-actions a{min-width:210px;text-align:center;background:#0663d6;padding:14px 23px;border-radius:8px;text-decoration:none;font-weight:bold}.hero-actions .green{background:#15944d}.callout{font-size:18px}.services,.documents,.contact,.legal{padding:65px max(6vw,30px);max-width:1500px;margin:auto}.services>h2,.documents>h2,.contact h2{font-size:40px;text-align:center}.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.service{position:relative;background:#0b1821;border:1px solid #32617a;border-radius:15px;overflow:hidden;padding-bottom:16px;transition:.3s}.service:hover{transform:translateY(-5px);box-shadow:0 14px 35px #0008;border-color:#55caff}.service>img,.track{display:block;width:100%;height:155px;object-fit:cover;background:#0a1116}.track{overflow:hidden}.track img{width:100%;height:100%;object-fit:cover;transition:.15s}.service h3,.service p{padding:0 13px}.service h3{font-size:18px;margin:13px 0 5px}.service p{color:#adc1cb;margin:0}.paper{position:absolute;top:-140px;left:50%;transform:translateX(-50%);background:white;color:#111;font:11px monospace;padding:10px 16px;transition:1s;box-shadow:0 5px 10px #0007}.cash:hover .paper{top:100px}.ups:hover img{animation:hum .08s infinite}.induction:hover img{filter:brightness(1.25)}.computer:hover img{filter:saturate(1.4) brightness(1.15)}.microwave:hover img{transform:scale(1.03)}.documents{background:#0a1823;border:1px solid #20445a;border-radius:22px}.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#31546a}.doc-grid article{background:#08141d;padding:18px;text-align:center}.doc-grid img{width:100%;height:150px;object-fit:cover}.doc-grid h3{font-size:21px}.doc-grid p{color:#aabfc9}.contact{display:grid;grid-template-columns:1fr 2fr;gap:18px}.why,form{background:#0a1821;border:1px solid #2d5267;border-radius:18px;padding:24px}.why h2,form h2{text-align:left}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}input,textarea,form select,button{width:100%;padding:12px;border-radius:7px;border:1px solid #ffffff2a;background:#061018;color:#fff;margin-bottom:10px}textarea{min-height:105px}button{background:#0878dc;font-weight:bold;cursor:pointer}.consent{display:flex;gap:9px;color:#bcd0d8;align-items:flex-start}.consent input{width:auto}.legal{text-align:center}.legal a{color:#62ccff}.side{position:fixed;z-index:15;top:30%;width:125px;background:#07121bec;border:1px solid #2a5268;border-radius:13px;padding:9px;text-align:center}.side-left{left:8px}.side-right{right:8px}.side h4{font-size:12px;color:#50c8ff;margin:4px}.side img{width:100%;background:white;padding:5px}.side a{display:block;text-decoration:none;border:1px solid #1d91df;border-radius:6px;padding:7px 3px;margin-top:7px;font-size:12px}footer{position:relative;min-height:65px;border-top:1px solid #ffffff18;padding:24px 25px;text-align:center;color:#829aa5}.version{position:absolute;right:13px;bottom:8px;font:10px monospace;color:#607984}@keyframes hum{50%{transform:translateX(1px)}}@media(max-width:1250px){.side{display:none}.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.doc-grid{grid-template-columns:1fr 1fr}.contact{grid-template-columns:1fr}.head-contact{display:none}}@media(max-width:560px){.grid,.doc-grid,.two{grid-template-columns:1fr}.top{padding:8px 10px}.brand img{width:48px;height:48px}.brand b{font-size:16px}.brand small{display:none}.top select{max-width:125px}.hero h1{font-size:43px}.services,.documents,.contact,.legal{padding:45px 16px}}
/* v0.3: one compact interactive documents card instead of duplicated section */
.documents-card{cursor:pointer}
.doc-details{display:grid;gap:5px;padding:0 13px;max-height:0;opacity:0;overflow:hidden;transition:.35s;color:#c4d8e1;font-size:13px}
.documents-card:hover .doc-details,.documents-card:focus-visible .doc-details,.documents-card.open .doc-details{max-height:150px;opacity:1;margin-top:10px}
.doc-animation{position:absolute;right:10px;top:92px;width:78px;height:55px;pointer-events:none}
.doc-animation .sheet{position:absolute;display:grid;place-items:center;width:54px;height:36px;background:#fff;color:#222;font:7px monospace;left:0;top:-28px;opacity:0;transition:.55s}
.doc-animation .mail{position:absolute;right:0;bottom:0;font-style:normal;font-size:23px;opacity:0;transform:translateX(-18px);transition:.55s .25s}
.documents-card:hover .sheet,.documents-card:focus-visible .sheet,.documents-card.open .sheet{top:3px;opacity:1}
.documents-card:hover .mail,.documents-card:focus-visible .mail,.documents-card.open .mail{opacity:1;transform:translateX(0)}

/* v0.4: expanded cash-register services */
.cash-card{cursor:pointer}
.cash-details{
  display:grid;
  gap:5px;
  padding:0 13px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .35s ease, opacity .25s ease, margin .35s ease;
  color:#c6dae4;
  font-size:13px
}
.cash-card:hover .cash-details,
.cash-card:focus-visible .cash-details,
.cash-card.open .cash-details{
  max-height:260px;
  opacity:1;
  margin-top:10px
}
.cash-card .paper{transition:top 1s ease, opacity .3s ease}
.cash-card:not(:hover):not(:focus-visible):not(.open) .paper{top:-140px}

/* v0.6 — lightweight interactive service scenes */
.scene-wrap{position:relative;height:155px;overflow:hidden;background:#071017}
.scene-wrap>img{width:100%;height:100%;object-fit:cover;transition:.45s}
.interactive:hover .scene-wrap>img{transform:scale(1.035)}
.mw-door{position:absolute;inset:7px;background:#071017b5;border:2px solid #9db1bb;transform-origin:right;transition:.55s;backdrop-filter:brightness(.5)}
.mw-food{position:absolute;left:47%;top:56%;font-size:24px;opacity:0;transition:.35s}
.microwave:hover .mw-door,.microwave:focus-visible .mw-door{transform:perspective(450px) rotateY(-72deg)}
.microwave:hover .mw-food,.microwave:focus-visible .mw-food{opacity:1}
.boot-screen{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;background:#071a2dd8;opacity:0;transition:.35s}
.boot-screen i{width:44px;height:44px;border:4px solid #62c9ff;border-top-color:transparent;border-radius:50%}
.boot-screen b{font-size:12px;color:#d8efff}
.computer:hover .boot-screen,.computer:focus-visible .boot-screen{opacity:1}
.computer:hover .boot-screen i,.computer:focus-visible .boot-screen i{animation:spin 1s linear infinite}
.steam-cloud{position:absolute;left:47%;bottom:24px;color:#eefaff;font:34px/20px Georgia;opacity:0;filter:blur(1px);transition:.3s}
.induction:hover .steam-cloud,.induction:focus-visible .steam-cloud{opacity:.85;animation:steamRise 1.4s ease-in-out infinite}
.ups-leds{position:absolute;right:14%;top:48%;display:flex;gap:5px}
.ups-leds i{width:7px;height:7px;border-radius:50%;background:#52ff7c;box-shadow:0 0 9px #52ff7c;opacity:.35}
.ups:hover .ups-leds i,.ups:focus-visible .ups-leds i{animation:led 1.2s infinite}
.ups:hover .ups-leds i:nth-child(2){animation-delay:.2s}.ups:hover .ups-leds i:nth-child(3){animation-delay:.4s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes steamRise{50%{transform:translateY(-16px);opacity:.35}}@keyframes led{50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.mw-door,.scene-wrap>img,.boot-screen,.steam-cloud,.ups-leds i{animation:none!important;transition:none!important}}

/* v0.7 — computer card: no fake loading/waiting UI */
.computer .boot-screen{display:none!important}
.desktop-demo{position:absolute;inset:0;background:linear-gradient(135deg,#071a2dce,#0a3a61d8);opacity:0;transition:.22s;display:grid;place-items:center;align-content:center;gap:12px}
.desktop-mark{font-size:44px;color:#70d4ff;text-shadow:0 0 18px #21a8ff}
.service-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.service-tags span{font-size:10px;background:#07131ddd;border:1px solid #64d0ff;padding:5px 7px;border-radius:12px;color:#e8f8ff;transform:translateY(6px);opacity:0}
.fan{position:absolute;right:10px;bottom:8px;font-size:27px;color:#c7eaff;opacity:0}
.computer:hover .desktop-demo,.computer:focus-visible .desktop-demo{opacity:1}
.computer:hover .service-tags span,.computer:focus-visible .service-tags span{animation:tagIn .25s forwards}
.computer:hover .service-tags span:nth-child(2){animation-delay:.08s}.computer:hover .service-tags span:nth-child(3){animation-delay:.16s}
.computer:hover .fan,.computer:focus-visible .fan{opacity:.8;animation:fanSpin 1.1s linear infinite}
@keyframes tagIn{to{opacity:1;transform:translateY(0)}}@keyframes fanSpin{to{transform:rotate(360deg)}}

/* v0.8 — cash receipt and tutoring interaction */
.cash-animation{position:absolute;left:50%;top:62px;width:104px;height:120px;transform:translateX(-50%);pointer-events:none;overflow:visible}
.receipt-slot{position:absolute;top:0;left:8px;width:88px;height:6px;background:#05080a;border-radius:5px;box-shadow:0 1px 4px #000}
.cash-card .paper{position:absolute;top:4px;left:50%;width:82px;min-height:96px;transform:translateX(-50%) translateY(-105px);background:#fff;color:#111;font:8px/1.25 monospace;padding:8px 5px;text-align:center;opacity:0;box-shadow:0 5px 10px #0007}
.cash-card:hover .paper,.cash-card:focus-visible .paper,.cash-card.open .paper{animation:receiptCycle 3.8s ease-in-out infinite}
.mini-qr{display:inline-block;font-size:21px;margin-top:3px}
@keyframes receiptCycle{
  0%{transform:translateX(-50%) translateY(-105px);opacity:0}
  8%{opacity:1}
  42%{transform:translateX(-50%) translateY(4px);opacity:1}
  58%{transform:translateX(-50%) translateY(4px) rotate(0);opacity:1}
  82%{transform:translateX(-42%) translateY(85px) rotate(14deg);opacity:.85}
  100%{transform:translateX(-35%) translateY(135px) rotate(25deg);opacity:0}
}
.tutor-scene{perspective:500px}
.notebook{position:absolute;left:16%;top:15%;width:68%;height:72%;transform:rotate(-4deg);opacity:0;transition:.25s}
.page{position:absolute;inset:0;background:#f6f1df;color:#18314a;border:1px solid #d4ccb6;border-radius:4px;padding:12px 10px;font:italic 14px/1.6 Georgia,serif;box-shadow:0 4px 12px #0007;backface-visibility:hidden;transform-origin:left center}
.page span{color:#7a2c2c}.page i{font-family:cursive;color:#174b86}
.page-b{transform:rotateY(180deg)}
.little-robot{position:absolute;right:8%;bottom:9%;font-size:29px;opacity:0;transition:.2s}
.tutor:hover .notebook,.tutor:focus-visible .notebook{opacity:1;animation:notebookTurn 3.6s ease-in-out infinite}
.tutor:hover .little-robot,.tutor:focus-visible .little-robot{opacity:1;animation:robotWalk 1.5s ease-in-out infinite alternate}
@keyframes notebookTurn{0%,38%{transform:rotate(-4deg) rotateY(0)}55%,88%{transform:rotate(-4deg) rotateY(-16deg)}100%{transform:rotate(-4deg) rotateY(0)}}
@keyframes robotWalk{from{transform:translateX(-18px) rotate(-4deg)}to{transform:translateX(18px) rotate(4deg)}}

/* v0.9 — microwave controls/clock + redesigned tutoring robot */
.microwave-scene{position:relative}
.mw-cavity{position:absolute;left:9%;top:15%;width:58%;height:66%;display:grid;place-items:end center;overflow:hidden;border-radius:5px}
.mw-food{font-size:28px;opacity:0;transform:translateY(8px);transition:.3s}
.mw-steam{position:absolute;left:43%;bottom:42%;display:flex;gap:4px;opacity:0}
.mw-steam i{display:block;width:7px;height:30px;border-radius:50%;border-left:3px solid #f4fbff;filter:blur(.5px);transform:rotate(7deg)}
.mw-door{position:absolute;left:5%;top:7%;width:67%;height:80%;background:linear-gradient(135deg,#111a20e8,#24313be3);border:3px solid #97aab5;border-radius:5px;transform-origin:left center;transition:.55s;box-shadow:inset 0 0 0 5px #151b1f}
.mw-panel{position:absolute;right:4%;top:9%;width:21%;height:77%;background:linear-gradient(#28343c,#10171c);border:1px solid #92a5ae;border-radius:4px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mw-clock{width:100%;padding:5px 2px;background:#06190f;border:1px solid #2b5842;color:#64ff93;font:700 12px monospace;text-align:center;text-shadow:0 0 8px #45ff79}
.mw-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;width:85%}
.mw-buttons i{height:9px;border-radius:2px;background:#aeb8bd;box-shadow:inset 0 -1px 2px #444}
.mw-knob{width:24px;height:24px;border-radius:50%;border:3px solid #b5c0c5;background:#343e44;margin-top:auto}
.microwave:hover .mw-door,.microwave:focus-visible .mw-door{transform:perspective(500px) rotateY(-82deg)}
.microwave:hover .mw-food,.microwave:focus-visible .mw-food{opacity:1;transform:translateY(0)}
.microwave:hover .mw-steam,.microwave:focus-visible .mw-steam{opacity:.9}
.microwave:hover .mw-steam i,.microwave:focus-visible .mw-steam i{animation:mwSteam 1.25s ease-in-out infinite}
.microwave:hover .mw-steam i:nth-child(2){animation-delay:.2s}.microwave:hover .mw-steam i:nth-child(3){animation-delay:.4s}
@keyframes mwSteam{0%{transform:translateY(8px) scaleY(.8);opacity:.25}50%{opacity:1}100%{transform:translateY(-18px) scaleY(1.3);opacity:0}}

.tutor-scene{position:relative;overflow:hidden;background:#e8edf1}
.writing-sheet{position:absolute;left:6%;top:12%;width:71%;height:74%;background:linear-gradient(#fffdf8,#f4f0e6);border-radius:7px;box-shadow:0 5px 18px #0007;transform:rotate(-2deg);overflow:hidden;opacity:0;transition:.25s}
.writing-sheet:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 25px,#9fc4e577 26px,#9fc4e577 27px);pointer-events:none}
.guide-line{position:absolute;left:10%;right:6%;top:53%;border-top:1px dashed #d5a4a4}
.handwriting{position:absolute;left:9%;top:33%;width:84%;white-space:nowrap;overflow:hidden;color:#163c72;font:italic 18px/1.3 "Segoe Script","Comic Sans MS",cursive;letter-spacing:1px}
.handwriting span{display:inline-block;width:max-content}
.writer-robot{position:absolute;left:7%;bottom:8%;width:58px;height:78px;opacity:0;transform-origin:center bottom}
.robot-head{position:absolute;left:10px;top:0;width:38px;height:27px;border-radius:12px;background:linear-gradient(#dce9f2,#89a8bd);border:2px solid #203846;box-shadow:0 3px 8px #0005}
.eye{position:absolute;top:9px;width:6px;height:6px;border-radius:50%;background:#38d8ff;box-shadow:0 0 7px #38d8ff}.e1{left:9px}.e2{right:9px}
.robot-body{position:absolute;left:14px;top:29px;width:31px;height:34px;border-radius:9px;background:linear-gradient(#7aa6bf,#35586a);border:2px solid #203846}
.robot-arm{position:absolute;left:40px;top:34px;width:27px;height:7px;background:#799bae;border:2px solid #203846;border-radius:8px;transform-origin:left center}
.pen{position:absolute;right:-10px;top:1px;width:15px;height:3px;background:#1c3f78;transform:rotate(18deg);border-radius:2px}
.robot-foot{position:absolute;bottom:0;width:17px;height:7px;border-radius:6px;background:#35586a}.f1{left:9px}.f2{right:8px}
.tutor:hover .writing-sheet,.tutor:focus-visible .writing-sheet{opacity:1}
.tutor:hover .writer-robot,.tutor:focus-visible .writer-robot{opacity:1;animation:robotWriteMove 5.4s linear infinite}
.tutor:hover .handwriting,.tutor:focus-visible .handwriting{animation:writeReveal 5.4s linear infinite}
.tutor:hover .robot-arm,.tutor:focus-visible .robot-arm{animation:armWrite .42s ease-in-out infinite alternate}
@keyframes writeReveal{
  0%,6%{width:0;opacity:1}
  68%{width:84%;opacity:1}
  82%{width:84%;opacity:1}
  91%,100%{width:84%;opacity:0}
}
@keyframes robotWriteMove{
  0%,6%{transform:translateX(0) translateY(0)}
  68%{transform:translateX(145px) translateY(-5px)}
  82%{transform:translateX(145px) translateY(-5px)}
  91%,100%{transform:translateX(0) translateY(0)}
}
@keyframes armWrite{from{transform:rotate(-7deg)}to{transform:rotate(12deg)}}
@media(max-width:560px){.handwriting{font-size:15px}.writer-robot{transform:scale(.85);transform-origin:left bottom}}

/* v1.0 — robot visibility, CCTV tracking, UPS status */
.writer-robot{filter:drop-shadow(0 4px 5px #0008)}
.robot-head{background:linear-gradient(#f4fbff,#83d8ff);border-color:#0a5f82}
.robot-body{background:linear-gradient(#49c9ff,#087da8);border-color:#064d69}
.robot-arm{background:#72ddff;border-color:#064d69}
.robot-foot{bottom:-2px;width:20px;height:10px;background:#ffd54f;border:2px solid #8a6500;box-shadow:0 0 8px #ffd54f88}
.f1{left:6px}.f2{right:5px}
.writer-robot:before,.writer-robot:after{content:"";position:absolute;bottom:5px;width:7px;height:17px;background:#73dfff;border:2px solid #064d69;border-radius:4px;z-index:-1}
.writer-robot:before{left:14px}.writer-robot:after{right:13px}

.cctv-scene{position:relative}
.camera-lens{position:absolute;left:46%;top:44%;width:17px;height:17px;border-radius:50%;border:2px solid #69d8ff;box-shadow:0 0 14px #4bcfff;background:#07131b88;pointer-events:none;transition:.12s}
.camera-beam{position:absolute;left:49%;top:51%;width:90px;height:1px;background:linear-gradient(90deg,#55d7ff99,transparent);transform-origin:left center;opacity:0;pointer-events:none}
.cctv:hover .camera-beam,.cctv:focus-visible .camera-beam{opacity:.8}

.ups-status{position:absolute;left:8px;bottom:7px;display:flex;gap:4px;opacity:0;transition:.25s}
.ups-status span{background:#06150d;border:1px solid #2b7045;color:#65ff8a;font:7px monospace;padding:3px 4px;border-radius:3px;text-shadow:0 0 5px #45ff78}
.ups:hover .ups-status,.ups:focus-visible .ups-status{opacity:1}
.ups:hover .ups-status span:nth-child(2),.ups:focus-visible .ups-status span:nth-child(2){animation:batteryGlow 1.3s ease-in-out infinite}
@keyframes batteryGlow{50%{box-shadow:0 0 10px #54ff7a}}

/* v1.1 — robot antennas and fixed CCTV background */
.antenna{
  position:absolute;
  top:-17px;
  width:2px;
  height:20px;
  background:#87e6ff;
  transform-origin:bottom center;
  border-radius:2px;
  z-index:2
}
.antenna b{
  position:absolute;
  top:-4px;
  left:-3px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ffd85a;
  box-shadow:0 0 8px #ffd85aaa
}
.ant-left{left:9px;transform:rotate(-18deg)}
.ant-right{right:9px;transform:rotate(18deg)}
.tutor:hover .ant-left,.tutor:focus-visible .ant-left{
  animation:antennaLeft .85s ease-in-out infinite alternate
}
.tutor:hover .ant-right,.tutor:focus-visible .ant-right{
  animation:antennaRight 1.05s ease-in-out infinite alternate
}
@keyframes antennaLeft{
  from{transform:rotate(-26deg)}
  to{transform:rotate(-7deg)}
}
@keyframes antennaRight{
  from{transform:rotate(9deg)}
  to{transform:rotate(28deg)}
}

/* CCTV: the photo never moves; only the overlay camera head rotates */
.cctv-scene{position:relative;overflow:hidden}
.cctv-background{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none!important;
  transition:none!important
}
.cctv:hover .cctv-background,
.cctv:focus-visible .cctv-background{
  transform:none!important;
  filter:none!important
}
.camera-head{
  position:absolute;
  left:46%;
  top:42%;
  width:64px;
  height:28px;
  transform-origin:16px 14px;
  transition:transform .08s linear;
  pointer-events:none;
  z-index:3
}
.camera-body{
  position:absolute;
  left:10px;
  top:5px;
  width:48px;
  height:19px;
  border-radius:11px 5px 5px 11px;
  background:linear-gradient(180deg,#e8f2f6,#728c99);
  border:2px solid #263e49;
  box-shadow:0 3px 8px #0008
}
.camera-head .camera-lens{
  position:absolute;
  left:0;
  top:5px;
  width:19px;
  height:19px;
  border-radius:50%;
  border:3px solid #314c59;
  background:radial-gradient(circle,#64ddff 0 16%,#102f3d 18% 55%,#07131b 58%);
  box-shadow:0 0 14px #4bcfff
}
.camera-beam{
  position:absolute;
  left:calc(46% + 9px);
  top:calc(42% + 14px);
  width:100px;
  height:1px;
  background:linear-gradient(90deg,#55d7ff99,transparent);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
  z-index:2
}
.cctv:hover .camera-beam,.cctv:focus-visible .camera-beam{opacity:.8}

/* v1.2 — real APC Smart-UPS photo + smooth receipt cycle */
.ups .scene-wrap>img{object-position:center 42%}

/* Override earlier receipt animation with a continuous, smooth movement. */
.cash-card:hover .paper,
.cash-card:focus-visible .paper,
.cash-card.open .paper{
  animation:receiptSmooth 5.2s linear infinite;
  will-change:transform,opacity;
}
@keyframes receiptSmooth{
  0%   {transform:translate3d(-50%,-105px,0) rotate(0deg);opacity:0}
  4%   {transform:translate3d(-50%,-96px,0) rotate(0deg);opacity:1}
  48%  {transform:translate3d(-50%,4px,0) rotate(0deg);opacity:1}
  62%  {transform:translate3d(-50%,26px,0) rotate(0deg);opacity:1}
  86%  {transform:translate3d(-44%,104px,0) rotate(10deg);opacity:1}
  96%  {transform:translate3d(-40%,132px,0) rotate(14deg);opacity:0}
  100% {transform:translate3d(-40%,140px,0) rotate(14deg);opacity:0}
}

/* v1.3 — robot antennas glow red */
.antenna{
  background:#ff4b4b;
  box-shadow:0 0 8px #ff2d2d88;
}
.antenna b{
  background:#ff2b2b;
  box-shadow:0 0 12px #ff2b2bcc;
}

/* v1.4 — industrial induction cooker: pot boils immediately on hover */
.induction-scene{position:relative}
.induction-top{position:absolute;left:18%;right:18%;bottom:12%;height:35%;background:linear-gradient(160deg,#242a2d,#080b0c);border:2px solid #69757a;border-radius:7px;transform:perspective(280px) rotateX(58deg);box-shadow:0 8px 16px #0009}
.burner-ring{position:absolute;left:29%;top:15%;width:42%;aspect-ratio:1;border:3px solid #9aa4a8;border-radius:50%;box-shadow:inset 0 0 0 5px #161b1d}
.pot{position:absolute;left:31%;bottom:27%;width:38%;height:35%;background:linear-gradient(90deg,#77858c,#d4dde1 45%,#738087);border:2px solid #3d484d;border-radius:5px 5px 15px 15px;box-shadow:0 7px 10px #0009;transition:.25s}
.pot-rim{position:absolute;left:-3%;top:-7%;width:106%;height:17%;border-radius:50%;background:#dce4e7;border:2px solid #48565c}
.water{position:absolute;left:5%;top:-2%;width:90%;height:11%;border-radius:50%;background:#75d6ff;overflow:hidden;opacity:.7}
.water i{position:absolute;bottom:-4px;width:6px;height:6px;border-radius:50%;background:#effcff;opacity:0}
.handle{position:absolute;top:15%;width:27%;height:9px;background:#202629;border:2px solid #65737a;border-radius:7px}
.handle.left{left:-26%}.handle.right{right:-26%}
.steam-plumes{position:absolute;left:35%;bottom:57%;width:31%;height:42%;opacity:0;transition:.2s}
.steam-plumes i{position:absolute;bottom:0;width:10px;height:48px;border-left:4px solid #f4fbff;border-radius:50%;filter:blur(1.2px);opacity:.65}
.steam-plumes i:nth-child(1){left:5%}.steam-plumes i:nth-child(2){left:34%;height:60px}.steam-plumes i:nth-child(3){left:62%;height:53px}.steam-plumes i:nth-child(4){left:82%;height:45px}
.induction:hover .steam-plumes,.induction:focus-visible .steam-plumes{opacity:1}
.induction:hover .steam-plumes i,.induction:focus-visible .steam-plumes i{animation:strongSteam 1.25s ease-out infinite}
.induction:hover .steam-plumes i:nth-child(2){animation-delay:.18s}.induction:hover .steam-plumes i:nth-child(3){animation-delay:.38s}.induction:hover .steam-plumes i:nth-child(4){animation-delay:.57s}
.induction:hover .water i,.induction:focus-visible .water i{animation:bubble .8s ease-in infinite}
.water i:nth-child(1){left:12%}.water i:nth-child(2){left:38%;animation-delay:.2s!important}.water i:nth-child(3){left:62%;animation-delay:.4s!important}.water i:nth-child(4){left:82%;animation-delay:.1s!important}
@keyframes strongSteam{0%{transform:translateY(7px) translateX(0) scaleY(.75);opacity:0}25%{opacity:.85}100%{transform:translateY(-34px) translateX(8px) scaleY(1.3);opacity:0}}
@keyframes bubble{0%{transform:translateY(7px) scale(.6);opacity:0}40%{opacity:1}100%{transform:translateY(-10px) scale(1.25);opacity:0}}

/* v1.5 — one cooker, one pot, expandable induction service menu */
.clean-induction{
  background:radial-gradient(circle at 50% 70%,#23313a,#071018 68%);
}
.single-cooker{position:absolute;inset:0}
.clean-induction .cooktop{
  position:absolute;left:18%;right:18%;bottom:12%;height:38%;
  background:linear-gradient(160deg,#30383c,#080b0c);
  border:2px solid #758187;border-radius:8px;
  transform:perspective(280px) rotateX(58deg);
  box-shadow:0 9px 18px #000a
}
.clean-induction .burner-ring{
  position:absolute;left:29%;top:12%;width:42%;aspect-ratio:1;
  border:3px solid #a5afb3;border-radius:50%;
  box-shadow:inset 0 0 0 5px #161b1d
}
.clean-induction .pot{bottom:29%}
.induction-menu{
  display:grid;gap:5px;padding:0 13px;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .35s ease,opacity .25s ease,margin .35s ease;
  color:#c6dae4;font-size:13px
}
.induction:hover .induction-menu,
.induction:focus-visible .induction-menu{
  max-height:230px;opacity:1;margin-top:10px
}

/* v1.6 — real induction cooker and document mini-scenes */
.real-induction>img{width:100%;height:100%;object-fit:cover;object-position:center}
.real-steam{position:absolute;left:39%;top:2%;width:30%;height:72%;opacity:0}
.real-steam i{position:absolute;bottom:4%;width:12px;height:62px;border-left:5px solid #f5fbff;border-radius:50%;filter:blur(2px);opacity:.7}
.real-steam i:nth-child(1){left:3%}.real-steam i:nth-child(2){left:31%;height:78px}.real-steam i:nth-child(3){left:60%;height:70px}.real-steam i:nth-child(4){left:83%;height:58px}
.induction:hover .real-steam,.induction:focus-visible .real-steam{opacity:1}
.induction:hover .real-steam i,.induction:focus-visible .real-steam i{animation:realSteam 1.35s ease-out infinite}
.induction:hover .real-steam i:nth-child(2){animation-delay:.2s}.induction:hover .real-steam i:nth-child(3){animation-delay:.42s}.induction:hover .real-steam i:nth-child(4){animation-delay:.61s}
@keyframes realSteam{0%{transform:translateY(16px) scaleY(.65);opacity:0}25%{opacity:.85}100%{transform:translateY(-45px) translateX(8px) scaleY(1.35);opacity:0}}

.documents-card{min-height:330px}
.doc-scenes{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px}
.doc-scene{position:relative;height:91px;background:#07131b;border:1px solid #31576a;border-radius:8px;overflow:hidden}
.doc-scene>b{position:absolute;left:5px;top:4px;font-size:9px;color:#a9dff5;z-index:5}
.copier-body{position:absolute;left:17%;right:17%;bottom:10px;height:39px;background:#aab7bd;border-radius:3px}
.copier-lid{position:absolute;left:0;top:-8px;width:100%;height:8px;background:#dbe3e6;transform-origin:left bottom}
.source-sheet{position:absolute;left:20%;top:-4px;width:55%;height:27px;background:white;color:#333;font:8px monospace;text-align:center;padding-top:8px;opacity:0}
.copy-sheet{position:absolute;left:23%;bottom:-31px;width:54%;height:31px;background:white;color:#333;font:7px monospace;text-align:center;padding-top:8px}
.documents-card:hover .copier-lid,.documents-card:focus-visible .copier-lid{animation:lidCycle 4.5s ease-in-out infinite}
.documents-card:hover .source-sheet,.documents-card:focus-visible .source-sheet{animation:sourceCycle 4.5s ease-in-out infinite}
.documents-card:hover .copy-sheet,.documents-card:focus-visible .copy-sheet{animation:copyOut 4.5s ease-in-out infinite}
@keyframes lidCycle{0%,8%,72%,100%{transform:rotate(0)}20%,38%{transform:rotate(-38deg)}}
@keyframes sourceCycle{0%,15%,75%,100%{opacity:0}25%,62%{opacity:1}}
@keyframes copyOut{0%,58%{transform:translateY(0);opacity:0}68%{opacity:1}88%{transform:translateY(28px);opacity:1}100%{transform:translateY(38px);opacity:0}}

.pc-screen{position:absolute;left:8px;top:25px;width:45%;height:28px;background:#0c4672;border:2px solid #7895a4;color:white;font:8px Arial;display:grid;place-items:center}
.printer-body{position:absolute;right:8px;bottom:13px;width:39%;height:32px;background:#aeb9be;border-radius:3px}
.printer-body i{position:absolute;left:15%;top:5px;width:70%;height:24px;background:white;opacity:0}
.documents-card:hover .printer-body i,.documents-card:focus-visible .printer-body i{animation:printSheets 3.6s linear infinite}
.documents-card:hover .printer-body i:nth-child(2){animation-delay:.55s}.documents-card:hover .printer-body i:nth-child(3){animation-delay:1.1s}
@keyframes printSheets{0%,18%{transform:translateY(0);opacity:0}28%{opacity:1}72%{transform:translateY(28px);opacity:1}100%{transform:translateY(40px);opacity:0}}

.lam-sheet{position:absolute;left:31%;top:24%;width:38%;height:58%;background:#f8f7ef;color:#31506b;font:9px monospace;display:grid;place-items:center;z-index:2;transform-origin:center}
.film{position:absolute;left:28%;width:44%;height:31%;background:#bdeaff55;border:1px solid #dff8ff99;z-index:3}
.ftop{top:-30%}.fbottom{bottom:-30%}
.documents-card:hover .ftop,.documents-card:focus-visible .ftop{animation:filmTop 4s ease-in-out infinite}
.documents-card:hover .fbottom,.documents-card:focus-visible .fbottom{animation:filmBottom 4s ease-in-out infinite}
.documents-card:hover .lam-sheet,.documents-card:focus-visible .lam-sheet{animation:lamFlex 4s ease-in-out infinite}
@keyframes filmTop{0%,15%{top:-30%}45%,100%{top:23%}}
@keyframes filmBottom{0%,15%{bottom:-30%}45%,100%{bottom:19%}}
@keyframes lamFlex{0%,48%{transform:perspective(100px) rotateY(0)}62%{transform:perspective(100px) rotateY(15deg)}76%{transform:perspective(100px) rotateY(-15deg)}90%,100%{transform:rotateY(0)}}

.flying-mail{position:absolute;left:38%;top:37%;font-size:28px}
.wing{position:absolute;top:5px;width:18px;height:12px;border-top:3px solid #e9f8ff;border-radius:50%}.wl{left:-17px;transform:rotate(-20deg)}.wr{right:-17px;transform:rotate(20deg)}
.documents-card:hover .flying-mail,.documents-card:focus-visible .flying-mail{animation:mailFly 3.2s ease-in infinite}
.documents-card:hover .wing,.documents-card:focus-visible .wing{animation:wingFlap .25s ease-in-out infinite alternate}
@keyframes mailFly{0%,15%{transform:translate(0,0) rotate(0);opacity:0}25%{opacity:1}78%{transform:translate(50px,-34px) rotate(-8deg);opacity:1}100%{transform:translate(76px,-48px) rotate(-12deg);opacity:0}}
@keyframes wingFlap{to{transform:rotate(32deg) scaleY(.55)}}

/* v1.7 — tighter induction photo, no office emphasis, illuminated front panel */
.real-induction{
  background:#070b0e;
}
.real-induction>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 62%;
  transform:scale(1.12);
  transform-origin:center 65%;
}
.induction:hover .real-induction>img,
.induction:focus-visible .real-induction>img{
  transform:scale(1.12)!important;
}
.induction-front-display{
  position:absolute;
  right:12%;
  bottom:10%;
  display:flex;
  align-items:center;
  gap:3px;
  min-width:62px;
  padding:5px 7px;
  background:#07110d;
  border:1px solid #647079;
  border-radius:4px;
  box-shadow:0 2px 8px #000a;
  color:#ff5b42;
  font:700 13px monospace;
  text-shadow:0 0 8px #ff3b25;
}
.induction-front-display small{font-size:8px;color:#ff8c79}
.ind-led{
  width:7px;height:7px;border-radius:50%;
  background:#43ff72;
  box-shadow:0 0 9px #43ff72;
  margin-right:3px;
}
.induction:hover .ind-led,.induction:focus-visible .ind-led{
  animation:indLedPulse 1.1s ease-in-out infinite;
}
@keyframes indLedPulse{50%{opacity:.45;box-shadow:0 0 3px #43ff72}}

/* v1.8 — physically clearer copying, printing and lamination */
.copier-machine{position:absolute;left:9%;right:9%;bottom:9px;height:43px;background:#aab7bd;border-radius:4px}
.copier-machine .copier-lid{position:absolute;left:4%;top:-8px;width:92%;height:8px;background:#e2e8ea;border:1px solid #69787e;transform-origin:left bottom;z-index:4}
.copy-original{position:absolute;left:15%;top:-7px;width:70%;height:29px;background:#fff;color:#24323a;font:5.5px/1.3 Arial;text-align:left;padding:4px;opacity:0;transform:rotateX(68deg);transform-origin:center;z-index:2}
.copy-original em,.copy-output em,.printer-body em{font-style:normal}
.copy-output{position:absolute;left:18%;bottom:-34px;width:64%;height:34px;background:#fff;color:#24323a;font:5.5px/1.3 Arial;text-align:left;padding:4px;opacity:0}
.documents-card:hover .copier-lid,.documents-card:focus-visible .copier-lid{animation:copyLidV18 4.8s ease-in-out infinite}
.documents-card:hover .copy-original,.documents-card:focus-visible .copy-original{animation:copyOriginalV18 4.8s ease-in-out infinite}
.documents-card:hover .copy-output,.documents-card:focus-visible .copy-output{animation:copyOutputV18 4.8s ease-in-out infinite}
@keyframes copyLidV18{0%,8%,68%,100%{transform:rotate(0)}18%,42%{transform:rotate(-42deg)}}
@keyframes copyOriginalV18{0%,14%,72%,100%{opacity:0;transform:rotateX(68deg) translateY(-6px)}24%,58%{opacity:1;transform:rotateX(68deg) translateY(2px)}}
@keyframes copyOutputV18{0%,58%{opacity:0;transform:translateY(0)}68%{opacity:1}91%{opacity:1;transform:translateY(30px)}100%{opacity:0;transform:translateY(38px)}}

.printer .pc-screen{padding:3px;display:flex;flex-direction:column;justify-content:center;gap:3px;font-size:5px}
.printer .pc-screen button{padding:2px;margin:0;background:#1685c4;border:0;border-radius:2px;color:#fff;font:bold 5px Arial}
.printer-body i{padding:3px;color:#26343b;font:5px/1.25 Arial;text-align:left}
.printer-body i em{display:block;border-top:1px solid #c6c6c6;padding-top:2px}

.lam-table{position:absolute;left:6%;right:6%;top:20%;bottom:7%;perspective:260px}
.lam-document{position:absolute;left:28%;top:20%;width:44%;height:58%;background:#f7f3e9;color:#27415a;border:1px solid #c5bda9;display:grid;place-items:center;text-align:center;font:6px/1.4 Arial;z-index:3}
.film-under,.film-over{position:absolute;left:25%;top:16%;width:50%;height:66%;background:#bcecff25;border:1px solid #dff9ff99;box-shadow:inset 0 0 8px #dffaff55}
.film-under{z-index:2;transform:translateY(24px) scale(.96)}
.film-over{z-index:4;transform:translateY(-24px) scale(.96)}
.laminator-mouth{position:absolute;right:-1%;top:31%;width:17%;height:38%;background:linear-gradient(90deg,#788991,#d0dade);border:2px solid #52646c;border-radius:4px;z-index:6}
.laminated-result{position:absolute;left:28%;top:20%;width:44%;height:58%;background:#eaffffb8;color:#27415a;border:2px solid #b9efff;display:grid;place-items:center;text-align:center;font:6px/1.4 Arial;opacity:0;z-index:7;transform-origin:center}
.documents-card:hover .film-under,.documents-card:focus-visible .film-under{animation:filmUnderV18 5.4s ease-in-out infinite}
.documents-card:hover .film-over,.documents-card:focus-visible .film-over{animation:filmOverV18 5.4s ease-in-out infinite}
.documents-card:hover .lam-document,.documents-card:focus-visible .lam-document{animation:docThroughV18 5.4s ease-in-out infinite}
.documents-card:hover .laminated-result,.documents-card:focus-visible .laminated-result{animation:lamResultV18 5.4s ease-in-out infinite}
@keyframes filmUnderV18{0%,10%{transform:translateY(24px) scale(.96)}32%,55%{transform:translateY(0) scale(1)}70%,100%{transform:translateX(52px) translateY(0)}}
@keyframes filmOverV18{0%,10%{transform:translateY(-24px) scale(.96)}32%,55%{transform:translateY(0) scale(1)}70%,100%{transform:translateX(52px) translateY(0)}}
@keyframes docThroughV18{0%,55%{transform:translateX(0);opacity:1}72%,100%{transform:translateX(52px);opacity:0}}
@keyframes lamResultV18{0%,67%{opacity:0;transform:translateX(48px) perspective(120px) rotateY(0)}74%{opacity:1}84%{opacity:1;transform:translateX(18px) perspective(120px) rotateY(8deg)}92%{opacity:1;transform:translateX(0) perspective(120px) rotateY(-8deg)}100%{opacity:0;transform:translateX(0) rotateY(0)}}

/* v1.9 — approved induction cooker visual */
.real-induction>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
  transform:none!important;
}
.induction:hover .real-induction>img,
.induction:focus-visible .real-induction>img{
  transform:none!important;
}
/* The approved image already contains a realistic illuminated front panel. */
.induction-front-display{display:none!important}
/* Keep only a restrained extra steam animation on interaction. */
.real-steam{left:38%;top:-3%;width:28%;height:70%}

/* 2026.08.27-2.0 */
.antenna{background:#111!important;box-shadow:none!important;border:1px solid #39434a}
.antenna b{background:#ff2525!important;border:1px solid #ff7777;box-shadow:0 0 5px #ff2020,0 0 13px #ff2020cc!important}
.camera-head,.camera-beam,.camera-lens{display:none!important}
.cctv-scene{overflow:hidden;perspective:700px}
.cctv-background{transform-origin:64% 52%;transition:transform .13s linear!important;will-change:transform}
.cctv:hover .cctv-background{transform:perspective(700px) rotateY(var(--cam-x,0deg)) rotateX(var(--cam-y,0deg)) scale(1.02)!important}
.copier{perspective:420px}
.copier-machine{left:16%!important;right:auto!important;bottom:10px!important;width:68%!important;height:48px!important;transform:rotateY(-13deg) rotateX(5deg);transform-style:preserve-3d;background:linear-gradient(155deg,#d8e0e3 0 16%,#89989f 17% 72%,#59676d 73%)!important;border:1px solid #dce6e9;box-shadow:9px 8px 14px #0009}
.copier-machine:before{content:"";position:absolute;left:7%;right:7%;top:6px;height:19px;background:#182329;border:2px solid #65757c;border-radius:2px;box-shadow:inset 0 0 0 2px #0b1114}
.copier-machine .copier-lid{left:4%!important;top:-11px!important;width:92%!important;height:12px!important;background:linear-gradient(#e8eef0,#9ba9ae)!important;border:2px solid #65747a!important;transform-origin:0 100%!important}
.copy-original{left:18%!important;top:-8px!important;width:62%!important;height:31px!important;background:#fffef8!important;border:1px solid #bbb!important;z-index:3!important}

/* ===== 2026.08.27-2.1 ===== */

/* CCTV: the mount is absolutely fixed; ONLY the camera housing moves. */
.cctv-v21{
  position:relative;
  overflow:hidden;
  background:#010e17;
  perspective:700px;
}
.cctv-dark-bg{position:absolute;inset:0;background:linear-gradient(135deg,#071722,#020b11)}
.cctv-mount,.cctv-head-v21{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.cctv-mount{
  z-index:2;
  transform:none!important;
  transition:none!important;
}
.cctv-head-v21{
  z-index:3;
  transform-origin:39% 62%;
  transition:transform .10s linear;
  will-change:transform;
}
.cctv:hover .cctv-head-v21,
.cctv:focus-visible .cctv-head-v21{
  transform:perspective(700px)
            rotateY(var(--cctv-yaw,0deg))
            rotateZ(var(--cctv-pitch,0deg))!important;
}
.cctv-background,.camera-head,.camera-beam,.camera-lens{display:none!important}

/* Induction cooker: no separate CSS steam from the glass surface.
   Steam visible in the approved image rises from inside the pot. */
.real-steam{display:none!important}

/* Microwave: one open appliance + one physical door on a hinge. */
.mw-v21{position:relative;overflow:hidden;background:#03101a}
.mw-body-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:none!important;transition:none!important
}
.mw-door-v21{
  position:absolute;
  left:21%;
  top:17%;
  width:56%;
  height:65%;
  transform-origin:left center;
  transform:perspective(500px) rotateY(0deg);
  transition:transform .58s cubic-bezier(.22,.75,.22,1);
  z-index:5;
}
.mw-door-glass{
  position:absolute;inset:0;
  border:6px solid #20292e;
  border-left-width:8px;
  border-radius:3px;
  background:
    linear-gradient(135deg,#0b1116dd,#182127d9),
    repeating-linear-gradient(0deg,transparent 0 5px,#ffffff08 6px);
  box-shadow:inset 0 0 0 2px #6f7a7f,0 4px 9px #0009;
}
.microwave:hover .mw-door-v21,
.microwave:focus-visible .mw-door-v21{
  transform:perspective(500px) rotateY(-82deg) translateX(-5px);
}
.mw-clock-v21{
  position:absolute;
  right:6.3%;
  top:30%;
  min-width:15%;
  padding:2px 3px;
  background:#03160c;
  border:1px solid #315d43;
  border-radius:2px;
  color:#64ff8d;
  text-align:center;
  font:700 9px monospace;
  text-shadow:0 0 6px #49ff78;
  z-index:7;
}
/* Steam is centered over the ONE dish already present in the source photo. */
.mw-steam-v21{
  position:absolute;
  left:48%;
  top:40%;
  width:20%;
  height:38%;
  opacity:0;
  z-index:4;
  pointer-events:none;
}
.mw-steam-v21 i{
  position:absolute;
  bottom:0;
  width:8px;
  height:34px;
  border-left:3px solid #f4fbff;
  border-radius:50%;
  filter:blur(1px);
  opacity:.7;
}
.mw-steam-v21 i:nth-child(1){left:8%}
.mw-steam-v21 i:nth-child(2){left:43%;height:42px}
.mw-steam-v21 i:nth-child(3){left:77%;height:35px}
.microwave:hover .mw-steam-v21,
.microwave:focus-visible .mw-steam-v21{opacity:1}
.microwave:hover .mw-steam-v21 i,
.microwave:focus-visible .mw-steam-v21 i{animation:mwSteamV21 1.25s ease-out infinite}
.microwave:hover .mw-steam-v21 i:nth-child(2){animation-delay:.22s}
.microwave:hover .mw-steam-v21 i:nth-child(3){animation-delay:.43s}
@keyframes mwSteamV21{
  0%{transform:translateY(6px) translateX(0) scaleY(.7);opacity:0}
  25%{opacity:.85}
  100%{transform:translateY(-28px) translateX(3px) scaleY(1.25);opacity:0}
}

/* ===== 2026.08.27-2.2 ===== */

/* Camera: wider and more noticeable turn range, reacting on the whole card area */
.cctv .track{height:155px}
.cctv-v21{
  width:100%;
}
.cctv-head-v21{
  transform-origin:39% 62%;
  transition:transform .09s linear;
}
.cctv:hover .cctv-head-v21,
.cctv:focus-visible .cctv-head-v21{
  transform:perspective(700px)
            rotateY(var(--cctv-yaw,0deg))
            rotateZ(var(--cctv-pitch,0deg))!important;
}

/* Microwave: two perfectly matching states of the same appliance */
.mw-v22{
  position:relative;
  overflow:hidden;
  background:#03101a;
}
.mw-v22 img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mw-closed-img{opacity:1;transition:opacity .28s ease}
.mw-open-img{opacity:0;transition:opacity .28s ease}
.microwave:hover .mw-closed-img,
.microwave:focus-visible .mw-closed-img{opacity:0}
.microwave:hover .mw-open-img,
.microwave:focus-visible .mw-open-img{opacity:1}

.mw-clock-v22{
  position:absolute;
  right:6.2%;
  top:30%;
  min-width:15%;
  padding:2px 3px;
  background:#03160c;
  border:1px solid #315d43;
  border-radius:2px;
  color:#64ff8d;
  text-align:center;
  font:700 9px monospace;
  text-shadow:0 0 6px #49ff78;
  z-index:6;
}
/* Steam centered over the middle of the single plate */
.mw-steam-v22{
  position:absolute;
  left:49%;
  top:41%;
  width:14%;
  height:34%;
  opacity:0;
  z-index:5;
  pointer-events:none;
}
.mw-steam-v22 i{
  position:absolute;
  bottom:0;
  width:7px;
  height:34px;
  border-left:3px solid #f4fbff;
  border-radius:50%;
  filter:blur(1px);
  opacity:.72;
}
.mw-steam-v22 i:nth-child(1){left:6%}
.mw-steam-v22 i:nth-child(2){left:41%;height:42px}
.mw-steam-v22 i:nth-child(3){left:75%;height:35px}
.microwave:hover .mw-steam-v22,
.microwave:focus-visible .mw-steam-v22{opacity:1}
.microwave:hover .mw-steam-v22 i,
.microwave:focus-visible .mw-steam-v22 i{animation:mwSteamV22 1.22s ease-out infinite}
.microwave:hover .mw-steam-v22 i:nth-child(2){animation-delay:.22s}
.microwave:hover .mw-steam-v22 i:nth-child(3){animation-delay:.43s}
@keyframes mwSteamV22{
  0%{transform:translateY(5px) translateX(0) scaleY(.72);opacity:0}
  25%{opacity:.86}
  100%{transform:translateY(-26px) translateX(2px) scaleY(1.22);opacity:0}
}

/* old v21 microwave artifacts off */
.mw-body-img,.mw-door-v21,.mw-door-glass,.mw-clock-v21,.mw-steam-v21{display:none!important}

/* ===== 2026.08.27-2.3 — CCTV rebuilt as real-angle sprite frames ===== */
.cctv-v23 .cctv-scene-v23{
  width:100%;
  height:155px;
  overflow:hidden;
  background:#020f18;
}
.cctv-v23 .cctv-sprite-v23{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:none!important;
  transition:none!important;
  filter:none!important;
}
/* Kill all legacy CCTV transform layers. */
.cctv-v23 .cctv-head-v21,
.cctv-v23 .cctv-mount,
.cctv-v23 .cctv-background,
.cctv-v23 .camera-head,
.cctv-v23 .camera-beam,
.cctv-v23 .camera-lens{display:none!important}

/* ===== 2026.08.27-2.4 — refined microwave ===== */
.mw-v22{background:linear-gradient(135deg,#04111a,#0b1822)}
.mw-v22 img{object-fit:cover;object-position:center;transform:none!important;filter:none!important}
.mw-closed-img,.mw-open-img{transition:opacity .22s ease-in-out}
.mw-clock-v22{right:6.2%;top:29.3%;min-width:16%;padding:2px 4px;font:700 10px monospace}
/* steam centered tighter over the single plate */
.mw-steam-v22{left:49.2%;top:44%;width:10%;height:25%;opacity:0;z-index:5;pointer-events:none}
.mw-steam-v22 i{position:absolute;bottom:0;width:6px;height:30px;border-left:3px solid #f4fbff;border-radius:50%;filter:blur(1px);opacity:.72}
.mw-steam-v22 i:nth-child(1){left:5%}
.mw-steam-v22 i:nth-child(2){left:40%;height:36px}
.mw-steam-v22 i:nth-child(3){left:73%;height:31px}
.microwave:hover .mw-steam-v22,.microwave:focus-visible .mw-steam-v22{opacity:1}
.microwave:hover .mw-steam-v22 i,.microwave:focus-visible .mw-steam-v22 i{animation:mwSteamV24 1.22s ease-out infinite}
.microwave:hover .mw-steam-v22 i:nth-child(2){animation-delay:.22s}
.microwave:hover .mw-steam-v22 i:nth-child(3){animation-delay:.43s}
@keyframes mwSteamV24{0%{transform:translateY(4px) translateX(0) scaleY(.78);opacity:0}22%{opacity:.84}100%{transform:translateY(-22px) translateX(2px) scaleY(1.16);opacity:0}}

/* ===== 2026.08.27-2.5 — microwave: real open door ===== */
/* The open state now uses the untouched original photograph with the real door.
   No generated/constructed handle, hinges or extra door geometry. */
.mw-v22 .mw-open-img{
  object-fit:cover;
  object-position:center;
  transform:none!important;
}
/* Center steam over the actual single dish: dish center ~51.5% of image width. */
.mw-steam-v22{
  left:46.5%!important;
  top:43.5%!important;
  width:10%!important;
  height:26%!important;
}

/* ===== 2026.08.27-2.6 — microwave uses the approved matched pair ===== */
.mw-v26{
  position:relative;
  overflow:hidden;
  background:#30363b;
}
.mw-v26 > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:none!important;
  filter:none!important;
  transition:opacity .22s ease-in-out!important;
}
.mw-v26-closed{opacity:1}
.mw-v26-open{opacity:0}
.microwave:hover .mw-v26-closed,
.microwave:focus-visible .mw-v26-closed{opacity:0}
.microwave:hover .mw-v26-open,
.microwave:focus-visible .mw-v26-open{opacity:1}

/* No artificial steam: the approved open photo already has steam exactly over the dish. */
.mw-v26 .mw-steam,
.mw-v26 .mw-steam-v21,
.mw-v26 .mw-steam-v22{display:none!important}

/* Replace the fixed 12:00 printed in the reference with visitor-local live time. */
.mw-live-clock{
  position:absolute;
  z-index:8;
  display:grid;
  place-items:center;
  background:#07120b;
  color:#bcff59;
  border-radius:2px;
  font:700 clamp(6px,.58vw,9px)/1 monospace;
  text-shadow:0 0 5px #91ff3f;
  pointer-events:none;
  transition:opacity .18s ease;
}
.mw-live-clock-closed{
  left:72.6%;
  top:23.3%;
  width:8.0%;
  height:7.4%;
  opacity:1;
}
.mw-live-clock-open{
  left:80.8%;
  top:22.6%;
  width:8.3%;
  height:7.4%;
  opacity:0;
}
.microwave:hover .mw-live-clock-closed,
.microwave:focus-visible .mw-live-clock-closed{opacity:0}
.microwave:hover .mw-live-clock-open,
.microwave:focus-visible .mw-live-clock-open{opacity:1}

/* Disable all old microwave state layers so they cannot interfere. */
.mw-v26 .mw-closed-img,
.mw-v26 .mw-open-img,
.mw-v26 .mw-clock-v22,
.mw-v26 .mw-door-v21,
.mw-v26 .mw-body-img{display:none!important}

/* ===== 2026.08.27-2.7 — realistic document mini-scenes ===== */
.doc-v27{min-height:425px}
.doc-scenes-v27{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:10px;
}
.doc-tile-v27{
  position:relative;
  min-height:150px;
  padding:7px;
  overflow:hidden;
  border:1px solid #263b46;
  border-radius:10px;
  background:linear-gradient(145deg,#07131c,#0b1821);
}
.doc-tile-v27>b{
  position:relative;
  z-index:9;
  display:inline-block;
  padding:3px 6px;
  border-radius:5px;
  background:#07131ccc;
  color:#e9f7ff;
  font-size:12px;
}
.doc-photo-v27{
  position:absolute;
  inset:29px 5px 5px;
  overflow:hidden;
  border-radius:7px;
  background:#020b11;
}
.doc-photo-v27>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.96;
}

/* COPYING — document lies on the glass; scan line passes over it; copy exits below. */
.copy-original-v27{
  position:absolute;
  left:25%;
  top:39%;
  width:39%;
  height:27%;
  z-index:4;
  padding:3px;
  box-sizing:border-box;
  background:#fffdf5;
  border:1px solid #c7c2b7;
  color:#27333a;
  font:5px/1.3 Arial;
  text-align:left;
  transform:perspective(180px) rotateX(62deg) rotateZ(-2deg);
  opacity:0;
}
.scan-line-v27{
  position:absolute;
  left:23%;
  top:42%;
  width:45%;
  height:2px;
  z-index:5;
  background:#55eaff;
  box-shadow:0 0 8px #55eaff;
  opacity:0;
}
.copy-result-v27{
  position:absolute;
  left:30%;
  top:65%;
  width:42%;
  height:29%;
  z-index:6;
  padding:4px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #bbb;
  color:#263238;
  font:5px/1.3 Arial;
  opacity:0;
}
.doc-v27:hover .copy-original-v27,
.doc-v27:focus-visible .copy-original-v27{animation:copyDocV27 5.1s ease-in-out infinite}
.doc-v27:hover .scan-line-v27,
.doc-v27:focus-visible .scan-line-v27{animation:scanV27 5.1s linear infinite}
.doc-v27:hover .copy-result-v27,
.doc-v27:focus-visible .copy-result-v27{animation:copyOutV27 5.1s ease-in-out infinite}
@keyframes copyDocV27{
  0%,10%,100%{opacity:0;transform:translateY(-15px) perspective(180px) rotateX(62deg)}
  22%,78%{opacity:1;transform:translateY(0) perspective(180px) rotateX(62deg) rotateZ(-2deg)}
  88%{opacity:0}
}
@keyframes scanV27{
  0%,31%,69%,100%{opacity:0;transform:translateY(0)}
  34%{opacity:1}
  62%{opacity:1;transform:translateY(28px)}
  66%{opacity:0}
}
@keyframes copyOutV27{
  0%,60%{opacity:0;transform:translateY(-13px)}
  70%{opacity:1}
  90%{opacity:1;transform:translateY(10px)}
  100%{opacity:0;transform:translateY(18px)}
}

/* PRINTING — three sheets, each visibly contains text. */
.print-stack-v27 i{
  position:absolute;
  left:36%;
  top:59%;
  width:43%;
  height:34%;
  padding:4px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #bbb;
  color:#27343a;
  font:5px/1.25 Arial;
  opacity:0;
  z-index:5;
}
.print-stack-v27 i span{display:block;border-top:1px solid #c7c7c7;padding-top:2px}
.print-stack-v27 i:nth-child(2){transform:rotate(2deg)}
.print-stack-v27 i:nth-child(3){transform:rotate(-2deg)}
.doc-v27:hover .print-stack-v27 i,
.doc-v27:focus-visible .print-stack-v27 i{animation:printPageV27 4.5s linear infinite}
.doc-v27:hover .print-stack-v27 i:nth-child(2){animation-delay:1s}
.doc-v27:hover .print-stack-v27 i:nth-child(3){animation-delay:2s}
@keyframes printPageV27{
  0%{opacity:0;transform:translateY(-22px)}
  18%{opacity:1}
  66%{opacity:1;transform:translateY(15px)}
  80%,100%{opacity:0;transform:translateY(24px)}
}

/* LAMINATION — lower film, document, upper film are parallel layers.
   They come together, go into laminator, and a clear rigid result exits. */
.lam-pack-v27{
  position:absolute;
  left:13%;
  top:47%;
  width:47%;
  height:37%;
  z-index:5;
  perspective:260px;
}
.lam-film,.lam-paper{
  position:absolute;
  inset:0;
  border-radius:2px;
}
.lam-film{
  border:1px solid #d8f8ffb5;
  background:#bcecff30;
  box-shadow:inset 0 0 8px #dffaff60;
}
.lam-film.lower{transform:translateY(16px)}
.lam-film.upper{transform:translateY(-16px)}
.lam-paper{
  z-index:2;
  display:grid;
  place-items:center;
  background:#fffdf4;
  border:1px solid #c9c3b4;
  color:#27343a;
  text-align:center;
  font:5px/1.35 Arial;
}
.lam-film.upper{z-index:3}
.lam-ready-v27{
  position:absolute;
  right:5%;
  top:52%;
  width:43%;
  height:34%;
  z-index:7;
  display:grid;
  place-items:center;
  background:#e9feffbd;
  border:2px solid #b9f3ff;
  box-shadow:inset 0 0 7px #fff,0 0 8px #5edfff44;
  color:#1f4852;
  font:700 5px Arial;
  opacity:0;
  transform-origin:center;
}
.doc-v27:hover .lam-film.lower,
.doc-v27:focus-visible .lam-film.lower{animation:lamLowerV27 5.6s ease-in-out infinite}
.doc-v27:hover .lam-film.upper,
.doc-v27:focus-visible .lam-film.upper{animation:lamUpperV27 5.6s ease-in-out infinite}
.doc-v27:hover .lam-paper,
.doc-v27:focus-visible .lam-paper{animation:lamPaperV27 5.6s ease-in-out infinite}
.doc-v27:hover .lam-ready-v27,
.doc-v27:focus-visible .lam-ready-v27{animation:lamReadyV27 5.6s ease-in-out infinite}
@keyframes lamLowerV27{
  0%,10%{transform:translateY(17px)}
  30%,54%{transform:translateY(0)}
  72%,100%{transform:translateX(72px)}
}
@keyframes lamUpperV27{
  0%,10%{transform:translateY(-17px)}
  30%,54%{transform:translateY(0)}
  72%,100%{transform:translateX(72px)}
}
@keyframes lamPaperV27{
  0%,54%{transform:translateX(0);opacity:1}
  72%,100%{transform:translateX(72px);opacity:0}
}
@keyframes lamReadyV27{
  0%,67%{opacity:0;transform:translateX(18px) rotateY(0)}
  76%{opacity:1}
  87%{opacity:1;transform:translateX(0) rotateY(7deg)}
  94%{opacity:1;transform:translateX(0) rotateY(-7deg)}
  100%{opacity:0;transform:translateX(-4px) rotateY(0)}
}

/* E-mail */
.mail-flight-v27{
  position:absolute;
  left:42%;
  top:49%;
  z-index:6;
  font-size:25px;
  opacity:0;
}
.doc-v27:hover .mail-flight-v27,
.doc-v27:focus-visible .mail-flight-v27{animation:mailV27 3.2s ease-in-out infinite}
@keyframes mailV27{
  0%{opacity:0;transform:translate(-25px,18px) rotate(-10deg) scale(.7)}
  20%{opacity:1}
  70%{opacity:1;transform:translate(45px,-22px) rotate(7deg) scale(1)}
  100%{opacity:0;transform:translate(78px,-45px) rotate(10deg) scale(.8)}
}

@media (max-width:700px){
  .doc-scenes-v27{grid-template-columns:1fr}
  .doc-v27{min-height:730px}
}

/* ===== 2026.08.27-2.8 — launch candidate ===== */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
#status{display:block;min-height:1.4em;margin-top:4px;color:#9fe7ff}
#requestForm button:disabled{opacity:.6;cursor:wait}
.privacy-page,.reviews-page{max-width:920px;text-align:left}
.privacy-page h1,.reviews-page h1{text-align:center}
.privacy-page h2{margin-top:28px;color:#75d4ff}
.privacy-page p,.reviews-page p{color:#c4d5dd}
.review-button{display:inline-block;padding:12px 18px;border:1px solid #279dde;border-radius:8px;text-decoration:none;background:#0b2636}
.muted{color:#829aa5!important}

/* ===== 2026.08.31-0.2 — local SEO copy and portfolio ===== */
.local-intro,
.portfolio{
  max-width:1320px;
  margin:0 auto;
  padding:64px max(6vw,30px);
}
.local-intro{
  text-align:center;
}
.section-label{
  margin:0 0 8px;
  color:#57caff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.16em;
}
.local-intro h2,
.portfolio h2{
  margin:0 0 26px;
  font-size:clamp(30px,4vw,44px);
  line-height:1.12;
}
.local-intro-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  text-align:left;
}
.local-intro-grid p{
  margin:0;
  padding:20px;
  color:#bfd0d8;
  background:#0a1821;
  border:1px solid #2d5267;
  border-radius:14px;
}
.local-intro-grid strong{color:#eef6fa}
.card-link{
  display:inline-block;
  margin:14px 13px 0;
  color:#69d4ff;
  font-weight:700;
  text-underline-offset:4px;
}
.portfolio{
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr);
  gap:34px;
  align-items:center;
}
.portfolio-copy{
  padding:28px;
  background:#0a1821;
  border:1px solid #2d5267;
  border-radius:18px;
}
.portfolio-copy p:not(.section-label),
.portfolio-copy li{color:#bfd0d8}
.portfolio-copy ul{padding-left:20px}
.portfolio-link{
  display:inline-flex;
  margin-top:12px;
  padding:12px 18px;
  border-radius:8px;
  background:#0663d6;
  color:#fff;
  font-weight:700;
  text-decoration:none;
}
.portfolio-shot{
  margin:0;
  overflow:hidden;
  background:#0a1821;
  border:1px solid #32617a;
  border-radius:18px;
  box-shadow:0 24px 54px #0008;
}
.portfolio-shot img{
  display:block;
  width:100%;
  height:clamp(300px,42vw,610px);
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  background:#07131d;
}
.portfolio-shot figcaption{
  padding:12px 16px;
  color:#9fc2d1;
  font-size:13px;
}
.doc-v27{
  grid-column:1/-1;
  min-height:auto;
}
.doc-v27 .doc-scenes-v27{
  grid-template-columns:repeat(4,1fr);
  padding:0 13px;
}
:focus-visible{
  outline:3px solid #74d8ff;
  outline-offset:3px;
}
.service-scope-summary{
  max-width:920px;
  margin:-16px auto 28px;
  padding:13px 16px;
  color:#d8edf7;
  text-align:center;
  background:#0a1821;
  border:1px solid #32617a;
  border-radius:12px;
}
.service-area{
  margin-top:10px!important;
  color:#75d9ff!important;
  font-weight:700;
}
.geo-fields{
  margin:4px 0 12px;
  padding:14px 14px 5px;
  border:1px solid #32617a;
  border-radius:12px;
}
.geo-fields legend{
  padding:0 7px;
  color:#75d9ff;
  font-weight:700;
}
.geo-hint{
  margin:0 0 8px;
  color:#bfd0d8;
  font-size:14px;
  line-height:1.45;
}
.geo-hint-error{color:#ff9a9a;font-weight:700}

@media(max-width:900px){
  .local-intro-grid{grid-template-columns:1fr}
  .portfolio{grid-template-columns:1fr}
}
@media(max-width:700px){
  .doc-v27{min-height:730px}
  .doc-v27 .doc-scenes-v27{grid-template-columns:1fr}
}
@media(max-width:560px){
  .local-intro,.portfolio{padding:45px 16px}
  .portfolio-copy{padding:20px}
  .portfolio h2{font-size:30px}
}