:root{
  --bg:#06151c; --bg2:#09232c; --panel:#0d2b35; --panel2:#123946;
  --line:#24505c; --cyan:#65e4e0; --cyan2:#2fbfc1; --gold:#ffd66b;
  --text:#eefdf8; --muted:#9cc0bd; --danger:#ff8b7d;
  --shadow:0 26px 80px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:
  radial-gradient(circle at 80% 0%,rgba(47,191,193,.12),transparent 30rem),
  linear-gradient(180deg,#06151c 0%,#071b23 45%,#06151c 100%);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif; overflow-x:hidden;
}
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.15;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 78%);
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%;display:block}
#bubble-canvas{position:fixed;inset:0;pointer-events:none;opacity:.28;z-index:-1}
.site-header{
  position:sticky; top:0; z-index:50; height:72px; padding:0 max(22px,calc((100vw - 1180px)/2));
  display:flex; align-items:center; gap:30px; border-bottom:1px solid rgba(101,228,224,.12);
  background:rgba(6,21,28,.78); backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:Consolas,monospace;letter-spacing:1px;font-size:14px}
.brand-mark{
  display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--cyan);
  box-shadow:inset 0 0 0 3px rgba(101,228,224,.07);color:var(--gold);font-weight:900
}
.desktop-nav{display:flex;gap:24px;margin-left:auto}
.desktop-nav a{color:var(--muted);font-size:14px}
.desktop-nav a:hover{color:var(--text)}
.button{
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  padding:12px 18px;border-radius:3px;background:#10313b;color:var(--text);font-weight:750;
  cursor:pointer;transition:.18s ease;box-shadow:0 6px 0 rgba(0,0,0,.12)
}
.button:hover{transform:translateY(-2px);border-color:var(--cyan)}
.button.primary{background:var(--gold);color:#10242b;border-color:#ffe49b}
.button.ghost{background:rgba(9,35,44,.55)}
.button.mini{padding:9px 13px;font-size:13px}
.button.large{padding:15px 22px}
.section{max-width:1180px;margin:0 auto;padding:98px 24px}
.hero{
  min-height:680px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:70px;padding-top:70px
}
.eyebrow{font:700 12px/1.4 Consolas,monospace;letter-spacing:2px;color:var(--gold);margin:0 0 18px}
.hero h1,.section h2{font-family:Consolas,monospace;letter-spacing:-2px}
.hero h1{font-size:clamp(42px,6vw,74px);line-height:1.02;margin:0 0 25px;max-width:760px}
.hero h1 span{display:block;color:var(--cyan)}
.hero-text{font-size:20px;line-height:1.7;color:#c6ddda;max-width:680px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 28px}
.trust-row{display:flex;gap:16px 24px;flex-wrap:wrap;color:var(--muted);font:12px Consolas,monospace}
.hero-visual{min-width:0}
.desktop-scene{
  position:relative;min-height:510px;border:1px solid #1d4651;background:
  linear-gradient(180deg,rgba(14,46,57,.82),rgba(5,17,23,.96)),
  radial-gradient(circle at 65% 25%,rgba(101,228,224,.12),transparent 24rem);
  box-shadow:var(--shadow),inset 0 0 0 5px rgba(255,255,255,.015);overflow:hidden;padding:48px 28px 48px;
}
.desktop-scene:before{content:"DESKTOP PREVIEW";position:absolute;left:20px;top:18px;color:#58818a;font:10px Consolas,monospace;letter-spacing:2px}
.game-card{width:min(340px,80%);margin:80px 0 0 auto;box-shadow:0 18px 50px rgba(0,0,0,.5);image-rendering:pixelated}
.game-card img{width:100%;image-rendering:pixelated}
.taskbar{position:absolute;height:34px;left:0;right:0;bottom:0;background:#0c151b;border-top:1px solid #31505a}
.window-glow{position:absolute;width:260px;height:260px;right:60px;top:120px;border-radius:50%;background:rgba(47,191,193,.13);filter:blur(35px)}
.floating-label{
  position:absolute;padding:8px 11px;background:#0a2029;border:1px solid #27606b;
  color:var(--cyan);font:11px Consolas,monospace;box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.label-a{top:88px;left:35px}.label-b{top:200px;left:20px}.label-c{right:20px;bottom:75px}
.stats-strip{
  max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);background:#0a242e;box-shadow:var(--shadow)
}
.stats-strip div{padding:25px 30px;border-right:1px solid var(--line);display:flex;gap:12px;align-items:baseline}
.stats-strip div:last-child{border:0}.stats-strip strong{font:700 28px Consolas,monospace;color:var(--gold)}.stats-strip span{color:var(--muted);font-size:13px}
.section-heading{max-width:750px;margin-bottom:42px}.section-heading h2{font-size:clamp(34px,4vw,52px);margin:0 0 16px}.section-heading>p:last-child{color:var(--muted);line-height:1.7;font-size:17px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature-card{min-height:220px;padding:23px;border:1px solid #1c4652;background:linear-gradient(180deg,#0c2a34,#09232c);transition:.2s}
.feature-card:hover{transform:translateY(-5px);border-color:#368293}
.feature-card.accent{background:linear-gradient(150deg,#103640,#0a242d)}
.pixel-icon{display:grid;place-items:center;width:45px;height:40px;border:1px solid #34717d;color:var(--gold);font:800 16px Consolas,monospace;margin-bottom:24px}
.feature-card h3{font:700 16px Consolas,monospace;margin:0 0 12px}.feature-card p{color:var(--muted);line-height:1.65;margin:0;font-size:14px}
.split-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.showcase{position:relative;padding:26px;background:#0b2731;border:1px solid var(--line);box-shadow:var(--shadow)}
.showcase img{width:100%;image-rendering:pixelated}.showcase-caption{position:absolute;bottom:10px;right:12px;color:#74a9a8;font:10px Consolas,monospace}
.split-copy h2{font-size:46px;margin:0 0 34px}
.steps{display:grid;gap:20px}.step{display:grid;grid-template-columns:48px 1fr;gap:16px}.step>span{color:var(--gold);font:700 13px Consolas,monospace;padding-top:3px}
.step h3{font:700 15px Consolas,monospace;margin:0 0 6px}.step p{margin:0;color:var(--muted);line-height:1.55}
.habitat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.habitat{min-height:330px;position:relative;border:1px solid #2a5661;overflow:hidden;background:#0a2730}
.habitat-water{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(64,190,194,.18),rgba(8,41,51,.88)),
  repeating-linear-gradient(0deg,transparent 0 24px,rgba(255,255,255,.02) 25px 26px)}
.saltwater .habitat-water{background:
  radial-gradient(circle at 70% 70%,rgba(77,92,224,.18),transparent 16rem),
  linear-gradient(180deg,rgba(28,149,187,.22),rgba(7,29,45,.93))}
.habitat-content{position:absolute;inset:auto 28px 28px}.habitat-tag{font:700 10px Consolas,monospace;color:var(--gold);letter-spacing:2px}
.habitat h3{font:700 30px Consolas,monospace;margin:8px 0 10px}.habitat p{max-width:520px;color:#b4d0cf;line-height:1.65}
.catalog-heading{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:30px}
.catalog-count{text-align:right;border-left:1px solid var(--line);padding-left:26px}.catalog-count strong{display:block;color:var(--cyan);font:700 34px Consolas,monospace}.catalog-count span{color:var(--muted);font-size:12px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filter{border:1px solid #285865;background:#0b2730;color:#a9c7c5;padding:9px 13px;cursor:pointer;font:12px Consolas,monospace}
.filter:hover,.filter.active{border-color:var(--gold);color:#10242b;background:var(--gold)}
.catalog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.animal-card{border:1px solid #1f4a55;background:#0b2730;padding:18px;min-height:205px;display:flex;flex-direction:column;transition:.18s}
.animal-card:hover{border-color:#3d7e8b;transform:translateY(-3px)}
.animal-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.animal-name{font:700 15px Consolas,monospace;color:#fff}.animal-status{font:700 9px Consolas,monospace;letter-spacing:.7px;padding:4px 6px;border:1px solid #376874;color:#9fd4d0;white-space:nowrap}
.animal-status.available{color:#0d252c;background:var(--gold);border-color:var(--gold)}
.animal-meta{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.meta-pill{font:10px Consolas,monospace;border:1px solid #244e58;padding:5px 7px;color:#8eb5b4}
.animal-card p{font-size:13px;color:var(--muted);line-height:1.55;margin:auto 0 0}
.roadmap-section{max-width:1050px}.roadmap{position:relative;padding-left:34px}.roadmap:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:#2a5963}
.road{position:relative;border:1px solid #1e4853;background:#0b2730;padding:24px;margin-bottom:13px}.road-dot{position:absolute;width:17px;height:17px;left:-35px;top:30px;background:#0a2028;border:3px solid #3a7984}
.road.active .road-dot,.premium-road .road-dot{border-color:var(--gold)}.road-status{color:var(--gold);font:700 9px Consolas,monospace;letter-spacing:1.4px}.road h3{font:700 18px Consolas,monospace;margin:9px 0}.road p{margin:0;color:var(--muted);line-height:1.6}
.premium-box{position:relative;overflow:hidden;border:1px solid #796733;background:linear-gradient(120deg,#0d3038,#12272e 58%,#292516);min-height:360px;padding:52px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;box-shadow:var(--shadow)}
.premium-box h2{font-size:46px;margin:0 0 15px}.premium-box p{color:#bdd1cc;line-height:1.7;max-width:650px}.coming{display:inline-block;margin-top:14px;border:1px solid #796733;color:var(--gold);padding:7px 10px;font:10px Consolas,monospace}
.premium-art{position:relative;min-height:240px}.tank-stand{position:absolute;width:250px;height:180px;right:20px;bottom:4px;border:8px solid #6e512b;border-top-width:12px;background:#3b2b20;box-shadow:0 24px 40px rgba(0,0,0,.28)}
.mini-tank{position:absolute;left:18px;right:18px;top:-72px;height:108px;border:5px solid #6aa3ad;background:linear-gradient(#166278,#0b4050)}
.mini-tank:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:#b8a168}
.mini-fish{position:absolute;width:24px;height:9px;background:#f29b66;clip-path:polygon(0 45%,30% 0,100% 20%,100% 80%,30% 100%)}.mini-fish:after{content:"";position:absolute;left:-8px;top:-3px;border-right:10px solid #e86a5e;border-top:7px solid transparent;border-bottom:7px solid transparent}
.mini-fish.one{left:42px;top:34px}.mini-fish.two{right:45px;top:58px;transform:scaleX(-1);background:#63d8df}
.lamp{position:absolute;width:180px;height:12px;right:55px;top:24px;background:#1a2020;border:2px solid #c59c4a}.lamp:before{content:"";position:absolute;width:2px;height:43px;background:#756644;left:30px;top:-43px;box-shadow:115px 0 #756644}.lamp span{position:absolute;left:30px;right:30px;top:11px;height:70px;background:linear-gradient(rgba(255,223,134,.17),transparent);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px}.gallery-item{border:1px solid #285763;background:#0a252e;padding:18px;color:var(--text);text-align:left;cursor:pointer}.gallery-item:hover{border-color:var(--cyan)}
.gallery-item img{width:100%;max-height:500px;object-fit:contain;background:#06151c;image-rendering:pixelated}.gallery-item span{display:block;margin-top:13px;color:var(--muted);font:12px Consolas,monospace}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:10px}.faq details{border:1px solid #1f4b55;background:#0b2730;padding:18px}.faq summary{cursor:pointer;font:700 13px Consolas,monospace;color:#e8fbf6}.faq p{color:var(--muted);line-height:1.65;margin:13px 0 0}
.download-card{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;border:1px solid #3d757f;padding:48px;background:linear-gradient(135deg,#0e3540,#09242d);box-shadow:var(--shadow)}
.download-card h2{font-size:44px;margin:0 0 13px}.download-card p{color:var(--muted);line-height:1.65}.download-actions{display:grid;gap:12px;justify-items:stretch}.download-actions span{text-align:center;color:#7ea6a5;font:11px Consolas,monospace}
footer{max-width:1180px;margin:0 auto;padding:45px 24px 70px;border-top:1px solid #173b44;display:grid;gap:10px;color:var(--muted)}.footer-brand{color:var(--text);width:max-content}.muted{font-size:12px;color:#628785}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(2,10,14,.92);display:grid;place-items:center;padding:50px}.lightbox[hidden]{display:none}.lightbox img{max-width:min(900px,92vw);max-height:86vh;image-rendering:pixelated}.lightbox-close{position:absolute;right:24px;top:18px;background:none;border:0;color:white;font-size:36px;cursor:pointer}
@media(max-width:980px){
  .desktop-nav{display:none}.site-header{padding:0 18px}
  .hero{grid-template-columns:1fr;gap:35px}.hero-visual{max-width:650px;width:100%;margin:auto}
  .feature-grid,.catalog-grid{grid-template-columns:repeat(2,1fr)}
  .split-section{grid-template-columns:1fr;}.habitat-grid{grid-template-columns:1fr}
  .premium-box,.download-card{grid-template-columns:1fr}.premium-art{display:none}
}
@media(max-width:650px){
  .site-header .button.mini{display:none}.section{padding:70px 18px}
  .hero{min-height:auto;padding-top:55px}.hero h1{font-size:42px}.hero-text{font-size:17px}
  .desktop-scene{min-height:430px;padding:35px 15px}.game-card{width:86%;margin-top:75px}
  .stats-strip{grid-template-columns:1fr 1fr;margin:0 18px}.stats-strip div:nth-child(2){border-right:0}.stats-strip div{padding:18px}
  .feature-grid,.catalog-grid,.gallery,.faq{grid-template-columns:1fr}
  .catalog-heading{display:block}.catalog-count{text-align:left;border:0;padding:10px 0 0}
  .premium-box{padding:32px 24px}.premium-box h2,.download-card h2,.split-copy h2{font-size:34px}.download-card{padding:30px 22px}
  .floating-label{font-size:9px}.label-b{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  #bubble-canvas{display:none}
}


/* V2 additions */
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.free-badge,.soft-badge{font:700 10px Consolas,monospace;letter-spacing:1.2px;padding:7px 9px;border:1px solid #3c717a}
.free-badge{background:var(--gold);border-color:var(--gold);color:#10242b}
.soft-badge{color:var(--cyan);background:#09242d}
.style-scenes{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.style-scene{border:1px solid #24515c;background:#0a252e;overflow:hidden}
.scene-water{height:190px;position:relative;overflow:hidden;background:linear-gradient(#176477,#0b3c4a 70%,#786c4a 71%,#a79360 78%,#5d543e 79%)}
.style-scene.marine .scene-water{background:linear-gradient(#126e91,#0b4266 70%,#c9b37a 71%,#b99c66 80%)}
.scene-water.warm{background:linear-gradient(rgba(255,196,100,.13),rgba(255,196,100,.04)),linear-gradient(#18576a,#0b3945 70%,#8c7551 71%,#b59b65 80%)}
.scene-copy{padding:19px}.scene-copy>span{font:700 9px Consolas,monospace;letter-spacing:1.4px;color:var(--gold)}
.scene-copy h3{font:700 17px Consolas,monospace;margin:7px 0}.scene-copy p{margin:0;color:var(--muted);line-height:1.55;font-size:13px}
.scene-fish{position:absolute;width:36px;height:13px;background:#68e1df;clip-path:polygon(0 45%,28% 0,100% 20%,100% 80%,28% 100%);filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.scene-fish:after{content:"";position:absolute;left:-11px;top:-4px;border-right:13px solid #ff875f;border-top:10px solid transparent;border-bottom:10px solid transparent}
.scene-fish.f1{left:35%;top:35%;animation:swimScene 5s ease-in-out infinite}.scene-fish.f2{right:18%;top:58%;transform:scaleX(-.78);animation:swimScene2 6s ease-in-out infinite}
.scene-plant{position:absolute;bottom:27px;width:10px;height:58px;background:#5eaa68;clip-path:polygon(45% 100%,35% 40%,0 18%,40% 34%,55% 0,65% 35%,100% 17%,72% 46%,70% 100%)}
.scene-plant.p1{left:15%}.scene-plant.p2{left:24%;height:72px}.scene-rock{position:absolute;bottom:25px;right:17%;width:50px;height:28px;background:#829a94;clip-path:polygon(10% 100%,0 55%,18% 16%,65% 0,100% 50%,87% 100%)}
.coral{position:absolute;bottom:25px;width:45px;height:60px;background:#e36c79;clip-path:polygon(43% 100%,42% 45%,12% 22%,32% 18%,45% 34%,48% 0,61% 0,60% 34%,87% 15%,95% 25%,65% 48%,66% 100%)}
.coral.c1{left:18%}.coral.c2{right:18%;transform:scale(.75);background:#c987e6}
@keyframes swimScene{50%{transform:translateX(25px)}}@keyframes swimScene2{50%{transform:scaleX(-.78) translateX(25px)}}
.tank-comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;align-items:end}
.tank-size{border:1px solid #24515c;background:#0a252e;padding:25px;text-align:center}
.tank-demo{margin:0 auto 20px;border:5px solid #5e8d97;border-top-width:8px;background:linear-gradient(#166276,#0b3d4b 78%,#a18d60 79%);display:flex;align-items:center;justify-content:center;gap:8px}
.tank-demo i{display:block;width:20px;height:8px;background:#f3a25d;clip-path:polygon(0 50%,30% 0,100% 20%,100% 80%,30% 100%)}
.tank-size.small .tank-demo{width:135px;height:78px}.tank-size.medium .tank-demo{width:190px;height:100px}.tank-size.large .tank-demo{width:245px;height:122px}
.tank-size strong{display:block;font:700 17px Consolas,monospace;color:var(--text);margin-bottom:7px}.tank-size span{color:var(--muted);font-size:12px}
.download-trust{text-align:center;color:#a7c4c1;font:10px Consolas,monospace;border-top:1px solid #28515a;padding-top:12px}
.creator-section{padding-top:45px;padding-bottom:45px}
.creator-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px;padding:28px;border:1px solid #68424a;background:linear-gradient(120deg,#162a30,#251b22)}
.creator-mark{width:58px;height:58px;display:grid;place-items:center;background:#ff4e4e;color:white;font-size:23px;border-radius:4px}
.creator-card .eyebrow{margin-bottom:7px}.creator-card h2{font-size:24px;letter-spacing:-1px;margin:0 0 6px}.creator-card p:not(.eyebrow){margin:0;color:var(--muted)}
.youtube-button{border-color:#8a4b50;background:#401f24}
.footer-link{color:var(--cyan)}.footer-link:hover{color:var(--gold)}
@media(max-width:980px){.style-scenes,.tank-comparison{grid-template-columns:1fr}.tank-size .tank-demo{max-width:100%}.creator-card{grid-template-columns:auto 1fr}.creator-card .button{grid-column:1/-1}}
@media(max-width:650px){.creator-card{grid-template-columns:1fr}.creator-mark{width:46px;height:46px}.style-scenes{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.scene-fish{animation:none!important}}