:root{--red:#ff1818;--hot:#ff4c43;--silver:#e8edf2;--muted:#8d929b;--panel:#0b0b0e;--line:rgba(255,51,45,.34);--font:'Inter',sans-serif;--tech:'Rajdhani',sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030305;color:#fff;font-family:var(--font);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 50% 7%,rgba(255,0,0,.16),transparent 34%),linear-gradient(180deg,#080307,#020204 38%,#080202)}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}.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}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.ambient:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(#000,transparent 80%)}.ambient i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff4a3c;box-shadow:0 0 13px 4px red;animation:float 8s ease-in-out infinite}.ambient i:nth-child(1){top:22%;left:8%}.ambient i:nth-child(2){top:35%;right:7%;animation-delay:-3s}.ambient i:nth-child(3){top:70%;left:16%;animation-delay:-5s}@keyframes float{50%{transform:translateY(-25px);opacity:.35}}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;width:min(900px,calc(100% - 26px));margin:18px auto 0;padding:11px 12px 11px 14px;border:1px solid rgba(255,42,35,.26);border-radius:25px;background:rgba(8,6,8,.79);box-shadow:0 0 32px rgba(255,0,0,.11),inset 0 0 18px rgba(255,255,255,.025);backdrop-filter:blur(20px)}.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark,.footer-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ff3830;border-radius:50%;background:radial-gradient(circle,#8b0705,#0b0506 69%);color:#fff;font-size:23px;text-shadow:0 0 8px red;box-shadow:0 0 14px rgba(255,0,0,.4)}.brand b{display:block;font-family:var(--tech);letter-spacing:.12em;font-size:20px;line-height:.9}.brand small{display:block;margin-top:5px;color:#9ea0a7;font-family:var(--tech);font-size:9px;letter-spacing:.16em}.topbar nav{display:flex;align-items:center;gap:7px}.top-action{display:flex;gap:8px;align-items:center;padding:11px 16px;border:1px solid #ff514c;border-radius:17px;background:linear-gradient(135deg,#ef1212,#88100f);font-family:var(--tech);font-weight:700;box-shadow:inset 0 1px rgba(255,255,255,.35),0 0 15px rgba(255,0,0,.23)}.round{width:43px;height:43px;border-radius:50%;border:1px solid #ff3834;background:linear-gradient(145deg,#360707,#0b090a);cursor:pointer;box-shadow:inset 0 0 12px rgba(255,0,0,.3)}.voice-trigger{color:#ff524a}.sound{font-size:12px}.menu-trigger span{display:block;width:15px;height:1px;background:#fff;margin:5px auto}
main{width:min(760px,100%);margin:auto}.key-stage{padding:30px 14px 12px;text-align:center}.status{display:inline-flex;align-items:center;gap:9px;margin-bottom:17px;color:#d1d1d3;font-family:var(--tech);font-size:11px;font-weight:600;letter-spacing:.17em}.status span{width:7px;height:7px;border-radius:50%;background:#ff342e;box-shadow:0 0 9px 3px red;animation:pulse 1.8s infinite}@keyframes pulse{50%{opacity:.4;transform:scale(.75)}}.card-wrap{width:min(100%,430px);aspect-ratio:9/15.25;margin:auto;perspective:1400px;filter:drop-shadow(0 30px 45px #000)}.key-card{position:relative;width:100%;height:100%;border:0;background:transparent;padding:0;cursor:pointer;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.75,.25,1);border-radius:36px}.key-card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:block;border-radius:36px;overflow:hidden;backface-visibility:hidden;border:1px solid rgba(255,255,255,.21);box-shadow:inset 0 0 35px rgba(255,0,0,.16),0 0 0 5px #050505,0 0 0 6px rgba(255,62,55,.25),0 0 42px rgba(255,0,0,.18)}.card-front{background:#030303}.card-front>img{width:100%;height:100%;object-fit:cover;display:block}.front-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 7% 8%;background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.05) 66%,rgba(0,0,0,.92) 87%)}.service-line{padding:10px 4px;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.15);font-family:var(--tech);font-size:clamp(8px,2.4vw,12px);letter-spacing:.1em;color:#d8d9dd}.service-line i{display:inline-block;width:4px;height:4px;border-radius:50%;background:red;box-shadow:0 0 8px red;margin:0 5px;vertical-align:middle}.connect-grid{display:grid;grid-template-columns:1fr 1fr;text-align:left;margin-top:12px;gap:10px;font-family:var(--tech);font-size:clamp(12px,3.3vw,16px);font-weight:700}.connect-grid span{padding:9px 8px;border-left:2px solid var(--red);background:linear-gradient(90deg,rgba(255,0,0,.12),transparent)}.connect-grid b{display:block;color:#ff4f47;font-size:9px;letter-spacing:.14em;margin-bottom:3px}.card-back{transform:rotateY(180deg);padding:9% 7% 7%;background:radial-gradient(circle at 50% 34%,rgba(105,0,0,.38),transparent 37%),linear-gradient(140deg,rgba(255,0,0,.08),transparent 30%),#050506}.card-back:before,.card-back:after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,50,40,.47);clip-path:polygon(0 0,31% 0,36% 3%,64% 3%,69% 0,100% 0,100% 100%,0 100%);pointer-events:none}.card-back:after{inset:20px;border-color:rgba(255,255,255,.11)}.back-kicker{position:relative;z-index:1;display:block;color:#ff5049;font-family:var(--tech);font-weight:700;letter-spacing:.18em;font-size:12px}.qr-shell{position:relative;z-index:1;display:grid;place-items:center;width:60%;aspect-ratio:1;margin:6% auto 4%;padding:10px;border-radius:22px;background:#fff;box-shadow:0 0 0 4px #ff2c25,0 0 28px 8px rgba(255,0,0,.52)}.qr-shell img{width:100%;height:100%;object-fit:contain}.scan-title{position:relative;z-index:1;display:block;font-family:var(--tech);font-size:18px;font-weight:700;letter-spacing:.09em}.key-url{position:relative;z-index:1;display:block;margin:3% 0 5%;padding:10px 6px;border:1px solid #ff3430;border-radius:12px;background:#2e0607;color:#fff;font-family:var(--tech);font-size:clamp(10px,2.7vw,13px);font-weight:700;letter-spacing:.045em}.back-list{position:relative;z-index:1;display:grid;text-align:left}.back-list>span{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.11)}.back-list i{display:grid;place-items:center;width:30px;color:#ff4a44;font-size:20px;font-style:normal}.back-list b{font-family:var(--tech);font-size:10px;letter-spacing:.11em;color:#ff5049}.back-list small{display:block;margin-top:2px;color:#fff;font-family:var(--font);font-size:11px;letter-spacing:-.02em}.back-foot{position:absolute;z-index:1;bottom:4%;left:8%;right:8%;font-family:var(--tech);font-size:9px;letter-spacing:.13em;color:#b8b8bd}.primary-cta{display:flex;justify-content:space-between;align-items:center;width:min(100%,430px);margin:25px auto 17px;padding:15px 18px;border:1px solid #ff423c;border-radius:22px;text-align:left;background:linear-gradient(110deg,#4e0808,#d21313 55%,#3a0505);box-shadow:inset 0 1px rgba(255,255,255,.28),0 10px 35px rgba(255,0,0,.2)}.primary-cta span{font-family:var(--tech);font-size:22px;font-weight:700}.primary-cta small{display:block;color:#ffbbb7;font-size:9px;letter-spacing:.18em}.primary-cta b{font-size:27px;text-shadow:0 0 14px #fff}.flip-control{padding:13px 24px;border:1px solid rgba(255,93,86,.75);border-radius:22px;background:linear-gradient(130deg,#9b0e0e,#421011);font-family:var(--tech);font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 0 22px rgba(255,0,0,.2)}.flip-control span{margin-right:8px}.flip-hint{margin:8px 0;color:#5f5d62;font-size:10px}.flip-hint span{font-size:17px;vertical-align:middle}
.actions,.service-panel,.details{margin:36px 14px 0;padding:25px 18px;border:1px solid rgba(255,53,48,.19);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent),rgba(8,8,10,.85);box-shadow:inset 0 1px rgba(255,255,255,.04)}.eyebrow{margin:0 0 6px;color:#ff3d37;font-family:var(--tech);font-size:10px;font-weight:700;letter-spacing:.19em}.actions h2,.service-panel h2,.menu h2{margin:0 0 20px;font-family:var(--tech);font-size:29px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.action-grid a{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;align-items:center;padding:14px 10px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:#09090b;transition:.2s}.action-grid a:hover{transform:translateY(-2px);border-color:#ff332e}.action-grid span{grid-row:1/3;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ff332e;border-radius:10px;color:#ff504a}.action-grid b{font-family:var(--tech);font-size:16px}.action-grid small{color:#777982;font-size:9px}.services{display:grid;grid-template-columns:1fr 1fr;gap:10px}.services article{min-height:145px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:linear-gradient(150deg,rgba(255,20,20,.08),transparent 65%)}.services article>span{display:grid;place-items:center;width:37px;height:37px;border-radius:10px;background:#280707;color:#ff4b45;font-size:20px}.services h3{margin:14px 0 4px;font-family:var(--tech);font-size:18px}.services p{margin:0;color:#8f9198;font-size:11px;line-height:1.5}.details{display:grid;gap:4px}.details>div{display:flex;align-items:center;gap:14px;padding:14px 5px;border-bottom:1px solid rgba(255,255,255,.08)}.details>div:last-child{border:0}.details>div>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,60,54,.42);border-radius:11px;color:#ff514a}.details p{margin:0}.details small{display:block;color:#ff4d47;font-family:var(--tech);font-size:9px;letter-spacing:.14em}.details b{font-family:var(--tech);font-size:16px}
footer{text-align:center;padding:55px 20px 100px;color:#777}.footer-mark{margin:0 auto 12px}.footer-mark+ b{display:block;color:#d9d9dc;font-family:var(--tech);letter-spacing:.13em}footer p{font-family:var(--tech);font-size:10px;letter-spacing:.12em}footer small{font-size:9px}footer a{color:#b9b9bd}.menu{position:fixed;z-index:42;top:0;right:0;width:min(88vw,380px);height:100dvh;padding:75px 26px 30px;border:0;border-left:1px solid var(--line);background:rgba(7,5,7,.97);box-shadow:-30px 0 70px #000;transform:translateX(105%);transition:.35s}.menu.open{transform:translateX(0)}.menu-close{position:absolute;right:20px;top:20px;width:42px;height:42px;border:1px solid #5d2422;border-radius:50%;background:#140909;font-size:25px}.menu>a,.share-key{display:flex;justify-content:space-between;width:100%;padding:17px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.1);background:none;text-align:left;font-family:var(--tech);font-size:17px;cursor:pointer}.menu a span,.share-key span{color:#ff4943}.scrim{position:fixed;z-index:40;inset:0;background:rgba(0,0,0,.7);opacity:0;visibility:hidden;transition:.3s}.scrim.open{opacity:1;visibility:visible}.voice-modal{width:min(92vw,420px);padding:48px 24px 24px;border:1px solid #79201c;border-radius:30px;background:radial-gradient(circle at 50% 13%,rgba(255,0,0,.17),transparent 26%),#090708;color:#fff;text-align:center;box-shadow:0 0 80px #000}.voice-modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}.voice-close{position:absolute;right:16px;top:14px;border:0;background:none;color:#aaa;font-size:26px}.voice-orb{position:relative;display:grid;place-items:center;width:90px;height:90px;margin:0 auto 25px;border:1px solid #ff4b43;border-radius:50%;background:#1d0707;box-shadow:0 0 28px rgba(255,0,0,.36)}.voice-orb i{position:absolute;inset:-10px;border:1px solid rgba(255,50,44,.2);border-radius:50%;animation:pulse 1.5s infinite}.voice-orb span{font-size:42px}.voice-modal h2{margin:4px 0 8px;font-family:var(--tech);font-size:29px}.voice-modal>p:not(.eyebrow){color:#9a9ba1;font-size:13px;line-height:1.55}.mic-button{margin:12px 0 16px;padding:14px 23px;border:1px solid #ff4c45;border-radius:22px;background:linear-gradient(120deg,#cb1512,#5f0909);font-family:var(--tech);font-weight:700}.mic-button.listening{animation:mic 1s infinite}@keyframes mic{50%{box-shadow:0 0 25px red}}.voice-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.voice-choices button{padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0e0d0f;color:#c4c4c8;font-family:var(--tech)}.toast{position:fixed;z-index:60;left:50%;bottom:30px;max-width:90vw;padding:12px 18px;border:1px solid #ff4943;border-radius:16px;background:#180808;color:white;font-size:12px;transform:translate(-50%,30px);opacity:0;pointer-events:none;transition:.3s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(min-width:700px){.key-stage{padding-top:42px}.action-grid{grid-template-columns:repeat(4,1fr)}.action-grid a{grid-template-columns:1fr;text-align:center}.action-grid span{grid-row:auto;margin:0 auto 8px}.services{grid-template-columns:repeat(4,1fr)}.services article{min-height:170px}.details{grid-template-columns:repeat(3,1fr)}.details>div{display:block;text-align:center;border-bottom:0;border-right:1px solid rgba(255,255,255,.08)}.details>div:last-child{border:0}.details>div>span{margin:0 auto 10px}}
@media(max-width:380px){.brand small{display:none}.top-action{padding:10px 13px}.card-wrap{width:96%}.back-list>span{padding:6px 2px}.back-foot{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}.key-card{transition:none}}

/* Premium black-glass key treatment for Cartin Electric */
:root{--red:#ff264d;--blue:#24c8ff;--hot:#ff4c69;--panel:#06101a;--line:rgba(36,200,255,.35)}
body{background:#02060b;background-image:radial-gradient(circle at 50% 8%,rgba(0,173,255,.18),transparent 30%),radial-gradient(circle at 94% 20%,rgba(255,0,74,.12),transparent 28%),linear-gradient(180deg,#030a12,#010305 42%,#080208)}
.ambient:before{background-image:linear-gradient(rgba(49,189,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(49,189,255,.018) 1px,transparent 1px)}
.ambient i{background:#38cfff;box-shadow:0 0 13px 4px #008cff}.ambient i:nth-child(2){background:#ff395b;box-shadow:0 0 13px 4px #ff003c}
.topbar{top:12px;width:min(760px,calc(100% - 26px));padding:10px 12px 10px 14px;border-color:rgba(36,200,255,.42);background:rgba(4,12,20,.86);box-shadow:0 0 32px rgba(0,159,255,.13),inset 0 0 18px rgba(255,255,255,.035);backdrop-filter:blur(22px)}
.brand-mark{width:46px;height:46px;overflow:hidden;border-color:#39c8ff;border-radius:13px;background:#03070c;box-shadow:0 0 15px rgba(0,174,255,.32)}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand b{font-size:18px;white-space:nowrap}.brand small{color:#62cdf4;letter-spacing:.25em}
.top-action{border-color:rgba(255,81,116,.8);border-radius:19px;background:linear-gradient(125deg,#1566a4,#733d85 52%,#d92354);box-shadow:inset 0 1px rgba(255,255,255,.35),0 0 18px rgba(0,166,255,.18)}
.round{border-color:rgba(50,199,255,.42);background:linear-gradient(145deg,#051421,#06080d);box-shadow:inset 0 0 12px rgba(0,160,255,.18)}.voice-trigger{border-color:rgba(255,49,87,.55);color:#fff}.menu-trigger span{height:2px;background:#63d4ff;border-radius:2px}
.key-stage{padding-top:28px}.status{color:#cbd3da}.status span{background:#35cfff;box-shadow:0 0 9px 3px #008cff}
.card-wrap{width:min(100%,460px);aspect-ratio:9/16;filter:drop-shadow(0 30px 48px #000)}.key-card,.card-face{border-radius:34px}.card-face{border-color:rgba(133,221,255,.45);box-shadow:inset 0 0 35px rgba(0,167,255,.16),0 0 0 5px #020509,0 0 0 6px rgba(44,195,255,.32),-12px 0 34px rgba(0,147,255,.16),12px 0 34px rgba(255,0,64,.12)}.front-overlay{display:none}
.card-back{background:#03070c}.back-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}.card-back:before{border-color:rgba(44,197,255,.42)}.card-back:after{border-color:rgba(255,63,93,.25)}
.back-kicker{color:#52d1ff}.qr-shell{box-shadow:0 0 0 4px #36cfff,0 0 28px 8px rgba(0,151,255,.42)}.key-url{border-color:#35cfff;background:#071d2d}.back-list b{color:#55d0ff}.back-list i{color:#ff4c6d}.primary-cta{border-color:#ff4f72;background:linear-gradient(110deg,#06345b,#244f8a 45%,#b51c4e);box-shadow:inset 0 1px rgba(255,255,255,.28),0 10px 35px rgba(0,142,255,.18)}.primary-cta small{color:#a9dcff}.flip-control{border-color:rgba(67,204,255,.75);background:linear-gradient(130deg,#07517f,#451335)}
.actions,.service-panel,.details{border-color:rgba(48,189,255,.2);background:linear-gradient(145deg,rgba(0,160,255,.055),transparent),rgba(5,11,17,.9)}.eyebrow{color:#43caff}.action-grid a:hover{border-color:#3bcaff}.action-grid span,.details>div>span{border-color:rgba(55,202,255,.48);color:#55d4ff}.services article{background:linear-gradient(150deg,rgba(0,151,255,.08),transparent 65%)}.services article>span{background:#06263a;color:#55d4ff}.details small{color:#52ceff}.footer-mark{border-color:#3bcaff;background:radial-gradient(circle,#073653,#05090d 69%);text-shadow:0 0 8px #2dcaff;box-shadow:0 0 14px rgba(0,160,255,.35)}
@media(max-width:520px){.topbar{width:calc(100% - 28px);gap:6px}.brand{flex:1;overflow:hidden;gap:8px}.brand-mark{flex:0 0 40px;width:40px;height:40px}.brand b{font-size:12px;letter-spacing:.075em}.brand small{font-size:7px;letter-spacing:.2em}.topbar nav{flex:none;gap:5px}.top-action{padding:10px 12px;font-size:14px}.round{width:39px;height:39px}.key-stage{padding-left:15px;padding-right:15px}}
@media(max-width:390px){.brand b{font-size:11px}.brand-mark{flex-basis:38px;width:38px;height:38px}.top-action{padding:9px 10px;font-size:13px}.round{width:37px;height:37px}}