*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a1628;color:#fff;font-family:'Inter',sans-serif;overflow-x:hidden}
#hero{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#particleCanvas{position:absolute;top:0;left:0;width:100%;height:100%}
.hero-subtitle{position:absolute;bottom:15%;font-size:clamp(1rem,2vw,1.4rem);color:rgba(212,164,58,0.6);letter-spacing:0.3em;text-transform:uppercase;font-weight:300}
.section-title{text-align:center;font-size:clamp(1.5rem,3vw,2.5rem);font-weight:300;color:#d4a43a;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:4rem}
#devices{padding:8rem 2rem;perspective:1200px}
.devices-container{display:flex;justify-content:center;align-items:center;gap:clamp(2rem,5vw,6rem);flex-wrap:wrap;max-width:1200px;margin:0 auto}
.device{transform-style:preserve-3d;transition:transform 0.1s ease-out}
.device-frame{border-radius:12px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,0.5),0 0 40px rgba(212,164,58,0.08)}
.laptop .device-frame{width:clamp(280px,30vw,420px);height:clamp(175px,19vw,265px);border:3px solid #1a2a40;border-radius:12px 12px 0 0;position:relative}
.laptop .device-frame::after{content:'';position:absolute;bottom:-18px;left:-20px;right:-20px;height:18px;background:linear-gradient(to bottom,#1a2a40,#0f1c2e);border-radius:0 0 8px 8px}
.phone .device-frame{width:clamp(120px,12vw,160px);height:clamp(240px,24vw,320px);border:3px solid #1a2a40;border-radius:20px;padding:12px 4px}
.tablet .device-frame{width:clamp(200px,20vw,280px);height:clamp(280px,28vw,380px);border:3px solid #1a2a40;border-radius:16px;padding:10px 6px}
.device-screen{width:100%;height:100%;border-radius:4px;overflow:hidden}
.screen-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.site-name{color:rgba(255,255,255,0.9);font-size:clamp(0.8rem,1.2vw,1.1rem);font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
.device{animation:float 6s ease-in-out infinite}
.device:nth-child(2){animation-delay:-2s;animation-duration:7s}
.device:nth-child(3){animation-delay:-4s;animation-duration:5.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
#map{padding:8rem 2rem}
.map-container{position:relative;max-width:1000px;height:600px;margin:0 auto;overflow:hidden;border-radius:12px;border:1px solid rgba(212,164,58,0.15)}
#mapCanvas{width:100%;height:100%}
.map-card{position:absolute;background:rgba(10,22,40,0.95);border:1px solid rgba(212,164,58,0.4);border-radius:10px;padding:1rem;display:flex;gap:1rem;align-items:center;pointer-events:auto;backdrop-filter:blur(10px);min-width:220px;transition:opacity 0.3s,transform 0.3s;z-index:10}
.map-card.hidden{opacity:0;transform:scale(0.9);pointer-events:none}
.card-thumb{width:50px;height:50px;border-radius:6px;background:linear-gradient(135deg,#1a3a5c,#d4a43a);flex-shrink:0}
.card-name{font-weight:600;font-size:0.95rem;color:#d4a43a}
.card-type{font-size:0.8rem;color:rgba(255,255,255,0.6);margin-top:2px}
.card-close{position:absolute;top:6px;right:10px;cursor:pointer;color:rgba(255,255,255,0.4);font-size:0.8rem}
.card-close:hover{color:#fff}
footer{text-align:center;padding:4rem 2rem;color:rgba(255,255,255,0.3);font-size:0.85rem;letter-spacing:0.1em}
@media(max-width:768px){.devices-container{flex-direction:column}.map-container{height:400px}}