*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0A1C2B;color:#E8DCC8;font-family:'Azeret Mono',monospace;font-weight:300;overflow-x:hidden;line-height:1.7;font-size:clamp(0.85rem,1.2vw,1rem)}
.noise-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.sonar-sweep{position:fixed;inset:0;z-index:1;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,rgba(0,212,190,0.04) 30deg,transparent 60deg);animation:sonarRotate 30s linear infinite}
@keyframes sonarRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Depth gauge */
.depth-gauge{position:fixed;left:0;top:0;width:24px;height:100vh;z-index:10;display:flex;flex-direction:column;justify-content:space-between;padding:10px 0}
.depth-tick{font-family:'Azeret Mono',monospace;font-size:0.6rem;color:rgba(110,176,180,0.3);writing-mode:vertical-rl;text-orientation:mixed;padding-left:4px;transition:color 0.5s ease}
.depth-tick.active span{color:rgba(0,212,190,0.8)}

/* Hex zones */
.hex-zone{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:40px 40px 40px 40px;max-width:1200px;margin:0 auto}
.zone-surface{min-height:100vh;align-items:center}

/* Hex cells */
.hex{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 30px;opacity:0;transform:scale(0.8);transition:opacity 0.6s ease-out,transform 0.6s cubic-bezier(0.34,1.56,0.64,1)}
.hex.visible{opacity:1;transform:scale(1)}

.hex-hero{width:100%;max-width:600px;min-height:400px;background:linear-gradient(180deg,#2A3E50,#0A1C2B);border:2px solid rgba(110,175,180,0.35)}
.title-main{font-family:'Righteous',cursive;font-size:clamp(2.8rem,7vw,5.5rem);text-transform:uppercase;letter-spacing:0.14em;color:#E8DCC8}
.subtitle{font-family:'Azeret Mono',monospace;font-weight:300;font-size:0.75rem;color:#6EB0B4;margin-top:8px;letter-spacing:0.08em}

.hex-data{width:280px;min-height:300px;background:linear-gradient(135deg,#2A3E50,#1A3A3A);border:2px solid rgba(110,175,180,0.35);gap:12px}
.hex-label{font-family:'Azeret Mono',monospace;font-weight:500;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:#6EB0B4}
.hex-data h2{font-family:'Righteous',cursive;font-size:clamp(1.4rem,4vw,2rem);text-transform:uppercase;letter-spacing:0.14em;color:#E8DCC8}
.hex-data p{font-size:clamp(0.85rem,1.2vw,1rem);color:#B8C4CC;line-height:1.7}

.hex-specimen{width:220px;min-height:240px;background:#0A1C2B;border:2px solid rgba(0,212,190,0.4);overflow:hidden;position:relative}
.hex-void{width:180px;min-height:200px;background:#0A1C2B}

.hex-accent{width:250px;min-height:260px;background:linear-gradient(135deg,#1A3A3A,#0A1C2B);display:flex;align-items:center;justify-content:center}
.bungee-text{font-family:'Bungee Shade',cursive;font-size:clamp(1.2rem,3vw,2rem);color:#D4946A}

/* Deep level color shift */
.deep-hex h2{color:#00D4BE}

/* Sonar wave */
.sonar-wave{width:100%;height:100%;position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sonar-wave::before{content:'';width:60px;height:60px;border:1px solid rgba(0,212,190,0.4);border-radius:50%;animation:sonarPing 3s ease-out infinite}
.sonar-wave::after{content:'';width:40px;height:40px;border:1px solid rgba(0,212,190,0.3);border-radius:50%;position:absolute;animation:sonarPing 3s ease-out infinite 1s}
@keyframes sonarPing{0%{transform:scale(0.5);opacity:1}100%{transform:scale(2.5);opacity:0}}

/* Compass rose */
.compass-rose{width:80px;height:80px;position:relative}
.compass-arm{position:absolute;background:#6EB0B4;top:50%;left:50%;transform-origin:center center}
.arm-n{width:2px;height:35px;transform:translate(-1px,-35px)}
.arm-s{width:2px;height:30px;transform:translate(-1px,0)}
.arm-e{width:30px;height:2px;transform:translate(0,-1px)}
.arm-w{width:35px;height:2px;transform:translate(-35px,-1px)}
.compass-center{width:8px;height:8px;background:#00D4BE;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.compass-rose{animation:compassSpin 20s linear infinite}
@keyframes compassSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Grid interference */
.grid-interference{width:100%;height:100%;position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 8px,rgba(0,212,190,0.06) 8px,rgba(0,212,190,0.06) 9px),repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(0,212,190,0.06) 8px,rgba(0,212,190,0.06) 9px);animation:gridShift 5s ease-in-out infinite}
@keyframes gridShift{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-2px)}}

.contact-info{color:#00D4BE;font-weight:500}

/* Coral Signal reference */
.ref-coral{color:#E85A4F}
.ref-kelp{color:#1A3A3A}

@media(max-width:768px){
.hex-zone{flex-direction:column;align-items:center}
.hex{width:90% !important;min-height:auto !important;padding:30px 20px}
.depth-gauge{display:none}
}