:root {
      --red: #ed171d;
      --ink: #0c0c0e;
      --ash: #17171a;
      --paper: #f7f7f5;
      --muted: #a6a6a8;
      --line: #303034
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden
    }

    body {
      margin: 0;
      background: var(--ink);
      color: #fff;
      font-family: Manrope, Arial, sans-serif;
      overflow-x: hidden;
      width: 100%
    }

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

    button {
      font-family: inherit;
      cursor: pointer
    }

    .wrap {
      width: min(1180px, calc(100% - 40px));
      margin: auto
    }

    .tag {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      color: var(--red);
      font-size: 11px;
      letter-spacing: .15em;
      text-transform: uppercase;
      font-weight: 800
    }

    .tag:before {
      content: "";
      width: 24px;
      height: 2px;
      background: currentColor
    }

    .title {
      font: 900 clamp(38px, 5.2vw, 72px)/.86 "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      letter-spacing: -.025em;
      margin: 15px 0
    }

    .title em {
      color: var(--red);
      font-style: italic
    }

    .sub {
      color: #b7b7b9;
      line-height: 1.7;
      max-width: 500px;
      font-size: 14px
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      padding: 16px 23px;
      font-size: 12px;
      letter-spacing: .05em;
      text-transform: uppercase;
      font-weight: 800;
      transition: .2s
    }

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

    .btn.red {
      background: var(--red);
      color: #fff
    }

    .btn.outline {
      border: 1px solid #4a4a4d;
      background: transparent;
      color: #fff
    }

    header {
      height: 79px;
      border-bottom: 1px solid #29292d;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 3;
      background: #0c0c0ee8;
      backdrop-filter: blur(12px)
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      position: relative
    }

    .logo {
      width: 80px;
      height: 54px;
      object-fit: contain;
      mix-blend-mode: screen;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2
    }

    .navlinks {
      display: flex;
      gap: 28px;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: .04em
    }

    .navlinks:after { display: none }

    .nav-side { display:flex; align-items:center; gap:28px }

    .navlinks a:hover {
      color: var(--red)
    }

    .cart {
      font-weight: 800;
      font-size: 12px;
      border: 1px solid #454549;
      padding: 10px 13px
    }

    .menu {
      display: none;
      background: none;
      color: white;
      border: 0;
      font-size: 22px
    }

    .hero {
      min-height: 690px;
      background: radial-gradient(circle at 74% 49%, #531316 0, #1c1113 20%, transparent 44%), linear-gradient(115deg, #0a0a0c 50%, #171013);
      position: relative;
      overflow: hidden
    }

    .hero:after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-32deg, transparent 0 76px, #ffffff05 77px 78px);
      pointer-events: none
    }

    .hero-inner {
      min-height: 690px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      position: relative;
      z-index: 1
    }

    .hero-copy {
      padding: 70px 0
    }

    .hero h1 {
      font: 900 clamp(68px, 8.6vw, 128px)/.76 "Barlow Condensed", sans-serif;
      text-transform: uppercase;
      
      margin: 15px 0 29px
    }

    .hero h1 span {
      color: var(--red);
      font-style: italic
    }

    .hero p {
      max-width: 450px;
      color: #bbb;
      line-height: 1.65;
      font-size: 15px
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      margin-top: 31px
    }

    .stats {
      display: flex;
      gap: 30px;
      margin-top: 67px
    }

    .stats div {
      padding-left: 12px;
      border-left: 2px solid var(--red)
    }

    .stats b {
      display: block;
      font: 800 28px/1 "Barlow Condensed"
    }

    .stats small {
      color: #aaa;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .08em
    }

    .hero-art {
      height: 100%;
      position: relative;
      --circle-size: 520px;
      --circle-left: 2%
    }

    .circle {
      position: absolute;
      width: var(--circle-size);
      height: var(--circle-size);
      border-radius: 50%;
      border: 1px solid #7b2c30;
      top: 76px;
      left: var(--circle-left);
      box-shadow: 0 0 0 29px #ffffff04, 0 0 0 60px #ffffff03
    }

    .bottle {
      width: 430px;
      height: 390px;
      position: absolute;
      bottom:180px;
    
      left: calc(var(--circle-left) + ((var(--circle-size) - 350px) / 2));
      z-index: 2;
      filter: drop-shadow(23px 25px 23px #0009);
      transform: rotate(2deg);
      animation: hero-bottle-float 5.4s ease-in-out infinite
    }

    @keyframes hero-bottle-float {
      0%, 100% { transform: rotate(10deg) translateY(0) }
      50% { transform: rotate(5deg) translateY(-16px) }
    }

    .cap {
      height: 64px;
      background: #050505;
      border: 2px solid #393939;
      border-radius: 16px 16px 4px 4px
    }

    .jar {
      height: 326px;
      background: #e7e7e5;
      border-radius: 19px 19px 35px 35px;
      color: #111;
      overflow: hidden;
      position: relative;
      border: 2px solid #c5c5c4
    }

    .jar:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, #fff9 5%, transparent 24%, transparent 75%, #7773)
    }

    .label {
      position: absolute;
      top: 82px;
      left: 0;
      right: 0;
      height: 166px;
      background: var(--red);
      padding: 15px 18px;
      color: #fff;
      text-align: center;
      border-top: 5px solid #151517;
      border-bottom: 5px solid #151517
    }

    .label small {
      font-size: 7px;
      font-weight: 800;
      letter-spacing: .15em
    }

    .label b {
      display: block;
      font: 900 56px/.72 "Barlow Condensed";
      letter-spacing: -.06em;
      margin: 13px 0 6px
    }

    .label strong {
      font: 800 13px "Barlow Condensed";
      letter-spacing: .08em
    }

    .hero-splash {
      position: absolute;
      font: 900 210px/.7 "Barlow Condensed";
      color: #ffffff08;
      right: -30px;
      bottom: 48px;
      letter-spacing: -.08em
    }

    .trust {
      background: var(--red);
      padding: 19px 0
    }

    .trust .wrap {
      display: flex;
      justify-content: space-between;
      gap: 24px
    }

    .trust-item {
      font: 800 14px "Barlow Condensed";
      text-transform: uppercase;
      letter-spacing: .05em;
      display: flex;
      align-items: center;
      gap: 9px
    }

    .trust-item b {
      font-size: 23px
    }

    section.block {
      padding: 112px 0
    }

    .goals {
      background: var(--paper);
      color: var(--ink)
    }

    .goals-head,
    .why-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 40px
    }

    .goals-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 13px;
      margin-top: 45px
    }

    .goal {
      height: 265px;
      padding: 22px;
      position: relative;
      overflow: hidden;
      background: #dededd;
      color: white
    }

    .goal:nth-child(1) {
      background: url(../images/bm.avif)
      
    }

    .goal:nth-child(2) {
      background: url(../images/ii.webp)
    }

    .goal:nth-child(3) {
      background: url(../images/photo-1584827386894-fc939dad6078.avif)
    }

    .goal:nth-child(4) {
      background: url(../images/re.avif)
    }

   

    .goal .icon {
      font-size: 56px;
      position: absolute;
      right: 25px;
      top: 35px;
      opacity: .95
    }

    .goal h3 {
      font: 800 28px "Barlow Condensed";
      text-transform: uppercase;
      margin: 0;
      position: absolute;
      bottom: 28px;
      z-index: 1
    }

    .goal p {
      font-size: 11px;
      color: #eee;
      position: absolute;
      bottom: 10px;
      margin: 0;
      z-index: 1
    }

    .featured {
      background: #121214
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 17px;
      margin-top: 43px
    }

    .cat {
      min-height: 300px;
      padding: 26px;
      position: relative;
      overflow: hidden;
      background: #1f1f22
    }

    .cat:nth-child(2) {
      background: var(--red)
    }

    .cat h3 {
      font: 800 42px/.85 "Barlow Condensed";
      text-transform: uppercase;
      max-width: 180px;
      position: relative;
      z-index: 1;
      margin: 0
    }

    .cat span {
      position: absolute;
      right: 22px;
      bottom: -20px;
      font: 700 110px "Barlow Condensed";
      color: #ffffff12
    }

    .cat .arrow {
      position: absolute;
      bottom: 25px;
      left: 310px;
      width: 38px;
      height: 38px;
      border: 1px solid #ffffff80;
      border-radius: 50%;
      display: grid;
      place-items: center;
      z-index: 1
    }

    .best {
      background: var(--paper);
      color: var(--ink)
    }

    .products {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 42px
    }

    .product {
      background: #e7e7e4;
      padding: 15px;
      position: relative;
      transition: transform .28s ease, box-shadow .28s ease, background .28s ease
    }

    .product:hover { transform: translateY(-10px); background:#fff; box-shadow: 0 20px 30px #17171724 }

    .badge {
      position: absolute;
      top:16px;
      left:18px;
      z-index: 3;
      background: var(--red);
      color: #fff;
      padding: 5px 7px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: .08em
    }

    .pack {
      height: 192px;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1
    }

    .mini-jar {
      height: 142px;
      width: 89px;
      background: #e9e9e7;
      border-radius: 10px 10px 17px 17px;
      border: 2px solid #bcbcbc;
      box-shadow: 10px 10px 15px #0002;
      position: relative
    }

    .mini-jar:before {
      content: "";
      height: 26px;
      position: absolute;
      top: -27px;
      left: -2px;
      right: -2px;
      background: #161618;
      border-radius: 6px 6px 0 0
    }

    .mini-jar:after {
      content: "";
      height: 65px;
      top: 33px;
      left: 0;
      right: 0;
      background: var(--red);
      position: absolute;
      border-block: 3px solid #19191b
    }

    .mini-jar.dark {
      background: #1c1c1f
    }

    .product:hover .mini-jar { animation: product-float 1.2s ease-in-out infinite alternate }
    .product:hover .pack { background: radial-gradient(circle, #ed171d1a 0, transparent 67%) }
    @keyframes product-float { from { transform:translateY(0) rotate(-2deg) } to { transform:translateY(-11px) rotate(2deg) } }
    @keyframes mobile-card-in { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
    @media (max-width: 991px) {
      .product.mobile-visible { animation: mobile-card-in .55s ease both }
      .product.mobile-visible .mini-jar { animation: product-float 1.5s ease-in-out infinite alternate }
      .product.mobile-visible .pack { background: radial-gradient(circle, #c113191a 0, transparent 67%) }
    }
    @media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important } }

    .product h4 {
      font-size: 32px;
      margin: 9px 0 4px
    }

    .product p {
      font-size:20px;
      color: #6e6e70;
      margin: 0 0 12px
    }

    .price {
      font-size:20px;
      font-weight: 800
    }

    .price del {
      color: #999;
      font-weight: 500;
      margin-left: 4px
    }

    .add {
      float: right;
      border: 0;
      background: #111;
      color: white;
      width: 28px;
      height: 28px;
      font-size: 17px
    }

    .order-whatsapp { display:block; width:100%; margin-top:16px; padding:11px 10px; border:0; border-radius:2px; background:#25D366; color:#08180e; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; transition:transform .2s,background .2s; position:relative; overflow:hidden; animation:whatsapp-pulse 2.3s ease-in-out infinite }
    .order-whatsapp:after { content:""; position:absolute; top:-40%; left:-55%; width:24%; height:180%; background:#ffffff80; transform:rotate(22deg); animation:whatsapp-shine 3.2s ease-in-out infinite }
    .order-whatsapp:hover { background:#1fbd59; transform:translateY(-2px); animation-play-state:paused }
    .order-whatsapp:active { transform:scale(.97); background:#159947 }
    @keyframes whatsapp-pulse { 0%,100% { box-shadow:0 0 0 0 #25D36600 } 50% { box-shadow:0 0 0 6px #25D36625 } }
    @keyframes whatsapp-shine { 0%,35% { left:-55% } 60%,100% { left:135% } }

    .why {
      background: #101012
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 75px;
      align-items: center
    }

    .why-copy .title {
      font-size: clamp(48px, 5.7vw, 78px)
    }

    .reasons {
      margin-top: 36px;
      border-top: 1px solid var(--line)
    }

    .reason {
      display: flex;
      gap: 17px;
      padding: 18px 0;
      border-bottom: 1px solid var(--line)
    }

    .reason b {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border: 1px solid var(--red);
      border-radius: 50%;
      font-size: 14px;
      color: var(--red)
    }

    .reason h4 {
      margin: 0;
      font-size: 13px
    }

    .reason p {
      font-size: 12px;
      color: #aaa;
      line-height: 1.5;
      margin: 5px 0 0
    }

    .dna {
      height: 480px;
      background: var(--red);
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center
    }

    .dna:before,
    .dna:after {
      content: "";
      position: absolute;
      width: 350px;
      height: 600px;
      border-radius: 50%;
      border: 55px solid #0d0d0f;
      transform: rotate(36deg)
    }

    .dna:before {
      left: -165px
    }

    .dna:after {
      right: -165px
    }

    .dna b {
      font: 900 80px/.75 "Barlow Condensed";
      text-align: center;
      text-transform: uppercase;
      z-index: 1;
      color: #fff
    }

    .dna b small {
      font: 700 17px Manrope;
      display: block;
      letter-spacing: .16em;
      margin-top: 19px
    }

    .story { background: var(--paper); color: var(--ink) }
    .story .wrap { width:100%; max-width:none; margin:0 }
    .story-grid { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 480px; align-items: stretch }
    .story-portrait {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

.story-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

@media (max-width: 768px) {
    .story-portrait img {
        object-position: center 15%;
    }
}
.story-portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.4),
        transparent
    );
    z-index: 1;
}

.story-portrait::after {
    z-index: 2;
}

.story-quote {
    z-index: 2;
}
  .story-portrait:after { content: "FOUNDER'S NOTE"; position: absolute; left: 30px; top: 31px; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .16em }
    .story-quote { position:absolute; left:30px; right:30px; bottom:33px; padding-left:16px; border-left:2px solid #fff; color:white; font:700 26px/1 "Barlow Condensed"; text-transform:uppercase; max-width:310px }
    .story-copy { padding: clamp(35px, 6vw, 78px); display:flex; flex-direction:column; justify-content:center }
    .story-copy .tag { margin-bottom:8px }
    .story-copy p { max-width:510px; color:#4e4e50; font-size:14px; line-height:1.8 }
    .founder { margin-top:18px; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.07em }
    .founder small { display:block; margin-top:5px; color:var(--red); letter-spacing:.12em }

    .benefits {
      background: #1a1a1d
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 42px;
      border: 1px solid #343438
    }

    .benefit {
      padding: 32px 25px;
      border-right: 1px solid #343438
    }

    .benefit:last-child {
      border: 0
    }

    .benefit .num {
      font: 900 46px "Barlow Condensed";
      color: var(--red)
    }

    .benefit h4 {
      font-size: 13px;
      margin: 16px 0 8px;
      text-transform: uppercase
    }

    .benefit p {
      margin: 0;
      color: #aaa;
      font-size: 12px;
      line-height: 1.6
    }

    .reviews {
      background: var(--paper);
      color: var(--ink)
    }

    .review-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 42px
    }

    .review {
      background: #fff;
      padding: 29px
    }

    .stars {
      color: var(--red);
      letter-spacing: 2px
    }

    .review blockquote {
      font: 700 19px/1.28 "Barlow Condensed";
      margin: 23px 0 28px
    }

    .review cite {
      font-style: normal;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase
    }

    .review cite small {
      display: block;
      color: #888;
      font-weight: 500;
      margin-top: 3px
    }

    .faq-contact {
      background: #101012
    }

    .faqcontact {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 80px
    }

    .faq-list {
      margin-top: 28px;
      border-top: 1px solid #39393d
    }

    .faq button {
      width: 100%;
      background: transparent;
      color: white;
      border: 0;
      border-bottom: 1px solid #39393d;
      text-align: left;
      padding: 19px 0;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      justify-content: space-between
    }

    .faq .answer {
      display: none;
      color: #aaa;
      font-size: 12px;
      line-height: 1.65;
      padding: 0 0 18px
    }

    .faq .active+.answer {
      display: block
    }

    .contact-box {
      background: var(--red);
      padding: 37px
    }

    .contact-box h3 {
      font: 900 45px/.86 "Barlow Condensed";
      text-transform: uppercase;
      margin: 10px 0 15px
    }

    .contact-box p {
      font-size: 12px;
      line-height: 1.7
    }

    .contact-box .btn {
      background: #111;
      color: #fff;
      margin-top: 19px
    }

    footer {
      padding: 55px 0 25px;
      background: #080809
    }

    .footer-top {
      display: grid;
      grid-template-columns: 1.8fr repeat(3, 1fr);
      gap: 35px;
      border-bottom: 1px solid #29292d;
      padding-bottom: 46px
    }

    .footer-logo {
      font: 900 38px/.8 "Barlow Condensed";
      text-transform: uppercase
    }

    .footer-logo em {
      color: var(--red);
      font-style: italic
    }

    .footer-logo small {
      display: block;
      font: 700 9px Manrope;
      letter-spacing: .24em;
      margin: 12px 0
    }

    .footer-brand-logo { width:130px; height:88px; object-fit:contain; object-position:left center; mix-blend-mode:screen; margin:-10px 0 2px }

    .footer p {
      font-size: 11px;
      color: #999;
      max-width: 270px;
      line-height: 1.6
    }

    .footer h5 {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #777;
      margin: 0 0 14px
    }

    .footer a {
      display: block;
      font-size: 12px;
      margin: 9px 0
    }

    .footer-bottom {
      color: #777;
      font-size: 10px;
      padding-top: 22px;
      display: flex;
      justify-content: space-between
    }

    @media(max-width:760px) {

      .nav-side,
      .cart {
        display: none
      }

      .menu {
        display: block
      }

      .menu { margin-left:auto; position:relative; z-index:5; width:42px; height:42px; border:1px solid #444; border-radius:2px }
      .nav.mobile-nav-open .nav-side { display:flex; position:absolute; left:-20px; right:-20px; z-index:4; flex-direction:column; gap:0; padding:0 20px; background:#0c0c0e; border-bottom:1px solid #303034; box-shadow:0 16px 25px #0007 }
      .nav.mobile-nav-open .nav-side:nth-of-type(1) { top:79px }
      .nav.mobile-nav-open .nav-side:nth-of-type(2) { top:165px }
      .nav.mobile-nav-open .nav-side a { width:100%; padding:13px 0; border-bottom:1px solid #26262a; font-size:12px }
      .nav.mobile-nav-open .nav-side:nth-of-type(2) a:last-child { border-bottom:0 }

      .logo { width: 76px; height: 52px }

      .hero,
      .hero-inner {
        min-height: 650px
      }

      .hero-inner {
        grid-template-columns: 1fr
      }

      .hero-copy {
        padding-top: 75px
      }

      .hero-art {
        position: absolute;
        inset: 0;
        opacity: .45;
        pointer-events: none
      }

      .bottle {
        left: 500%;
        bottom: -15px
      }

      .circle {
        left: 20%;
        top: 100px
      }

      .hero h1 {
        font-size: 75px
      }

      .stats {
        margin-top: 42px
      }

      .trust .wrap {
        overflow: auto;
        justify-content: flex-start
      }

      .trust-item {
        white-space: nowrap
      }

      .goals-head,
      .why-head {
        display: block
      }

      .goals-grid,
      .products {
        grid-template-columns: repeat(1, 1fr)
      }

      .goal {
        height: 190px
      }

      .cards,
      .review-grid {
        grid-template-columns: 1fr
      }

      .why-grid,
      .faqcontact,
      .story-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .story-portrait { min-height:290px }

      .dna {
        height: 260px
      }

      .benefit-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .benefit:nth-child(2) {
        border-right: 0
      }

      .benefit {
        padding: 24px 18px
      }

      .footer-top {
        grid-template-columns: 1fr 1fr
      }

      .footer-top>div:first-child {
        grid-column: 1/-1
      }

      .footer-bottom {
        display: block;
        line-height: 2
      }

      .title {
        font-size: 47px
      }

      section.block {
        padding: 72px 0
      }
    }
    /* Mobile hero layout: keep copy readable and product art anchored below it. */
    @media (max-width: 760px) {
      header, main, footer { max-width:100%; overflow-x:clip }
      .hero, .hero-inner { min-height: 760px }
      .hero-inner { display:block }
      .hero-copy { position:relative; z-index:1; padding:62px 0 0; width:100% }
      .hero .tag { font-size:9px }
      .hero h1 { font-size:clamp(58px, 18vw, 74px); line-height:.78; margin:14px 0 20px }
      .hero p { max-width:300px; font-size:13px; line-height:1.55 }
      .hero-actions { margin-top:24px; gap:9px; flex-wrap:wrap }
      .hero-actions .btn { padding:13px 14px; font-size:10px }
      .stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:30px }
      .stats div { padding-left:7px }
      .stats b { font-size:23px }
      .stats small { font-size:8px; line-height:1.25; display:block }
      .hero-art { z-index:3; height:340px; top:auto; bottom:0; left:0; right:0; inset:auto 0 0; opacity:.62 }
      .circle { width:350px; height:350px; left:50%; top:12px; transform:translateX(-50%) }
      .bottle { left:50%; bottom:13px; transform-origin:bottom center; animation:hero-bottle-mobile-float 3.4s ease-in-out infinite }
      @keyframes hero-bottle-mobile-float {
        0%, 100% { transform:translateX(-50%) rotate(1deg) scale(.78) translateY(0) }
        50% { transform:translateX(-50%) rotate(5deg) scale(.78) translateY(-14px) }
      }
      .hero-splash { font-size:112px; right:-10px; bottom:28px }
    }