*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Fredoka',sans-serif;color:#E0F4FF;background:#010A1A;min-height:100vh;}

.ocean-bg{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,#010A1A 0%,#020E28 20%,#021530 40%,#011020 70%,#010812 100%);animation:oceanShift 12s ease-in-out infinite;}
@keyframes oceanShift{0%,100%{background:linear-gradient(180deg,#010A1A 0%,#020E28 20%,#021530 40%,#011020 70%,#010812 100%);}50%{background:linear-gradient(180deg,#020C22 0%,#031225 20%,#011A38 40%,#020E20 70%,#010A14 100%);}}

.caustic{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.06;background:radial-gradient(ellipse 120px 60px at 20% 15%, #00AAFF, transparent),radial-gradient(ellipse 80px 40px at 60% 25%, #00FFEE, transparent),radial-gradient(ellipse 100px 50px at 80% 10%, #00AAFF, transparent),radial-gradient(ellipse 90px 45px at 40% 35%, #00FFEE, transparent);animation:causticMove 8s ease-in-out infinite;}
@keyframes causticMove{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(20px,-10px) scale(1.05);}66%{transform:translate(-15px,8px) scale(0.97);}}

.bubble{position:fixed;border-radius:50%;z-index:2;pointer-events:none;border:1px solid rgba(0,200,255,0.3);animation:bubbleRise linear infinite;}
@keyframes bubbleRise{from{transform:translateY(100vh) translateX(0);opacity:0;}10%{opacity:0.6;}90%{opacity:0.3;}to{transform:translateY(-100px) translateX(var(--drift));opacity:0;}}

.fish{position:fixed;z-index:4;pointer-events:none;font-size:2rem;filter:drop-shadow(0 0 8px rgba(0,180,255,0.4));animation:fishSwim linear infinite;white-space:nowrap;}
.fish.rtl{animation-name:fishSwimRTL;}
@keyframes fishSwim{from{left:-80px;transform:scaleX(1);}to{left:calc(100% + 80px);transform:scaleX(1);}}
@keyframes fishSwimRTL{from{left:calc(100% + 80px);transform:scaleX(-1);}to{left:-80px;transform:scaleX(-1);}}

.jelly{position:fixed;z-index:3;pointer-events:none;font-size:3rem;filter:drop-shadow(0 0 12px rgba(0,200,255,0.5));animation:jellyFloat ease-in-out infinite;}
@keyframes jellyFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-20px) scale(1.05);}}

/* TOPBAR */
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:rgba(1,8,20,0.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,180,255,0.1);}
.tb-logo{font-size:1.05rem;font-weight:700;color:#E0F4FF;letter-spacing:0.06em;text-decoration:none;display:flex;align-items:center;gap:8px;}
.tb-logo small{font-size:0.62rem;font-weight:300;color:rgba(0,200,255,0.45);font-family:'Share Tech Mono',monospace;letter-spacing:0.1em;}
.nav{display:flex;gap:4px;align-items:center;}
.nav a{font-family:'Share Tech Mono',monospace;font-size:0.58rem;letter-spacing:0.09em;color:rgba(0,200,255,0.45);text-decoration:none;padding:5px 13px;border:1px solid rgba(0,200,255,0.1);border-radius:20px;transition:all 0.25s;white-space:nowrap;}
.nav a:hover,.nav a.active{color:#00C8FF;border-color:rgba(0,200,255,0.35);background:rgba(0,200,255,0.06);}
.tb-right{font-family:'Share Tech Mono',monospace;font-size:0.5rem;letter-spacing:0.1em;color:rgba(0,200,255,0.3);display:flex;align-items:center;gap:14px;}
.depth{color:rgba(0,200,255,0.5);animation:depthChange 4s ease-in-out infinite;}
@keyframes depthChange{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* CONTENT WRAPPER */
.page{position:relative;z-index:10;padding:90px 40px 60px;}
.page-inner{max-width:1200px;margin:0 auto;}
.page-label{font-family:'Share Tech Mono',monospace;font-size:0.58rem;letter-spacing:0.2em;color:rgba(0,200,255,0.4);margin-bottom:10px;}
.page-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;color:#E0F4FF;text-shadow:0 0 20px rgba(0,200,255,0.3);margin-bottom:12px;}
.page-lead{font-size:0.98rem;font-weight:300;color:rgba(224,244,255,0.5);max-width:620px;line-height:1.75;margin-bottom:48px;}

/* CARDS */
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px;}

.card{background:rgba(0,20,50,0.5);backdrop-filter:blur(12px);border:1px solid rgba(0,180,255,0.12);border-radius:16px;padding:28px;transition:all 0.3s;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,0.22),transparent);}
.card:hover{border-color:rgba(0,200,255,0.28);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,150,255,0.1);}

.card-emoji{font-size:2.8rem;margin-bottom:14px;filter:drop-shadow(0 0 10px rgba(0,180,255,0.5));}
.card-name{font-size:1.2rem;font-weight:600;color:#E0F4FF;margin-bottom:3px;}
.card-sub{font-family:'Share Tech Mono',monospace;font-size:0.56rem;color:rgba(0,200,255,0.4);letter-spacing:0.1em;margin-bottom:12px;}
.card-desc{font-size:0.87rem;font-weight:300;color:rgba(224,244,255,0.55);line-height:1.68;}
.tag{display:inline-block;margin-top:12px;margin-right:5px;font-family:'Share Tech Mono',monospace;font-size:0.5rem;letter-spacing:0.08em;color:rgba(0,200,255,0.5);background:rgba(0,200,255,0.06);border:1px solid rgba(0,200,255,0.12);border-radius:20px;padding:3px 10px;}

/* STATS ROW */
.stats-row{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;}
.stat-item{text-align:left;}
.stat-val{font-family:'Share Tech Mono',monospace;font-size:0.72rem;color:#00C8FF;font-weight:600;}
.stat-key{font-family:'Share Tech Mono',monospace;font-size:0.46rem;color:rgba(0,200,255,0.35);letter-spacing:0.08em;margin-top:2px;}

/* OCEAN ROWS */
.ocean-list{display:flex;flex-direction:column;gap:16px;}
.ocean-row{background:rgba(0,15,40,0.45);border:1px solid rgba(0,180,255,0.1);border-radius:14px;padding:24px 28px;display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;transition:all 0.3s;}
.ocean-row:hover{border-color:rgba(0,200,255,0.22);background:rgba(0,20,50,0.55);}
.ocean-rank{font-family:'Share Tech Mono',monospace;font-size:2.2rem;font-weight:700;color:rgba(0,200,255,0.1);line-height:1;}
.ocean-name{font-size:1.1rem;font-weight:600;color:#E0F4FF;margin-bottom:6px;}
.ocean-desc{font-size:0.85rem;font-weight:300;color:rgba(224,244,255,0.5);line-height:1.65;max-width:580px;}
.ocean-stats{display:flex;flex-direction:column;gap:8px;align-items:flex-end;}

/* FACTS */
.facts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.fact-card{background:rgba(0,20,50,0.45);border:1px solid rgba(0,180,255,0.1);border-radius:14px;padding:26px;transition:all 0.3s;}
.fact-card:hover{border-color:rgba(0,200,255,0.22);transform:translateY(-3px);}
.fact-num{font-family:'Share Tech Mono',monospace;font-size:2rem;font-weight:700;color:#00C8FF;margin-bottom:8px;}
.fact-label{font-size:0.95rem;font-weight:600;color:#E0F4FF;margin-bottom:6px;}
.fact-desc{font-size:0.82rem;font-weight:300;color:rgba(224,244,255,0.45);line-height:1.6;}

/* FADE IN */
.fi{opacity:0;transform:translateY(24px);transition:opacity 0.55s ease,transform 0.55s ease;}
.fi.v{opacity:1;transform:translateY(0);}

/* FOOTER */
footer{position:relative;z-index:10;padding:32px 40px;background:rgba(1,8,20,0.8);border-top:1px solid rgba(0,180,255,0.06);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.footer-brand{font-size:0.95rem;font-weight:700;color:#E0F4FF;letter-spacing:0.06em;}
.footer-sub{font-family:'Share Tech Mono',monospace;font-size:0.48rem;color:rgba(0,200,255,0.28);letter-spacing:0.1em;margin-top:4px;}
.footer-r{font-family:'Share Tech Mono',monospace;font-size:0.48rem;color:rgba(0,200,255,0.25);text-align:right;line-height:1.9;}

@media(max-width:768px){
  .topbar{padding:0 16px;}
  .nav{display:none;}
  .page{padding:80px 20px 48px;}
  .ocean-row{grid-template-columns:1fr;gap:8px;}
  .ocean-rank{font-size:1.4rem;}
  .ocean-stats{align-items:flex-start;}
  footer{flex-direction:column;text-align:center;padding:28px 20px;}
  .footer-r{text-align:center;}
  .jelly{display:none;}
}