@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{
  --ink:#0b3b20;
  --ink-soft:#163f28;
  --paper:#f6f3e9;
  --forest:#124b28;
  --deep:#062c18;
  --leaf:#3f7f3b;
  --sage:#8eaf8a;
  --mint:#dfeadd;
  --cream:#edf2e7;
  --gold:#a6a65b;
  --muted:#647265;
  --line:rgba(11,59,32,.18);
  --white:#fffdf6;
  --radius:24px;
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
.noise {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:99;
  opacity:.035;
  background-image:radial-gradient(var(--deep) .6px,transparent .6px);
  background-size:5px 5px
}
.site-header {
  height:82px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7vw;
  position:relative;
  z-index:20;
  background:rgba(246,243,233,.9);
  backdrop-filter:blur(14px)
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font:700 18px "Space Grotesk";
  letter-spacing:-.5px
}
.brand>span:last-child>span {
  font-weight:400
}
.brand-mark {
  width:38px;
  height:38px;
  object-fit:contain;
  display:block
}
.nav {
  display:flex;
  gap:30px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px
}
.nav a {
  position:relative
}
.nav a:after {
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:2px;
  background:var(--leaf);
  transition:.25s
}
.nav a:hover:after {
  width:100%
}
.header-cta {
  border:1.5px solid var(--ink);
  padding:12px 17px;
  font-size:11px;
  font-weight:800;
  transition:.2s;
  background:var(--mint)
}
.header-cta:hover {
  background:var(--forest);
  color:var(--white);
  transform:translateY(-2px)
}
.menu-btn {
  display:none;
  border:0;
  background:none;
  font-size:24px;
  color:var(--ink)
}
.hero {
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:65px 7vw 75px;
  gap:5vw;
  position:relative
}
.hero-copy {
  position:relative;
  z-index:8
}
.eyebrow,.section-label {
  font-size:10px;
  font-weight:800;
  letter-spacing:2.3px;
  display:flex;
  align-items:center;
  gap:10px
}
.eyebrow span {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--leaf);
  box-shadow:0 0 0 5px rgba(63,127,59,.12)
}
h1 {
  font:700 clamp(70px,9vw,142px)/.82 "Space Grotesk";
  letter-spacing:-.08em;
  margin:28px 0 30px
}
h1 em,.formula-copy h2 em,.how h2 em,.final-cta h2 em {
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:2px var(--forest)
}
.hero-text {
  max-width:510px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted)
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:34px
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:16px 22px;
  font-size:11px;
  font-weight:800;
  border:1.5px solid var(--ink);
  transition:.2s
}
.btn-dark {
  background:var(--ink);
  color:var(--white);
  box-shadow:6px 6px 0 var(--sage)
}
.btn-dark:hover {
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--sage)
}
.btn-light {
  background:var(--mint);
  color:var(--ink);
  box-shadow:7px 7px 0 var(--leaf)
}
.btn-light:hover {
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--leaf)
}
.text-link {
  font-size:11px;
  font-weight:800;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px
}
.mini-proof {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:50px
}
.avatars {
  display:flex
}
.avatars span {
  width:29px;
  height:29px;
  border:2px solid var(--paper);
  border-radius:50%;
  background:var(--mint);
  display:grid;
  place-items:center;
  margin-left:-6px;
  font-size:10px;
  font-weight:900
}
.avatars span:first-child {
  margin-left:0;
  background:var(--forest);
  color:var(--white)
}
.mini-proof strong,.mini-proof small {
  display:block
}
.mini-proof strong {
  font-size:10px
}
.mini-proof small {
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.hero-visual {
  min-height:650px;
  position:relative;
  display:grid;
  place-items:center;
  transition:transform .15s ease
}

/* =========================================
   WELCOME / BODY FALLBACK
========================================= */

.body-fallback {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 55px 70px;

  color: var(--forest);

  position: relative;
  z-index: 2;
}


/* =========================================
   WELCOME LABEL
========================================= */

.welcome-label {
  display: block;

  margin-bottom: 26px;

  font-size: 10px;
  line-height: 1.4;

  font-weight: 800;
  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--leaf);

  white-space: nowrap;
}


/* =========================================
   MAIN HEADING
========================================= */

.welcome-label + h2 {
  margin: 0;

  max-width: 500px;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(48px, 5.5vw, 65px);

  line-height: 0.92;

  letter-spacing: -0.055em;

  font-weight: 700;

  color: var(--deep);

  text-align: center;
}


/* =========================================
   OUTLINE WORD
========================================= */

.welcome-label + h2 em {
  display: block;

  margin-top: 5px;

  font-style: normal;

  color: transparent;

  -webkit-text-stroke: 1.5px var(--forest);
}


/* =========================================
   DESCRIPTION
========================================= */

.welcome-label + h2 + p {
  display: block;

  width: 100%;
  max-width: 330px;

  margin: 30px auto 0;

  padding: 0;

  font-family: "DM Sans", sans-serif;

  font-size: 13px;

  line-height: 1.7;

  letter-spacing: 0;

  font-weight: 500;

  color: var(--muted);

  text-align: center;

  position: relative;
  z-index: 5;
}


/* =========================================
   BOTTOM TAG
========================================= */

.welcome-tag {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 28px;

  padding: 10px 17px;

  font-size: 8px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 2px;

  white-space: nowrap;

  color: var(--forest);

  border: 1px solid rgba(18, 75, 40, 0.25);

  border-radius: 50px;

  background: rgba(223, 234, 221, 0.55);

  position: relative;
  z-index: 5;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .body-fallback {
    padding: 45px 50px;
  }

  .welcome-label {
    margin-bottom: 22px;

    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .welcome-label + h2 {
    font-size: clamp(44px, 6vw, 55px);
  }

  .welcome-label + h2 + p {
    max-width: 290px;

    margin-top: 26px;

    font-size: 12px;

    line-height: 1.65;
  }

  .welcome-tag {
    margin-top: 24px;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 786px) {

  .body-fallback {
    padding: 40px 28px;
  }

  .welcome-label {
    margin-bottom: 20px;

    font-size: 8px;

    letter-spacing: 2px;
  }

  .welcome-label + h2 {
    max-width: 320px;

    font-size: clamp(40px, 11vw, 26px);

    line-height: 0.94;
  }

  .welcome-label + h2 em {
    margin-top: 4px;
  }

  .welcome-label + h2 + p {
    max-width: 260px;

    margin-top: 25px;

    font-size: 12px;

    line-height: 1.7;
  }

  .welcome-tag {
    margin-top: 23px;

    padding: 9px 13px;

    font-size: 7px;

    letter-spacing: 1.5px;
  }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 486px) {

  .body-fallback {
    padding: 30px 20px;
  }

  .welcome-label {
    font-size: 7px;

    letter-spacing: 1.7px;

    margin-bottom: 17px;
  }

  .welcome-label + h2 {
    max-width: 280px;

    font-size: 29px;

    line-height: 0.95;
  }

  .welcome-label + h2 + p {
    max-width: 230px;

    margin-top: 22px;

    font-size: 11px;

    line-height: 1.65;
  }

  .welcome-tag {
    margin-top: 20px;

    padding: 8px 11px;

    font-size: 6.5px;

    letter-spacing: 1.3px;
  }
}

.body-outline {
  width:min(58%,430px);
  aspect-ratio:3/4;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,var(--mint),#c9dcc7);
  transform:rotate(3deg);
  border:1px solid rgba(18,75,40,.18);
  box-shadow:20px 20px 0 rgba(18,75,40,.08)
}
.body-outline img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:sepia(.08) hue-rotate(75deg) saturate(.55) contrast(.92);
  mix-blend-mode:multiply
}

.body-fallback {
  height:100%;
  display:none;
  align-items:center;
  justify-content:center;
  text-align:center;
  font:700 38px "Space Grotesk";
  letter-spacing:-2px;
  color:rgba(11,59,32,.35)
  
}
.hero-bottle {
  position:absolute;
  z-index:5;
  right:18%;
  bottom:10%;
  transform-origin:50% 90%;
  animation:floatBottle 4.2s ease-in-out infinite
}
.bottle-glass {
  width:112px;
  height:260px;
  border:3px solid var(--deep);
  border-radius:22px 22px 30px 30px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(61,121,57,.65),rgba(5,51,25,.9));
  box-shadow:inset -12px 0 18px rgba(0,0,0,.12),8px 10px 0 var(--deep);
  position:relative;
  overflow:hidden
}
.bottle-glass:after {
  content:"";
  position:absolute;
  left:12px;
  top:10px;
  width:18px;
  height:220px;
  background:rgba(255,255,255,.22);
  border-radius:20px;
  transform:rotate(3deg)
}
.bottle-cap {
  width:74px;
  height:42px;
  background:var(--deep);
  border:3px solid var(--ink);
  border-radius:10px 10px 5px 5px;
  margin:auto;
  position:relative;
  z-index:2;
  box-shadow:4px 4px 0 var(--ink)
}
.bottle-label {
  position:absolute;
  left:8px;
  right:8px;
  top:73px;
  height:106px;
  background:var(--mint);
  border:2px solid var(--deep);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:3;
  color:var(--ink)
}
.bottle-label small {
  font-size:8px;
  font-weight:800;
  letter-spacing:2px
}
.bottle-label strong {
  font:700 22px "Space Grotesk";
  letter-spacing:-1px
}
.bottle-label span {
  font-size:7px;
  font-weight:800;
  letter-spacing:1px;
  margin-top:5px
}
.spin-ring {
  position:absolute;
  width:70%;
  aspect-ratio:1;
  border:1px dashed var(--forest);
  border-radius:50%;
  animation:spin 18s linear infinite;
  opacity:.38
}
.spin-ring:before,.spin-ring:after {
  content:"✦";
  position:absolute;
  color:var(--gold);
  font-size:24px
}
.spin-ring:before {
  top:-15px;
  left:30%
}
.spin-ring:after {
  right:3%;
  bottom:25%
}
.orb {
  position:absolute;
  border-radius:50%;
  filter:blur(1px)
}
.orb-one {
  width:220px;
  height:220px;
  background:var(--sage);
  top:10%;
  right:2%;
  opacity:.42
}
.orb-two {
  width:110px;
  height:110px;
  background:var(--leaf);
  left:12%;
  bottom:8%;
  opacity:.3
}
.burst {
  position:absolute;
  z-index:6;
  border:2px solid var(--ink);
  background:var(--paper);
  font:800 10px "Space Grotesk";
  letter-spacing:1px;
  text-align:center;
  padding:15px;
  border-radius:50%;
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  line-height:1.1;
  transform:rotate(-13deg);
  box-shadow:4px 4px 0 var(--ink)
}
.burst-a {
  left:3%;
  top:16%
}
.burst-b {
  right:3%;
  bottom:23%;
  background:var(--mint);
  transform:rotate(10deg)
}
.ticker {
  overflow:hidden;
  display:flex;
  background:var(--deep);
  color:var(--mint);
  border-block:2px solid var(--deep);
  font:700 13px "Space Grotesk";
  letter-spacing:2px;
  white-space:nowrap
}
.ticker div {
  padding:14px 0;
  min-width:max-content;
  animation:ticker 22s linear infinite
}
.section {
  padding:115px 7vw
}
.benefits {
  background:var(--cream)
}
.benefits-grid {
  display:grid;
  grid-template-columns:1.3fr repeat(3,1fr);
  gap:18px;
  margin-top:45px
}
.section-title h2,.product-heading h2 {
  font-size:clamp(45px,6vw,85px);
  margin:0
}
.section-title h2 span,.product-heading h2 span {
  color:var(--leaf)
}
.benefit-card {
  min-height:310px;
  border:1.5px solid var(--ink);
  padding:25px;
  position:relative;
  background:var(--paper);
  transition:.3s
}
.benefit-card:hover {
  transform:translateY(-8px);
  box-shadow:8px 8px 0 var(--sage)
}
.card-no {
  font-size:11px;
  font-weight:800;
  color:var(--forest)
}
.icon {
  font-size:35px;
  margin:45px 0 30px;
  color:var(--leaf)
}
.benefit-card h3 {
  font:700 22px "Space Grotesk";
  letter-spacing:-1px
}
.benefit-card p {
  font-size:13px;
  line-height:1.65;
  color:var(--muted)
}
.formula {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center
}
.formula-image {
  min-height:600px;
  background:var(--deep);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}
.formula-image:before {
  content:"BOTANICAL";
  position:absolute;
  font:700 13vw "Space Grotesk";
  color:transparent;
  -webkit-text-stroke:1px rgba(223,234,221,.14);
  white-space:nowrap;
  transform:rotate(-25deg)
}
.formula-bottle {
  z-index:2;
  transform:rotate(-6deg);
  animation:floatBottle 5s ease-in-out infinite
}
.formula-bottle .bottle-glass {
  width:150px;
  height:330px
}
.formula-bottle .bottle-label {
  top:95px;
  height:130px
}
.formula-bottle .bottle-label strong {
  font-size:28px
}
.formula-bottle .bottle-cap {
  width:95px;
  height:48px
}
.leaf {
  position:absolute;
  color:var(--sage);
  font-size:80px;
  animation:spin 9s linear infinite
}
.leaf-1 {
  left:12%;
  top:20%
}
.leaf-2 {
  right:12%;
  bottom:18%;
  color:var(--gold);
  animation-direction:reverse
}
.formula-copy h2,.how h2 {
  font-size:clamp(52px,6vw,90px);
  margin:20px 0 25px
}
.formula-copy>p {
  max-width:530px;
  color:var(--muted);
  line-height:1.7
}
.ingredient-list {
  margin-top:38px;
  border-top:1px solid var(--line)
}
.ingredient-list div {
  display:grid;
  grid-template-columns:40px 1fr 1fr;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}
.ingredient-list span {
  color:var(--leaf);
  font-weight:800
}
.ingredient-list small {
  color:var(--muted)
}
.how {
  background:var(--mint)
}
.how h2 em {
  -webkit-text-stroke-color:var(--forest)
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:55px;
  border-top:2px solid var(--ink)
}
.steps article {
  padding:28px;
  border-right:1.5px solid var(--ink);
  min-height:230px
}
.steps article:last-child {
  border:0
}
.steps span {
  font:700 12px "Space Grotesk";
  color:var(--leaf)
}
.steps h3 {
  font:700 31px "Space Grotesk";
  margin:55px 0 10px
}
.steps p {
  font-size:13px;
  line-height:1.6;
  max-width:260px
}
.products {
  background:var(--paper)
}
.product-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin:20px 0 55px
}
.product-heading p {
  max-width:330px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.product-card {
  border:1.5px solid var(--ink);
  background:var(--cream);
  transition:.3s
}
.product-card:hover {
  transform:translateY(-7px)
}
.product-card.featured {
  background:var(--mint)
}
.product-art {
  height:390px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden
}
.product-art:before {
  content:"OIL";
  position:absolute;
  font:700 130px "Space Grotesk";
  color:rgba(11,59,32,.06);
  transform:rotate(-90deg)
}
.product-art>img {
  max-width:80%;
  max-height:85%;
  object-fit:contain;
  z-index:4
}
.sample-bottle {
  z-index:3;
  transform:scale(.78) rotate(3deg);
  transition:.5s
}
.product-card:hover .sample-bottle {
  transform:scale(.84) rotate(-5deg)
}
.product-tag {
  position:absolute;
  top:18px;
  left:18px;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--forest)
}
.product-info {
  padding:22px;
  border-top:1.5px solid var(--ink)
}
.product-info h3 {
  font:700 24px "Space Grotesk";
  margin-bottom:7px
}
.product-info p {
  font-size:12px;
  color:var(--muted)
}
.product-info a {
  display:inline-block;
  margin-top:12px;
  font-weight:800;
  font-size:12px;
  border-bottom:1px solid var(--ink)
}
.final-cta {
  background:var(--deep);
  color:var(--paper);
  min-height:650px;
  display:flex;
  align-items:center;
  padding:80px 7vw;
  position:relative;
  overflow:hidden
}
.final-inner {
  position:relative;
  z-index:3
}
.final-cta .section-label {
  color:var(--sage)
}
.final-cta h2 {
  font-size:clamp(65px,9vw,145px);
  margin:25px 0 40px
}
.final-cta h2 em {
  -webkit-text-stroke-color:var(--sage)
}
.giant-word {
  position:absolute;
  right:-6%;
  bottom:-9%;
  font:700 30vw "Space Grotesk";
  line-height:.7;
  color:transparent;
  -webkit-text-stroke:1px rgba(223,234,221,.15)
}
.site-footer {
  background:var(--deep);
  color:var(--paper);
  padding:70px 7vw 25px;
  border-top:1px solid rgba(223,234,221,.15)
}
.footer-top {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:40px;
  padding-bottom:70px
}
.footer-brand p {
  color:#aab9ae;
  font-size:12px;
  line-height:1.7;
  margin-top:20px
}
.site-footer .brand {
  color:var(--paper)
}
.site-footer .brand-mark {
  background:transparent
}
.footer-top>div:not(:first-child) {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:12px;
  color:#aab9ae
}
.footer-label {
  font-size:9px!important;
  letter-spacing:2px;
  color:var(--sage)!important;
  font-weight:800;
  margin-bottom:8px
}
.footer-top a:hover {
  color:var(--mint)
}
.footer-bottom {
  border-top:1px solid rgba(223,234,221,.15);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#7e9283;
  font-size:10px
}
.reveal {
  opacity:0;
  transform:translateY(25px);
  transition:1s ease
}
.reveal.visible {
  opacity:1;
  transform:none
}
@keyframes floatBottle {
  0%,100% {
    transform:translateY(0) rotate(3deg)
  }
  50% {
    transform:translateY(-18px) rotate(-3deg)
  }
}
@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}
@keyframes ticker {
  to {
    transform:translateX(-100%)
  }
}
@media(max-width:1050px) {
  .nav {
    gap:18px
  }
  .hero {
    padding-inline:5vw
  }
  .benefits-grid {
    grid-template-columns:1fr 1fr
  }
  .section-title {
    grid-column:1/-1
  }
  .formula {
    grid-template-columns:1fr
  }
  .formula-image {
    min-height:500px
  }
  .footer-top {
    grid-template-columns:1.5fr 1fr 1fr 1fr
  }
}
@media(max-width:786px) {
  .site-header {
    height:70px;
    padding:0 20px
  }
  .nav,.header-cta {
    display:none
  }
  .menu-btn {
    display:block
  }
  .nav.open {
    position:absolute;
    display:flex;
    flex-direction:column;
    left:0;
    right:0;
    top:70px;
    padding:20px;
    background:var(--paper);
    border-bottom:1px solid var(--ink);
    gap:18px
  }
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
    padding:70px 22px 45px
  }
  .hero-visual {
    min-height:520px;
    margin-top:15px
  }
  .body-outline {
    width:55%
  }
  .hero-bottle {
    right:15%;
    bottom:8%
  }
  .burst-a {
    left:0
  }
  .burst-b {
    right:0
  }
  .section {
    padding:75px 22px
  }
  .benefits-grid,.product-grid,.steps {
    grid-template-columns:1fr
  }
  .benefit-card {
    min-height:250px
  }
  .formula-image {
    min-height:430px
  }
  .formula {
    gap:50px
  }
  .product-heading {
    display:block
  }
  .product-heading p {
    margin-top:20px
  }
  .product-art {
    height:330px
  }
  .steps article {
    border-right:0;
    border-bottom:1.5px solid var(--ink);
    min-height:180px
  }
  .steps h3 {
    margin-top:35px
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:40px
  }
  .footer-brand {
    grid-column:1/-1
  }
  .footer-bottom {
    gap:20px
  }
  .final-cta {
    min-height:540px;
    padding:65px 22px
  }
  .giant-word {
    font-size:45vw
  }
}
@media(max-width:486px) {
  h1 {
    font-size:61px
  }
  .hero-visual {
    min-height:450px
  }
  .bottle-glass {
    width:90px;
    height:220px
  }
  .bottle-label strong {
  font:700 12px "Space Grotesk";
  }
  .hero-bottle .bottle-label {
    top:60px;
    height:90px
  }
  .hero-bottle .bottle-cap {
    width:62px;
    height:36px
  }
  .burst {
    width:78px;
    height:78px;
    font-size:8px
  }
  .footer-top {
    grid-template-columns:1fr
  }
  .footer-brand {
    grid-column:auto
  }
}
/* =========================================
BRUTAL + PREMIUM BOOK NOW BUTTON
========================================= */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 124px;
  height: 52px;
  padding: 0 22px;
  background: #0b3d20;
  color: #f5f3e8;
  border: 1.5px solid #062c17;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  /* Brutalist offset shadow */
  box-shadow:     5px 5px 0 #6f9f5a,     inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition:     transform 0.18s ease,     box-shadow 0.18s ease,     background 0.18s ease;
}
/* Shining light sweep */
.nav-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient(     105deg,     transparent 0%,     rgba(255, 255, 255, 0.03) 30%,     rgba(255, 255, 255, 0.35) 50%,     rgba(255, 255, 255, 0.03) 70%,     transparent 100%   );
  transform: skewX(-20deg);
  animation: buttonShine 3.8s ease-in-out infinite;
  pointer-events: none;
}
/* Keep text above shine */
.nav-cta span, .nav-cta {
  isolation: isolate;
}
/* Hover */
.nav-cta:hover {
  background: #0e512a;
  color: #ffffff;
  transform: translate(-2px, -2px);
  box-shadow:     7px 7px 0 #82ad6a,     0 0 22px rgba(65, 125, 73, 0.22);
}
/* Click */
.nav-cta:active {
  transform: translate(3px, 3px);
  box-shadow:     2px 2px 0 #6f9f5a;
}
/* Shine animation */
@keyframes buttonShine {
  0% {
    left: -120%;
  }
  35%,   100% {
    left: 150%;
  }
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 768px) {
  .nav-cta {
    min-width: 112px;
    height: 46px;
    padding: 0 17px;
    font-size: 13px;
    box-shadow:       4px 4px 0 #6f9f5a;
  }
  .nav-cta:hover {
    box-shadow:       5px 5px 0 #82ad6a,       0 0 16px rgba(65, 125, 73, 0.2);
  }
}