/*styles.css*/
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 9rem 2rem;
    flex-wrap: wrap;
    position: relative; /* make sure the background stays behind content */
  border-bottom: 1px solid rgba(161, 17, 17, 20.06); /* subtle divider */
  overflow: hidden; /* keeps background from spilling outside */
  }

  .hero-bg {
    position: absolute;
    inset: 0% 0% 0% 0%;
    height: 100%;
    background:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  url("images/background1.png") center 0% / cover no-repeat,
  radial-gradient(60% 60% at 60% 40%, rgba(139,92,246,.25) 0%, rgba(139,92,246,0) 60%),
  radial-gradient(50% 50% at 30% 80%, rgba(245,158,11,.25) 0%, rgba(245,158,11,0) 60%);

    z-index: -1;
  }
  
  
  .hero-text {
    max-width: auto;
    text-align: center;
  }
  
  .coin-container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
  }
  
  .coin {
    width: min(600px, 40vw);
    aspect-ratio: 1 / 1;
    position: relative;
    transform-style: preserve-3d;
    animation: spin 3s linear infinite;
  }
  
  .coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    backface-visibility: hidden;
    border-radius: 50%;
  }
  
  .coin-front {
    background-image: url("images/coinface1.png");
  }
  
  .coin-back {
    background-image: url("images/coinface2.png");
    transform: rotateY(180deg);
  }
  
  @keyframes spin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
  }
  
  /* Accessibility: stop animation if user prefers reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .coin {
      animation: none;
    }
  }

  /* Hero grid adjustments for spinning coin */
.hero-grid {
    display: grid;
    gap: 36px;
    align-items: center;
    grid-template-columns: 1.1fr .9fr;
  }
  
  .hero-text {
    max-width: 500px;
  }
  
  
  /* Mobile: stack coin below text */
  @media (max-width: 980px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 26px;
      text-align: center;
    }
    .hero-ctas {
      justify-content: center;
    }
  }
/* Hero grid adjustments for spinning coin */
.hero-grid {
    display: grid;
    gap: 36px;
    align-items: center;
    grid-template-columns: 1.1fr .9fr;
  }
  
  .hero-text {
    max-width: 500px;
  }
  
  /* Mobile: stack coin below text */
  @media (max-width: 980px) {
    .hero-grid {
      grid-template-columns: 1fr;
      gap: 26px;
      text-align: center;
    }
    .hero-ctas {
      justify-content: center;
    }
  }








/* =====================
   THEME KNOBS (defaults)
   ===================== */
:root {
  /* About section background tokens (keep as you like) */
  --about-bg-pos-x: center;   /* NEW */
  --about-bg-pos-y: 30%;      /* move image down (bigger % = lower) */
  --about-bg-image: url("images/background2.png");
  --about-bg-overlay: rgba(150, 98, 42, 0.424);
  --about-bg-pos-y: 10%;
  --about-divider-top: rgba(255, 255, 255, 0.85);
  --about-divider-bottom: rgba(255, 255, 255, 0.85);

  /* Flip cards (single source of truth) */
  --flip-bg: rgba(255, 255, 255, 0); /* your card color */
  --flip-backplate: #ffffff00;           /* solid base to prevent darkening */
  --card-border-color: rgb(208, 105, 8);
  --card-radius: 20px;
  --card-height-desktop: fit-content;
  --card-height-tablet: fit-content;
  --card-height-mobile: fit-content;
}

/* =====================
   ABOUT SECTION
   ===================== */
#about{
  position: static;
  padding: 100px 20px;
  min-height: 40vh;
  background:
    linear-gradient(var(--about-bg-overlay), var(--about-bg-overlay)),
    var(--about-bg-image) var(--about-bg-pos-x) var(--about-bg-pos-y) / cover no-repeat;
  border-top: 1px solid var(--about-divider-top);
  border-bottom: 1px solid var(--about-divider-bottom);
  /* DO NOT set --flip-bg here anymore */
}



/* Bubble header */
.bubble-border{
  display:inline-block;
  padding:30px 30px;
  border-radius:999px;
  background: var(--bubble-gradient);
  background-size:400% 500%;
}
.bubble-border > div{
  background: var(--bubble-inner-bg);
  padding:10px 20px;
  border-radius:999px;
}
.bubble-border h2,.bubble-border span{ margin:0; text-align:center; }

@media (prefers-reduced-motion: no-preference){
  .bubble-border{ animation: bubbleGradient var(--bubble-anim-duration) ease infinite; }
  @keyframes bubbleGradient{
    0%{ background-position:0% 50%; }
    50%{ background-position:50% 70%; }
    100%{ background-position:0% 50%; }
  }
}

/* FLIP CARDS (About) */
.about-card{
  position:relative;
  border-radius: var(--card-radius);
  border: 3px solid var(--card-border-color);
  overflow:visible;
  --about-h: var(--card-height-desktop);
}

/* Apply a two-layer background everywhere so semi-transparency doesn't darken */
/* Bounce on hover */
.about-card {
  transition: transform 0.4s cubic-bezier(.28,.84,.42,1.1); /* springy curve */
}
.about-card img,
.flip-face,
.flip-front .body,
.flip-back .body{
  background:
    linear-gradient(var(--flip-bg), var(--flip-bg)),
    var(--flip-backplate);
  backdrop-filter: none;
}
.about-card:hover {
  animation: glowPulse 1.5s infinite alternate;
   transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 170px rgba(254, 114, 0, 0.6); /* glow effect */
}
@keyframes bounceIn {
  0%   { transform: scale(0.95) rotateY(180deg); }
  70%  { transform: scale(1.05) rotateY(180deg); }
  100% { transform: scale(1) rotateY(180deg); }
}

@keyframes glowPulse {
  from {
    box-shadow: 0 0 20px 2px var(--card-border-color);
  }
  to {
    box-shadow: 0 0 20px 6px var(--card-border-color);
  }
}


.about-card img{
  display:block; width:120%; height:auto;
}

/* fixed heights so cards don’t stretch */
@media (max-width:980px){ .about-card{ --about-h: var(--card-height-tablet); } }
@media (max-width:560px){ .about-card{ --about-h: var(--card-height-mobile); } }

/* flip mechanics */
.flip-card{ perspective:800px; height:auto;width: 100%; }
.flip-inner{
  position:relative;
  width: 100%;
   height:auto;
  transform-style:preserve-3d;
  transition: transform .3s ease;
}
.flip-card.is-flipped .flip-inner{ transform: rotateY(180deg); }

.flip-card:focus .flip-inner,
.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  /* Remove fixed height here too */
  height: auto;
}

/* Hide the opposite face so it doesn't bleed through */
.flip-back { transform: rotateY(180deg); visibility: visible; }
.flip-card.is-flipped .flip-back { visibility: visible; } /*shows back of card body*/
.flip-card.is-flipped .flip-front { visibility: hidden; } /*hides the front panel from showing through backpanel*/

.flip-back, .flip-front { transition: visibility 0s linear .1s; }
.flip-card.is-flipped .flip-front { pointer-events: auto; }
.flip-card:not(.is-flipped) .flip-back { pointer-events: none; }

/* Front layout: media (image) + text */
.flip-front{
  position: relative;
  display: hidden;
  grid-template-rows: minmax(180px, 80%) 1fr; /* top=image, bottom=text */
}
.flip-front > img{
  width:100%; height:100%; object-fit: cover; display:hidden;
}

/* Body */
.flip-front .body, .flip-back .body{
  overflow:visible;
  padding:16px 18px;
}

/* Title overlay */
.title-overlay{
  position:absolute;
  left:12px; right:12px;
  z-index:2; margin:0;
  padding:.4rem .75rem;
  border-radius:10px;
  background:
    linear-gradient(
      to bottom,
      rgba(253, 3, 174, 0.27),
      rgba(0,0,0,.08)
    );
  box-shadow: 0 14px 14px rgba(108, 3, 255, 0.18);
}
.pos-top    { top:12px; }
.pos-bottom { bottom:12px; }

/* Fun title font */
.fun-title{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: clamp(2rem, 1.6vw, 1.6rem);
  color: #000; /* use #fff if you want bright titles */
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  margin: 0;
}


/* Move up only the middle card's title */
.grid.cols-3 article:nth-child(1) .body {
  margin-top: 40px; /* adjust value to taste */
    --media-pos-x: 55%;
  --media-pos-y: 5%;
}

/* Or move the whole body up instead */
.grid.cols-3 article:nth-child(2) .body {
  margin-top: 25px;
    --media-pos-x: 55%;
  --media-pos-y: 65%;
}
/* Right card (lemonade stand) */
.grid.cols-3 article:nth-child(3){
  margin-top: 40px;
  --media-pos-x: 55%;
  --media-pos-y: 5%;
}

/* Default framing for all card images */
.flip-front > img{
  object-fit: contain;
  object-position: var(--media-pos-x, 0%) var(--media-pos-y, -20%); /* X Y */
}


@media (prefers-reduced-motion: reduce){
  .flip-card{ perspective:none; }
  .flip-inner{ transition:none; }
}

#about .section-header {
  display: flex;
  align-items: center;
  gap: 40px;
}

#about .section-header h2 {
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff;
  text-shadow:
    2px 2px 0 #ff4ecb,
    -2px -2px 0 #ff4ecb,
    2px -2px 0 #ff4ecb,
    -2px 2px 0 #ff4ecb,
    0 0 10px rgba(255, 0, 221, 0.8),
    0 0 20px rgba(255, 0, 221, 0.6);
  letter-spacing: 2px;
  margin: 0;
}

/* Bubble background for About */
#about .bubble-border {
  display: inline-block;
  padding: 17px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ff7eb3,#ff758c,#ffb347,#f9ff7e,#7efff600,#7e9eff00,#d67eff00);
  background-size: 400% 400%;
}

#about .bubble-border > div {
  background: rgba(15,15,16,0.85);
  padding: 10px 20px;
  border-radius: 999px;
}

#about .bubble-border h2,
#about .bubble-border span {
  margin: 0;
  text-align: center;
}

/* Gradient animation same as Tokenomics */
@media (prefers-reduced-motion: no-preference){
  #about .bubble-border {
    animation: bubbleGradient 8s ease infinite;
  }
  @keyframes bubbleGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

/* Put your float/bounce animation on the wrapper, not the img */
.floaty { animation: bounceTilt 2.4s cubic-bezier(.68,-0.55,.27,1.55) infinite; }
@keyframes bounceTilt {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35%     { transform: translateY(-14px) rotate(-4deg); }
  55%     { transform: translateY(-7px)  rotate( 4deg); }
}

/* Apply to any floating image */
.floaty {
  will-change: transform;
  animation: bounceTilt var(--dur, 2.4s)
             cubic-bezier(.68,-0.55,.27,1.55) infinite;
}

/* Desync each card a little so they don’t move in unison */
.grid.cols-3 article:nth-child(1) .floaty { animation-delay: .06s; }
.grid.cols-3 article:nth-child(2) .floaty { animation-delay: .42s; }
.grid.cols-3 article:nth-child(3) .floaty { animation-delay: .12s; }

/* Optional per-card tuning (amplitude/tilt/duration) */
.grid.cols-3 article:nth-child(1) .floaty { --amp: 16px; --tilt: 4deg; }
.grid.cols-3 article:nth-child(2) .floaty { --amp: 18px; --tilt: 5deg; --dur: 5.6s; }
.grid.cols-3 article:nth-child(3) .floaty { --amp: 14px; --tilt: 3.5deg; --dur: 7s }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floaty { animation: none !important; }
}

.flip-front {
  z-index: 2;
}

.flip-back {
  transform: rotateY(180deg);
  /* Let the back stack normally so it expands */
  position: absolute;
}

  




/* TOKENOMICS SECTION – 3-frame blinking background */

/* TOKENOMICS SECTION – 3-frame blink (randomly triggered) */
.tokenomics{
    position: sticky;
    overflow: hidden;
    border-top: 2px solid rgba(50,255,4,.894);
    border-bottom: 2px solid rgb(3,255,24);
    z-index: 0;
  
    /* knobs */
    --blink-size: 100%;
    --blink-pos-x: ;/* was empty — pick left | center | right | 10% | 40px */
    --blink-pos-y: 94%;    /* needs a unit */
    --blink-duration: 600ms; /* how long a single blink takes (approx) */
  
    /* OPEN (static base so there's never a bare background) */
    background:
      url("images/duckblink1.png")
      var(--blink-pos-x) var(--blink-pos-y) / var(--blink-size) auto no-repeat;  }
  
  /* Keep content above background layers */
  .tokenomics .container { position: relative; z-index: 1; }
  
  /* Layers (idle state = hidden, no looping) */
  #tokenomics::before,
  #tokenomics .blink-mid,
  #tokenomics::after{
    opacity: 0;
    position: absolute; inset: 0;
    background-repeat: no-repeat;
    background-size: var(--blink-size) auto;
    background-position: var(--blink-pos-x) var(--blink-pos-y);
    pointer-events: none;
    will-change: opacity;
  }
  
  /* OPEN layer (used only to fade out the open state if you want; can omit) */
  #tokenomics::before{
    content:"";
    z-index:-3;
    background-image:url("images/duckblink1.png");
  }
  
  /* HALF layer */
  #tokenomics .blink-mid{
    z-index:-2.5;
    background-image:url("images/duckblink2.png");
  }
  
  /* CLOSED layer */
  #tokenomics::after{
    content:"";
    z-index:-2;
    background-image:url("images/duckblink3.png");
  }
  
  /* When blinking is triggered, play once (no infinite) */
  #tokenomics.blinking .blink-mid{
    animation: blinkMid var(--blink-duration) linear forwards;
  }
  #tokenomics.blinking::after{
    animation: blinkClosed var(--blink-duration) linear forwards;
  }
  
  /* Keyframes for a single blink */
  @keyframes blinkMid{
    /* half appears quickly and vanishes */
    10%   { opacity: 0; }
    55%  { opacity: 1; }
    60%  { opacity: 1; }
    90% { opacity: 0; }
  }
  @keyframes blinkClosed{
    /* closed overlaps the middle briefly */
    10%   { opacity: 0; }
    50%  { opacity: 0; }
    55%  { opacity: 1; }
    60%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { opacity: 0; }
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    #tokenomics .blink-mid,
    #tokenomics::after{ animation: none !important; }
  }
  



  /* Right-align the tokenomics panel */
.tokenomics-content{
    display:flex;
    justify-content:flex-end;           /* push the whole panel to the right */
  }
  .tokenomics-panel{
    width:min(660px, 92vw);             /* smaller panel width */
    display:grid;
    gap: var(--gap);
  }
  
  /* Smaller, tighter cards */
  .stats-grid{
    display:grid;
    gap:14px;                           /* tighter spacing than default */
    grid-template-columns:repeat(2, minmax(0,2fr)); /* two small columns */
    margin-bottom:0px;
  }
  .stat .label{
    color:var(--muted);
    font-size:.85rem;
    margin-bottom:4px;
  }
  .stat .value{
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size:clamp(1.05rem, 1.8vw, 1.4rem);
    font-weight:700;
  }
  
  /* Callouts smaller too */
  .split-grid{
    display:grid;
    gap:14px;
    grid-template-columns:1fr 1fr;
  }
  .callout h3{
    margin:0 0 4px 0;
    font-size:1rem;
  }
  .callout p{
    margin:0;
    font-size:.95rem;
  }
  
  /* Fun glowing gradient border */
  .glow-card{
    position:relative;
    padding:2px;                        /* border thickness */
    border-radius:19px;
    background:
      linear-gradient(135deg,#ff7eb3,#ff5cd900,#7efff7,#8a5cf600,#ff7eb400);
    background-size:200% 200%;
      background-color: #bfbdc76b; /* purple */

    filter: drop-shadow(0 60px 18px rgba(9, 1, 30, 0.705));
  }
  .glow-card .inner{
    background:rgba(22, 22, 27, 0.9);
    font-size: 16px;
    border-radius:4px;
    padding:14px 6px;
  }
  @media (prefers-reduced-motion: no-preference){
    .glow-card{ animation:glowShift 8s ease infinite; }
    @keyframes glowShift{
      0%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
      100%{ background-position:0% 50%; }
    }
  }
  
  /* Responsive: center the panel on narrow screens */
  @media (max-width: 980px){
    .tokenomics-content{ justify-content:center; }
    .split-grid{ grid-template-columns:1fr; }
  }
  

  .tokenomics .section-header h2 {
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #ffffff;
    text-shadow:
      2px 2px 0 #ff4ecb,
      -2px -2px 0 #ff4ecb,
      2px -2px 0 #ff4ecb,
      -2px 2px 0 #ff4eca00,
      0 0 10px rgba(255, 0, 221, 0),
      0 0 20px rgba(255, 0, 221, 0.6);
    letter-spacing: 2px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: inline-block;
  }

  .bubble-border {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg,#ff7eb400,#ff758c00,#ffb24700,#f9ff7e,#7efff7,#7e9eff00,#d77eff);
    background-size: 400% 400%;
  }
  .bubble-border > div {
    background: rgba(15, 15, 16, 0);
    padding: 10px 20px;
    border-radius: 999px;
  }
  .bubble-border h2,
  .bubble-border span {
    margin: 0;
    text-align: center;
  }
  @media (prefers-reduced-motion: no-preference){
    .bubble-border { animation: bubbleGradient 8s ease infinite; }
    @keyframes bubbleGradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  }
  



/* =====================
   Split Panels (Community + Press)
   ===================== */
:root{
  --panel-radius: 14px;
  --panel-border: 2px solid rgba(0,0,0,.7);
  --panel-shadow: 0 12px 24px rgba(0,0,0,.25);
  --panel-gap: 28px;

  /* backgrounds for the cards themselves */
  --panel-left-bg: linear-gradient(180deg,#11ff0050,#ffdfe9);
  --panel-right-bg: linear-gradient(180deg,#11ff0050,#ffdfe9);

  /* outlined headline */
  --outline-fill: #fff;
  --outline-stroke: #000;
}

/* Section wrapper with its own background image */
#social-news{
  position: relative;
  padding: 80px 0;
  background: url("images/background4.png") center / cover no-repeat;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow: hidden; /* clip the divider line to this section */
}

/* optional soft overlay for readability (tweak/disable if you want) */
#social-news::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(103, 103, 103, 0.18), rgba(0,0,0,.18));
  z-index: 0;
}

.split-panels{ padding: 0; } /* padding moved to #social-news */
.panels{
  position: relative;           /* anchor for the section-only divider */
  z-index: 1;                   /* above the section bg/overlay */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--panel-gap);
}

/* Section-only divider line */
#social-news .panels::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  border-left: 3px solid rgba(0,0,0,.75);
  transform: translateX(-50%);
  pointer-events:none;
  z-index: 2; /* over bg, under cards */
}

/* Make sure no global divider leaks elsewhere */
.panels::before{ display:none; }

.panel{
  position:relative;
  overflow:visible;
  border-radius: var(--panel-radius);
  border: var(--panel-border);
  box-shadow: var(--panel-shadow);
  isolation:isolate;
  transition: transform .35s cubic-bezier(.28,.84,.42,1.1), box-shadow .3s ease;
}
.panel:hover{
  transform: translateY(-6px);
  box-shadow: 0 0 50px rgba(255, 90, 156, 0.63);
}

.panel-left{  background: var(--panel-left-bg); }
.panel-right{ background: var(--panel-right-bg); }

/* inner frame */
.panel-inner{
  position: relative;
  display:grid;
  grid-template-rows:auto auto auto 2fr; /* title, kicker, CTAs, art */
  min-height: 520px;
  padding: clamp(6px, 3vw, 8px);
  row-gap: clamp(8px, 1.8vw, 16px);
  position: relative;
  grid-template-columns: 1.1fr 0.9fr;   /* left = steps, right = art */
  grid-template-rows: auto auto 1fr;    /* title, kicker, content */
  column-gap: clamp(2px, 2vw, 4px);
}

/* Big outlined heading like the reference */
.mega-outline{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: .95;
  letter-spacing: 1px;
  margin: 0;
  color: var(--outline-fill);
  text-shadow:
    3px 3px 0 var(--outline-stroke),
   -3px -3px 0 var(--outline-stroke),
    3px -3px 0 var(--outline-stroke),
   -3px  3px 0 var(--outline-stroke),
    0  0 22px rgba(251, 4, 4, 0.2);
}

.kicker{
  font-weight: 900;
  opacity: .9;
  margin: 0 0 6px 2px;
  
}
.steps{
  grid-column: 1;
  align-self: start;
  display: grid;
  gap: 12px;
}

/* Step cards (glow-card already exists) */
.step-card .inner{
  display: inside;
  grid-template-columns: auto 1fr;
  align-items: grid;
  gap: 12px;
  padding: 14px 16px;                   /* already in your glow-card, here just ensuring comfy */
}

/* Number pill */
.step-card .num{
  width: 34px; height: 34px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}

/* Titles + copy */
.step-card h4{
  margin: 0 0 4px 0;
  font-size: 1rem;
}
.step-card .muted{
  margin: 0;
  font-size: .95rem;
}

/* Art stays on the right */
.panel-right .panel-art{
  grid-column: 2;
  align-self: 100;
  justify-self: end;
  max-width: min(90%, 640px);
}

.panel-art img {
  width: 320%;       /* scale it up beyond container width */
  max-width: none;   /* prevent browser from capping it at container width */
  transform: translateX(-10%); /* shift left so it stays centered visually */
}

.panel-right .section-header.header-right{
  grid-column: 1 / -1;           /* span both columns */
  display: flex;
  justify-content: flex-start;   /* change to flex-end if you want it right-aligned */
  margin-bottom: 10px;
}
/* Responsive: stack steps above art */
@media (max-width: 780px){
  .panel-right .panel-inner{
      position: relative;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .panel-right .steps{ grid-column: 1; }
  .panel-right .panel-art{
    grid-column: 1;
    justify-self: center;
    max-width: min(80%, 420px);
  }
}

/* Make glow-card buttons larger */
.glow-card .inner a {
  display: inline-block;
  font-size: 1rem;     /* bigger text */
  padding: 14px 28px;     /* more clickable area */
  text-decoration: none;  /* remove underline */
  color: rgb(255, 255, 255);            /* keep white text */
  
  
}

.glow-card {
  border-radius: 40px;    /* rounder edges if desired */
   background-color: #f9ce21; /* your new color */
}




/* Make Join the community header bigger */
.bubble-border h3 {
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; /* same font as Tokenomics if you want consistency */
  font-size: clamp(2rem, 1vw, 3rem);    /* scales with screen size */
  color: #fff;
  letter-spacing: 2px;
  margin: 0;
}





/* CTAs */
.cta-row{ display:inline-block; gap:12px; flex-wrap:wrap; }
.pill-cta{
  display:inline-flex; align-items:center;
  padding:.7rem 1rem; border-radius:9px;
  background:#03ffbc5b; color:#929eff; border:1px solid rgba(216, 6, 249, 0.639);
  font-weight:200; letter-spacing:.3px;
  transition: transform .15s ease, filter .2s ease;
}
.pill-cta:hover{ transform: translateY(-2px); filter: brightness(1.1); }
.pill-cta.ghost{ background:#03ffbc5b; color:#0522ff; border:1px solid rgba(226, 142, 239, 0.639); }

/* art */
.panel-art{
  align-self:end; justify-self:end;
  max-width:min(52%, 420px);
  filter: drop-shadow(0 8px 16px rgba(212, 212, 212, 0.25));
}


/* Responsive */
@media (max-width: 1980px){
  .panels{ grid-template-columns:1fr; }
  #social-news .panels::before{ display:none; }
  .panel-art{ max-width:min(68%, 420px); }
}


/* Walk from left overhang to the right edge of the container */
@keyframes panelWaddle {
  0%   { left: -450px; }
  100% { left: calc(100% - 20px); } /* container width - duck width */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #community-duck.duck-image { animation: none; }
}

/* the duck itself */
#community-duck {
  display: block;
  width: 200px;
  height: auto;
  transform-origin: 50% 50%;
}



#grape-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* above backgrounds; below UI */
}

.falling-grape{
  position: absolute;
  top: -60px;
  width: 40px; height: 40px;
  background: url('images/grape.png') center/contain no-repeat;
  animation: grapeFall 3s linear forwards;
  opacity: .95;
}

@keyframes grapeFall{
  0%   { transform: translateY(0) rotate(0); opacity:.95; }
  100% { transform: translateY(calc(100vh + 60px)) rotate(260deg); opacity:0; }
}

.bottom-grape{
  position: fixed;
  bottom: 60px;
  width: 28px; height: auto;
  z-index: 6;              /* above the rain layer so the duck can “eat” them */
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;
}

/* Compact animated glow button (pills, not big blocks) */
.glow-button{
  --rad: 999px;                 /* pill */
  --pad-y: .65rem;
  --pad-x: 1.1rem;

  position: relative;
  display: flex;
  padding: 2px;                 /* gradient border thickness */
  border-radius: var(--rad);
  background: linear-gradient(135deg,#ff7eb3,#ffd15c,#7efff7,#8b5cf6,#ff7eb3);
  background-size: 200% 200%;
  filter: drop-shadow(0 6px 18px rgba(141, 131, 164, 0.135));
  text-decoration: none;
  
}
.glow-button > span{
  display: relative;
  padding: var(--pad-y) var(--pad-x);
  border-radius: calc(var(--rad) - 2px);
  background: rgba(15,15,16,.92);   /* inner dark pill */
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference){
  .glow-button{ animation: glowShift 8s ease infinite; }
  @keyframes glowShift{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
  }
}
.glow-button:hover > span{
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* keep rows tidy */
#social-news .cta-row .glow-button{ margin-top: 6px; }

.bubble-border {
  display: relative;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg,#ff7eb3,#ff758c,#ffb347,#f9ff7e,#7efff7,#7e9eff,#d77eff);
  background-size: 400% 400%;
}
.bubble-border > div {
  background: rgba(15,15,16,0.85);
  padding: 10px 20px;
  border-radius: 999px;
}
.bubble-border h2,
.bubble-border h3,
.bubble-border span {
  margin: 0;
  text-align: center;
  color: #fff;
}
@media (prefers-reduced-motion: no-preference){
  .bubble-border { animation: bubbleGradient 8s ease infinite; }
  @keyframes bubbleGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

/* Instruction bubble tweaks */
.duck-instruction {
  margin-top: 1rem;
  max-width: fit-content;
  cursor: pointer;
  user-select: none;
}

.duck-instruction h4{
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #fff;
  letter-spacing: .5px;
  text-shadow:
    2px 2px 0 #ff4ecb,
    -2px -2px 0 #ff4ecb,
    0 0 10px rgba(255,0,221,.6);
}

/* Subtle inner “glass” look on the inner wrapper */
.duck-instruction > div{
  background: rgba(15,15,16,0.85);
  backdrop-filter: saturate(1.1) blur(1px);
}

/* Pulsing/glow animation */
.pulse {
  animation: duckPulse 1.8s ease-in-out infinite;
}
@keyframes duckPulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,162,136, .0); }
  50%  { transform: scale(1.04); box-shadow: 0 0 26px 8px rgba(255,162,136, .45); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,162,136, .0); }
}

/* Hover/focus states to reinforce interactivity */
.duck-instruction:hover,
.duck-instruction:focus-visible {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 24px rgba(255,162,136,.55);
  outline: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .pulse { animation: none; }
  .duck-instruction:hover,
  .duck-instruction:focus-visible {
    transform: none;
    box-shadow: 0 0 0 transparent;
  }
}

/* Only target the clickable duck bubble, not all bubble-border */
.bubble-border.duck-instruction {
  display: relative;         /* shrink to fit text */
  border-radius: 10px;           /* small rounded corners */
  padding: 36px 12px;             /* comfy spacing */
  background: rgba(0, 0, 0, 0.134); /* semi-transparent background */
  border: 2px solid #ff4ecb;     /* bright pink border */
  box-shadow: 0 0 12px rgba(255, 78, 203, 0.6);
}

/* Optional: tweak the h4 inside to fit the style */
.bubble-border.duck-instruction h4 {
  font-size: 1rem;
  margin: 0;
  color: #fff;
}

/* wrapper moved & flipped by JS */
.duck-wrap{
  position:static;          /* relative to .panel-inner (which you already have positioned) */
  left:0;                     /* start at the left edge */
  bottom:-16px;               /* your original offset */
  width:fit-content;                /* duck width */
  z-index:50;
  pointer-events:auto;
}

/* inner img floats/bounces via CSS animation */
.duck-wrap .floaty{
  animation: bounceTilt 2.4s cubic-bezier(.68,-0.55,.27,1.55) infinite; }


/* bounce + slight tilt */
@keyframes bounceFloat{
  0%,100% { transform: translateY(0) rotate(0deg); }
  40%     { transform: translateY(-15px) rotate(-1.5deg); }
  60%     { transform: translateY(-8px)  rotate(0.8deg); }
}

.panel-art img {
  max-width: 140%;      /* never exceed container width */
  height: 100%;         /* keep aspect ratio */
  display: block;       /* removes inline spacing */
  object-fit: contain;  /* makes sure the whole image fits */

}



.panel-art {
  display: flex;
  justify-content: left; /* pushes it to the right */
  align-items: center;       /* centers it vertically within panel */
}

.panel-art img {
  max-width: 120%;
  height: -200px;
}








/* =====================
   See You There section
   ===================== */


/* Section container */
#see-you-there {
  position: relative;
  background: url("images/background3.png") top / cover no-repeat;
  min-height: 102vh;                /* keep it tall */
  padding: clamp(16px, 2vh, 08px) 0;
}
:root{
  /* Position (pick any combo: set two of top/right/bottom/left) */
  --ask-bottom: auto;
  --ask-left: auto;
}

/* Stack content at the top, centered horizontally */
#see-you-there .container{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;     /* <-- top, not middle */
}

/* Bubble header sits right under the divider */
#see-you-there .section-header{
  width: 95%;
  display: flex;
  justify-content: top;
  margin-top: clamp(20px, 1vh, 50px);
}



/* Make the speech bubble part of the normal flow (not floating) */
#see-you-there .speech-bubble {
   background: rgba(0, 0, 0, 0.309);
  border: 2.1px solid rgb(3, 36, 255);
  border-radius: 12px;
  padding: 35px 12px;
  color: #ffffff;
  font-size: 1.3rem;

}


/* Glowing border buttons */
#see-you-there .pill-cta {
  border: 12px solid transparent;
  border-radius: 25px;
  padding: 8px 6px;
  font-size: 1.05rem;
  font-weight: 550;
  color: #fff;
  background: rgba(0, 0, 0, 0.519);
  position: relative;
  z-index: 1;
  cursor: pointer;
}

#see-you-there .pill-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 1.2px;
  background: linear-gradient(90deg, #00f0ff, #8a2be2, #ff00ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
  animation: glowMove 3s linear infinite;
}

@keyframes glowMove {
  60% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Glowy button outline option (reuse your pill-cta) */
.glow-outline{
  position: relative;
  border-radius: 999px;
  isolation: isolate;
}
.glow-outline::before{
  content:"";
  position:relative; inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg,#ff7eb3,#ffd15c,#7efff600,#8b5cf6,#ff7eb3);
  background-size: 200% 200%;
  filter: blur(6px);
  z-index: -1;
  opacity: .85;
  animation: glowShift 8s ease infinite;
}
@keyframes glowShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
/* Mobile: dock it full width if space is tight */
@media (max-width: 700px){
  .ask-widget{
    position: static;          /* drop into flow */
    max-width: none;
    margin-top: 12px;
  }
}

.ask-container {
  position: relative;      /* fixed position relative to nearest positioned parent */
  right: 0rem;              /* space from right */
  transform: (0%);
  transform: translateY(210%); /*moves the ask container up/down*/
  background: rgba(33, 22, 30, 0.7); /* translucent dark */
  border-radius: 16px;      /* rounded corners */
  padding: .5rem;
  width: 110%;
  box-shadow: 0 24px 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;                /* space between bubble & buttons */
  z-index: 100;
}

.ask-wrap {
  display: absolute;
  flex-direction: column;
  gap: 1rem;
}

.duck-ask-ui {
  display: relative;
  flex-direction: column;
  align-items: center;
}

.ask-container .duck-ask-ctas {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  gap: 1.5rem;
}

.ask-container .speech-bubble {
  width: 100%;
  text-align: center;
  background: white;
  padding: 1.75rem 2rem;
  border-radius: 8px;
}

.ask-container .pill-cta {
  width: 60%;
}



/* Give the page behind the wrapper a contrasting color so the border shows */
body {
  max-width: 3000px;
  margin: 0 stretch;
  padding: 0 0px;
}
.site-wrapper {
  max-width: auto;       /* content width */
  margin: 0 stretch;          /* centers horizontally */
  padding: 0 0px;          /* adds space inside adds black border */
  border: 3px solid #0d05ad;   /* optional border */
}

/* =====================
       CSS RESET + TOKENS
       ===================== */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height: 10%;}
    body{margin: 0%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:#0a0a0a;color:#e6e6e6;
      -webkit-font-smoothing:antialiased}
    img{max-width:175%;display:center} /*corner duck logo resize*/
    a{color:inherit;text-decoration:none}
    :root{
      --panel:#8989af5e;      /* cards/nav background */
      --text:#dfdfdf;       /* primary text */
      --muted:#ffffff82;      /* secondary text */
      --brand:#6726ff;      /* purple accent */
      --brand-2:#f59e0b;    /* amber accent */
      --radius:30px;
      --container:3rem;
      --shadow:0 20px 1000px #9d00ff00;
      --gap:20px;
    }
.container {
  width: 90%;            /* Make it proportional to the viewport */
  max-width: 2100px;     /* Optional: keep it from getting too wide on big screens */
  margin: 0 auto;        /* Center it horizontally */
  padding: 20px;
}


/* Hero-specific glow card */
.glow-card--hero {
  position: relative;
  z-index: 30;            /* sit above coin/background */
  display: block;
  padding: 5px;
  border-radius: 20px;
  background: linear-gradient(135deg,#2f162055,#ffd15c,#7efff67a,#8a5cf65b,#b409507d) !important;
  background-size: 200% 200%;
  max-width: 680px;
  justify-self: start;
  align-self: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.glow-card--hero .inner {
  background: rgba(15, 15, 16, 0.506) !important;
  border-radius: 18px;
  padding: 28px;
}

.glow-card--hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem,2.8vw,2.6rem);
  color: #470864;
}

.glow-card--hero p {
  margin: 0 0 18px;
  font-size: clamp(1rem,1.3vw,1.2rem);
  color: #ffffff;
}

@media (max-width: 600px) {
  .panel-art img {
    max-width: 80%;
    margin: 0 auto; /* center it */
  }
}
















/* ===== Flip cards: equal-height, no clipping (drop-in patch) ===== */

/* Let the about section expand as needed */
#about { overflow: visible; }

/* 3-up grid: make each card stretch to the tallest in the row */
.grid.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap, 28px);
  align-items: stretch;              /* key: same height across the row */
}

/* Card container: no fixed heights; perspective for 3D */
.flip-card {
  position: relative;
  overflow: hidden;                  /* hide edges during the flip */
  perspective: 1000px;
  border-radius: var(--card-radius, 16px);
}

/* The rotating wrapper becomes a one-cell grid to stack faces in-flow */
.flip-inner {
  display: grid;                     /* stack faces in one grid area */
  grid-template-areas: "faces";
  transform-style: preserve-3d;
  transition: transform .6s;
  min-height: 100%;                  /* fill the card container */
}

/* Both faces overlap in the same grid cell, but stay in-flow (no absolute) */
.flip-face {
  grid-area: faces;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;                /* override any earlier absolute rules */
  inset: auto;                       /* cancel previous 'inset:0' if present */
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* Front is normal; back is pre-rotated */
.flip-front { transform: rotateY(0); }
.flip-back  { transform: rotateY(180deg); }

/* Flip trigger (hover); if you prefer click, toggle 'is-flipped' via JS */
.flip-card:hover .flip-inner,
.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Make sure media inside faces are fluid */
.flip-front > img,
.flip-back  > img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;                 /* optional—remove if you don’t want crop */
}

/* Optional: keep inner padding consistent so height is calculated neatly */
.flip-front .body,
.flip-back  .body {
  padding: 6px 8px;
}

/* If your middle card title was nudged, you can remove those offsets now
   (the card will be taller); or keep them if you like the look. */





   
   /* Colorful pill buttons inside .glow-card */
.pill-cta {
  display: inline-block;
  padding: 12px 228px;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
  border-radius: 99px;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  box-shadow: 0 4px 15px rgba(255, 95, 109, 0.4);
  transition: all 0.3s ease;
  text-align: center;
}

/* Hover: brighter gradient, bigger glow, scale up */
.pill-cta:hover {
  background: linear-gradient(135deg, #ff7eb3, #8b5cf6, #7efff7);
  background-size: 200% 200%;
  animation: gradientShift 2s infinite linear;
  box-shadow: 0 2px 5px rgba(255, 95, 109, 0.7);
  transform: scale(1.08);
}

/* Optional animated gradient movement */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glow card inner tweak for spacing */
.glow-card .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}


/* Comic font (optional if you already load one) */
/* h4 inherits; swap for your preferred cartoon font */
.duck-instruction__text {
  font-family: 'Fredoka One', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .5px;
}

/* Sticker-y speech bubble button */
.duck-instruction {
  --bubble-bg: #141418;                     /* inner fill */
  --bubble-outline: #ffffff00;                /* thick white outline */
  --bubble-shadow: rgba(0,0,0,.35);
  --bubble-grad-1: #ebebeb;
  --bubble-grad-2: #ffd15c;
  --bubble-grad-3: #7efff7;

  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;

  /* gradient “sticker” rim */
  padding: 3px;                             /* thickness of rim */
  border-radius: 18px;
  background: linear-gradient(135deg,
              var(--bubble-grad-1),
              var(--bubble-grad-2),
              var(--bubble-grad-3),
              #ffffff,
              var(--bubble-grad-1));
  background-size: 200% 200%;
  box-shadow:
    0 10px 22px var(--bubble-shadow),
    0 2px 0 2px var(--bubble-outline) inset;/* chunky white rim */
  transition: transform .15s ease, filter .2s ease;
}

/* inner plate */
.duck-instruction__inner {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  border-radius: 15px;
  background: var(--bubble-bg);
  color: #fff;
}

/* small “tail” for the speech bubble */
.duck-instruction::after {
  content: "";
  position: absolute;
  left: 22px; bottom: -12px;
  width: 20px; height: 20px;
  background: linear-gradient(135deg,
              var(--bubble-grad-1),
              var(--bubble-grad-2));
  transform: rotate(45deg);
  border-bottom: 3px solid var(--bubble-outline);
  border-right: 3px solid var(--bubble-outline);
  box-shadow: 6px 8px 14px var(--bubble-shadow);
  z-index: -1; /* sits under the inner plate but above bg */
}

/* emoji size pop */
.duck-instruction__emoji { font-size: 2.25rem; }

/* fun hover/focus wiggle */
.duck-instruction:hover .duck-instruction__inner,
.duck-instruction:focus-visible .duck-instruction__inner {
  animation: duckWiggle .45s ease both;
  filter: brightness(1.06);
}

@keyframes duckWiggle {
  0%   { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(-2.5deg) translateY(-1px); }
  50%  { transform: rotate(2deg) translateY(0); }
  75%  { transform: rotate(-1.5deg) translateY(-1px); }
  100% { transform: rotate(0deg) translateY(0); }
}

/* subtle animated gradient on the rim (respect motion) */
@media (prefers-reduced-motion: no-preference){
  .duck-instruction { animation: duckRim 8s linear infinite; }
  @keyframes duckRim {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

/* pressed/click feedback */
.duck-instruction:active { transform: translateY(1px) scale(.99); }

/* accessibility focus ring */
.duck-instruction:focus-visible {
  outline: 3px solid #8b5cf6;
  outline-offset: 4px;
}
.duck-instruction {
  padding: 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7eb3, #ffd15c, #7efff7, #8b5cf6, #ff7eb3);
  background-size: 200% 200%;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.2),
    0 0 10px rgba(255, 255, 255, 0.7), /* soft white glow */
    0 0 20px rgba(255, 215, 0, 0.6);   /* gold outer glow */
  animation: borderGlow 2s infinite alternate;
}

/* Animation keyframes for glow effect */
@keyframes borderGlow {
  0% {
    box-shadow:
      0 10px 22px rgba(0,0,0,0.2),
      0 0 8px rgba(255, 255, 255, 0.6),
      0 0 14px rgba(255, 215, 0, 0.5);
  }
  100% {
    box-shadow:
      0 10px 22px rgba(0,0,0,0.2),
      0 0 18px rgba(255, 255, 255, 0.8),
      0 0 30px rgba(255, 215, 0, 0.8);
  }
}

/* =====================
   CONTACT / FAQ SECTION
   ===================== */
   :root{
    --contact-overlay: rgba(0, 0, 8, 0.024);
  }
  
  #contact.contact{
    position: relative;
    padding: 100px 0;
    background:
      linear-gradient(var(--contact-overlay), var(--contact-overlay)),
      url("images/background5.png") center / cover no-repeat;
    border-top: 1px solid rgba(12, 9, 9, 0.967);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  
  .contact-grid{
    display: grid;
    gap: var(--panel-gap, 28px);
    grid-template-columns: 1fr 1.2fr; /* left: contact, right: faq */
  }
  @media (max-width: 980px){
    .contact-grid{ grid-template-columns: 1fr; }
  }
  
  /* Contact card */
  .contact-card .inner{
    padding: 18px 18px;
  }
  .contact-title{
    margin: 0 0 10px 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  }
  
  /* FAQ accordion (uses <details>) */
  .faq{
    display: grid;
    gap: 12px;
  }
  .faq-item{
    border-radius: 19px;
    overflow: hidden;
  }
  .faq-item summary{
    cursor: pointer;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 19px 18px;
    font-weight: 700;
    user-select: none;
  }
  .faq-item summary::-webkit-details-marker{ display: none; }
  
  .faq-item .chev{
    width: 22px; height: 22px; flex: none; opacity: .9;
    transition: transform .25s ease;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .faq-item[open] summary .chev{ transform: rotate(180deg); }
  
  .faq-item .inner{
    padding: 0 18px 16px 18px;
  }
  
  /* Make the glow cards hug content so gradients don't stretch weirdly */
  .contact .glow-card{
    flex: 0 0 auto;
    display: inline-block;
    width: 100%;
    background-size: 600px 600px;   /* fixed size to avoid “long glow” at wide widths */
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /* Pill CTA inside contact card */
  .contact .pill-cta{
    margin-top: 10px;
  }
  
  /* Bubble header tweak for contrast on this background */
  #contact .bubble-border > div{
    background: rgba(23, 23, 28, 0.693);
  }

  .contact-box {
    display: flex;
    flex-direction: column;
    gap: 12px; /* space between items */
  }
  
  .email-button {
    background: var(--brand);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    display: inline-block;
    font-weight: 700;
  }
  
  .email-note {
    font-size: 0.95rem;
    opacity: 0.75;
    margin-top: 4px; /* space under button */
  }









  /* Make contact cards & FAQ panels a bit transparent */
#contact .glow-card .inner,
#contact .faq-panel {
  background-color: rgba(15, 13, 13, 0.404); /* 75% opaque black */
}

/* Or if you don't have a solid bg on them and want to fade whole element */
#contact .glow-card,
#contact .faq-panel {
  background-color: rgba(255, 255, 255, 0); /* white w/ 85% opacity */
}

#contact .contact-content {
  opacity: 1; /* 90% visible, 10% transparent */
}



/* ===========================
   Tokenomics: tidy the cards
   (scoped so other sections keep their look)
   =========================== */
   #tokenomics .glow-card {
    /* kill the animated rainbow bg just for this section */
    background: rgba(18, 18, 22, 0.78) !important;   /* subtle glassy panel */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    filter: none;                                     /* remove heavy drop-shadow */
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),                 /* soft base */
      inset 0 1px 0 rgba(255,255,255,0.06);           /* gentle top highlight */
  }
  
  #tokenomics .glow-card .inner {
    background: visible;                          /* no inner dark slab */
    border-radius: inherit;
    padding: 14px 16px;                               /* tighter padding */
  }
  
  /* Stats: improve hierarchy */
  #tokenomics .stat .label {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  #tokenomics .stat .value {
    color: #ffffff;
    font-weight: 800;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.15;
  }
  
  /* Callouts: cleaner headings + copy */
  #tokenomics .callout h3 {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 800;
  }
  #tokenomics .callout p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  /* Grid spacing + alignment tweaks */
  #tokenomics .stats-grid {
    gap: 12px;                                        /* a bit tighter */
  }
  #tokenomics .split-grid {
    gap: 12px;
  }
  
  /* Micro-interaction without jumpy glow */
  #tokenomics .glow-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0px 64px rgba(255, 9, 181, 0.729),
      inset 0 1px 0 rgb(255, 3, 3);
    transition: transform .18s ease, box-shadow .18s ease;
  }


  #contact .glow-card:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0px 64px rgba(255, 9, 181, 0.729),
      inset 0 1px 0 rgb(255, 3, 3);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  #contact .glow-card {
    /* kill the animated rainbow bg just for this section */
    background: rgba(18, 18, 22, 0.78) !important;   /* subtle glassy panel */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    filter: none;                                     /* remove heavy drop-shadow */
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.35),                 /* soft base */
      inset 0 1px 0 rgba(255,255,255,0.06);           /* gentle top highlight */
  }



 
 
 
/* Keep CA under coin and centered */
.coin-container {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow: visible;
}
.coin { position: relative; z-index: 1; }                  /* coin below */

/* Glowing, copyable contract address */
.contract-address{
  position: relative;
  margin-top: clamp(15px, 3vw, 30px);
  font-size: clamp(1.95rem, 1.6vw, 1.15rem);
  font-weight: 800;
  letter-spacing: .04em;
  color:#fff;
  text-align:center;
  cursor: pointer;
  user-select: text;
  z-index: 2;
  transform: translateZ(0);

  text-shadow:
    0 0 5px rgba(255,255,255,.85),
    0 0 10px rgba(0,255,255,.75),
    0 0 20px rgba(0,220,255,.6);
  transition: text-shadow .25s ease, transform .15s ease;
}
.contract-address:hover,
.contract-address:focus{
  outline: none;
  transform: translateY(-1px);
  text-shadow:
    0 0 8px rgba(255,255,255,.95),
    0 0 16px rgba(0,255,255,.85),
    0 0 28px rgba(0,220,255,.7);
}

/* Tiny toast that appears below the CA after copy */
.copy-toast{
  margin-top: 6px;
  font-size: .85rem;
  color: rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  transform: translateY(-4px);
}
.copy-toast.show{
  opacity: 1;
  transform: translateY(0);
}

.contract-address{
  transform-style: flat;   /* prefer flat rendering for this element */
  will-change: transform;  /* hint for layer promotion */
}