*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0A0A1A;font-family:'Exo 2',sans-serif;font-weight:400;font-size:15px;line-height:1.8;color:#8AACBC;overflow-x:hidden;min-height:100vh}
.hero-ocean{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background:radial-gradient(ellipse at 50% 80%,#1A1040 0%,#0A0A1A 70%)}
h1{font-family:'Orbitron',sans-serif;font-weight:700;font-size:28px;color:#B0E0F0;letter-spacing:0.04em;margin-bottom:16px;text-shadow:0 0 20px rgba(176,224,240,0.2)}
.hero-sub{max-width:480px;color:#8AACBC;margin-bottom:16px}
.tag-label{font-family:'Exo 2',sans-serif;font-weight:600;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#6A8A9A;display:block;margin-bottom:12px}
.hex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;padding:40px 20px 80px}
.hex-cell{clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(135deg,rgba(138,96,208,0.12),rgba(0,212,170,0.08));aspect-ratio:1/1.15;display:flex;align-items:center;justify-content:center;transition:transform 0.4s ease,box-shadow 0.4s ease;opacity:0;transform:scale(0.8)}
.hex-cell.visible{opacity:1;transform:scale(1)}
.hex-inner{padding:40px 24px;text-align:center}
h2{font-family:'Orbitron',sans-serif;font-weight:700;font-size:16px;color:#B0E0F0;margin-bottom:8px;letter-spacing:0.02em}
.hex-cell p{font-size:13px;color:#8AACBC;line-height:1.6}
.hex-cell:hover{background:linear-gradient(135deg,rgba(138,96,208,0.2),rgba(0,212,170,0.15));filter:drop-shadow(0 0 12px rgba(0,212,170,0.2))}
@media(max-width:768px){.hex-grid{grid-template-columns:repeat(2,1fr)}.hex-inner{padding:30px 16px}}
@media(max-width:500px){.hex-grid{grid-template-columns:1fr}.hex-cell{clip-path:none;border-radius:16px;aspect-ratio:auto;border:1px solid rgba(176,224,240,0.1)}}