/* ==== Global responsive enhancements (v19) ==== */

/* Fluid type scale */
:root{
  --step--1: clamp(0.85rem, 0.83rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.98rem + 0.3vw, 1.10rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.8vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.2vw, 2.00rem);
  --step-3:  clamp(2.00rem, 1.70rem + 1.8vw, 2.60rem);
}
body{font-size:var(--step-0)}
h1{font-size:var(--step-3); line-height:1.1; margin:0 0 8px}
h2{font-size:var(--step-2); line-height:1.15}

/* Containers */
.container{max-width:min(92vw, 1080px)}

/* Media: make all images flexible unless explicitly fixed */
img{max-width:100%; height:auto}

/* Header/nav responsiveness */
header .nav{flex-wrap:wrap; row-gap:8px; padding:0 4px}
@media (max-width: 680px){
  nav .link{margin-top:4px}
}

/* Hero block spacing adjustments */
.hero{padding: clamp(40px, 7vw, 84px) 0 24px}

/* CTA grid: 1x4 on desktop, 2x2 on small */
.cta{grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px}
@media (max-width: 700px){
  .cta{grid-template-columns: repeat(2, minmax(0, 1fr))}
}

/* Buttons tap-friendly on mobile */
.btn{min-height:44px}

/* Section spacing */
.section{padding: clamp(36px, 6vw, 64px) 0}

/* Figure captions readable */
.caption{font-size:var(--step--1)}

/* Tokenomics chart container already responsive; tweak limits */
.tokenomics-chart{width:min(92vw, 720px)}
.tokenomics-fallback img{width: clamp(240px, 75vw, 640px)}

/* Roadmap/Governance figures responsive center */
.figure{margin: 16px auto; text-align:center}
.figure img{display:inline-block; border-radius:8px; border:1px solid #111}

/* Footer icons responsive */
.footer-social a{width: clamp(36px, 5.2vw, 42px); height: clamp(36px, 5.2vw, 42px)}
.footer-social img, .footer-social svg{width: clamp(18px, 2.8vw, 22px); height: clamp(18px, 2.8vw, 22px)}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}


/* v21: Tokenomics container hardened */
.tokenomics-chart{
  width: min(92vw, 720px);
  margin: 16px auto;
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 240px;
  min-height: 240px;
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1){
  .tokenomics-chart::before{
    content: "";
    display: block;
    padding-top: 100%; /* square */
  }
  .tokenomics-chart canvas{
    position: absolute; inset: 0;
  }
}
/* Ensure fallback image is centered and always visible when activated */
.tokenomics-fallback{display:none; text-align:center}
.tokenomics-fallback img{
  width: clamp(240px, 75vw, 640px);
  height: auto;
  border:1px solid #111; border-radius:8px;
}



/* v22: Responsive <picture> handling */
.figure picture, .figure img{max-width:100%; height:auto}
.figure img{border:1px solid #111; border-radius:8px}



/* v23: Ensure tokenomics container is not hidden by default */
.tokenomics-chart{ display:block; }


/* v24 emergency sizing */
.tokenomics-chart{ min-height: 300px; }
@media (max-width: 480px){ .tokenomics-chart{ min-height: 240px; } }


/* v25: Static PNG tokenomics (responsive) */
.tokenomics-figure{ text-align:center; margin: 16px auto; }
.tokenomics-figure img{ display:inline-block; width: clamp(240px, 70vw, 720px); height:auto; border:1px solid #111; border-radius:8px; }



/* v26: ensure tokenomics image stays sharp and centered */
.tokenomics-figure{ text-align:center; margin: 16px auto; }
.tokenomics-figure img{ image-rendering:auto; }



/* v27: Responsive Tokenomics picture */
.tokenomics-figure{ text-align:center; margin:16px auto; }
.tokenomics-figure picture, .tokenomics-figure img{ max-width:100%; height:auto; }
.tokenomics-figure img{ width:clamp(240px,70vw,720px); border:1px solid #111; border-radius:8px; }