/* =========================================================
   $POTUS — THE PRESIDENT OF MEMECOINS
   Core stylesheet
   ========================================================= */

:root{
  --gold:#f4c542;
  --goldBright:#ffe27a;
  --goldDeep:#b8860b;
  --ink:#07070a;
  --inkSoft:#111116;
  --panel:#141419;
  --panelBorder:rgba(244,197,66,0.18);
  --text:#f4f1e8;
  --textMuted:#b9b6ac;
  --red:#b32134;
  --blue:#1a2a5e;
  --radius:18px;
  --maxWidth:1180px;
  --shadowGold:0 0 40px rgba(244,197,66,0.25);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Poppins',system-ui,Segoe UI,Arial,sans-serif;
  background:var(--ink);
  color:var(--text);
  overflow-x:hidden;
}

body.navOpen{overflow:hidden;}

img{max-width:100%;display:block;}

a{color:inherit;text-decoration:none;}

.container{
  width:100%;
  max-width:var(--maxWidth);
  margin:0 auto;
  padding:0 24px;
}

h1,h2,h3,h4{
  font-family:'Playfair Display',Georgia,serif;
  margin:0 0 16px;
  letter-spacing:0.5px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  margin-bottom:14px;
}

.icon{
  width:22px;
  height:22px;
  display:block;
  flex-shrink:0;
}

.eyebrow::before{
  content:"";
  width:26px;
  height:2px;
  background:var(--gold);
  display:inline-block;
}

.gradientText{
  background:linear-gradient(120deg,var(--goldDeep),var(--goldBright) 40%,var(--gold) 70%,var(--goldDeep));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 6s linear infinite;
}

@keyframes shine{
  to{background-position:200% center;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.5px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease;
}

.btn:hover{transform:translateY(-3px);}

.btnPrimary{
  background:linear-gradient(135deg,var(--goldBright),var(--gold) 55%,var(--goldDeep));
  color:#1a1200;
  box-shadow:var(--shadowGold);
}

.btnPrimary:hover{box-shadow:0 0 55px rgba(244,197,66,0.45);}

.btnGhost{
  background:transparent;
  border:1px solid var(--panelBorder);
  color:var(--text);
}

.btnGhost:hover{border-color:var(--gold);color:var(--gold);}

/* Navbar */
.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  padding:16px 0;
  background:rgba(7,7,10,0.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(244,197,66,0.08);
  transition:background .3s ease,padding .3s ease;
}

.navbar.scrolled{
  padding:10px 0;
  background:rgba(7,7,10,0.9);
}

.navInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Playfair Display',serif;
  font-size:22px;
  font-weight:700;
  color:var(--text);
}

.brand img{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid var(--gold);
  object-fit:cover;
}

.navLinks{
  display:flex;
  align-items:center;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}

.navLinks a{
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0.3px;
  color:var(--textMuted);
  position:relative;
  padding:4px 0;
  white-space:nowrap;
  transition:color .2s ease;
}

.navLinks a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width .25s ease;
}

.navLinks a:hover{color:var(--gold);}
.navLinks a:hover::after{width:100%;}

.navCta{display:flex;align-items:center;gap:10px;}

.navCta .btn{padding:11px 20px;font-size:13.5px;}

.navToggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}

.navToggle span{
  width:26px;
  height:2px;
  background:var(--gold);
  display:block;
  transition:transform .3s ease,opacity .3s ease;
}

.navbar.open .navToggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.navbar.open .navToggle span:nth-child(2){opacity:0;}
.navbar.open .navToggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* Hero */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:140px 0 90px;
  overflow:hidden;
}

.heroBg{
  position:absolute;
  inset:0;
  background:url("assets/img/hero.jpg") center 20% / cover no-repeat;
  z-index:0;
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(244,197,66,0.16), transparent 55%),
    linear-gradient(180deg, rgba(7,7,10,0.55) 0%, rgba(7,7,10,0.75) 55%, var(--ink) 100%);
  z-index:1;
}

.heroStars{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:radial-gradient(2px 2px at 20% 30%, rgba(244,197,66,0.5), transparent),
                    radial-gradient(2px 2px at 70% 60%, rgba(244,197,66,0.4), transparent),
                    radial-gradient(1.5px 1.5px at 40% 80%, rgba(244,197,66,0.4), transparent),
                    radial-gradient(1.5px 1.5px at 85% 20%, rgba(244,197,66,0.4), transparent),
                    radial-gradient(1.5px 1.5px at 55% 15%, rgba(244,197,66,0.35), transparent);
  opacity:.8;
}

.heroContent{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

.heroFlagRow{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  color:var(--gold);
}

.heroFlagRow .iconStar{width:14px;height:14px;}
.heroFlagRow .iconCoin{width:30px;height:30px;}

.heroTitle{
  font-size:clamp(48px,9vw,110px);
  line-height:0.95;
  margin-bottom:18px;
  text-shadow:0 0 60px rgba(244,197,66,0.35);
}

.heroSub{
  font-size:clamp(16px,2.4vw,22px);
  color:var(--textMuted);
  max-width:620px;
  margin:0 auto 34px;
  font-weight:400;
}

.heroSub strong{color:var(--gold);font-weight:600;}

.heroButtons{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:56px;
}

/* Coming soon badge */
.comingSoonBadge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 28px;
  border-radius:999px;
  border:1px solid var(--panelBorder);
  background:rgba(20,20,25,0.55);
  backdrop-filter:blur(6px);
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gold);
}

.pulseDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(244,197,66,0.6);
  animation:pulseDot 1.8s ease-in-out infinite;
  flex-shrink:0;
}

@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(244,197,66,0.55);}
  70%{box-shadow:0 0 0 10px rgba(244,197,66,0);}
  100%{box-shadow:0 0 0 0 rgba(244,197,66,0);}
}

/* Ticker */
.ticker{
  position:relative;
  z-index:2;
  background:var(--gold);
  color:var(--ink);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(0,0,0,0.15);
  border-bottom:1px solid rgba(0,0,0,0.15);
}

.tickerTrack{
  display:inline-flex;
  align-items:center;
  gap:40px;
  animation:scrollTicker 30s linear infinite;
  font-weight:700;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.tickerTrack span{display:inline-flex;align-items:center;gap:40px;}

@keyframes scrollTicker{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Sections */
section{
  position:relative;
  padding:110px 0;
}

.sectionHead{
  text-align:center;
  max-width:680px;
  margin:0 auto 60px;
}

.sectionHead h2{
  font-size:clamp(30px,4.5vw,46px);
}

.sectionHead p{
  color:var(--textMuted);
  font-size:16px;
  line-height:1.7;
}

/* About */
.about{
  background:radial-gradient(ellipse at 80% 0%, rgba(244,197,66,0.06), transparent 60%);
}

.aboutGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.aboutImgWrap{
  position:relative;
}

.aboutImgWrap img{
  border-radius:24px;
  border:1px solid var(--panelBorder);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

.aboutImgGlow{
  position:absolute;
  inset:-30px;
  background:radial-gradient(circle, rgba(244,197,66,0.25), transparent 65%);
  z-index:-1;
  filter:blur(10px);
}

.aboutText p{
  color:var(--textMuted);
  line-height:1.85;
  font-size:16px;
  margin-bottom:18px;
}

.aboutText p strong{color:var(--gold);}

.aboutStats{
  display:flex;
  gap:30px;
  margin-top:36px;
  flex-wrap:wrap;
}

.aboutStat{
  border-left:2px solid var(--gold);
  padding-left:14px;
}

.aboutStat b{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:26px;
  color:var(--goldBright);
}

.aboutStat span{
  font-size:13px;
  color:var(--textMuted);
  letter-spacing:0.5px;
}

/* Features */
.features{
  background:var(--inkSoft);
}

.featureGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.featureCard{
  background:var(--panel);
  border:1px solid var(--panelBorder);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease;
}

.featureCard:hover{
  transform:translateY(-8px);
  border-color:var(--gold);
}

.featureImg{
  height:220px;
  overflow:hidden;
}

.featureImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

.featureCard:hover .featureImg img{transform:scale(1.08);}

.featureBody{padding:26px 24px 30px;}

.featureBody h3{
  font-size:20px;
  color:var(--text);
  margin-bottom:10px;
}

.featureBody p{
  color:var(--textMuted);
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}

/* Tokenomics */
.tokenomics{
  background:radial-gradient(ellipse at 20% 20%, rgba(244,197,66,0.08), transparent 55%);
}

.tokenGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.tokenCards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.tokenCard{
  background:var(--panel);
  border:1px solid var(--panelBorder);
  border-radius:16px;
  padding:26px 22px;
  text-align:center;
}

.tokenCard .num{
  font-family:'Playfair Display',serif;
  font-size:30px;
  color:var(--goldBright);
  margin-bottom:6px;
}

.tokenCard .lbl{
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--textMuted);
}

.tokenImgWrap img{
  border-radius:24px;
  border:1px solid var(--panelBorder);
  box-shadow:0 30px 80px rgba(0,0,0,0.6);
}

/* How To Buy */
.howto{background:var(--inkSoft);}

.stepsGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.stepCard{
  position:relative;
  padding:36px 26px;
  border-radius:var(--radius);
  border:1px solid var(--panelBorder);
  background:var(--panel);
}

.stepNum{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:19px;
  color:#1a1200;
  background:linear-gradient(135deg,var(--goldBright),var(--goldDeep));
  margin-bottom:20px;
}

.stepCard h3{font-size:18px;margin-bottom:10px;}
.stepCard p{color:var(--textMuted);font-size:14.5px;line-height:1.7;margin:0;}

/* Roadmap */
.roadmap{
  background:radial-gradient(ellipse at 70% 30%, rgba(244,197,66,0.07), transparent 55%);
}

.roadmapList{
  max-width:780px;
  margin:0 auto;
  position:relative;
}

.roadmapList::before{
  content:"";
  position:absolute;
  left:23px;
  top:10px;
  bottom:10px;
  width:2px;
  background:linear-gradient(180deg,var(--gold),transparent);
}

.roadmapItem{
  position:relative;
  padding-left:70px;
  margin-bottom:44px;
}

.roadmapItem:last-child{margin-bottom:0;}

.roadmapDot{
  position:absolute;
  left:0;
  top:0;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--panel);
  border:2px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
}

.roadmapDot .icon{width:22px;height:22px;}

.roadmapItem h3{
  font-size:18px;
  margin-bottom:8px;
  color:var(--text);
}

.roadmapItem span.phase{
  color:var(--gold);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  font-weight:600;
  display:block;
  margin-bottom:6px;
}

.roadmapItem p{
  color:var(--textMuted);
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}

/* Community */
.community{
  text-align:center;
  background:var(--inkSoft);
}

.socialGrid{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:20px;
}

.socialCard{
  width:170px;
  padding:30px 18px;
  border-radius:var(--radius);
  border:1px solid var(--panelBorder);
  background:var(--panel);
  transition:transform .25s ease,border-color .25s ease;
}

.socialCard:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
}

.socialIcon{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--panelBorder);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  color:var(--gold);
  transition:border-color .25s ease,background .25s ease;
}

.socialCard:hover .socialIcon{
  border-color:var(--gold);
  background:rgba(244,197,66,0.08);
}

.socialIcon .icon{width:22px;height:22px;}

.socialCard{text-align:center;}
.socialCard b{display:block;font-size:15px;}

/* CTA banner */
.ctaBanner{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:70px 40px;
  text-align:center;
  background:linear-gradient(135deg, rgba(244,197,66,0.14), rgba(179,33,52,0.1));
  border:1px solid var(--panelBorder);
}

.ctaBanner h2{font-size:clamp(28px,4vw,42px);}
.ctaBanner p{color:var(--textMuted);max-width:520px;margin:0 auto 30px;}

/* Footer */
footer{
  padding:50px 0 30px;
  border-top:1px solid var(--panelBorder);
  background:var(--ink);
}

.footerInner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
}

.footerBrand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Playfair Display',serif;
  font-size:20px;
}

.footerBrand img{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--gold);object-fit:cover;
}

.footerLinks{
  display:flex;
  gap:26px;
  list-style:none;
  padding:0;margin:0;
  flex-wrap:wrap;
}

.footerLinks a{color:var(--textMuted);font-size:14px;}
.footerLinks a:hover{color:var(--gold);}

.footerSocials{
  display:flex;
  gap:12px;
}

.footerSocials a{
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid var(--panelBorder);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--textMuted);
  transition:border-color .25s ease,color .25s ease;
}

.footerSocials a:hover{
  border-color:var(--gold);
  color:var(--gold);
}

.footerSocials .icon{width:17px;height:17px;}

.footerNote{
  text-align:center;
  color:var(--textMuted);
  font-size:12.5px;
  margin-top:30px;
  line-height:1.7;
}

/* CA contract address coming soon page */
.caPage{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:24px;
}

.caBg{
  position:absolute;
  inset:0;
  background:url("assets/img/coin_glow.jpg") center / cover no-repeat;
  filter:brightness(0.35) saturate(1.1);
  transform:scale(1.1);
}

.caOverlay{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(7,7,10,0.35), var(--ink) 78%);
}

.caContent{
  position:relative;
  z-index:2;
  max-width:640px;
}

.caSeal{
  width:120px;
  height:120px;
  border-radius:50%;
  border:2px solid var(--gold);
  object-fit:cover;
  margin:0 auto 30px;
  box-shadow:0 0 60px rgba(244,197,66,0.35);
  animation:floatSeal 4s ease-in-out infinite;
}

@keyframes floatSeal{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}

.caTitle{
  font-size:clamp(34px,6vw,62px);
  margin-bottom:14px;
}

.caPulseWrap{
  display:inline-block;
  position:relative;
  margin-bottom:26px;
}

.caPulse{
  font-size:clamp(20px,3vw,30px);
  letter-spacing:4px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
  animation:pulseGlow 1.8s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{opacity:1;text-shadow:0 0 12px rgba(244,197,66,0.4);}
  50%{opacity:0.55;text-shadow:0 0 28px rgba(244,197,66,0.85);}
}

.caDots span{
  animation:dotBlink 1.4s infinite;
  opacity:0;
}
.caDots span:nth-child(1){animation-delay:0s;}
.caDots span:nth-child(2){animation-delay:.2s;}
.caDots span:nth-child(3){animation-delay:.4s;}

@keyframes dotBlink{
  0%{opacity:0;}
  30%{opacity:1;}
  60%{opacity:0;}
  100%{opacity:0;}
}

.caSub{
  color:var(--textMuted);
  font-size:15.5px;
  line-height:1.8;
  margin-bottom:36px;
}

.caBox{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  padding:18px 26px;
  border-radius:999px;
  border:1px dashed var(--panelBorder);
  background:rgba(20,20,25,0.6);
  font-family:'Courier New',monospace;
  letter-spacing:1px;
  color:var(--textMuted);
  max-width:100%;
  overflow:hidden;
  margin-bottom:34px;
}

.caBox span{white-space:nowrap;}

.caBack{
  font-size:13.5px;
  color:var(--textMuted);
}

.caBack a{color:var(--gold);font-weight:600;}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease,transform .8s ease;
}

.reveal.inView{
  opacity:1;
  transform:translateY(0);
}

/* Responsive */
/* Tablet and small laptop: 1024px and below. Nav switches to a menu
   here because the full link row plus both buttons no longer fits
   without crowding or wrapping mid row. */
@media (max-width:1024px){
  .navLinks,.navCta .btnGhost{display:none;}
  .navToggle{display:flex;}

  .navbar.open .navLinks{
    display:flex;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    background:rgba(7,7,10,0.97);
    padding:22px 24px;
    gap:6px;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
    border-bottom:1px solid var(--panelBorder);
  }

  .navbar.open .navLinks a{
    display:block;
    padding:12px 4px;
    font-size:15.5px;
    border-bottom:1px solid rgba(244,197,66,0.08);
  }

  .navbar.open .navLinks a::after{display:none;}

  .aboutGrid,.tokenGrid{grid-template-columns:1fr;gap:40px;}
  .tokenImgWrap{order:-1;}
  .featureGrid{grid-template-columns:1fr 1fr;}
  .stepsGrid{grid-template-columns:1fr;gap:20px;}

  .hero{padding-top:118px;}
}

/* Tablet portrait and large phones: 768px and below */
@media (max-width:768px){
  .container{padding:0 20px;}

  section{padding:80px 0;}

  .sectionHead{margin-bottom:42px;}

  .heroButtons{margin-bottom:40px;}

  .featureGrid{grid-template-columns:1fr;}

  .aboutStats{gap:22px;}

  .tokenCards{gap:14px;}

  .roadmapItem{padding-left:64px;margin-bottom:36px;}

  .socialCard{width:calc(50% - 10px);}

  .ctaBanner{padding:54px 28px;}

  .footerInner{flex-direction:column;text-align:center;}
  .footerLinks{justify-content:center;}
}

/* Phones: 480px and below */
@media (max-width:480px){
  .container{padding:0 16px;}

  .brand span{font-size:18px;}
  .brand img{width:36px;height:36px;}

  .navCta{gap:6px;}
  .navCta .btnPrimary{padding:10px 16px;font-size:12.5px;}
  .navToggle{padding:6px 4px;}

  .hero{padding-top:100px;padding-bottom:56px;}

  .heroFlagRow{gap:10px;}

  .heroButtons{flex-direction:column;width:100%;}
  .heroButtons .btn{width:100%;}

  .comingSoonBadge{padding:13px 20px;font-size:11.5px;gap:9px;}

  .sectionHead{margin-bottom:32px;}

  .aboutStats{gap:18px 26px;}

  .tokenCards{grid-template-columns:1fr 1fr;gap:12px;}
  .tokenCard{padding:20px 14px;}

  .stepCard{padding:28px 20px;}

  .roadmapItem{padding-left:54px;margin-bottom:32px;}
  .roadmapDot{width:40px;height:40px;}
  .roadmapDot .icon{width:18px;height:18px;}
  .roadmapList::before{left:19px;}

  .socialCard{width:100%;max-width:260px;}

  .ctaBanner{padding:40px 20px;}
  .ctaBanner .btn{width:100%;}

  .footerLinks{gap:16px 22px;}

  .caSeal{width:96px;height:96px;}
  .caBox{padding:14px 18px;font-size:13px;}
}

/* Very small phones: 360px and below */
@media (max-width:360px){
  .heroTitle{font-size:42px;}
  .socialGrid{gap:14px;}
}

/* Short landscape screens (phones rotated), where 100vh hero content
   would otherwise get clipped under the fixed nav */
@media (max-height:560px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:96px;padding-bottom:36px;}
  .caPage{min-height:auto;padding-top:96px;padding-bottom:36px;}
  .heroButtons{margin-bottom:26px;}
}