*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Trebuchet MS,Arial,sans-serif;color:#fff;background:#031b12}
:root{--green:#0fbf64;--deep:#063d2d;--ink:#071b13;--white:#ffffff}

.hero{
  min-height:100vh;display:grid;place-items:center;position:relative;
  background: radial-gradient(1200px 600px at 20% 10%, #0e7f4f, #075739 60%, #043727 100%);
}
/* pattern with PUMP.FUN text */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:lighten;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='180'><rect width='100%' height='100%' fill='transparent'/><g opacity='0.25' font-family='Arial' font-weight='700' fill='white'><text x='20' y='60' font-size='42'>PUMP.FUN</text><text x='200' y='140' font-size='42'>PUMP.FUN</text></g></svg>");
  background-size:360px 180px;
}
.hero-inner{width:min(1200px,92%);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;z-index:1}
.left .sb{width:100%;max-width:420px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.contract{margin-top:18px;background:rgba(255,255,255,.08);border:2px dashed #3df29a;padding:12px 16px;width:fit-content;border-radius:12px;backdrop-filter:blur(4px)}
.contract span{color:#b9ffd9;font-weight:700;margin-right:10px}
.contract code{color:#fff;font-weight:800}
.brand{font-size:clamp(36px,4.8vw,72px);line-height:1.0;margin:0 0 8px;text-shadow:0 8px 24px rgba(0,0,0,.45)}
.brand em{color:#b9ffd9;font-style:normal}
.tagline{margin:10px 0 24px;color:#e7fff3;opacity:.9;font-size:clamp(16px,1.6vw,22px)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{background:linear-gradient(180deg,#4cf0a3,#10b26b);padding:12px 20px;border-radius:12px;color:#052317;font-weight:800;text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 26px rgba(0,0,0,.45)}
.btn.outline{background:transparent;border:2px solid #40e695;color:#c9ffe6}

/* pills in hero */
#pills{position:absolute;inset:0;overflow:hidden}
.pill{position:absolute;top:60%;width:120px;height:48px;background-size:contain;background-repeat:no-repeat;animation:floatY linear infinite;opacity:.9;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35))}
@keyframes floatY{0%{transform:translateY(40vh)}50%{transform:translateY(-20vh)}100%{transform:translateY(40vh)}}

/* WHITE SECTION */
.sea{background:#ffffff;color:#063d2d;position:relative;padding:80px 0}
/* decorate background with small winged pills */
.sea{background-image: url('images/IMG_9492.png'); background-repeat: repeat; background-size: 80px auto;}
.goal{width:min(1000px,92%);margin:0 auto 36px auto;text-align:center;background:rgba(15,191,100,.08);border:2px dashed #10b26b;border-radius:14px;padding:24px}
.goal h2{font-size:clamp(28px,3.6vw,40px);color:#0e7f4f;margin:0 0 10px}
.goal p{color:#075739;font-weight:700}

.gallery-title{text-align:center;font-size:clamp(26px,3.4vw,36px);color:#0e7f4f;margin:24px 0}
.gallery{width:min(1200px,92%);margin:0 auto;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:3px solid #0fbf64;box-shadow:0 12px 24px rgba(0,0,0,.15);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.gallery img:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 18px 32px rgba(0,0,0,.25);filter:saturate(1.1)}

.footer{background:#063d2d;color:#c5ffe6;text-align:center;padding:24px 16px;font-weight:800;margin-top:0}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .left .sb{max-width:320px;margin:0 auto}
  .contract{margin-inline:auto}
}