:root {
  --ot-blue: #28603F;
  --ot-blue-dark: #2fc154;
  --ot-bg: #eaf2ff;
  --ot-bg-2: #f4f8ff;
  --ot-ink: #0b1020;
  --ot-muted: #5b6478;
  --ot-line: #dfe7f3;
  --ot-radius: 22px; 
}

* {
  box-sizing: border-box
}

html,
body {
  background: var(--ot-bg-2);
  color: var(--ot-ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased
}

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

.container-xxl {
  max-width: 1280px
}

/* Announcement bar */
.announce {
  background: var(--ot-blue);
  color: #fff;
  font-size: .85rem;
  overflow: hidden;
  padding: .55rem 0
}

.announce .track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: marquee 30s linear infinite
}

.announce span {
  display: inline-flex;
  align-items: center;
  gap: 1rem
}

.announce .dot {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  opacity: .75
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* Navbar */
.ot-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgb(255 255 255 / 85%);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, .04)
}

.ot-nav .brand {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: .4rem
}

.ot-nav .brand .o {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ot-ink);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800
}

.ot-nav .nav-link {
  color: var(--ot-ink);
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: 999px
}

.ot-nav .nav-link:hover {
  background: rgba(0, 0, 0, .05);
}

.ot-nav .nav-link.active {
  background: var(--ot-ink);
  color: #fff
}

/* Buttons */
.btn-ot {
  background: var(--ot-ink);
  color: #fff;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: .2s
}

.btn-ot:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px)
}

.btn-ot-blue {
  background: var(--ot-blue);
  color: #fff;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  font-weight: 600;
  border: none
}

.btn-ot-blue:hover {
  background: var(--ot-blue-dark);
  color: #fff
}

.btn-outline-ot {
  background: transparent;
  color: var(--ot-ink);
  border: 1.5px solid var(--ot-ink);
  border-radius: 999px;
  padding: .65rem 1.3rem;
  font-weight: 600;
  font-size: 13px;
}

.btn-outline-ot:hover {
  background: var(--ot-ink);
  color: #fff
}

/* Hero */
.hero {
  background: linear-gradient(180deg, #eaf2ff 0%, #cfe0ff 100%);
  padding: 5rem 0 6rem;
  text-align: center;
  position: relative;
  overflow: hidden
}

.hero h1 {
    /* font-size: clamp(2.2rem, 5.5vw, 4.5rem); */
    /* font-weight: 800; */
    /* letter-spacing: -.03em; */
    /* color: var(--base-color); */
    /* line-height: 1.05; */
    /* text-shadow: 3px 5px #8ed7ff; */
}

.hero p.lead {
  font-size: 1.1rem;
  color: #2a3350;
  max-width: 560px;
  margin: 1rem auto 2rem;
  text-align: left;
}

.hero .hero-img {
  max-width: 520px;
  width: 100%;
  margin: 2rem auto 0;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(26, 60, 245, .25))
}

/* Sections */
.section {
  padding: 5rem 0
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1
}

.section-sub {
  color: var(--ot-muted);
  max-width: 640px
}

/* Cards */
.ot-card {
  background: #fff;
  border-radius: var(--ot-radius);
  overflow: hidden;
  border: 1px solid var(--ot-line);
  transition: .25s
}

.ot-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(15, 39, 179, .08)
}

.ot-card .img-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--ot-bg)
}

.ot-card .img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s
}

.ot-card:hover .img-wrap img {
  transform: scale(1.05)
}

.ot-card .body {
  padding: 1.1rem 1.2rem 1.3rem
}

.ot-card h5 {
  font-weight: 700;
  margin: 0 0 .25rem;
  font-size: 1.05rem
}

.ot-card .price {
  color: var(--ot-blue);
  font-weight: 700
}

/* Benefit tiles */
.benefit {
  background: #fff;
  border-radius: var(--ot-radius);
  overflow: hidden;
  border: 1px solid var(--ot-line)
}

.benefit .thumb {
  aspect-ratio: 1/1.15;
  overflow: hidden
}

.benefit .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.benefit .cap {
  padding: 1rem 1.2rem 1.3rem
}

.benefit .tag {
  font-size: .75rem;
  font-weight: 700;
  color: var(--ot-blue);
  letter-spacing: .1em;
  text-transform: uppercase
}

.benefit h6 {
  font-weight: 700;
  margin: .25rem 0 0;
  font-size: 1.05rem
}

/* Product detail */
.product-gallery {
  background: var(--ot-bg);
  border-radius: var(--ot-radius);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.product-gallery img {
  max-width: 85%
}

.thumb-row {
  display: flex;
  gap: .6rem;
  margin-top: .8rem
}

.thumb-row .t {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: var(--ot-bg);
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent
}

.thumb-row .t.active {
  border-color: var(--ot-blue)
}

.thumb-row .t img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.price-big {
  font-size: 2rem;
  font-weight: 800
}

.price-strike {
  color: var(--ot-muted);
  text-decoration: line-through;
  font-weight: 500;
  margin-left: .5rem
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--ot-line);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 500
}

/* Cart / Checkout */
.panel {
  background: #fff;
  border-radius: var(--ot-radius);
  border: 1px solid var(--ot-line);
  padding: 1.5rem
}

.line-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ot-line)
}

.line-item:last-child {
  border-bottom: none
}

.line-item .img {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  background: var(--ot-bg);
  overflow: hidden;
  flex-shrink: 0
}

.line-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ot-line);
  border-radius: 999px;
  overflow: hidden
}

.qty button {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  font-weight: 700;
  color: var(--ot-ink)
}

.qty span {
  padding: 0 .6rem;
  min-width: 2rem;
  text-align: center;
  font-weight: 600
}

.form-control,
.form-select {
  border-radius: 12px;
  padding: .75rem 1rem;
  border: 1px solid var(--ot-line);
  background: #fff
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ot-blue);
  box-shadow: 0 0 0 3px rgba(26, 60, 245, .15)
}

.form-label {
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: .35rem
}

/* Order confirmation */
.check-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--ot-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 1rem
}

/* Footer */
footer {
  background: var(--ot-ink);
  color: #c5cde0;
  padding: 4rem 0 2rem;
  margin-top: 5rem
}

footer h6 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem
}

footer a {
  color: #c5cde0;
  display: block;
  padding: .25rem 0
}

footer a:hover {
  color: #fff
}

footer .brand {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800
}

footer .fine {
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: .85rem;
  color: #8892a8
}

/* Offcanvas sidebar */
.offcanvas.offcanvas-start {
  width: 82%;
  max-width: 340px;
  background: var(--ot-bg-2)
}

.offcanvas .nav-link {
  font-size: 1.15rem;
  font-weight: 600;
  padding: .85rem 0;
  border-bottom: 1px solid var(--ot-line);
  color: var(--ot-ink)
}

.offcanvas .nav-link:hover {
  color: var(--ot-blue)
}

/* CTA banner */
.cta-banner {
  background: linear-gradient(135deg, var(--ot-blue), var(--ot-blue-dark));
  color: #fff;
  /* border-radius: var(--ot-radius); */
  padding: 3.5rem 2rem;
  text-align: center
}

.cta-banner h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 1rem
}

/* FAQ */
.accordion-item {
  background: #fff;
  border: 1px solid var(--ot-line);
  border-radius: 16px !important;
  margin-bottom: .75rem;
  overflow: hidden
}

.accordion-button {
  font-weight: 600;
  padding: 1.15rem 1.3rem;
  /* background: #fff !important; */
  box-shadow: none !important;
  color: var(--ot-ink)
}

.accordion-button:not(.collapsed) {
  color: var(--ot-blue)
}

.accordion-body {
  color: var(--ot-muted);
  padding: 0 1.3rem 1.2rem
}


/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, .8, .24, 1), transform .7s cubic-bezier(.16, .8, .24, 1)
}

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

/* ===== Floating gummy images ===== */
.gummy-float {
  position: absolute;
  width: 110px;
  filter: drop-shadow(0 20px 35px rgba(26, 60, 245, .25));
  animation: floaty 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  transform: rotate(var(--r, 0deg));
  pointer-events: none;
  z-index: 0
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0) rotate(var(--r, 0deg))
  }

  50% {
    transform: translateY(-20px) rotate(var(--r, 0deg))
  }
}

.hero .gf1 {
  width: 130px;
  left: 3%;
  top: 14%
}

.hero .gf2 {
  width: 80px;
  left: 16%;
  top: 62%
}

.hero .gf3 {
  width: 130px;
  right: 3%;
  top: 16%
}

.hero .gf4 {
  width: 80px;
  right: 14%;
  top: 58%
}

.hero .container-xxl {
  z-index: 1
}

/* Photo collage (timeline) */
.collage {
  position: relative;
  padding: 2rem 2.5rem 2.5rem 0
}

.collage img {
  border-radius: 20px;
  object-fit: cover;
  display: block
}

.collage .c1 {
  width: 78%;
  aspect-ratio: 4/5;
  box-shadow: 0 25px 50px rgba(15, 39, 179, .15)
}

.collage .c2 {
  width: 52%;
  aspect-ratio: 1/1;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 6px solid var(--ot-bg);
  box-shadow: 0 20px 40px rgba(15, 39, 179, .2)
}

.collage-badge {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 56px !important;
  height: 56px;
  border-radius: 50%;
  animation: floaty 5s ease-in-out infinite
}

/* Timeline steps */
.timeline-steps {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: relative;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ot-line)
}

.tstep {
  position: relative
}

.tstep .tnum {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ot-blue);
  letter-spacing: .1em;
  background: #dbe6ff;
  padding: .25rem .7rem;
  border-radius: 999px;
  margin-bottom: .5rem
}

.tstep::before {
  content: "";
  position: absolute;
  left: -1.58rem;
  top: 0.9rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ot-blue)
}

/* Magazine logo marquee */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.logo-track {
  display: flex;
  gap: 4.5rem;
  white-space: nowrap;
  animation: marquee 26s linear infinite;
  align-items: center;
  width: max-content
}

.logo-track img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: .55;
  filter: grayscale(1);
  flex-shrink: 0
}

.mini-product-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: #fff;
  border: 1px solid var(--ot-line);
  border-radius: 999px;
  padding: .55rem 1.2rem .55rem .55rem;
  box-shadow: 0 15px 35px rgba(15, 39, 179, .08);
  transition: .2s
}

.mini-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(15, 39, 179, .16)
}

.mini-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ot-bg)
}

.mini-stars {
  color: #ffb400;
  letter-spacing: 1px;
  font-size: .85rem
}

/* All-in-one gummy hero */
.gummy-hero {
  background: url(../images/banner3.png);
  padding: 5rem 0 8rem;
  color: #fff;
  text-align: center;
  background-repeat: no-repeat;
  position: relative;
  background-attachment: fixed;
  overflow: hidden;
  background-position: top center;
}

.gummy-hero h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em
}

.gummy-hero-img-wrap {
  position: relative;
  display: inline-block;
  margin-top: 2rem
}

.big-gummy-float {
  max-width: 300px;
  width: 55vw;
  animation: floaty 5s ease-in-out infinite;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .35))
}

.gh-chip {
  position: absolute;
  left: -30%;
  top: 38%;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap
}

.gummy-hero .mini-product-card {
  color: var(--ot-ink)
}

/* Ingredients layout */
.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.ing-item {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ot-line)
}

.ing-item:last-child {
  border-bottom: none
}

.ing-item h5 {
  font-weight: 700;
  font-size: 20px;
  /* color: var(--base-color); */
  margin-bottom: 0.25rem;
}

.ingredient-center-img {
  max-width: 220px;
  animation: floaty 5s ease-in-out infinite
}

/* Check list */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  font-weight: 600
}


.check-list li::before {
    content: ">";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ot-blue);
  color: #fff;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center
}

/* Overlay cards on images */
.img-overlay-card {
  position: relative;
  border-radius: var(--ot-radius);
  overflow: hidden
}

.img-overlay-card img {
  width: 100%;
  display: block
}

.overlay-panel {
  position: absolute;
  left: 6%;
  bottom: 6%;
  right: 6%;
  background: rgba(11, 16, 32, .72);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  color: #fff;
  max-width: 363px;
}

.op-title {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .6rem;
  opacity: .85
}

.op-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  margin-bottom: .4rem
}

.op-bar span {
  width: 121px;
  flex-shrink: 0;
  opacity: .8;
  line-height: normal;
}

.op-bar b {
  width: 56px;
  text-align: right;
  flex-shrink: 0;
  line-height: normal;
}

.op-bar .bar {
  flex-grow: 1;
  height: 6px;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  overflow: hidden
}

.op-bar .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #4fb3e8, #1a3cf5);
  border-radius: 999px;
  transition: width 1.4s cubic-bezier(.16, .8, .24, 1)
}

.ing-profile-row {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  padding: .35rem 0;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.overlay-quote {
    position: absolute;
    left: 6%;
    border: 1px solid #fff;
    right: 6%;
    bottom: 6%;
    background: #ffffff70;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    color: #fff;
}

.overlay-quote p {
    color: var(--base-color);
    line-height: 23px;
    font-weight: 400;
}
.overlay-quote h5 {
    color: var(--base-color);
    font-size: 20px;
    font-weight: 600;
}
.avatar-row img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .5);
  margin-right: -8px
}

/* Stats */
.stat-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--ot-blue);
  letter-spacing: -.02em
}

/* Introducing OneThing Gummies */
.intro-gummies {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
  background: var(--ot-bg-2)
}

.intro-gummies h2 {
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1
}

.intro-gummies .spaced-title {
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--ot-blue);
  margin-top: .75rem
}

.intro-gummies .s1 {
  width: 110px;
  left: 4%;
  top: 15%
}

.intro-gummies .s2 {
  width: 80px;
  left: 20%;
  bottom: 12%
}

.intro-gummies .s3 {
  width: 140px;
  right: 6%;
  top: 10%
}

.intro-gummies .s4 {
  width: 70px;
  right: 22%;
  bottom: 18%
}

.intro-gummies .s5 {
  width: 60px;
  left: 42%;
  top: 8%
}

.intro-gummies .s6 {
  width: 95px;
  right: 40%;
  bottom: 5%
}

/* Buy gallery */
.buy-gallery {
  position: relative;
  border-radius: var(--ot-radius);
  overflow: hidden;
  background: var(--ot-bg)
}

.buy-gallery img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  padding: 2rem
}

.gallery-dots {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.gallery-dots .gd {
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: var(--ot-line);
  cursor: pointer
}

.gallery-dots .gd.active {
  background: var(--ot-blue)
}

.gallery-dots em {
  margin-left: auto;
  font-style: normal;
  font-size: .75rem;
  color: var(--ot-muted)
}

/* Buy panel */
.buy-panel {
  background: #fff;
  border: 1px solid var(--ot-line);
  border-radius: var(--ot-radius);
  padding: 1.75rem
}

.plan-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--ot-line);
  cursor: pointer
}

.plan-row:last-of-type {
  border-bottom: none
}

.plan-row input[type=radio] {
  width: 18px;
  height: 18px;
  accent-color: var(--ot-blue);
  flex-shrink: 0
}

.buy-panel .accordion-item {
  border-radius: 12px !important
}

.buy-panel-row {
  align-items: flex-start
}

/* CTA with image */
.cta-banner-img {
  background: linear-gradient(135deg, rgba(26, 60, 245, .85), rgba(15, 39, 179, .9)), url('https://framerusercontent.com/images/PQKpLM6GrA95kDLV5e9JMlDcWI0.png?width=1200') center/cover
}

/* Review cards */
.review-card {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 3/4;
  transition: .3s
}

.review-card:hover {
  transform: translateY(-4px)
}

.review-card img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.review-card .rc-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem;
  background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent)
}

.review-card .rc-cap p {
  font-size: .78rem;
  font-weight: 600;
  margin: .25rem 0 0;
  line-height: normal;
  color: #fff
}

/* Footer socials */
.social-ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700
}

.social-ic:hover {
  background: rgba(255, 255, 255, .18)
}

@media(max-width:991px) {
  .collage {
    padding: 1rem 1rem 2rem 0
  }

  .gh-chip {
    left: 2%;
    top: 0
  }

  .overlay-panel,
  .overlay-quote {
    position: static;
    margin-top: 1rem;
    max-width: 100%
  }
}

@media(max-width:768px) {
  .hero {
    padding: 3rem 0 4rem
  }

  .section {
    padding: 3rem 0
  }

  .gummy-float {
    width: 60px !important
  }

  .intro-gummies {
    padding: 4rem 0
  }

  .intro-gummies .s1,
  .intro-gummies .s2,
  .intro-gummies .s3,
  .intro-gummies .s4,
  .intro-gummies .s5,
  .intro-gummies .s6 {
    width: 50px !important
  }

  .buy-panel-row {
    flex-direction: column
  }

  .gh-chip {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .gummy-float,
  .big-gummy-float,
  .ingredient-center-img,
  .collage-badge {
    animation: none
  }

  .reveal {
    transition: none
  }
}

a.footer-logo img {
  width: auto;
  height: 47px;
}

.quantity-product {
  width: 60px;
  background: transparent;
  color: #000;
  border: none;
}


.flo-pro-box {
  background: #ffffff;
  box-shadow: 4px 5px 20px 1px #dddddd40;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  display: inline-flex;
  padding: 0px 9px;
}

.flo-pro-box img {
  width: 80px;
}

.flo-pro-info {
  margin: 0 50px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flo-pro-box a {
  background: #000;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.flo-pro-box a svg {
  /* width: 20px; */
  color: #fff;
}

.flo-text {
  font-size: 15px;
  font-weight: 600;
  color: #464646;
}

.flo-tx-pr {
  color: #908e8e;
  padding-top: 5px;
  font-weight: 600;
}

.timeline-steps h4 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 !important;
}

.ing-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px;
}

.ing-item:hover{
    transform:translateY(-6px);
    /* box-shadow:0 20px 40px rgba(0,0,0,.10); */
    /* transition: .2s ease; */
}

.ing-item .icon{
    width:62px;
    height:62px;
    min-width:62px;
    border-radius:16px;
    background: #0d6efd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.ing-item h5{
    font-weight:700;
    margin-bottom:8px;
}

.ing-item p{
    line-height:1.7;
    margin:0;
}

.ingredient-center-img{
    max-width:340px;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.15));
}

@media(max-width:991px){
    .ing-item{
        margin-bottom:20px;
    }

    .ingredient-center-img{
        max-width:260px;
        margin:30px 0;
    }
}

.f-widget {
    display: flex;
    align-items: center;
    margin: 10px 0;
}


#cookiePopup h4 {
        font-size: 25px;
        color: #fff;
        margin-bottom: 15px;
    }
    #cookiePopup p {
        font-size: 15px;
        color: #fff;
        margin-bottom: 15px;
        letter-spacing: 1px;
        line-height: 1.5;
        max-width: 850px;
    }
    #cookiePopup p a {
        color: #fff;
        text-decoration: underline;
    }
    .cookieBtns {
        display: inline-flex;
        gap: 10px;
    }
    .cookieBtns button {
        font-size: 15px;
        margin: 10px 0;
        color: #fff;
padding: 10px 20px;
border-radius: 5px;
background: #000;
cursor: pointer;
transition: all 0.5s ease;
border: 2px solid #fff;
}
.cookieBtns button:last-child {
background-color: #fff;
color: #666 !important;
}

#declineCookie {
    background-color: #ffffff !important;
}








  :root{
    --ot-green:#28603F;
    --ot-green-deep:#173D28;
    --ot-green-tint:#E7F1EA;
    --ot-gold:#D9A441;
    --ot-bg:#F7F7F4;
    --ot-white:#FFFFFF;
    --ot-ink:#15201A;
    --ot-muted:#63706A;
    --ot-line:#DEE3DC;
    --font-display:'Fraunces',serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'Space Mono',monospace;
  }

  *{ box-sizing:border-box; }
  body{ font-family:var(--font-body); color:var(--ot-ink); background:var(--ot-white); -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--ot-ink); margin:0; }
  a{ text-decoration:none; color:inherit; }
  .container-xxl{max-width:1280px;/* padding: 0; */}

  .eyebrow-tag{
    font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ot-green); display:inline-flex; align-items:center; gap:.5rem;
  }
  .eyebrow-tag::before{ content:""; width:18px; height:1px; background:var(--ot-green); display:inline-block; }

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---------- Buttons ---------- */
  .btn-ot{
    background:var(--ot-ink); color:#fff !important; border:1px solid var(--ot-ink);
    border-radius:2px; padding:.85rem 1.7rem; font-family:var(--font-body); font-weight:600; font-size:.9rem;
    display:inline-flex; align-items:center; gap:.6rem; transition:background .25s ease, transform .25s ease;
  }
  .btn-ot::after{ content:">"; transition:transform .25s ease; }
  .btn-ot:hover{ background:var(--ot-green); border-color:var(--ot-green); color:#fff !important; }
  .btn-ot:hover::after{ transform:translateX(4px); }
  .btn-outline-ot{
    background:transparent; color:var(--ot-ink) !important; border:1px solid var(--ot-ink);
    border-radius:2px; padding:.8rem 1.6rem; font-weight:600; font-size:.9rem; transition:all .25s ease;
  }
  .btn-outline-ot:hover{ background:var(--ot-ink); color:#fff !important; }
  .btn-lg{padding:1.05rem 2.2rem;font-size:1rem;/* text-align: center; */justify-content: center;}

  /* ---------- Ticker ---------- */
  .announce{ background:var(--ot-green-deep); color:#fff; overflow:hidden; white-space:nowrap; padding:.5rem 0; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
  .announce .track{ display:inline-flex; gap:2.5rem; animation:ticker 26s linear infinite; padding-left:2.5rem; }
  .announce .dot{ display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--ot-gold); margin-left:2.5rem; vertical-align:middle; }
  @keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ---------- Nav ---------- */
  .ot-nav{ position:sticky; top:0; z-index:1000; background:rgba(247,247,244,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ot-line); transition:box-shadow .3s ease; }
  .ot-nav.scrolled{ box-shadow:0 12px 30px -24px rgba(21,32,26,.5); }
  .ot-nav .footer-logo img{height: 70px;width:auto;}
  .ot-nav .nav-link{ font-family:var(--font-body); font-weight:500; font-size:.9rem; color:var(--ot-ink); padding:.5rem .8rem; border-bottom:2px solid transparent; }
  .ot-nav .nav-link:hover{/* border-color:var(--ot-gold); */}
  .offcanvas .offcanvas-header{ border-bottom:1px solid var(--ot-line); }
  .offcanvas .nav-link{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; padding:.8rem 0; color:var(--ot-ink); border-bottom:1px solid var(--ot-line); }

  /* ---------- HERO — asymmetric split, label-tag overlay ---------- */
  .hero{ background:var(--ot-bg); overflow:hidden; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; min-height:640px; }
  .hero-copy{ display:flex; flex-direction:column; justify-content:center; padding:3.5rem clamp(1.5rem,5vw,5rem) 3.5rem clamp(1.5rem,5vw,4rem); }
  .hero-copy .eyebrow-tag{ margin-bottom:1.5rem; }
  .hero h1{font-size:clamp(2.4rem,4.6vw,3.9rem);font-weight:600;line-height:1.04;letter-spacing:-.01em;margin-bottom:1.3rem;text-align: left;}
  .hero h1 em{ font-style:italic; color:var(--ot-green); }
  .hero .lead{ font-size:1.05rem; color:var(--ot-muted); max-width:440px; margin-bottom:2.1rem; line-height:1.6; }
  .hero .hero-ctas{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:2.5rem; }
  .hero .facts-row{display:flex;gap:2.2rem;border-top:1px solid var(--ot-line);padding-top:1.4rem;flex-wrap:wrap;}
  .hero .facts-row div{ font-family:var(--font-mono); font-size:.68rem; color:var(--ot-muted); text-transform:uppercase; letter-spacing:.06em; }
  .hero .facts-row b{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--ot-ink); font-weight:600; }

  .hero-visual{ position:relative; background:var(--ot-green-tint); overflow:hidden; }
  .hero-visual .hero-img{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); max-width:82%; filter:drop-shadow(0 30px 40px rgba(21,32,26,.22)); }
  .hero-visual .label-tag{
    position:absolute; top:8%; right:8%; background:var(--ot-white); border:1px solid var(--ot-line);
    padding:1rem 1.1rem; max-width:190px; box-shadow:0 20px 40px -22px rgba(21,32,26,.35);
  }
  .hero-visual .label-tag .lt-h{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ot-green); margin-bottom:.4rem; }
  .hero-visual .label-tag .lt-b{ font-family:var(--font-display); font-size:.95rem; font-weight:600; line-height:1.3; }
  .hero-visual .gummy-float{ position:absolute; width:52px; opacity:.9; filter:drop-shadow(0 12px 14px rgba(21,32,26,.18)); animation:floaty 6s ease-in-out infinite; animation-delay:var(--d,0s); transform:rotate(var(--r,0deg)); }
  @keyframes floaty{ 0%,100%{transform:translateY(0) rotate(var(--r,0deg));} 50%{transform:translateY(-14px) rotate(var(--r,0deg));} }
  @media (prefers-reduced-motion: reduce){ .hero-visual .gummy-float{ animation:none; } }
  .hero-visual .gf1{ top:16%; left:8%; }
  .hero-visual .gf2{ bottom:30%; right:10%; width:44px; }
  .hero-visual .gf3{ bottom:8%; left:10%; width:40px; }
  .hero-visual .gf4{ top:42%; right:6%; width:46px; }

  @media (max-width:991px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ min-height:380px; order:-1; }
    .hero-copy{ padding:2.6rem 1.25rem; }
  }

  /* ---------- Sections ---------- */
  .section{ padding:5.5rem 0; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }
  .section-title{ font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:600; line-height:1.1; }
  .section-sub{ color:var(--ot-muted); max-width:480px; font-size:.98rem; }

  /* ---------- Benefit rail (horizontal scroll, numbered) ---------- */
  #benefits{ background:var(--ot-white); }
  .benefit-rail{ display:flex; gap:1.1rem; overflow-x:auto; padding-bottom:1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .benefit-rail::-webkit-scrollbar{ height:5px; }
  .benefit-rail::-webkit-scrollbar-thumb{ background:var(--ot-line); border-radius:999px; }
  .benefit-card{ scroll-snap-align:start; flex:0 0 240px; border:1px solid var(--ot-line); background:var(--ot-white); transition:border-color .3s ease, transform .3s ease; }
  .benefit-card:hover{ transform:translateY(-6px); border-color:var(--ot-green); }
  .benefit-card .thumb{ aspect-ratio:1/1; background:var(--ot-green-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .benefit-card .thumb img{ width:58%; height:58%; object-fit:contain; }
  .benefit-card .cap{ padding:1rem 1.1rem 1.3rem; position:relative; }
  .benefit-card .num{ font-family:var(--font-mono); color:var(--ot-gold); font-size:.75rem; }
  .benefit-card .tag{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ot-green); display:block; margin:.5rem 0 .3rem; }
  .benefit-card h6{ font-family:var(--font-body); font-weight:600; font-size:.92rem; margin:0; line-height:1.4; }

  /* ---------- Timeline — horizontal stepper ---------- */
  #effects-timeline{ background:var(--ot-green-deep); color:#fff; }
  #effects-timeline .section-title{ color:#fff; }
  #effects-timeline .section-sub{ color:rgba(255,255,255,.65); }
  #effects-timeline .eyebrow-tag{ color:var(--ot-gold); }
  #effects-timeline .eyebrow-tag::before{ background:var(--ot-gold); }
  .stepper{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.18); margin-top:2.5rem; }
  .step-col{ padding:2rem 1.6rem 0 0; border-left:1px solid rgba(255,255,255,.18); padding-left:1.6rem; position:relative; }
  .step-col:first-child{ border-left:none; padding-left:0; }
  .step-col .tnum{ font-family:var(--font-mono); color:var(--ot-gold); font-size:.85rem; letter-spacing:.08em; }
  .step-col h4{font-size:1.3rem;font-weight:600;margin:.6rem 0 .7rem;color: #fff;}
  .step-col p{ color:rgba(255,255,255,.68); font-size:.92rem; line-height:1.6; margin:0; }
  @media (max-width:768px){ .stepper{ grid-template-columns:1fr; } .step-col{ border-left:none; border-top:1px solid rgba(255,255,255,.18); padding:1.6rem 0 0; } .step-col:first-child{ border-top:none; } }

  /* ---------- Spotlight strip ---------- */
  .spotlight-strip{ background:var(--ot-white); border-top:1px solid var(--ot-line); border-bottom:1px solid var(--ot-line); padding:2.4rem 0; }
  .flo-pro-box{display:flex;align-items:center;gap:1.3rem;max-width:520px;margin:1.6rem auto 0;padding:1rem 1.3rem;border:1px solid var(--ot-line);background:var(--ot-bg);opacity: 1;}
  .flo-pro-box img{ width:76px; height:76px; object-fit:contain; background:var(--ot-white); border:1px solid var(--ot-line); padding:.5rem; }
  .flo-pro-info{display:flex;flex-direction:column;gap:.2rem;text-align:left;flex:1;}
  .flo-text{font-family:var(--font-display);font-weight:600;/* color: #000; */font-size:1.05rem;}
  .flo-tx-pr{ font-family:var(--font-mono); color:var(--ot-green); font-size:.85rem; }
  .flo-pro-box > a{ width:42px; height:42px; border-radius:50%; background:var(--ot-ink); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; transition:background .2s ease; }
  .flo-pro-box > a:hover{ background:var(--ot-green); }
  .flo-pro-box > a svg{ width:20px; height:20px; }

  /* ---------- Gummy hero — diagonal clip banner ---------- */
  .gummy-hero{
    background:var(--ot-green); color:#fff; text-align:center; position:relative; overflow:hidden;
    padding:5.5rem 0 7.5rem;
    clip-path:polygon(0 0,100% 0,100% 92%,0 100%);
  }
  .gummy-hero h2{ color:#fff; font-size:clamp(2rem,3.6vw,2.9rem); font-weight:600; }
  .gummy-hero p{ color:rgba(255,255,255,.82); max-width:520px; margin:1rem auto 0; }
  .gh-chip-1{ display:inline-flex; margin-top:2rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); padding:.6rem 1.3rem; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; }

  /* ---------- Ingredients — spec-sheet rows ---------- */
  #ingredients{ background:var(--ot-bg); }
  .spec-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start; }
  .spec-list{ border-top:1px solid var(--ot-ink); }
  .ing-item{display:flex;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid var(--ot-line);align-items:flex-start;transition: .2s ease;}
  .ing-item .num{ font-family:var(--font-mono); color:var(--ot-gold); font-size:.85rem; flex:none; width:34px; padding-top:.15rem; }
  .ing-item h5{ font-family:var(--font-body); font-size:1rem; font-weight:700; margin-bottom:.25rem; }
  .ing-item p{ font-size:.9rem; color:var(--ot-muted); margin:0; }
  .spec-visual{ position:sticky; top:100px; text-align:center; }
  .ingredient-center-img{ max-width:78%; filter:drop-shadow(0 26px 30px rgba(21,32,26,.18)); }
  @media (max-width:991px){ .spec-wrap{ grid-template-columns:1fr; } .spec-visual{ position:static; order:-1; margin-bottom:1rem; } }

  /* ---------- Shop bento ---------- */
  .shop-bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
  .shop-bento .col-6.col-md-4.col-lg-3:first-of-type{ grid-row:span 2; grid-column:span 2; }
  .ot-card{ background:var(--ot-white); border:1px solid var(--ot-line); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:border-color .3s ease, transform .3s ease; }
  .ot-card:hover{ transform:translateY(-5px); border-color:var(--ot-green); }
  .ot-card .img-wrap{ flex:1; background:var(--ot-green-tint); display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:140px; }
  .ot-card .img-wrap img{ width:66%; height:66%; object-fit:contain; }
  .ot-card .body{ padding:1rem 1.1rem 1.2rem; }
  .ot-card h5{ font-family:var(--font-body); font-size:.92rem; font-weight:600; margin-bottom:.4rem; }
  .ot-card .price{ font-family:var(--font-mono); font-weight:700; color:var(--ot-green); font-size:1rem; }
  .ot-card .price-strike{ color:#aab3ac; text-decoration:line-through; font-size:.82rem; margin-left:.4rem; }

  /* ---------- Quality sections — dial-tick meters ---------- */
  .quality-block{ background:var(--ot-white); border-top:1px solid var(--ot-line); }
  .check-list{ list-style:none; padding:0; margin:0; display:grid; gap:0; border-top:1px solid var(--ot-ink); }
  .check-list li{ position:relative; padding:.85rem 0 .85rem 2rem; font-size:.95rem; border-bottom:1px solid var(--ot-line); }
  .check-list li::before{ content:">"; position:absolute; left:0; top:.85rem; color:#fff; font-family:var(--font-mono); font-weight:700; }
  .img-overlay-card{ position:relative; }
  .img-overlay-card img{ width:100%; }
  .overlay-panel{ background:var(--ot-ink); color:#fff; padding:1.4rem 1.5rem; margin-top:1.2rem; }
  .op-title{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; margin-bottom:1rem; color:rgba(255,255,255,.7); }
  .op-bar{ display:grid; grid-template-columns:1fr 2fr auto; align-items:center; gap:.7rem; font-size:.8rem; margin-bottom:.7rem; }
  .op-bar span{ color:rgba(255,255,255,.7); }
  .op-bar .bar{ height:3px; background:rgba(255,255,255,.2); position:relative; }
  .op-bar .bar i{ display:block; height:100%; background:var(--ot-gold); }
  .op-bar b{ font-family:var(--font-mono); color:var(--ot-gold); font-size:.76rem; }
  .ing-profile-row{ display:flex; justify-content:space-between; padding:.55rem 0; border-bottom:1px dashed rgba(255,255,255,.2); font-size:.88rem; }
  .ing-profile-row:last-child{ border-bottom:none; }
  .ing-profile-row b{ color:var(--ot-gold); }
  .overlay-quote{ background:var(--ot-ink); color:#fff; padding:1.3rem 1.5rem; margin-top:1.2rem; }
  .overlay-quote h5{ font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:#fff; }
  .overlay-quote p{ font-size:.88rem; color:rgba(255,255,255,.68); margin:.5rem 0 0; }
  .stat-num{ font-family:var(--font-display); font-weight:600; color:var(--ot-green); font-size:1.4rem; margin-bottom:.2rem; }

  /* ---------- Intro gummies — big diagonal type moment ---------- */
  .intro-gummies{ position:relative; background:var(--ot-bg); color:var(--ot-ink); padding:6rem 0; text-align:center; overflow:hidden; }
  .intro-gummies h2{ font-size:clamp(2.4rem,7vw,5.4rem); font-weight:600; line-height:.95; }
  .intro-gummies .spaced-title{ font-family:var(--font-mono); font-weight:700; letter-spacing:.4em; color:var(--ot-green); margin-top:1rem; font-size:clamp(.8rem,1.5vw,1.05rem); }
  .intro-gummies .gummy-float{ position:absolute; width:70px; opacity:.85; filter:drop-shadow(0 14px 16px rgba(21,32,26,.15)); animation:floaty 6s ease-in-out infinite; animation-delay:var(--d,0s); transform:rotate(var(--r,0deg)); }

  /* ---------- FAQ — two-column, ink background ---------- */
  #faq{ background:var(--ot-ink); color:#fff; }
  #faq .section-title{ color:#fff; }
  #faq .eyebrow-tag{ color:var(--ot-gold); }
  #faq .eyebrow-tag::before{ background:var(--ot-gold); }
  .faq-columns{ column-count:2; column-gap:1.6rem; }
  @media (max-width:820px){ .faq-columns{ column-count:1; } }
  #faq .accordion-item{ background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,.2); border-radius:0 !important; break-inside:avoid; margin-bottom:0; }
  #faq .accordion-button{font-family:var(--font-body);font-weight:600;font-size:.98rem;color:#fff;background:transparent;box-shadow:none;padding:1.2rem 0;}
  #faq .accordion-button::after{ filter:invert(1); }
  #faq .accordion-button:not(.collapsed){ color:var(--ot-gold); }
  #faq .accordion-button:focus{ box-shadow:none; }
  #faq .accordion-body{ font-size:.9rem; color:rgba(255,255,255,.65); padding:0 0 1.3rem; }

  /* ---------- CTA — diagonal split ---------- */
  .cta-banner{ background:var(--ot-green); color:#fff; padding:3.6rem 2rem; text-align:center; position:relative; overflow:hidden; }
  .cta-banner::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 55%, rgba(255,255,255,.08) 55%); }
  .cta-banner h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:1.5rem; position:relative; }
  .cta-banner .btn-light{ border-radius:2px; font-weight:600; color:var(--ot-green); position:relative; }
  .cta-banner .btn-outline-light{ border-radius:2px; font-weight:600; position:relative; }

  /* ---------- Reviews — horizontal scroll ---------- */
  .review-rail{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
  .review-card{ scroll-snap-align:start; flex:0 0 260px; border:1px solid var(--ot-line); background:var(--ot-white); }
  .review-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
  .review-card .rc-cap{ padding:1rem 1.1rem 1.2rem; }
  .mini-stars{ color:var(--ot-gold); font-size:.82rem; margin-bottom:.4rem; }
  .review-card p{ font-size:.86rem; color:var(--ot-muted); margin:0; }

  /* ---------- Footer ---------- */
  .footer-dark{ background:var(--ot-green-deep); color:rgba(255,255,255,.75); }
  .footer-dark .footer-navbar{ list-style:none; display:flex; gap:1.4rem; flex-wrap:wrap; padding:0; margin:0; }
  .footer-dark .footer-navbar .nav-link{ color:rgba(255,255,255,.8); font-size:.9rem; }
  .footer-dark .footer-navbar .nav-link:hover{ color:var(--ot-gold); }
  .footer-dark .fw-500{ font-family:var(--font-mono); text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
  .footer-dark ul{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
  .footer-dark ul li a{ color:rgba(255,255,255,.65); font-size:.88rem; }
  .footer-dark ul li a:hover{ color:var(--ot-gold); }
  .footer-dark .f-widget a{ color:rgba(255,255,255,.75); font-size:.88rem; }
  .bg-nero-grey{ background:#0F1C13 !important; }
  .disc p{ font-size:.76rem; color:rgba(255,255,255,.5); max-width:760px; margin:0 auto .8rem; }