/* ===== Base theme (unchanged foundation, cleaned) ===== */
:root{
  --bg:#0b0f14;
  --panel:rgba(255,255,255,.06);
  --text:#e8eef8;
  --muted:#a3b0c2;
  --brand:#18c964;
  --brand2:#7cf6d7;
  --gold:#ffd166;
  --gold2:#ffea9f;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0;
  font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

img,svg,canvas,video{ max-width:100%; height:auto }

/* ===== Background ambience ===== */
.bg-wrap{position:fixed; inset:0; z-index:-2; overflow:hidden;}
.bg-grad-1, .bg-grad-2{
  position:absolute; inset:-20%;
  background: radial-gradient(60% 60% at 20% 10%, rgba(24,201,100,.18), transparent 60%),
              radial-gradient(50% 50% at 85% 15%, rgba(124,246,215,.12), transparent 60%);
  animation: float1 22s ease-in-out infinite;
}
.bg-grad-2{ animation: float2 28s ease-in-out infinite; mix-blend-mode: screen; }
.bg-noise{
  position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 20 20'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='1' cy='1' r='.6'/%3E%3Ccircle cx='10' cy='4' r='.5'/%3E%3Ccircle cx='6' cy='12' r='.5'/%3E%3Ccircle cx='16' cy='16' r='.5'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-orb{
  position:absolute; width:900px; height:900px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,209,102,.22), transparent 70%);
  right:-200px; bottom:-200px; filter: blur(6px);
  animation: orb 18s ease-in-out infinite alternate;
}
@keyframes float1{ 50%{ transform: translate3d(0,-20px,0) scale(1.02);} }
@keyframes float2{ 50%{ transform: translate3d(-20px,10px,0) scale(1.03);} }
@keyframes orb{ 50%{ transform: translate3d(-60px,-30px,0) scale(1.08);} }

/* ===== Buttons / Pills ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 20px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  font-weight:800; letter-spacing:.2px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn.big{ padding:16px 24px; font-size:18px; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(24,201,100,.22) }
.btn.primary{ background:linear-gradient(180deg, var(--brand), #0fb85d); color:#012414; border:none }
.btn.glass{ backdrop-filter: blur(6px) saturate(120%); background:#121822; border:1px solid rgba(255,255,255,.08); color:#e9f1ff }

/* ===== Nav ===== */
.nav{
  position: sticky; top: 0; z-index: 20;
  background:#0a0a0a;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* brand | links | cta */
  align-items:center;
  height:64px;
}
.nav .brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800 }
.nav .brand img{ width:28px; height:28px; border-radius:999px; display:block }
.nav .links{ justify-self:center; display:inline-flex; gap:22px; font-weight:700; letter-spacing:.02em }
.nav .cta{ justify-self:end }

/* Mobile nav scroll */
@media (max-width:720px){
  .nav-inner{ display:flex; gap:10px; padding:10px 12px }
  .nav .links{
    flex:1 1 auto; justify-content:center; gap:18px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:4px 0;
  }
  .nav .links::-webkit-scrollbar{ display:none }
  .nav .cta .btn{ min-width:64px; height:36px; padding:0 14px }
}

/* ===== Hero ===== */
.hero{ padding:56px 0 20px; }
.brand-pill{ display:inline-flex; padding:10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--muted); font-weight:600 }
.giant{
  font-family:'Comfortaa', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:clamp(56px,12vw,140px); line-height:.95; margin:6px 0 0; letter-spacing:.22em;
}
.gradient-text{ background:linear-gradient(180deg,var(--gold2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 10px 40px rgba(255,209,102,.15) }
.tagline{ font-family:'Playfair Display', Georgia, serif; font-size:clamp(18px,2.1vw,26px); color:var(--brand2); font-style:italic; margin-top:-6px }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px }

/* Mascot (no box) */
.hero-art{ position:relative; overflow:hidden; display:flex; justify-content:center; align-items:center; padding:40px 0; background: radial-gradient(circle at center, rgba(0,0,0,0.32) 0%, transparent 70%) }
.hero-art::before{
  content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:46px 46px; opacity:.45; animation: starFloat 40s linear infinite; pointer-events:none;
}
.hero-art img{ position:relative; z-index:1 }
.mascot{ display:block; max-width:65%; height:auto; filter:drop-shadow(0 12px 30px rgba(0,0,0,.3)); transition:transform .3s ease }
.mascot:hover{ transform:scale(1.02) }
@keyframes starFloat{ from{transform:translateY(0)} to{transform:translateY(-100%)} }

/* ===== Sections ===== */
.section{ padding:64px 0; border-top:1px solid rgba(255,255,255,.06) }
.section .container > * + *{ margin-top:28px }

/* Tokenomics highlights */
.tokey{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.tokey .item{ padding:14px; border-radius:12px; background:var(--panel); border:1px solid rgba(255,255,255,.1) }
.tokey .item h3{ margin:0; color:var(--muted); font-size:13px }
.tokey .item p{ margin:6px 0 0; font-size:18px; font-weight:800 }
@media (max-width:900px){ .tokey{ grid-template-columns:1fr 1fr } }
@media (max-width:540px){ .tokey{ grid-template-columns:1fr } }

/* Data table */
table{ width:100%; border-collapse:collapse }
th,td{ padding:10px; border-bottom:1px solid rgba(255,255,255,.08) }
th{text-align:left; color:var(--muted); font-size:13px}

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.step{ padding:14px; border-radius:12px; background:var(--panel); border:1px solid rgba(255,255,255,.1) }
.step .num{
  width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-weight:900; color:#012414;
  background:linear-gradient(180deg, rgba(24,201,100,.95), rgba(24,201,100,.7)); margin-bottom:8px
}
@media (max-width:860px){ .steps{ grid-template-columns:1fr } }

/* Buy rail */
.buy{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap }
.note{ font-size:13px; color:var(--muted) }

/* Footer */
.footer{ padding:48px 0 72px; color:var(--muted); border-top:1px solid rgba(255,255,255,.10) }
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px; align-items:center }
.footer .brand{ display:flex; align-items:center; gap:10px }
.footer .links{ display:flex; gap:14px; justify-content:flex-end }
.copy{ grid-column:1/-1; text-align:center; margin-top:8px }

/* ===== Mobile & small tablets ===== */
@media (max-width:720px){
  .container{ padding:0 16px }
  .section{ padding:40px 0 }
  .section .container > * + *{ margin-top:20px }

  .hero{ padding-top:28px }
  .giant{ font-size:clamp(40px,16vw,64px); letter-spacing:.12em }
  .hero-art{ margin-top:16px }
  .hero-art .mascot{ width:min(420px,78vw); filter:drop-shadow(0 12px 24px rgba(0,0,0,.45)) }

  .hero-cta, .actions{ gap:10px }
  .btn{ width:100%; height:44px; justify-content:center }

  .steps{ grid-template-columns:1fr; gap:14px }
  .step{ padding:16px; border-radius:16px }

  /* Tokenomics table → stacked cards */
  .tokey table, .tokey thead, .tokey tbody, .tokey th, .tokey td, .tokey tr{ display:block; width:100% }
  .tokey thead{ display:none }
  .tokey tr{
    margin:0 0 12px; background:#0f141c; border:1px solid rgba(255,255,255,.10);
    border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.35)
  }
  .tokey td{ border-top:none !important; padding:10px 12px }
  .tokey td::before{ content:attr(data-label); display:block; font-weight:800; opacity:.85; margin-bottom:2px }
}

/* Mid tablets */
@media (min-width:721px) and (max-width:1024px){
  .container{ padding:0 20px }
  .steps{ grid-template-columns:repeat(2,1fr) }
}

/* === Frumo: hero alignment & mascot size (patch) === */
.hero .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;            /* centers badge, FRUMO, tagline, and CTAs */
}

/* Smaller mascot on desktop */
.mascot{ max-width:48% !important; height:auto }

/* Comfortable mascot size on phones/tablets */
@media (max-width:720px){
  .hero-art .mascot{
    width:min(360px,68vw) !important;
    max-width:68% !important;
  }
}

/* === Frumo: Hero alignment & mascot size (final patch) === */

/* Center hero text and buttons */
.hero .hero-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* Adjust tagline and badge to center nicely */
.hero .brand-pill,
.hero .giant,
.hero .tagline,
.hero .hero-cta {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Scale mascot appropriately on desktop */
.hero-art img.mascot {
  max-width: 48% !important;
  height: auto !important;
}

/* Scale mascot appropriately on mobile */
@media (max-width: 720px) {
  .hero-art img.mascot {
    max-width: 70% !important;
    width: min(360px, 70vw) !important;
    margin: 0 auto !important;
  }
}



/* === Hero spacing: add room between badge and FRUMO title === */
.hero .brand-pill{
  margin-bottom: 14px !important;  /* space below "Born of Doge & Pepe..." */
}
.giant{
  margin-top: 10px !important;     /* gentle gap before the big title block */
}

/* === Mascot sizing: keep it reasonable on large desktops too === */
.hero-art img.mascot{
  max-width: 46% !important;       /* down from 48–65% that crept back */
}
@media (min-width: 1280px){
  .hero-art img.mascot{ max-width: 42% !important; } /* extra guard on ultrawide */
}
@media (max-width: 720px){
  .hero-art img.mascot{
    max-width: 68% !important;     /* comfy phone/tablet size */
    width: min(360px, 68vw) !important;
  }
}

/* === Last section (“How to Buy”) alignment fixes === */
#how .container{
  display: flex;
  flex-direction: column;
  align-items: left;              /* center section contents */
  gap: 16px;
}
#how .steps{
  width: 100%;
  max-width: var(--maxw);
}
#how .buy{
  width: 100%;
  max-width: var(--maxw);           /* keep the rail aligned with the grid */
  align-items: center;
}
#how .buy .actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;          /* center the three CTAs */
}
#how .buy .actions .btn{
  min-width: 200px;                 /* consistent tap targets */
}

/* small polish for footer alignment, just in case */
@media (max-width: 900px){
  .footer .links{ justify-content: left; }
}



/* Contract box aligned properly */
#how .contract-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  margin: 20px auto 30px;
  max-width: 1200px; /* match width of step cards above */
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}

/* Address styling */
#how .contract-box #addr {
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/* Button actions layout */
#how .contract-box .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* Ensure buttons are consistent in size */
#how .contract-box .actions .btn {
  flex: 1 1 180px;
  max-width: 250px;
  text-align: center;
}

/* Mobile view adjustments */
@media (max-width: 768px) {
  #how .contract-box {
    padding: 16px;
    gap: 10px;
  }
  #how .contract-box .actions .btn {
    flex: 1 1 100%;
    max-width: none;
  }
}





/* ---- Contract box: perfect alignment & equal-height buttons ---- */

/* center the heading + address block */
#how .contract-box > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* lock the box to the same visual width as the step cards */
#how .contract-box{
  width:100%;
  max-width: var(--maxw, 1200px);     /* falls back to 1200px if --maxw not defined */
  margin-left:auto;
  margin-right:auto;
  padding:22px 24px;
}

/* actions row: even columns, same height, perfectly centered */
#how .contract-box .actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  gap:14px;
  align-items:stretch;                 /* make cells same height */
  justify-items:center;
  width:100%;
}

/* buttons: equal height & centered label */
#how .contract-box .actions .btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:56px;                         /* equalize button heights */
  min-width:210px;
  width:100%;                          /* fill grid cell */
}

/* address chip polish */
#how .contract-box #addr{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  font-size:0.98rem;
}

/* responsive: stack buttons 1 per row on phones; 2 per row on tablets */
@media (max-width: 1024px){
  #how .contract-box .actions{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 640px){
  #how .contract-box .actions{ grid-template-columns: 1fr; }
  #how .contract-box .actions .btn{ min-width: 100%; }
}

/* footer mascot: a touch smaller for balance */
.footer .brand img,
.footer .brand svg{ width:40px; height:40px; object-fit:contain; }


/* ---- Footer Alignment Fix ---- */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center everything horizontally */
  justify-content: center;
  text-align: center;
  padding: 20px 0;
  gap: 10px; /* Space between logo/links and text */
}

.footer .brand {
  display: flex;
  align-items: center;
  gap: 8px; /* Space between mascot and text */
}

.footer .brand img,
.footer .brand svg {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.footer .links {
  display: flex;
  gap: 20px; /* Even spacing between footer links */
  justify-content: center;
}

.footer p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}


/* === Footer: final alignment normalize === */
.footer{
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center all footer items */
  text-align: center;
  gap: 8px;
}

/* Put brand and links on the same centered row */
.footer .brand,
.footer .links{
  max-width: var(--maxw, 1200px);
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  gap: 24px;
  margin: 0 auto !important;
  float: none !important;       /* kill any legacy float */
}

/* Small, tidy mascot in footer */
.footer .brand img,
.footer .brand svg{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Copyright line */
.footer .legal, 
.footer p{
  margin: 0;
  width: 100%;
  text-align: center !important;
  opacity: .9;
}

/* Mobile: stack cleanly */
@media (max-width: 640px){
  .footer .links{ gap: 16px; flex-wrap: wrap; }
  .footer .brand{ gap: 10px; }
}



/* Footer: make brand + links share the same centerline as © */
.footer{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* New wrapper: center as a single unit */
.footer-top{
  display: flex;
  align-items: center;
  justify-content: center;   /* <- guarantees shared center with © line */
  gap: 28px;
  width: 100%;
  margin: 0 auto;
}

/* Brand row */
.footer .brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer .brand img,
.footer .brand svg{
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Links row */
.footer .links{
  display: inline-flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
}

/* Kill any legacy layout that might fight the centering */
.footer .brand,
.footer .links{
  float: none !important;
  grid-area: auto !important;
  justify-self: center !important;
  place-self: center !important;
  width: auto !important;          /* shrink-to-content */
  margin: 0 !important;
}

/* Copyright line */
.footer .legal{
  margin: 0;
  opacity: .9;
}

/* Mobile tidy */
@media (max-width: 640px){
  .footer-top{ flex-wrap: wrap; gap: 16px; }
  .footer .links{ gap: 16px; }
}

/* --- Footer logo: fix mobile "square" --- */
.footer .footer-logo {
  display: inline-block !important;
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: transparent !important;   /* kill colored box backgrounds */
  background-image: none !important;    /* if a bg image is injected */
  border-radius: 0 !important;
  -webkit-mask: none !important;        /* disable any mask-image on mobile */
  mask: none !important;
  -webkit-filter: none !important;
  filter: none !important;
  content: normal !important;           /* neutralize icon-font style resets */
}

/* Some mobile utilities target all images/icons inside .brand – neutralize them */
.footer .brand img,
.footer .brand svg {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* If an icon class is used by mistake, force it to not paint a square */
.footer .brand [class*="icon"],
.footer .brand [class^="icon"] {
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Mobile size */
@media (max-width: 640px) {
  .footer .footer-logo,
  .footer .brand img,
  .footer .brand svg {
    width: 28px;
    height: 28px;
  }
}




/* ===== Premium background (behind everything) ===== */
#frumo-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* soft space glow so it isn't a plain canvas */
  background:
    radial-gradient(80vmax 80vmax at 85% 70%, rgba(24,148,96,.25), transparent 60%),
    radial-gradient(90vmax 90vmax at 5% 10%, rgba(11,168,105,.12), transparent 55%),
    #0b1013; /* fallback base */
}

/* ===== Hero centering & spacing (non-destructive) ===== */
/* Add this to your existing hero container. If your hero section has a .hero class,
   these will apply. If your hero doesn't, you can safely add class="hero section"
   to that existing hero <section> without changing content. */
.hero .wrap{
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
  padding-top: clamp(56px, 10vh, 140px);
}

.hero .wrap > *{
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow (“Born of Doge & Pepe…”) */
.hero .eyebrow,
.hero .chip,
.hero .badge,
.hero .pretitle{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .95rem;
  line-height: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  margin-bottom: 18px; /* extra space above FRUMO */
}

/* Big “FRUMO” title – keep your fonts, just add glow & centering */
.hero h1{
  text-align: center;
  letter-spacing: .12em;
  text-shadow: 0 10px 40px rgba(255,240,200,.06);
  margin: 0 0 10px 0;
}

/* Subhead “the people’s frog-dog” */
.hero .subhead,
.hero .kicker,
.hero p.subtitle{
  text-align: center;
  margin-bottom: 20px;
}

/* CTA row under hero */
.hero .cta-row{
  display: inline-flex;
  gap: .8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Mascot sizing (hero image) – keeps it premium but not huge */
.hero .mascot,
#hero-mascot,
img.hero-mascot{
  width: min(560px, 72vw);
  max-width: 100%;
  height: auto;
  display: block;
  margin: clamp(18px, 4vh, 28px) auto 0;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,.35));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #frumo-bg{ background-attachment: fixed; }
}





/* --- BUY CARD: mobile layout + long-address wrapping --- */
@media (max-width: 768px) {
  /* make the whole card breathe a bit on mobile */
  #buy.panel,
  #buy.card {
    padding: 20px 18px;
  }

  /* Contract label spacing */
  #buy .muted {
    display: block;
    margin-bottom: 8px;
  }

  /* The address itself: force wrap and keep it readable */
  #buy code#addr {
    display: block;
    max-width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    line-height: 1.35;
    font-size: 14px;
    overflow: hidden;

    /* The key bits to prevent overflow: */
    word-break: break-word;       /* modern */
    overflow-wrap: anywhere;      /* modern */
    word-wrap: break-word;        /* legacy fallback */
  }

  /* Stack actions vertically with nice spacing */
  #buy .actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
  }

  /* Full-width buttons on mobile */
  #buy .actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* Optional: very small phones */
@media (max-width: 380px) {
  #buy code#addr {
    font-size: 13px;
    padding: 10px 12px;
  }
  #buy .actions .btn {
    padding: 12px 14px;
    font-size: 15px;
  }
}