:root{
  /* Theme */
  --blue:#000000;
  --white:#ffffff;

  /* Navbar (card in card) */
  --shell-bg:rgba(255,255,255,.08);  
  --shell-br:rgba(255,255,255,.22);  /* border outer */
  --shell-in:rgba(255,255,255,.18);  /* inner hairline */

  --pill-tx:#eaf1ff;
  --pill-tx-hover:#ffffff;

  --maxw:1160px;
  --top-gap:18px;

  --char-img:url("/boochi_gif.gif");
  --char-pos:center bottom;                      
  --char-size:clamp(320px, 40vw, 600px);        
}

/* ========== Reset & Base ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--blue);
  color:var(--white);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.container{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding-inline:clamp(12px,3vw,28px);
}

/* ========== NAVBAR (Fixed, Card ) ========== */
#topbar{
  position: fixed;
  top: var(--top-gap);
  left: 0;
  right: 0;
  z-index: 9999;         
}



#nav-toggle{
  display:none;
  position:fixed;
  left:12px;
  top:12px;
  width:44px;
  height:36px;
  border:none;
  border-radius:8px;
  background:transparent;
  cursor:pointer;
  z-index:70;                
}
#nav-toggle span{
  display:block;
  width:28px;
  height:3px;
  margin:5px auto;
  background:#fff;
  border-radius:2px;
}

.nav-shell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;             
  background:none;
  border:none;
  box-shadow:none;
}

.nav-bar{
  display:flex;
  gap:clamp(20px, 4vw, 48px);
  align-items:center;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.08);          
  border:1px solid rgba(255,255,255,.22);    
  backdrop-filter:saturate(120%) blur(6px); 
}.nav-bar a{
  color:var(--pill-tx);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  line-height:1;
  padding:10px 0;
  transition:opacity .15s ease, transform .15s ease, color .15s ease;
}
.nav-bar a:hover{
  color:var(--pill-tx-hover);
  transform:translateY(-1px);
}

/* Drawer mobile */
.nav-drawer{
  position:fixed;
  left:12px;
  right:12px;
  top:60px;
    z-index: 10000;   
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px;
  border-radius:20px;
  background:var(--shell-bg);
  border:1px solid var(--shell-br);
  box-shadow:0 8px 30px rgba(0,0,0,.25), inset 0 0 0 1px var(--shell-in);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-drawer a{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.nav-drawer[hidden]{ display:none; }

/* ========== HERO ========== */
#hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-image:var(--char-img);
  background-repeat:no-repeat;
  background-position:var(--char-pos);
  background-size:var(--char-size) auto;
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  text-align:center;
  padding-top:clamp(100px, 12vw, 160px); 
  padding-bottom:clamp(16px, 4vw, 24px);
  row-gap:clamp(6px,2vw,14px);
}
.brand{
  margin:0;
  font-family:'Bangers', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:clamp(64px, 12.5vw, 160px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  text-transform:uppercase;
  color:var(--white);
}
.subline{
  display:flex;
  align-items:baseline;
  gap:.6ch;
  font-size:clamp(12px,1.8vw,14px);
  letter-spacing:.2em;
}
.subline .coinbase{
  font-size:clamp(14px,2.3vw,22px);
  font-weight:700;
  letter-spacing:normal;
  text-transform:lowercase;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px){
  .nav-shell{ display:none; }
  #nav-toggle{ display:block; }
}
@media (min-width: 901px){
  #nav-drawer{ display:none !important; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion:reduce){
  .nav-bar a{ transition:none; }
}

/* ===== SECTION TWO: Official Links ===== */
#official-links{
  background:#ffffff;
  color:#0a0a0a;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:center;               /* center text default */
}

#official-links .links-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding-block: clamp(18px, 4vw, 30px);
}

.links-title{
  margin:0;
  font-size: clamp(16px, 2vw, 20px);
  font-weight:700;
}

.links-grid{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;         /* center icons */
  gap:45px;
  margin:0;
  padding:0;
}

.links-grid a{
  --size: 50px;
  width:var(--size);
  height:var(--size);
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.links-grid a:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.12),
    0 6px 18px rgba(0,0,0,.12);
}
.links-grid img{
  width: 60%;
  height: 60%;
  object-fit: contain;
}

@media (min-width: 880px){
  #official-links .links-inner{
    grid-template-columns: auto 1fr;
    gap:24px;
  }
  .links-title{ align-self:center; }
}




/* ===== SECTION THREE: Find Chimp ===== */
#find-chimp{
  background:#111217;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}

#find-chimp .ticker{
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:transparent;
}
#find-chimp .ticker__track{
  display:inline-block;
  white-space:nowrap;
  will-change:transform;
}
#find-chimp .ticker span{
  display:inline-block;
  margin:0 2rem;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  opacity:.9;
}

/* Inner content */
.find-inner{ padding-block: clamp(60px, 8vw, 100px); }
.find-sub{
  margin:24px 0 0;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  color:#b3b3b3;
}
.find-title{
  margin:8px 0 40px;
  font-size:clamp(28px, 4vw, 42px);
  font-weight:800;
}

/* Contract Address (centered, single) */
.ca-grid{
  display:flex;
  justify-content:center;
  margin-inline:auto;
  max-width:600px;
  width:100%;
}
.ca-box{ flex:1; max-width:600px; text-align:left; }
.ca-box label{
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
  display:block;
  color:#b3b3b3;
}
.ca-input{
  display:flex;
  align-items:center;
  gap:8px;
  background:#1c1d23;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  padding:6px 10px;
}
.ca-input input{
  flex:1;
  border:none;
  background:transparent;
  color:#fff;
  font-size:14px;
  font-family:monospace;
  outline:none;
  text-align:center;
}
.copy-btn{
  cursor:pointer;
  border:none;
  background:transparent;
  font-size:18px;
  color:#fff;
  opacity:.8;
  transition:opacity .15s ease;
}
.copy-btn:hover{ opacity:1; }

/* Exchanges */
.exchanges {
  margin-top: clamp(56px, 8vw, 80px);  /* ⬅️ increased margin top */
  text-align: left;
}

.ex-title {
  margin: 0 0 20px 0;                  /* a little more space below title */
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,.25);  /* ⬅️ thicker line */
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  color: #fff;
  opacity: .95;
}

.ex-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  justify-content:center;
}
.ex-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 24px;
  border-radius:9999px;
  background:#fff;
  color:#0c0c0c;
  text-decoration:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ex-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 10px 26px rgba(0,0,0,.24);
}
.ex-card img{
  width:44px;
  height:44px;
  object-fit:contain;
}
.ex-card span{
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight:800;
  letter-spacing:.2px;
}


/* ===== Parallax Section (24 images, full cover) ===== */
#chimp-gallery{
  position: relative;
  min-height: 90svh;               
  background: #0b0f17;
  overflow: clip;
  isolation: isolate;
}

.tg-scene{ position:absolute; inset:0; overflow:hidden; }
.tg-vignette{
  position:absolute; inset:-12% -8%;
  pointer-events:none;
  background:
    linear-gradient(to bottom, #0b0f17 0%, rgba(11,15,23,0) 18%),
    linear-gradient(to top,    #0b0f17 0%, rgba(11,15,23,0) 18%),
    linear-gradient(to right,  #0b0f17 0%, rgba(11,15,23,0) 10%, rgba(11,15,23,0) 90%, #0b0f17 100%);
  z-index:2;
}

.tg-board{
  --shift: 0px;
  --rot: -8deg;
  position:absolute;
  left:-28vw; right:-28vw; top:50%;
  transform: translate3d(0,var(--shift),0) translateY(-50%) rotate(var(--rot));
  transition: transform .2s ease-out;
}
.tg-back { z-index:0; scale:1.04; }
.tg-front{ z-index:1; scale:1.11; }

.tg-row{
  display:flex;
  gap: clamp(14px, 2vw, 22px);
  justify-content:center;
  margin-bottom: clamp(14px, 2vw, 22px);
  transform: translateY(var(--rowShift, 0px)); 
  will-change: transform;
}

.tg-row img{
 width:  clamp(250px, 22vw, 340px); 
  height: clamp(160px, 14vw, 230px); 
  object-fit: cover;
  border-radius: 14px;
  background:#0e1219;
  outline: 6px solid #0b0f17;
  box-shadow: 0 16px 44px rgba(0,0,0,.40);
  display:block;
}

/* Foreground content */
.tg-content{
  position:relative; z-index:3;
  display:grid; place-items:center;
  min-height: inherit;
  padding-block: clamp(40px, 6vw, 84px);
}
.tg-card{
  width: min(1650px, 100%);
  margin-inline:auto;
  padding: clamp(18px, 3.2vw, 28px);
  border-radius: 16px;
  color:#0b0f17;
  background: rgba(255,255,255,.88);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.tg-eyebrow{ margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.08em; color:#205cf3; text-transform:uppercase; }
.tg-title  { margin:0 0 10px; font-size: clamp(28px, 5.4vw, 48px); font-weight:900; line-height:1.06; }
.tg-desc   { margin:10px 0; font-size: clamp(13px, 1.6vw, 15px); color:#1a1f2a; }
.tg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; margin-top:14px; border-radius:999px;
  font-weight:800; text-decoration:none; color:#fff; background:#1e5bff;
}
.tg-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(30,91,255,.42), inset 0 -2px 0 rgba(0,0,0,.24); }

@media (max-width: 1024px){
  .tg-board{ left:-34vw; right:-34vw; }
  .tg-back{  scale:1.07; }
  .tg-front{ scale:1.14; }
  .tg-row img{
    width:  clamp(220px, 28vw, 300px);
    height: clamp(140px, 18vw, 190px);
  }
  #chimp-gallery{ min-height: 120svh; }
}
@media (max-width: 640px){
  .tg-board{ left:-44vw; right:-44vw; rotate:-7deg; }
  .tg-row img{
    width:  clamp(180px, 72vw, 260px);
    height: clamp(118px, 44vw, 170px);
    outline:5px solid #0b0f17;
  }
  #chimp-gallery{ min-height: 100svh; }
}

@media (prefers-reduced-motion: reduce){
  .tg-board{ transition:none; }
}


/* ===== Onchain Positivity (Gallery) ===== */
#chimp-art{
  background:#000000;
  padding:clamp(28px,4vw,44px) 0;
  color:#eaf0ff;
}

.art-container{
  width:min(1400px,94vw); 
  margin-inline:auto;
}

/* Header */
.art-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:clamp(16px,3.6vw,28px);
}
.art-head-left{
  display:grid;
  gap:8px;
}
.art-eyebrow{
  margin:0;
  font-size:clamp(12px,1.2vw,14px);
  font-weight:800;
  letter-spacing:.08em;
  color:#9bb2ff;
  text-transform:uppercase;
  opacity:.9;
}
.art-title{
  margin:0;
  font-size:clamp(28px,5vw,56px);
  line-height:1.04;
  font-weight:900;
  letter-spacing:-.02em;
}

/* Button (right) */
.art-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 18px;
  border-radius:999px;
  background:#2b62ff;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  box-shadow:0 12px 26px rgba(43,98,255,.35), inset 0 -2px 0 rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.art-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(43,98,255,.45), inset 0 -2px 0 rgba(0,0,0,.25);
}

.art-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:clamp(14px,2vw,22px);
  align-items:stretch;
}

/* Tile */
.art-tile{
  position:relative;
  height:clamp(170px,18vw,240px);
  border-radius:18px;
  overflow:hidden;
  background:#0d1219;
  box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  display:block;
  will-change:transform;
  transition:transform .16s ease, box-shadow .2s ease;
}
.art-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Image fills tile */
.art-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translateZ(0);
  filter:saturate(105%) contrast(103%);
}

/* Responsive layout */
@media (max-width:1280px){
  .art-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } 
}
@media (max-width:1024px){
  .art-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } 
}
@media (max-width:640px){
  .art-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } 
  .art-btn{ height:44px; padding:0 16px; }
}

/* ===== Media Pack Section ===== */
/* ===== Media Pack Section (smaller height) ===== */
#chimp-media{
  position: relative;
  min-height: 42vh;        
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background: #0b0f17;
  color:#fff;
  overflow:hidden;
}

/* background chimp.png + overlay */
#chimp-media::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("images/chimp.png") center no-repeat; 
  background-size: 480px auto;  
  opacity:0.5;
  filter: saturate(120%);
  display:flex;
  align-items:center;
  justify-content:center;
}

#chimp-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
     rgba(11,15,23,1),          
       rgba(100, 100, 100, 0.65),   
  );
}

.media-inner{
  position:relative;
  z-index:1;
  max-width:700px;
  padding: clamp(30px, 5vw, 60px) 20px;
  display:grid;
  gap: clamp(10px, 2vw, 16px);
}

/* text */
.media-eyebrow{
  margin:0;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.95;
}
.media-title{
  margin:0;
  font-size: clamp(28px, 5vw, 50px);  
  font-weight:900;
  line-height:1.1;
}
.media-desc{
  margin:0;
  font-size: clamp(13px, 1.5vw, 16px);
  opacity:.9;
}

/* button */
.media-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  padding:0 22px;
  height:46px;                      
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  color:#111;
  background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18), inset 0 -2px 0 rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
}
.media-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.25);
}




/* ===== Create PFP – CTA hero (dark) ===== */
#chimp-hero{
  position: relative;
  min-height: 48vh;                 
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 36px) 16px;
  background: #0b0f17;            
  overflow: hidden;
}

#chimp-hero::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  margin-inline:auto;
  width: min(880px, 92vw);
  aspect-ratio: 1/1;               
  background: url("https://chimpsol.vip/assets/assets/images/chimp.png") center/contain no-repeat;
  opacity:.18;                      
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
  transform: translateY(6%);        
  pointer-events:none;
}

#chimp-hero::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:3px;
  background:#0b57ff;
  opacity:.9;
}

.cta-hero{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  max-width: 980px;
  width: 100%;
}

.cta-eyebrow{
  margin:0 0 8px;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
  color:#cfe0ff;
  opacity:.95;
}

.cta-title{
  margin: 0 0 8px;
  font-family: 'Bangers', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(32px, 6.5vw, 64px);
  letter-spacing: .02em;
  line-height: 1.05;
  color:#fff;
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

.cta-sub{
  margin: 0 0 18px;
  font-size: clamp(13px, 2vw, 16px);
  color:#e5edff;
  opacity:.9;
}

.cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(720px, 92vw);          
  height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background:#fff;
  color:#0b0f17;
  font-weight: 800;
  font-size: 15px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 14px 34px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cta-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 42px rgba(0,0,0,.42);
}
.cta-btn:active{
  transform: translateY(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 8px 20px rgba(0,0,0,.38);
}

/* responsif kecil */
@media (max-width: 640px){
  #chimp-hero{ min-height: 52vh; }
  .cta-btn{ height: 50px; }
}


/* PFP */
/* styles.css */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }

body.modal-open{
  overflow: hidden;       /* desktop */
  position: fixed;       
  width: 100%;
}

#chimp-hero { position: relative; padding: 80px 16px 120px; background: #cde6ff; text-align: center; }
.chimp-title { font-size: clamp(40px, 8vw, 72px); font-weight: 900; letter-spacing: 2px; }
.chimp-sub { margin: 8px 0 24px; opacity: .8; }
.chimp-btn { padding: 12px 20px; font-weight: 700; border: 0; border-radius: 10px; cursor: pointer; background: #1e88ff; color: #fff; }
.scroll-hint { margin-top: 24px; opacity: .7; display: inline-flex; align-items: center; gap: 8px; }


.modal {
  position: fixed;
  inset: 0;
  display: none;                /* .show => grid */
  place-items: center;
  background: rgba(0,0,0,.55);  /* backdrop */
  padding: 12px;
  z-index: 999999;             
  overflow: auto;              
  overscroll-behavior: contain; 
}
.modal.show { display: grid; }

.modal-dialog {
  display: flex;
  flex-direction: column;
  width: min(1100px, 100%);
  max-height: 92dvh;            
  background: #ffb21e;
  border: 6px solid #0b3a88;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position: relative;
  z-index: 1;                   
  overflow: hidden;             
}

.modal-header {
  flex: 0 0 auto;               
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: #2973ff;
  color: #fff;
  border-bottom: 4px solid #0b3a88;
}

.btn-close {
  border: 0;
  background: #ff6a00;
  color: #fff;
  font-size: 20px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.modal-body {
  flex: 1 1 auto;               
  min-height: 0;                
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  padding: 16px;
  background: #ffe6b3;
  overflow: auto;               
  -webkit-overflow-scrolling: touch; 
}
@media (max-width: 900px) {
  .modal-body { grid-template-columns: 1fr; }
}

.preview-wrap {
  display: grid;
  place-items: center;
  background: #111;
  border: 6px solid #0b3a88;
  border-radius: 10px;
  min-height: 0;                
}

#pfpCanvas {
  width: 100%;
  height: auto;
  background: #cfe6d6;
  display: block;
}

.controls {
  display: grid;
  grid-auto-rows: min-content;
  gap: 12px;
  margin-top: 90px;
  align-content: start;
  padding: 8px;
}

.field {
  display: grid;
  grid-template-columns: 120px 1fr 24px;
  gap: 8px;
  align-items: center;
}
.field label {
  font-weight: 800;
  letter-spacing: .5px;
}

select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid #0b3a88;
  background: #fff8e6;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #ff6a00;
  cursor: pointer;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.btn {
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.btn.primary { background: #2973ff; color: #fff; }
.btn.danger  { background: #ff6a00; color: #fff; }


/* ===== FOOTER ===== */
#chimp-footer {
  background: linear-gradient(180deg, #000000, #0b0f17); 
  color: #fff;
  padding: clamp(30px, 5vw, 60px) 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.footer-inner {
  display: grid;
  gap: 22px;
  justify-items: center;
}

.footer-brand h2 {
  margin: 0;
  font-family: 'Bangers', system-ui, sans-serif;
font-size: clamp(35px, 6vw, 55px);

  letter-spacing: 2px;
  color: #fff;
}

.footer-brand p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #eaf1ff;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}

.footer-links a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: #7ab6ff; 
}

.footer-copy {
  margin: 0;
  font-size: 13px;
  color: #cfdfff;
  opacity: .85;
}

/* ===== Create PFP CTA  ===== */
#chimp-cta{
  position: relative;
  min-height: 42vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 36px) 16px;
  background: #0b0f17;        
  color:#fff;
  overflow:hidden;
}


#chimp-cta::after{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:#0b57ff; opacity:.9;
}

#chimp-cta .cta-hero{
  text-align:center;
  width:min(980px,92vw);
  margin-inline:auto;
}

#chimp-cta .cta-eyebrow{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.12em;
  font-size:12px;
  text-transform:uppercase;
  color:#cfe0ff;
  opacity:.95;
}

#chimp-cta .cta-title{
  margin:0 0 10px;
  font-family:'Bangers', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(34px, 6.6vw, 72px);
  line-height:1.05;
  letter-spacing:.02em;
  color:#fff;
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
}

#chimp-cta .cta-sub{
  margin:0 0 22px;
  font-size: clamp(13px, 2vw, 16px);
  color:#e5edff;
  opacity:.9;
}


#chimp-cta .cta-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:min(720px, 92vw);
  height:54px; padding:0 22px;
  border:0; border-radius:999px;
  background:#fff; color:#0b0f17;
  font-weight:800; font-size:15px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset,
              0 14px 34px rgba(0,0,0,.35);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
#chimp-cta .cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 18px 42px rgba(0,0,0,.42);
}
#chimp-cta .cta-btn:active{ transform:none; }


/* =========================
   PFP MODAL: FIXES (append)
   ========================= */


.modal-dialog {
  overflow: visible; /* was: hidden */
}


.modal-body {
  overflow: visible;            /* was: auto */
  max-height: none;             
}

@media (max-width: 900px) {
  .modal-body {
    grid-template-columns: 1fr; /* from: 1fr 380px */
    gap: 12px;
  }

  .preview-wrap {
    max-height: 58vh;
    overflow: auto;            
  }

  .controls {
    max-height: 58vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 901px) {
  .modal-body {
    grid-template-columns: minmax(0,1fr) 380px;
  }
}

.field {
  grid-template-columns: 110px 1fr 24px; 
}


#chimp-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(11,15,23,1),
    rgba(100,100,100,0.65)
  );
}

/* ======= PFP MODAL — FINAL CLEAN ======= */

.modal{
  position: fixed;
  inset: 0;
  display: none;            /* .show => grid */
  place-items: center;
  background: rgba(0,0,0,.55);
  padding: 12px;
  z-index: 999999;
  overflow: auto;          
  overscroll-behavior: contain;
}
.modal.show{ display: grid; }

/* Card tunggal (frame) */
.modal-dialog{
  display: grid;
  grid-template-rows: auto 1fr;     /* header | body */
  width: min(1000px, 100%);
  max-height: 92dvh;
  background: #ffb21e;
  border: 6px solid #0b3a88;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: visible;             
}

.modal-header{
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #2973ff;
  color: #fff;
  border-bottom: 4px solid #0b3a88;
}

.modal-body{
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  gap: 16px;
  padding: 16px;
  background: #ffe6b3;              
  overflow: visible;                 
}

.preview-wrap{
  position: sticky;
  top: 12px;                         
  align-self: start;
  background: #111;
  border: 6px solid #0b3a88;
  border-radius: 10px;
  overflow: visible;
}
#pfpCanvas{
  display: block;
  width: 100%;
  height: auto;
  background: #cfe6d6;
}

.controls{
  display: grid;
  grid-auto-rows: min-content;
  gap: 12px;
  align-content: start;
  padding: 8px;
  max-height: 60vh;                  
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;          
  border: none;                      
  border-radius: 0;
}

.field{
  display: grid;
  grid-template-columns: 110px 1fr 24px;
  gap: 8px;
  align-items: center;
}
.field select{ min-width: 0; }
.field input[type="checkbox"]{ width:18px; height:18px; accent-color:#ff6a00; }

.actions{
  position: static;             
  bottom: auto;
  margin: 12px 0 0;              
  padding: 0;                   
  background: transparent;
  border: 0;
  z-index: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.actions .btn{ width: 100%; }

@media (max-width: 380px){
  .actions{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .modal-body{ grid-template-columns: 1fr; }
  .controls{ max-height: 54vh; }
}



@media (max-width: 430px){
  .modal-body{
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;                
  }


  .preview-wrap{
    position: static;
    margin: 0;
    margin-bottom: 16px;               
  }

  #pfpCanvas{
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
  }

  .controls{
    max-height: 60vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .controls .field:first-child{
    margin-top: 8px;                 
  }

  .field{
    grid-template-columns: 92px 1fr 20px;  
    gap: 6px;
    align-items: center;
  }
  .field label{
    font-size: 13px;
    font-weight: 800;
  }
  .field select{
    min-width: 0;
    height: 38px;                      
    padding: 6px 10px;
    font-size: 13px;
  }
  .field input[type="checkbox"]{
    width: 16px;                       
    height: 16px;
    accent-color: #ff6a00;
  }

  .actions{
    position: static;
    padding: 10px 0 0;
    background: transparent;
    border: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-height: 740px){
  .preview-wrap{ margin-bottom: 16px; }
  .controls{ max-height: 56vh; }
}