/* ==========================================================================
   GELO SKIMÓ — Design System
   ========================================================================== */

:root{
  --bg:            #07070d;
  --bg-soft:       #0d0e1a;
  --bg-elevated:   #14152a;
  --blue:          #2e2f92;
  --blue-light:    #5457d6;
  --blue-pale:     #9ea0f0;
  --ice:           #8dd7f7;
  --ice-pale:      #d7f1fc;
  --red:           #ed1c23;
  --red-light:     #ff4b52;
  --white:         #f7f8ff;

  --flavor-coco:      #1fa9e0;
  --flavor-maca:       #5fbf3e;
  --flavor-melancia:   #e8384a;
  --flavor-maracuja:   #f0ac2e;
  --flavor-morango:    #e31c4d;

  --font-display: "Fredoka", "Baloo 2", sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", sans-serif;

  --container: min(1240px, 92vw);
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 40px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  background: var(--bg);
}
body{
  margin:0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
::selection{ background: var(--red); color:#fff; }

/* grain overlay for premium texture */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 3;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{ width: var(--container); margin-inline:auto; }

.text-outline{
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ice);
  text-stroke: 1.5px var(--ice);
}
.text-outline--light{ -webkit-text-stroke-color: #fff; }

.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-display);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 1rem;
}
.section-eyebrow::before{
  content:""; width:24px; height:2px; background: var(--red); display:inline-block; border-radius:2px;
}
.section-eyebrow--light{ color: var(--ice-pale); }

.section-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
}
.section-title--center{ text-align:center; }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s var(--ease-out), visibility .6s;
}
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap: 1rem; }
.preloader__logo{ transform: rotate(-90deg); }
.preloader__ring{ stroke: var(--blue-light); stroke-dasharray: 502; stroke-dashoffset: 502; stroke-linecap: round; }
.preloader__word{
  font-family: var(--font-display); font-size: 1.6rem; letter-spacing:.3em;
  color:#fff; opacity:.9;
}
.preloader__pct{ font-size:.8rem; color: var(--ice); letter-spacing:.1em; }
.preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor{
  position: fixed; top:0; left:0; z-index: 998;
  pointer-events:none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor__dot{ width:6px; height:6px; border-radius:50%; background:#fff; position:absolute; top:0; left:0; transform:translate(-50%,-50%); }
.cursor__ring{
  width:36px; height:36px; border-radius:50%; border:1.5px solid #fff;
  position:absolute; top:0; left:0; transform:translate(-50%,-50%);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), opacity .25s;
}
.cursor.is-link .cursor__ring{ width:64px; height:64px; opacity:.6; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
.scroll-progress{
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--red), var(--ice));
  z-index: 997;
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 1.1rem 0;
  transition: padding .4s var(--ease-out), background .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.nav.is-scrolled{
  padding: .6rem 0;
  background: rgba(7,7,13,.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -15px rgba(0,0,0,.6);
}
.nav.is-hidden{ transform: translateY(-110%); }
.nav__inner{
  width: var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__brand{ font-family: var(--font-display); font-size:1.3rem; letter-spacing:.02em; display:flex; gap:.35em; }
.nav__brand-ice{ color:#fff; }
.nav__brand-blue{ color: var(--ice); }
.nav__links{ display:flex; gap:2.1rem; margin-inline:auto; }
.nav__links a{
  position:relative; font-size:.95rem; font-weight:500; opacity:.85;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__links a:hover::after{ transform: scaleX(1); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav__burger span{ width:22px; height:2px; background:#fff; border-radius:2px; }
.nav__mobile{
  position:fixed; inset:0; top:0; background: var(--bg-soft); z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform: translateY(-100%); transition: transform .5s var(--ease-out);
  font-size:1.4rem; font-family: var(--font-display);
}
.nav__mobile.is-open{ transform: translateY(0); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding: .95rem 1.7rem; border-radius: 100px;
  font-family: var(--font-display); font-weight:500; font-size:.98rem;
  border:none; overflow:hidden; isolation:isolate;
}
.btn--primary{ background: var(--red); color:#fff; }
.btn--primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--red-light), var(--red));
  opacity:0; transition: opacity .35s;
}
.btn--primary:hover::before{ opacity:1; }
.btn--ghost{ background: rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.btn--ghost:hover{ background: rgba(255,255,255,.12); }
.btn--large{ padding: 1.2rem 2.4rem; font-size: 1.1rem; }
.btn--pill{ background: var(--ice); color: var(--bg); padding:.7rem 1.4rem; font-size:.9rem; }
.btn--nav{ display:inline-flex; }
.btn svg{ transition: transform .3s var(--ease-out); }
.btn:hover svg{ transform: translateX(4px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 8rem 1.5rem 4rem;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(46,47,146,.55), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(141,215,247,.12), transparent 60%),
    linear-gradient(180deg, #07070d 0%, #090a16 60%, #07070d 100%);
}
.hero__snow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero__glow{ position:absolute; border-radius:50%; filter: blur(80px); z-index:0; pointer-events:none; }
.hero__glow--1{ width:420px; height:420px; background: rgba(46,47,146,.45); top:-10%; left:-8%; }
.hero__glow--2{ width:360px; height:360px; background: rgba(237,28,35,.18); bottom:-5%; right:-5%; }

.ice-cube{ position:absolute; z-index:1; perspective: 600px; opacity:.85; }
.ice-cube span{
  display:block; width:56px; height:56px; border-radius:12px;
  background: linear-gradient(135deg, rgba(141,215,247,.5), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 40px -10px rgba(46,47,146,.5), inset 0 0 20px rgba(255,255,255,.25);
}
.ice-cube--1{ top:18%; left:8%; }
.ice-cube--2{ top:65%; left:14%; }
.ice-cube--3{ top:22%; right:10%; }
.ice-cube--4{ top:60%; right:16%; }
.ice-cube--2 span, .ice-cube--4 span{ width:38px; height:38px; border-radius:9px; }

.hero__inner{ position:relative; z-index:2; max-width: 780px; display:flex; flex-direction:column; align-items:center; }
.hero__eyebrow{
  font-family: var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  font-size:.8rem; color: var(--ice); margin-bottom:1.4rem;
}
.hero__title{ font-size: clamp(3rem, 9vw, 6.4rem); line-height:.98; letter-spacing:-.02em; }
.hero__title-line{ display:block; overflow:hidden; color:#fff; }
.hero__title-line--accent{ color: var(--ice); }
.hero__subtitle{
  margin-top:1.6rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(247,248,255,.75);
  max-width: 560px; font-weight:400;
}
.hero__subtitle strong{ color:#fff; font-weight:700; }
.hero__cta{ margin-top: 2.4rem; display:flex; gap: 1rem; flex-wrap:wrap; justify-content:center; }

.hero__logo-wrap{ margin-top: 3.5rem; width: min(560px, 90vw); }
.hero__logo{ width:100%; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

.hero__scroll{
  position:absolute; bottom: 2rem; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.55);
  z-index:2;
}
.hero__scroll-line{ width:1px; height:40px; background: rgba(255,255,255,.2); overflow:hidden; }
.hero__scroll-line i{ display:block; width:100%; height:14px; background: var(--ice); animation: scrollDrip 1.8s ease-in-out infinite; }
@keyframes scrollDrip{ 0%{ transform: translateY(-100%);} 100%{ transform: translateY(140px);} }

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  position:relative; z-index:2;
  background: var(--red);
  transform: rotate(-1.2deg) scale(1.02);
  overflow:hidden;
  padding: 1.1rem 0;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.marquee__track{
  display:flex; width:max-content; white-space:nowrap; will-change: transform;
}
.marquee__track span{
  font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 2rem);
  color:#fff; padding: 0 1.2rem; letter-spacing:.04em;
}
.marquee__track i{ font-style:normal; color: rgba(255,255,255,.55); padding: 0 .4rem; }

/* ==========================================================================
   ABOUT / PRODUTO
   ========================================================================== */
.about{ padding: 8rem 0 7rem; background: var(--bg); position:relative; }
.about__inner{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items:center;
}
.about__media-frame{
  position:relative; aspect-ratio: 4/5; border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 20%, rgba(141,215,247,.35), transparent 55%),
    linear-gradient(160deg, var(--blue) 0%, #14152a 70%);
  border: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-end; justify-content:flex-start; padding: 1.6rem;
  overflow:hidden;
}
.about__media-frame::before{
  content:""; position:absolute; width:220px; height:220px; right:-4rem; top:-3rem;
  border-radius:50%; border: 30px solid rgba(255,255,255,.06);
}
.about__media-frame::after{
  content:""; position:absolute; width:140px; height:140px; left:-2.5rem; bottom:-3rem;
  border-radius:50%; background: radial-gradient(circle, rgba(141,215,247,.25), transparent 70%);
}
.about__media-frame .float-cube{
  position:absolute; width:64px; height:64px; border-radius:16px;
  background: linear-gradient(135deg, rgba(141,215,247,.55), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
  box-shadow: 0 20px 40px -10px rgba(0,0,0,.4), inset 0 0 20px rgba(255,255,255,.25);
}
.about__media-frame .float-cube--a{ top: 18%; right: 14%; animation: floatSlow 4.5s ease-in-out infinite; }
.about__media-frame .float-cube--b{ width:38px; height:38px; border-radius:10px; bottom: 22%; right: 30%; animation: floatSlow 4.5s ease-in-out infinite 1.1s; }
@keyframes floatSlow{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-16px) rotate(6deg); } }
.about__badge{
  background: rgba(7,7,13,.65); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  padding: .7rem 1.2rem; border-radius: 100px;
  font-family: var(--font-display); font-size:.95rem; color: var(--ice);
}
.about__text{ margin-top:1.4rem; color: rgba(247,248,255,.72); font-size:1.05rem; max-width: 46ch; }
.about__stats{ display:flex; gap: 2.4rem; margin-top: 2.6rem; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat__num, .stat__suffix{ font-family: var(--font-display); font-size:2.6rem; color:#fff; display:inline-block; }
.stat__suffix{ font-size:1.6rem; color: var(--ice); }
.stat__label{ font-size:.85rem; color: rgba(247,248,255,.55); margin-top:.3rem; }

/* ==========================================================================
   SABORES
   ========================================================================== */
.flavors{ padding: 6rem 0 8rem; background: var(--bg-soft); position:relative; }
.flavors__head{ text-align:center; width: var(--container); margin-inline:auto; margin-bottom: 3rem; }
.flavors__head .section-eyebrow{ justify-content:center; }
.flavors__showcase{
  width: min(1100px, 92vw); margin: 0 auto 4.5rem;
}
.flavors__showcase img{ width:100%; }

.flavor-grid{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem;
}
.flavor-card{
  position:relative;
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 2rem 1.4rem;
  text-align:center;
  transform-style: preserve-3d;
  transition: border-color .4s;
  will-change: transform;
}
.flavor-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; z-index:-1;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--flavor-color) 35%, transparent), transparent 70%);
  opacity:0; transition: opacity .4s;
}
.flavor-card:hover{ border-color: color-mix(in srgb, var(--flavor-color) 60%, transparent); }
.flavor-card:hover::before{ opacity:1; }
.flavor-card__icon{
  width:72px; height:72px; margin: 0 auto 1.2rem; border-radius:50%;
  background: color-mix(in srgb, var(--flavor-color) 18%, var(--bg-soft));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--flavor-color) 40%, transparent);
}
.flavor-card__icon svg{ width:38px; height:38px; }
.flavor-card h3{ font-size:1.25rem; color:#fff; margin-bottom:.5rem; }
.flavor-card p{ font-size:.88rem; color: rgba(247,248,255,.6); min-height:2.6em; }
.flavor-card__tag{
  display:inline-block; margin-top:1.1rem; font-size:.72rem; letter-spacing:.06em;
  color: var(--flavor-color); border:1px solid color-mix(in srgb, var(--flavor-color) 45%, transparent);
  padding:.35rem .8rem; border-radius:100px;
}

/* ==========================================================================
   CUBOS DE GELO
   ========================================================================== */
.cubes{ padding: 7rem 0; background: var(--bg); }
.cubes__inner{ width: var(--container); margin-inline:auto; }
.cubes__head{ max-width: 640px; }
.cubes__text{ margin-top:1.2rem; color: rgba(247,248,255,.68); font-size:1.05rem; }

.cube-grid{
  margin-top: 3rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.cube-card{
  background: linear-gradient(160deg, var(--bg-elevated), var(--bg-soft));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.6rem;
  text-align:center;
  opacity:0; transform: translateY(50px);
  will-change: transform;
}
.cube-card__icon{
  width:72px; height:72px; margin:0 auto 1.3rem; display:flex; align-items:center; justify-content:center;
}
.cube-card__icon span{
  display:block; width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, rgba(141,215,247,.55), rgba(255,255,255,.15));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 16px 30px -10px rgba(46,47,146,.5), inset 0 0 16px rgba(255,255,255,.25);
}
.cube-card h3{ font-size:1.6rem; color: var(--ice); margin-bottom:.5rem; }
.cube-card p{ font-size:.88rem; color: rgba(247,248,255,.6); }

.cubes__footer{
  margin-top: 3rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 1.6rem;
}
.cubes__audience{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cubes__audience span{
  font-size:.82rem; letter-spacing:.03em; color: var(--ice);
  border:1px solid rgba(141,215,247,.35); background: rgba(141,215,247,.08);
  padding:.5rem 1.1rem; border-radius:100px;
}

/* ==========================================================================
   USES
   ========================================================================== */
.uses{ padding: 7rem 0; background: var(--bg); }
.uses__inner{ width: var(--container); margin-inline:auto; }
.uses__grid{
  margin-top: 3rem;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:1.4rem;
}
.use-card{
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-md);
  padding: 2.2rem 1.6rem;
  transition: transform .4s var(--ease-out), background .4s;
}
.use-card:hover{ transform: translateY(-8px); background: var(--blue); }
.use-card__num{ font-family: var(--font-display); font-size:.85rem; color: var(--red); margin-bottom:1.2rem; }
.use-card h3{ font-size:1.15rem; color:#fff; margin-bottom:.6rem; }
.use-card p{ font-size:.9rem; color: rgba(247,248,255,.6); }

/* ==========================================================================
   CTA BAND / REVENDA
   ========================================================================== */
.cta-band{
  position:relative; padding: 8rem 0 6rem; text-align:center; overflow:hidden;
  background: linear-gradient(160deg, var(--blue) 0%, #1a1b5e 55%, #0d0e2e 100%);
}
.cta-band__frost{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(141,215,247,.25), transparent 65%);
  pointer-events:none;
}
.cta-band__inner{ position:relative; width: var(--container); margin-inline:auto; }
.cta-band__title{ font-size: clamp(2.2rem, 5vw, 3.6rem); color:#fff; margin-top:.5rem; }
.cta-band__text{
  max-width: 52ch; margin: 1.5rem auto 2.4rem; color: rgba(255,255,255,.75); font-size:1.05rem;
}
.ice-drip{ position:absolute; left:0; right:0; bottom:-1px; line-height:0; }
.ice-drip svg{ width:100%; height:60px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--bg); padding: 4.5rem 0 2rem; }
.footer__inner{
  width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand{ font-family: var(--font-display); font-size:1.3rem; }
.footer__brand p{ font-family: var(--font-body); font-size:.85rem; color: rgba(247,248,255,.5); margin-top:.8rem; max-width:26ch; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color: var(--ice); margin-bottom:.3rem; }
.footer__col a, .footer__col span{ font-size:.92rem; color: rgba(247,248,255,.7); }
.footer__col a:hover{ color:#fff; }
.footer__bottom{
  width: var(--container); margin-inline:auto; padding-top: 1.6rem;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.8rem; color: rgba(247,248,255,.45);
}
.footer__top{ background:none; border:1px solid rgba(255,255,255,.15); color:#fff; padding:.5rem 1rem; border-radius:100px; font-size:.8rem; }
.footer__top:hover{ background: rgba(255,255,255,.08); }

/* ==========================================================================
   REVEAL UTILITIES (GSAP hooks — base hidden state)
   ========================================================================== */
[data-reveal], .hero-reveal{ opacity:0; transform: translateY(36px); }
[data-reveal-media]{ opacity:0; transform: scale(.92); }
.use-card{ opacity:0; transform: translateY(50px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .btn--nav{ display:none; }
  .about__inner{ grid-template-columns:1fr; gap:2.5rem; }
  .about__media-frame{ aspect-ratio: 16/9; }
  .flavor-grid{ grid-template-columns: repeat(2, 1fr); }
  .cube-grid{ grid-template-columns: repeat(2, 1fr); }
  .uses__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
  .ice-cube--3, .ice-cube--4{ display:none; }
}
@media (max-width: 560px){
  .flavor-grid{ grid-template-columns: 1fr 1fr; }
  .flavor-card p{ min-height:0; }
  .footer__inner{ grid-template-columns: 1fr; }
  .hero__cta{ flex-direction:column; width:100%; }
  .hero__cta .btn{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}