*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#070812;color:#f5f6ff;font-family:Inter,system-ui,Arial}.nav{position:sticky;top:0;z-index:20;padding:17px 6%;display:flex;justify-content:space-between;align-items:center;background:#070812dd;backdrop-filter:blur(18px);border-bottom:1px solid #252740}.brand{color:#fff;text-decoration:none;font-weight:900;letter-spacing:2px}.brand span{color:#8d7cff}.nav nav{display:flex;gap:20px;align-items:center}.nav a{color:#c8cada;text-decoration:none}.nav button,.tabs button,#clear{background:#252943;color:#fff;border:0;border-radius:10px;padding:9px 13px;cursor:pointer}.hero{min-height:78vh;padding:70px 8%;display:grid;grid-template-columns:1fr 1fr;align-items:center;background:radial-gradient(circle at 75% 35%,#27205f,#11132a 38%,#070812 72%)}.eyebrow{font-size:11px;letter-spacing:3px;color:#8d7cff;font-weight:900}.hero h1{font-size:clamp(48px,7vw,88px);line-height:.95;margin:10px 0 25px}.hero h1 span{background:linear-gradient(90deg,#fff,#9e92ff,#4ddcff);color:transparent;background-clip:text}.hero p{color:#b7b9ca;font-size:18px;line-height:1.6;max-width:650px}.cta,.primary{display:inline-block;background:linear-gradient(135deg,#8d7cff,#45d6ff);color:#080912!important;font-weight:900;border:0;border-radius:12px;padding:12px 17px;text-decoration:none;cursor:pointer}.hero-phone{height:500px;display:grid;place-items:center;position:relative;perspective:1000px}.phone{width:220px;height:430px;border-radius:38px;background:linear-gradient(135deg,#ddd9ff,#38375d 48%,#11121f);transform:rotateY(-18deg) rotateX(8deg);box-shadow:25px 35px 80px #000,0 0 90px #655bff88;animation:float 5s infinite ease-in-out}.screen{margin:10px;height:calc(100% - 20px);border-radius:31px;background:radial-gradient(circle at 50% 30%,#7667ff,#11132d 45%,#05060d);display:flex;flex-direction:column;justify-content:center;align-items:center}.screen b{font-size:26px;letter-spacing:4px}.screen small{letter-spacing:4px;color:#c6c7ff}.glow{position:absolute;width:300px;height:300px;border-radius:50%;background:#665aff44;filter:blur(35px)}@keyframes float{50%{transform:rotateY(-18deg) rotateX(8deg) translateY(-18px)}}.section{padding:70px 7%}.section h2,.contact h2{font-size:42px;margin:5px 0 30px}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}.service,.card,.form-card{padding:20px;border:1px solid #2a2d47;border-radius:20px;background:linear-gradient(145deg,#15172b,#0c0d18)}.service:hover,.card:hover{transform:translateY(-5px)}.service .icon{font-size:38px}.service p,.muted{color:#9799ac;line-height:1.5;font-size:13px}.head{display:flex;justify-content:space-between;align-items:end}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.card{padding:17px;box-shadow:0 20px 55px #0005}.photo{height:230px;border-radius:15px;background:#090b14;display:grid;place-items:center;overflow:hidden}.photo img{width:100%;height:100%;object-fit:contain}.placeholder{font-size:55px}.card h3{margin:10px 0}.price{font-weight:900;font-size:21px}.old{text-decoration:line-through;color:#73768b;font-size:13px;margin-left:6px}.stock{color:#8ee9b0;font-size:12px}.card button{width:100%;padding:11px;border:0;border-radius:10px;background:#272a44;color:#fff;cursor:pointer}.banner{margin:10px 7% 70px;padding:34px;border-radius:24px;border:1px solid #34375a;background:linear-gradient(110deg,#1c1843,#122c43);display:flex;justify-content:space-between;align-items:center}.contact{padding:70px 7%;border-top:1px solid #202238}.contact-items{display:flex;flex-wrap:wrap;gap:12px}.contact-items span{padding:12px 15px;border-radius:12px;background:#15182a;color:#bfc1d0}.modal{position:fixed;inset:0;z-index:50;background:#000c;display:grid;place-items:center;padding:18px}.hidden{display:none!important}.panel{width:min(1000px,100%);max-height:92vh;overflow:auto;padding:23px;border-radius:22px;background:#0e1020;border:1px solid #343653}.panel-head{display:flex;justify-content:space-between}.panel-head>button{background:none;border:0;color:#fff;font-size:30px;cursor:pointer;width:42px;height:42px;border-radius:10px;display:grid;place-items:center}.panel-head>button:hover{background:#252943}.form-card{margin-top:17px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}label{display:block;color:#cfd1df;font-size:13px;margin:8px 0}input,select{width:100%;margin-top:6px;padding:11px;border-radius:9px;border:1px solid #32354f;background:#090b15;color:#fff}.tabs{display:flex;gap:8px;margin-top:18px}.tabs button.active{background:#554ab2}.admin-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #292c43}.row button{border:0;border-radius:8px;padding:8px;margin-left:5px;cursor:pointer}.edit{background:#263b63;color:#fff}.danger{background:#52202d;color:#fff}.error{color:#ff899c}@media(max-width:760px){.nav nav a{display:none}.hero{grid-template-columns:1fr;padding:55px 7%}.hero-phone{height:380px}.phone{width:180px;height:350px}.form-grid{grid-template-columns:1fr}.banner{display:block}.banner .cta{margin-top:15px}}
.section-note{margin-top:-18px;max-width:650px}.filter-row{display:flex;gap:10px;margin:0 0 20px}.filter-row input{max-width:520px}.filter-row select{max-width:220px}.admin-summary{display:flex;gap:10px;margin-bottom:10px}.admin-summary span{padding:8px 12px;border:1px solid #30334d;border-radius:10px;color:#cfd1df;font-size:12px;background:#0b0d17}.accessories-section{background:linear-gradient(180deg,#0a0b15,#101225);border-top:1px solid #202238;border-bottom:1px solid #202238}@media(max-width:760px){.nav nav a:nth-child(4){display:none}.filter-row{flex-direction:column}.filter-row input,.filter-row select{max-width:none}.admin-summary{flex-wrap:wrap}}

/* V4 HERO — unique 3D mobile showroom. All existing store/admin functionality is unchanged. */
.hero{position:relative;overflow:hidden;min-height:86vh;padding:75px 8%;grid-template-columns:1.02fr .98fr;background:radial-gradient(circle at 78% 38%,#30277e 0,#161a45 24%,#0b0d20 54%,#070812 82%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(112,101,255,.07) 60%,transparent 75%)}
.hero-copy{position:relative;z-index:3}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #4a4d76;border-radius:999px;background:#11142ad9;color:#cfd2ff;font-size:10px;font-weight:900;letter-spacing:1.7px;box-shadow:0 8px 30px #0005}
.badge-dot{width:7px;height:7px;border-radius:50%;background:#57e8ff;box-shadow:0 0 14px #57e8ff}
.hero .eyebrow{margin-top:28px}
.hero-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:24px}
.ghost-cta{padding:11px 16px;border:1px solid #414566;border-radius:12px;color:#dfe1ff;text-decoration:none;background:#101327aa;font-weight:800}
.ghost-cta:hover{border-color:#7773ff;background:#191b38}
.hero-phone{height:570px;isolation:isolate;transform-style:preserve-3d}
.scene-grid{position:absolute;left:3%;right:0;bottom:10%;height:48%;opacity:.42;transform:perspective(500px) rotateX(63deg);background-image:linear-gradient(#5e63bb33 1px,transparent 1px),linear-gradient(90deg,#5e63bb33 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to top,black,transparent)}
.showroom-floor{position:absolute;width:430px;height:130px;bottom:12%;left:50%;transform:translateX(-50%) rotateX(65deg);border-radius:50%;background:radial-gradient(ellipse,#655cff45 0,#3b42a322 38%,transparent 70%);filter:blur(3px);box-shadow:0 0 80px #4d5cff22}
.glow{width:390px;height:390px;background:radial-gradient(circle,#6b60ff55,#4c83ff20 38%,transparent 70%);filter:blur(8px);z-index:0}
.orbit{position:absolute;left:50%;top:49%;width:430px;height:430px;border:1px solid #7d76ff33;border-radius:50%;transform-style:preserve-3d;z-index:1}
.orbit:before,.orbit:after{content:"";position:absolute;border-radius:50%;background:#72e6ff;box-shadow:0 0 18px #72e6ff}
.orbit:before{width:8px;height:8px;left:8%;top:13%}.orbit:after{width:5px;height:5px;right:11%;bottom:19%}
.orbit-a{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(-14deg);animation:spinA 14s linear infinite}
.orbit-b{width:360px;height:360px;transform:translate(-50%,-50%) rotateX(72deg) rotateY(12deg) rotateZ(28deg);border-color:#57e8ff20;animation:spinB 11s linear infinite reverse}
.phone-shadow{position:absolute;z-index:2;width:220px;height:65px;left:50%;bottom:18%;transform:translateX(-50%) rotateX(70deg);border-radius:50%;background:#0009;filter:blur(18px)}
.phone-3d{z-index:4;width:245px;height:475px;border-radius:43px;position:relative;background:linear-gradient(110deg,#f1efff 0%,#8984bd 12%,#393758 42%,#17182a 70%,#8e87cc 100%);border:2px solid #bdb9f3;transform:rotateY(-25deg) rotateX(7deg) rotateZ(-2deg);box-shadow:25px 38px 60px #000b,0 0 45px #6d63ff77,inset -7px 0 10px #ffffff25;animation:phoneFloat3d 5.5s ease-in-out infinite;transform-style:preserve-3d}
.phone-3d:after{content:"";position:absolute;inset:10px;border-radius:34px;border:1px solid #fff3;pointer-events:none}
.phone-edge{position:absolute;right:-7px;top:88px;width:8px;height:90px;border-radius:0 7px 7px 0;background:linear-gradient(#b7b3e6,#57527c);box-shadow:0 0 7px #0008}
.camera-lens{position:absolute;z-index:6;width:30px;height:30px;border-radius:50%;left:25px;background:radial-gradient(circle at 38% 35%,#dff,#242750 23%,#090a14 54%,#7478bd 57%,#111 73%);border:2px solid #a7a3d0;box-shadow:0 3px 10px #0008}
.lens-1{top:28px}.lens-2{top:66px;left:45px;width:22px;height:22px}
.screen{position:relative;margin:9px;height:calc(100% - 18px);border-radius:35px;overflow:hidden;background:radial-gradient(circle at 50% 30%,#7567ff,#151737 42%,#04050b 82%);box-shadow:inset 0 0 35px #0008}
.screen:before{content:"";position:absolute;left:50%;top:8px;width:70px;height:18px;transform:translateX(-50%);border-radius:0 0 13px 13px;background:#02030a;z-index:5}
.screen-shine{position:absolute;inset:-30% 35% 0 -20%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,#fff2,transparent);filter:blur(5px)}
.screen-logo{position:absolute;top:46%;left:0;right:0;text-align:center;font-size:27px;letter-spacing:4px;font-weight:950;text-shadow:0 0 25px #8f84ff}
.screen-logo small{display:block;font-size:9px;letter-spacing:5px;color:#d6d7ff;margin-top:6px}
.screen-line{position:absolute;width:42%;height:2px;left:29%;top:57%;background:linear-gradient(90deg,transparent,#63e8ff,transparent);box-shadow:0 0 14px #63e8ff}
.screen-pill{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:6px 9px;border:1px solid #ffffff22;border-radius:99px;color:#cfd1ff;font-size:7px;letter-spacing:1.5px;background:#ffffff08}
.floating-tag,.mini-card{position:absolute;z-index:6;border:1px solid #474b78;background:#0e1125cc;backdrop-filter:blur(14px);box-shadow:0 16px 35px #0007}
.floating-tag{padding:9px 11px;border-radius:13px;font-size:8px;letter-spacing:1.5px;color:#8fefff;line-height:1.25}
.floating-tag b{color:#fff;font-size:10px}.tag-top{top:14%;right:7%;transform:rotate(6deg);animation:tagFloat 4s ease-in-out infinite}.tag-bottom{bottom:19%;left:2%;transform:rotate(-7deg);animation:tagFloat 4.8s .5s ease-in-out infinite}
.mini-card{width:135px;padding:12px;border-radius:15px;display:grid;grid-template-columns:30px 1fr;column-gap:7px;align-items:center}.mini-card span{grid-row:span 2;font-size:20px}.mini-card b{font-size:10px}.mini-card small{color:#8f92a9;font-size:8px}.mini-left{left:0;top:31%;transform:rotate(-7deg);animation:cardFloat 4.4s ease-in-out infinite}.mini-right{right:0;bottom:31%;transform:rotate(7deg);animation:cardFloat 4.9s .4s ease-in-out infinite}
@keyframes phoneFloat3d{0%,100%{transform:rotateY(-25deg) rotateX(7deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateY(-19deg) rotateX(10deg) rotateZ(1deg) translateY(-17px)}}
@keyframes spinA{to{transform:translate(-50%,-50%) rotateX(66deg) rotateZ(346deg)}}
@keyframes spinB{to{transform:translate(-50%,-50%) rotateX(72deg) rotateY(12deg) rotateZ(-332deg)}}
@keyframes tagFloat{50%{translate:0 -9px}}@keyframes cardFloat{50%{translate:0 -12px}}
@media(max-width:760px){.hero{min-height:auto;padding-top:48px}.hero-badge{font-size:8px}.hero-phone{height:500px;margin-top:12px}.phone-3d{width:205px;height:395px}.orbit{width:330px;height:330px}.orbit-b{width:280px;height:280px}.scene-grid{height:42%}.mini-card{width:115px}.tag-top{right:0}.tag-bottom{left:0}.hero-actions{margin-bottom:5px}}