/* ============================================================
   PulseSMP — deep-sea pixel theme
   Deep purple crystal + night-ocean pixel styling
   ============================================================ */

:root{
  --deep-950:#020b18;
  --deep-900:#041630;
  --deep-800:#062040;
  --deep-700:#082a4e;
  --deep-600:#0a3057;
  --deep-500:#0e3c6b;
  --aqua:#7dd3fc;
  --aqua-dim:#67b8e8;
  --foam:#eaf6ff;
  --text-dim:#8fb3d4;
  --text-faint:#6f93b3;
  --coral:#ff806f;
  --coral-bright:#ff9a83;
  --coral-deep:#e85a4f;
  --coral-dark:#b04336;
  --font-pixel:"Press Start 2P",monospace;
  --font-body:"VT323",monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#0c3d6d 0%,#082c52 32%,#05213f 58%,#03152c 82%,#020b18 100%);
  color:#cfe3f7;
  font-family:var(--font-body);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--coral);color:var(--deep-900)}
a:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}
::-webkit-scrollbar{width:14px;background:var(--deep-900)}
::-webkit-scrollbar-thumb{background:#123f6b;border:3px solid var(--deep-900)}
::-webkit-scrollbar-thumb:hover{background:var(--coral)}

.wrap{width:min(1160px,calc(100% - 48px));margin:auto}

/* stepped pixel-corner notches */
.px{
  clip-path:polygon(
    0 10px,4px 10px,4px 6px,8px 6px,8px 2px,10px 2px,10px 0,
    calc(100% - 10px) 0,calc(100% - 10px) 2px,calc(100% - 8px) 2px,calc(100% - 8px) 6px,calc(100% - 4px) 6px,calc(100% - 4px) 10px,100% 10px,
    100% calc(100% - 10px),calc(100% - 4px) calc(100% - 10px),calc(100% - 4px) calc(100% - 6px),calc(100% - 8px) calc(100% - 6px),calc(100% - 8px) calc(100% - 2px),calc(100% - 10px) calc(100% - 2px),calc(100% - 10px) 100%,
    10px 100%,10px calc(100% - 2px),8px calc(100% - 2px),8px calc(100% - 6px),4px calc(100% - 6px),4px calc(100% - 10px),0 calc(100% - 10px)
  );
}
.px-sm{
  clip-path:polygon(
    0 6px,3px 6px,3px 3px,6px 3px,6px 0,
    calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,
    100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,
    6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px)
  );
}

/* pixel dither divider */
.dither-line{height:4px;background:conic-gradient(#4f7fae33 25%,transparent 0 50%,#4f7fae33 0 75%,transparent 0) 0 0/8px 8px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}

/* ---------- ambient glow rings (pixelated, no blur) ---------- */
.ambient{position:absolute;pointer-events:none;z-index:-1;border-radius:50%}
.ambient-one{width:460px;height:460px;top:120px;left:-200px;background:radial-gradient(circle closest-side,#ff806f2e 0 22%,#ff806f1f 22% 44%,#ff806f14 44% 66%,transparent 66%)}
.ambient-two{width:420px;height:420px;top:640px;right:-200px;background:radial-gradient(circle closest-side,#2e8fc42e 0 22%,#2e8fc41f 22% 44%,#2e8fc414 44% 66%,transparent 66%)}

/* ---------- nav ---------- */
.nav{height:86px;display:flex;align-items:center;justify-content:space-between;position:relative}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,#67b8e833 0 6px,transparent 6px 12px)}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{display:block;width:76px;height:58px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(2,11,24,.6))}
.nav nav{display:flex;gap:34px;font-family:var(--font-body);font-size:17px;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase}
.nav nav a:hover{color:var(--coral-bright)}
.nav-cta{font-family:var(--font-pixel);font-size:9px;font-weight:700;color:var(--deep-900);background:var(--coral);padding:11px 14px;box-shadow:inset 0 3px 0 #ffb3a8,inset 0 -3px 0 var(--coral-dark);transition:.15s}
.nav-cta:hover{background:var(--coral-bright)}
.nav-cta span,.button span,.text-link span{margin-left:8px}

/* ---------- hero ---------- */
.hero{min-height:610px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding-top:45px;padding-bottom:75px}

.eyebrow,.section-kicker{font-family:var(--font-pixel);font-size:8px;font-weight:700;letter-spacing:1px;color:var(--coral-bright)}
.eyebrow{display:flex;align-items:center;gap:10px}
.pulse{width:8px;height:8px;background:var(--coral);animation:blink 1.6s steps(2,end) infinite}
@keyframes blink{50%{opacity:.2}}

.hero h1{
  font-family:var(--font-pixel);
  font-size:clamp(40px,6vw,78px);
  line-height:1.15;
  letter-spacing:0;
  margin:28px 0 24px;
  color:var(--foam);
  text-shadow:5px 5px 0 rgba(2,11,24,.7);
}
.hero h1 span{color:var(--coral-bright);text-shadow:5px 5px 0 rgba(46,15,17,.8)}

.hero-text{max-width:440px;font-size:20px;line-height:1.55;color:var(--text-dim)}

.hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 18px;font-family:var(--font-pixel);font-size:10px;font-weight:700;
  transition:transform .12s,filter .12s;
}
.button:hover{transform:translate(2px,2px)}
.button-primary{
  background:var(--coral);color:var(--deep-900);
  box-shadow:inset 0 3px 0 #ffb3a8,inset 0 -4px 0 var(--coral-dark);
  filter:drop-shadow(5px 5px 0 rgba(2,11,24,.75));
}
.button-primary:hover{filter:drop-shadow(2px 2px 0 rgba(2,11,24,.75));background:var(--coral-bright)}
.button-secondary{
  background:rgba(10,48,87,.65);color:var(--foam);
  box-shadow:inset 0 0 0 2px #67b8e866;
  filter:drop-shadow(5px 5px 0 rgba(2,11,24,.6));
}
.button-secondary:hover{box-shadow:inset 0 0 0 2px var(--aqua);color:var(--aqua);filter:drop-shadow(2px 2px 0 rgba(2,11,24,.6))}

.hero-note{display:flex;align-items:center;gap:12px;margin-top:52px;font-family:var(--font-pixel);font-size:8px;letter-spacing:1px;color:var(--text-faint)}
.note-line{width:16px;height:3px;background:var(--coral)}

/* ---------- hero pixel-art scene ---------- */
.hero-art{
  height:440px;position:relative;overflow:hidden;
  background:var(--deep-900);
  box-shadow:inset 0 0 0 2px #67b8e83a;
  filter:drop-shadow(7px 7px 0 rgba(2,11,24,.55));
}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .sparkles{animation:twinkle 3.6s ease-in-out infinite}
.scene .crystal-glow{animation:glow-pulse 6s ease-in-out infinite}
.scene .crystal-glow-b{animation:glow-pulse 7.5s ease-in-out infinite;animation-delay:-2s}
.scene .crystal-glow-c{animation:glow-pulse 8.5s ease-in-out infinite;animation-delay:-4s}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.9}}
@keyframes glow-pulse{0%,100%{opacity:.22}50%{opacity:.45}}

.seaweed,.kelp{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite}
.sw-b{animation-duration:6.5s;animation-delay:-1.2s}
.sw-c{animation-duration:4.2s;animation-delay:-.8s}
.kelp{animation-duration:7.5s;animation-delay:-.6s}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}


.ray{animation:shimmer 9s ease-in-out infinite}
.ray-b{animation-delay:-3s}
@keyframes shimmer{0%,100%{opacity:.05}50%{opacity:.13}}

.bub{animation:rise 8s linear infinite}
.bub-2{animation-duration:6.5s;animation-delay:-2.5s}
.bub-3{animation-duration:9s;animation-delay:-4s}
.bub-4{animation-duration:7.2s;animation-delay:-1s}
.bub-5{animation-duration:8.6s;animation-delay:-5.5s}
@keyframes rise{0%{transform:translateY(0);opacity:.9}70%{opacity:.6}100%{transform:translateY(-76px);opacity:0}}

.art-label{
  position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;display:flex;flex-direction:column;gap:7px;
  padding:16px 22px;background:rgba(2,16,35,.62);
  text-shadow:2px 2px 0 #031730;
}
.art-label span,.art-label small{font-family:var(--font-pixel);font-size:7px;letter-spacing:3px;color:#bfe3ff}
.art-label strong{font-family:var(--font-pixel);font-size:24px;letter-spacing:2px;color:var(--foam)}
.art-coordinates{position:absolute;bottom:18px;left:18px;z-index:3;font-family:var(--font-pixel);font-size:7px;letter-spacing:1px;color:#9fd0ef;text-shadow:1px 1px 0 #031730}

/* ---------- info ---------- */
.info{display:grid;grid-template-columns:1fr 2fr;padding:64px 0;position:relative}
.info::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:conic-gradient(#4f7fae33 25%,transparent 0 50%,#4f7fae33 0 75%,transparent 0) 0 0/8px 8px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
.info-content{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:end}
.info h2,.partners h2,.rules h2{font-family:var(--font-pixel);font-size:clamp(19px,3vw,29px);line-height:1.5;letter-spacing:0;margin:0;color:var(--foam)}
.info h2 span,.partners h2 span,.rules h2 span{color:var(--coral-bright)}
.info p,.community-card p,.owner-copy p,.partners-panel p,.rules p{font-size:18px;line-height:1.6;color:var(--text-dim);margin:0}

/* ---------- community ---------- */
.community{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0 90px}
.community-card{
  padding:28px;display:grid;grid-template-columns:46px 1fr;gap:18px;
  background:linear-gradient(180deg,#0b335c 0 58%,#092c52 58%);
  filter:drop-shadow(6px 6px 0 rgba(2,11,24,.6));
}
.card-icon{
  width:46px;height:46px;background:var(--deep-600);
  box-shadow:inset 0 0 0 2px #ff806f66;
  display:grid;place-items:center;color:var(--coral);
}
.icon-sprite{width:24px;height:24px;display:block}
.community-card h3{font-family:var(--font-pixel);font-size:15px;margin:14px 0 10px;color:var(--foam)}
.community-card p{max-width:370px}
.text-link{display:inline-block;margin-top:18px;font-family:var(--font-pixel);font-size:9px;font-weight:700;color:var(--coral-bright)}
.text-link:hover{color:var(--foam)}

/* ---------- owner ---------- */
.owner{padding-bottom:90px}
.owner-inner{
  display:flex;align-items:center;gap:22px;padding:26px;
  background:linear-gradient(180deg,#0a2f57 0 55%,#082a4e 55%);
  filter:drop-shadow(6px 6px 0 rgba(2,11,24,.6));
}
.owner-avatar{
  width:70px;height:70px;flex:none;object-fit:cover;
  background:var(--deep-800);border:3px solid var(--coral);
  image-rendering:pixelated;
}
.owner-copy{flex:1}
.owner-copy h2{font-family:var(--font-pixel);font-size:18px;margin:10px 0;color:var(--foam)}
.owner-copy p{max-width:490px}

/* ---------- partners ---------- */
.partners{padding-bottom:90px}
.partners-panel{
  margin-top:18px;padding:44px;min-height:270px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  background:radial-gradient(circle at 82% 35%,#0e3c6b 0 16%,#0a3057 16% 34%,#07264a 34% 56%,#05203c 56% 78%,#041a35 78%);
  filter:drop-shadow(6px 6px 0 rgba(2,11,24,.6));
}
.coming-tag{display:flex;align-items:center;gap:9px;font-family:var(--font-pixel);font-size:8px;letter-spacing:1px;color:#8cb3d4;margin-bottom:18px}
.coming-tag span{width:7px;height:7px;background:var(--coral);animation:blink 1.6s steps(2,end) infinite}
.partners h2{font-size:clamp(17px,2.6vw,25px);margin-bottom:16px}
.partners-panel p{max-width:490px}
.coming-soon{
  width:190px;height:190px;flex:none;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
  font-family:var(--font-pixel);font-size:12px;letter-spacing:2px;line-height:1.5;
  color:#bfe3ff;text-align:center;
  background:rgba(8,42,78,.72);
  box-shadow:inset 0 0 0 3px #ff806f77;
}
.coming-soon strong{font-size:22px;color:var(--coral-bright)}
.star-sprite{width:22px;height:22px;display:block;animation:blink 2.8s steps(2,end) infinite}

/* ---------- footer ---------- */
.footer{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:15px;letter-spacing:1px;color:var(--text-faint);position:relative}
.footer::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:conic-gradient(#4f7fae33 25%,transparent 0 50%,#4f7fae33 0 75%,transparent 0) 0 0/8px 8px;-webkit-mask-image:linear-gradient(90deg,transparent 15%,#000);mask-image:linear-gradient(90deg,transparent 15%,#000)}
.footer .brand{color:var(--foam)}
.footer .brand-logo{width:64px;height:48px}
.footer-caption{font-family:var(--font-pixel);font-size:7px;letter-spacing:2px}

/* ---------- rules ---------- */
.rules{padding:60px 0 90px;position:relative}
.rules::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:conic-gradient(#4f7fae33 25%,transparent 0 50%,#4f7fae33 0 75%,transparent 0) 0 0/8px 8px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 85%);mask-image:linear-gradient(90deg,#000,transparent 85%)}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule-card{
  padding:30px;display:grid;grid-template-columns:48px 1fr;gap:20px;
  background:linear-gradient(180deg,#0b335c 0 58%,#092c52 58%);
  filter:drop-shadow(6px 6px 0 rgba(2,11,24,.6));
}
.rule-body{display:flex;flex-direction:column;gap:10px}
.rule-card h3{font-family:var(--font-pixel);font-size:15px;margin:0;color:var(--foam)}
.rule-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.rule-list li{position:relative;padding-left:16px;font-size:17px;line-height:1.45;color:var(--text-dim)}
.rule-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;background:var(--coral);box-shadow:3px 3px 0 rgba(2,11,24,.6)}

/* ---------- responsive ---------- */
@media(max-width:760px){
  .wrap{width:min(100% - 36px,560px)}
  .nav{height:72px}
  .nav nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:60px;gap:40px}
  .hero h1{font-size:clamp(36px,10vw,60px)}
  .hero-art{height:340px}
  .art-label strong{font-size:18px}
  .info{grid-template-columns:1fr;gap:22px;padding:52px 0}
  .info-content{grid-template-columns:1fr;gap:16px}
  .community{grid-template-columns:1fr;padding-bottom:60px}
  .rules-grid{grid-template-columns:1fr}
  .owner-inner{align-items:flex-start;flex-wrap:wrap;gap:16px}
  .owner-copy{min-width:calc(100% - 95px)}
  .partners-panel{padding:30px;align-items:flex-start;flex-direction:column}
  .coming-soon{align-self:center;width:150px;height:150px}
  .footer{padding:20px 0;flex-wrap:wrap}
  .footer-caption{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* PulseSMP purple identity */
:root{--deep-950:#090512;--deep-900:#130b24;--deep-800:#1c1033;--deep-700:#291648;--deep-600:#351c5b;--deep-500:#4b2678;--aqua:#cba4ff;--aqua-dim:#a879e8;--foam:#f5edff;--text-dim:#c0a9dc;--text-faint:#8f75ae;--coral:#a66af0;--coral-bright:#c69aff;--coral-deep:#8245cb;--coral-dark:#65349f}
body{background:linear-gradient(180deg,#30164d 0%,#211137 34%,#160d29 65%,#090512 100%)}
::selection{background:#a66af0;color:#10081d}
::-webkit-scrollbar-thumb{background:#633b91}::-webkit-scrollbar-thumb:hover{background:#c69aff}
.nav::after{background:repeating-linear-gradient(90deg,#bd8cff55 0 6px,transparent 6px 12px)}
.ambient-one{background:radial-gradient(circle closest-side,#a66af044 0 22%,#a66af022 22% 44%,#a66af014 44% 66%,transparent 66%)}
.ambient-two{background:radial-gradient(circle closest-side,#6f42a944 0 22%,#6f42a922 22% 44%,#6f42a914 44% 66%,transparent 66%)}
.brand-wordmark{font-family:var(--font-pixel);font-size:17px;line-height:1.35;color:#fff;text-shadow:3px 3px 0 #4b2678;letter-spacing:-1px}.brand-wordmark span{display:block;color:#c69aff}
.hero-art{background:#160d29;box-shadow:inset 0 0 0 2px #bd8cff55}
.art-label{background:rgba(17,8,31,.72)}.art-label span,.art-label small{color:#ddc5ff}
.art-coordinates{color:#d3b3ff}
.community-card{background:linear-gradient(180deg,#351c5b 0 58%,#24143f 58%)}
.card-icon{box-shadow:inset 0 0 0 2px #bd8cff66}
.owner{padding-bottom:90px}.owners-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.owner-card{min-width:0;color:inherit;transition:transform .15s,filter .15s}.owner-card:hover{transform:translateY(-3px);filter:drop-shadow(8px 8px 0 rgba(2,11,24,.6))}
.owner-card .owner-avatar{width:70px;height:70px;flex:none;object-fit:cover;background:#4b2678;border:3px solid #c69aff;image-rendering:auto}
.owner-arrow{font:12px var(--font-pixel);color:#c69aff;white-space:nowrap}
.partners-panel{background:radial-gradient(circle at 82% 35%,#5a3285 0 16%,#3b225d 16% 34%,#291743 34% 56%,#1c1033 56% 78%,#130b24 78%)}
.coming-soon{background:rgba(35,18,58,.8);box-shadow:inset 0 0 0 3px #bd8cff77;color:#ddc5ff}
@media(max-width:760px){.owners-grid{grid-template-columns:1fr}.brand-wordmark{font-size:13px}}