:root {
--green-deep: #1a3a2a;
--green-mid: #2d6147;
--green-fresh: #4a9068;
--green-light: #7cbd9a;
--green-pale: #c8e6d4;
--gold: #c9a84c;
--gold-light: #e8d08a;
--cream: #f7f3eb;
--cream-dark: #ede7d9;
--brown: #5c3d2e;
--white: #fefefe;
--text-dark: #1a2820;
--text-mid: #3d5247;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* padding-top: 80px; */
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* ── GRAIN OVERLAY ── */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
opacity: 0.4;
}

/* ── NAV ── */
.menu-toggle {
  display: none;
}

nav {
position: fixed; top: 0; width: 100%; z-index: 1000;
background: rgba(247,243,235,0.92);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(74,144,104,0.2);
transition: all 0.4s ease;
}

nav.scrolled {
/* background: rgba(26,58,42,0.97); */
background: var(--cream-dark);
}
nav.scrolled .nav-logo-text,
nav.scrolled .nav-links a,
nav.scrolled .nav-tagline { color: var(--gold) !important; }
nav.scrolled .nav-links a::after { background: var(--gold); }
nav.scrolled .nav-logo-mark { filter: brightness(3); }

.nav-inner {
max-width: 1400px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
padding: 0 3rem;
height: 80px;
}

.nav-logo {
display: flex; align-items: center; gap: 0.8rem;
cursor: pointer; text-decoration: none;
}

.nav-logo-mark {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
}

.nav-logo-mark svg { width: 100%; height: 100%; }

.nav-logo-text-wrap { display: flex; flex-direction: column; }

.nav-logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--green-deep);
letter-spacing: 0.05em;
line-height: 1;
transition: color 0.4s;
}

.nav-tagline {
font-size: 0.6rem;
font-weight: 300;
letter-spacing: 0.2em;
color: var(--green-mid);
text-transform: uppercase;
transition: color 0.4s;
}

.nav-links {
display: flex; align-items: center; gap: 2.5rem;
list-style: none;
}

.nav-links a {
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--green-deep);
text-decoration: none;
position: relative;
padding-bottom: 4px;
transition: color 0.3s;
cursor: pointer;
}

.nav-links a::after {
content: '';
position: absolute; bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--green-fresh);
transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

.nav-carnation-logo {
  height: 50px;
  width: auto;
  display: inline-block;
}

/* ── SECTIONS ── */
/* .page { display: none; } */
/* .page.active { display: block; } */

/* ── HOME ── */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
position: relative;
overflow: hidden;
}

.hero-left {
background: var(--green-deep);
display: flex;
flex-direction: column;
justify-content: center;
padding: 8rem 5rem 6rem 6rem;
position: relative;
overflow: hidden;
}

.hero-left::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,144,104,0.3) 0%, transparent 70%);
top: -100px; right: -100px;
}

.hero-left::after {
content: '';
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,168,76,0.15) 0%, transparent 70%);
bottom: 50px; left: -50px;
}

.hero-eyebrow {
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 0.8s 0.2s forwards;
}

.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3.5rem, 5vw, 6rem);
font-weight: 300;
color: var(--white);
line-height: 1.05;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 0.8s 0.4s forwards;
}

.hero-title em {
font-style: italic;
color: var(--green-light);
}

.hero-desc {
font-size: 0.9rem;
font-weight: 300;
color: rgba(255,255,255,0.65);
line-height: 1.8;
max-width: 380px;
margin-bottom: 2.5rem;
opacity: 0;
animation: fadeUp 0.8s 0.6s forwards;
}

.hero-cta-row {
display: flex; gap: 1rem; align-items: center;
opacity: 0;
animation: fadeUp 0.8s 0.8s forwards;
}

/* .btn-primary {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.9rem 2rem;
background: var(--gold);
color: var(--green-deep);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border: none; cursor: pointer;
transition: all 0.3s ease;
}

.btn-primary:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(201,168,76,0.4);
} */

/* ── BUTTON BASE ── */
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  min-height: 52px;
  padding: 0 2rem;

  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;

  border: 1px solid transparent;
  cursor: pointer;

  position: relative;
  z-index: 20;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* PRIMARY */
.btn-primary {
  background: var(--gold);
  color: var(--green-deep);
}

.btn-primary:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,168,76,0.4);
}

/* OUTLINE */
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.3);
}

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

.btn-primary:disabled {
  background: rgba(150, 150, 150, 0.1);
  color: #999;
  border-color: rgba(150, 150, 150, 0.2);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}


/* .btn-outline {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.9rem 2rem;
background: transparent;
color: var(--white);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s ease;
}

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

.btn-primary,
.btn-outline {
  position: relative;
  z-index: 5;

  cursor: pointer;
} */

/* .hero-stats {
position: absolute;
bottom: 3rem; left: 6rem;
display: flex; gap: 3rem;
opacity: 0;
animation: fadeUp 0.8s 1s forwards;
} */


.hero-stats {
  position: absolute;
  top: 0.5rem;
  flex-direction: row;
  gap: 2rem;
  display: flex; 
  margin-top: 2rem;
  opacity: 0;
  animation: fadeUp 0.8s 1s forwards;
}

.stat { display: flex; flex-direction: column; }
.stat-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem; font-weight: 300;
color: var(--gold);
}
.stat-label {
font-size: 0.6rem; letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
margin-top: 0.2rem;
}

.hero-right {
background: var(--cream-dark);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

/* .hero-right::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(74,144,104,0.04) 40px,
    rgba(74,144,104,0.04) 41px
);
} */

.hero-visual {
position: relative;
width: 380px; height: 380px;
display: flex; align-items: center; justify-content: center;
}

.hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid;
animation: spin 20s linear infinite;
}

.hero-ring:nth-child(1) {
width: 380px; height: 380px;
border-color: rgba(74,144,104,0.2);
animation-duration: 25s;
}
.hero-ring:nth-child(2) {
width: 300px; height: 300px;
border-color: rgba(201,168,76,0.3);
animation-direction: reverse;
animation-duration: 18s;
}
.hero-ring:nth-child(3) {
width: 220px; height: 220px;
border-color: rgba(74,144,104,0.35);
animation-duration: 12s;
}

.hero-img-wrap {
width: 200px; height: 200px;
border-radius: 50%;
overflow: hidden;
background: var(--green-deep);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 30px 80px rgba(26,58,42,0.35);
z-index: 2;
}

.hero-img-placeholder {
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}

.hero-img-placeholder svg { opacity: 0.7; }

.hero-img-placeholder span {
font-size: 0.6rem; letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}

.hero-left > *,
.hero-right > * {
  position: relative;
  z-index: 2;
}

/* ── ABOUT STRIP ── */
.about-strip {
background: var(--green-deep);
padding: 1.5rem 6rem;
display: flex; align-items: center; gap: 4rem;
overflow-x: auto;
}

.strip-item {
display: flex; align-items: center; gap: 0.8rem;
white-space: nowrap;
flex-shrink: 0;
}

.strip-icon {
width: 36px; height: 36px;
background: rgba(74,144,104,0.3);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-size: 1rem;
}

.strip-text {
font-size: 0.7rem; letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
font-weight: 300;
}

.strip-divider {
width: 1px; height: 30px;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
}


  /* MARQUEE */
  .marquee-wrap {
    background: var(--green-mid);
    overflow: hidden;
    padding: 14px 0;
  }
  .marquee-inner {
    display: flex;
    gap: 0;
    animation: marquee 7s linear infinite;
    white-space: nowrap;
  }
  .marquee-inner span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    padding: 0 48px;
    flex-shrink: 0;
  }
  .marquee-inner .sep {
    color: var(--jade-light);
    padding: 0 4px;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

/* ── HOME FEATURE SECTION ── */
.home-feature {
padding: 8rem 6rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8rem;
align-items: center;
}

.feature-label {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--green-fresh);
margin-bottom: 1rem;
}

.feature-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 3vw, 4rem);
font-weight: 300;
color: var(--green-deep);
line-height: 1.15;
margin-bottom: 1.5rem;
}

.feature-title em { font-style: italic; color: var(--green-fresh); }

.feature-desc {
font-size: 0.9rem;
font-weight: 300;
color: var(--text-mid);
line-height: 1.9;
margin-bottom: 2rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}

.feature-card {
background: var(--white);
border: 1px solid rgba(74,144,104,0.15);
padding: 2rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.feature-card::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--green-fresh), var(--gold));
transform: scaleX(0);
transition: transform 0.3s ease;
}

.feature-card:hover::before { transform: scaleX(1); }

.feature-card:hover {
box-shadow: 0 15px 50px rgba(26,58,42,0.1);
transform: translateY(-4px);
}

.fc-icon {
font-size: 1.8rem; margin-bottom: 0.8rem;
}

.fc-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 0.4rem;
}

.fc-text {
font-size: 0.8rem;
font-weight: 300;
color: var(--text-mid);
line-height: 1.6;
}

/* ── LOYALTY TEASER ── */
.loyalty-teaser {
background: var(--green-deep);
padding: 7rem 6rem;
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}

.loyalty-teaser::before {
content: '';
position: absolute;
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,144,104,0.2) 0%, transparent 60%);
right: -200px; top: -200px;
}

.lt-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}

.lt-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 3vw, 3.8rem);
font-weight: 300;
color: var(--white);
line-height: 1.15;
margin-bottom: 1.2rem;
}

.lt-title em { font-style: italic; color: var(--gold-light); }

.lt-desc {
font-size: 0.9rem;
font-weight: 300;
color: rgba(255,255,255,0.6);
line-height: 1.9;
margin-bottom: 2rem;
}
  
.lt-cta-row {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.lt-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.lt-step {
display: flex;
align-items: flex-start;
gap: 1.2rem;
padding: 1.5rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-left: 3px solid var(--gold);
transition: all 0.3s;
}

.lt-step:hover {
background: rgba(255,255,255,0.08);
transform: translateX(6px);
}

.lt-step-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-weight: 300;
color: var(--gold);
line-height: 1;
flex-shrink: 0;
min-width: 2rem;
}

.lt-step-info h4 {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 0.3rem;
}

.lt-step-info p {
font-size: 0.8rem;
font-weight: 300;
color: rgba(255,255,255,0.55);
line-height: 1.6;
}

/* ── PRODUCTS PAGE ── */
.products-header {
padding: 10rem 6rem 4rem;
margin-bottom: 10px;
text-align: center;
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
position: relative;
overflow: hidden;
}

.products-header::before {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 30px,
    rgba(255,255,255,0.03) 30px,
    rgba(255,255,255,0.03) 31px
);
}

.ph-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
position: relative;
}

.ph-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 5vw, 5.5rem);
font-weight: 300;
color: var(--white);
line-height: 1.1;
position: relative;
}

.ph-title em { font-style: italic; color: var(--green-light); }

.ph-subtitle {
font-size: 0.9rem;
font-weight: 300;
color: rgba(255,255,255,0.6);
margin-top: 1rem;
position: relative;
}

.products-grid {
padding: 1rem 6rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
}

.product-card {
background: var(--white);
border: 1px solid rgba(74,144,104,0.12);
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}

.product-card:hover {
box-shadow: 0 25px 70px rgba(26,58,42,0.12);
transform: translateY(-6px);
}

.product-card:hover .pc-img-overlay { opacity: 1; }

.pc-img-wrap {
position: relative;
height: 240px;
overflow: hidden;
background: var(--cream-dark);
}

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

.product-card:hover .pc-img { transform: scale(1.06); }

.pc-img-placeholder {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 0.8rem;
color: var(--green-fresh);
}

.pc-img-placeholder svg { opacity: 0.5; }

.pc-img-placeholder span {
font-size: 0.65rem; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--text-mid);
}

.pc-img-overlay {
position: absolute; inset: 0;
background: rgba(26,58,42,0.6);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.3s;
}

.pc-badge {
position: absolute;
top: 1rem; left: 1rem;
background: var(--gold);
color: var(--green-deep);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
}

.pc-body {
padding: 1.5rem;
}

.pc-category {
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--green-fresh);
margin-bottom: 0.5rem;
}

.pc-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 0.4rem;
line-height: 1.2;
}

.pc-desc {
font-size: 0.8rem;
font-weight: 300;
color: var(--text-mid);
line-height: 1.6;
margin-bottom: 1rem;
}

.pc-tags {
display: flex; flex-wrap: wrap; gap: 0.4rem;
margin-bottom: 1rem;
}

.pc-tag {
font-size: 0.6rem;
letter-spacing: 0.1em;
padding: 0.25rem 0.6rem;
background: var(--green-pale);
color: var(--green-mid);
border-radius: 100px;
}

.pc-weight {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-mid);
padding-top: 1rem;
border-top: 1px solid var(--cream-dark);
display: flex; align-items: center; gap: 0.4rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px; right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

/* ── LOYALTY PROGRAM PAGE ── */
.loyalty-header {
padding: 10rem 6rem 4rem;
background: var(--green-deep);
text-align: center;
position: relative;
overflow: hidden;
}

.loyalty-header::before {
content: '';
position: absolute; inset: 0;
background:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(74,144,104,0.15) 0%, transparent 50%);
}

.lh-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 5vw, 5rem);
font-weight: 300;
color: var(--white);
position: relative;
}

.lh-title em { font-style: italic; color: var(--gold-light); }

.lh-sub {
font-size: 0.9rem;
font-weight: 300;
color: rgba(255,255,255,0.6);
margin-top: 1rem;
position: relative;
}

.how-works {
padding: 7rem 6rem;
}

.section-label {
text-align: center;
font-size: 0.65rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--green-fresh);
margin-bottom: 1rem;
}

.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 3.5vw, 4rem);
font-weight: 300;
color: var(--green-deep);
text-align: center;
margin-bottom: 1rem;
line-height: 1.15;
}

.section-title em { font-style: italic; color: var(--green-fresh); }

.section-desc {
text-align: center;
font-size: 0.9rem;
font-weight: 300;
color: var(--text-mid);
max-width: 600px;
margin: 0 auto 4rem;
line-height: 1.8;
}

.how-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
}

.how-steps::before {
content: '';
position: absolute;
top: 60px; left: calc(12.5% + 30px); right: calc(12.5% + 30px);
height: 1px;
background: linear-gradient(90deg, var(--green-pale), var(--gold), var(--green-pale));
}

.how-step {
display: flex; flex-direction: column; align-items: center;
text-align: center;
padding: 0 1.5rem;
}

.hs-circle {
width: 60px; height: 60px;
border-radius: 50%;
background: var(--green-deep);
display: flex; align-items: center; justify-content: center;
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
flex-shrink: 0;
border: 3px solid var(--green-pale);
}

.hs-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.2rem;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 0.5rem;
}

.hs-desc {
font-size: 0.8rem;
font-weight: 300;
color: var(--text-mid);
line-height: 1.7;
}

/* WA button */
.wa-btn {
display: inline-flex; align-items: center; gap: 0.7rem;
padding: 1rem 2rem;
background: #25D366;
color: white;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
margin-top: 2.5rem;
transition: all 0.3s;
border: none; cursor: pointer;
z-index: 20;
}

.wa-btn:hover {
background: #20ba57;
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(37,211,102,0.4);
}

.wa-btn-disable {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 2rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 2.5rem;
  transition: all 0.3s;
  border: none; cursor: not-allowed;
  background: rgba(150, 150, 150, 0.1);
  color: #999;
  opacity: 0.6;
}

/* Points & Rewards */
.points-section {
background: var(--cream-dark);
padding: 7rem 6rem;
}

.points-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 4rem;
}

.points-card {
background: var(--white);
border: 1px solid rgba(74,144,104,0.15);
padding: 2.5rem;
position: relative;
overflow: hidden;
transition: all 0.3s;
}

.points-card:hover {
box-shadow: 0 20px 60px rgba(26,58,42,0.1);
transform: translateY(-4px);
}

.points-card::after {
content: attr(data-pts);
position: absolute;
right: -10px; top: -10px;
font-family: 'Cormorant Garamond', serif;
font-size: 8rem;
font-weight: 300;
color: rgba(74,144,104,0.05);
line-height: 1;
pointer-events: none;
}

.pc-icon { font-size: 2rem; margin-bottom: 1rem; }

.pc-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--green-deep);
margin-bottom: 0.5rem;
}

.pc-subtitle {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 0.8rem;
}

.pc-text {
font-size: 0.85rem;
font-weight: 300;
color: var(--text-mid);
line-height: 1.7;
}

/* Lucky Draw */
.lucky-section {
background: var(--green-deep);
padding: 7rem 6rem;
text-align: center;
position: relative;
overflow: hidden;
}

.lucky-section::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, rgba(201,168,76,0.1) 0%, transparent 60%);
}

.lucky-prizes {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 4rem;
flex-wrap: wrap;
position: relative;
}

.prize-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(201,168,76,0.3);
padding: 2.5rem 2rem;
width: 220px;
transition: all 0.3s;
}

.prize-card:hover {
background: rgba(255,255,255,0.08);
border-color: var(--gold);
transform: translateY(-6px);
}

.prize-card.featured {
border-color: var(--gold);
background: rgba(201,168,76,0.08);
transform: scale(20);
}

.prize-rank {
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1rem;
}

.prize-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }

.prize-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--white);
margin-bottom: 0.4rem;
}

.prize-pts {
font-size: 0.75rem;
color: rgba(255,255,255,0.5);
font-weight: 300;
}

/* ── CONTACT ── */
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}

.contact-left {
background: var(--green-deep);
padding: 10rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}

.contact-left::before {
content: '';
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(74,144,104,0.25) 0%, transparent 70%);
bottom: -100px; right: -100px;
}

.cl-eyebrow {
font-size: 0.65rem; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 1.2rem;
}

.cl-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 4vw, 4.5rem);
font-weight: 300; color: var(--white);
line-height: 1.1; margin-bottom: 1.5rem;
}

.cl-title em { font-style: italic; color: var(--green-light); }

.cl-desc {
font-size: 18px; font-weight: 300;
color: rgba(255,255,255,0.6);
line-height: 1.8; margin-bottom: 3rem;
}

.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }

.ci-item {
display: flex; align-items: flex-start; gap: 1rem;
padding: 1.2rem 1.5rem;
background: rgba(255,255,255,0.05);
border-left: 2px solid var(--gold);
}

.ci-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }

.ci-text { display: flex; flex-direction: column; }

.ci-label {
font-size: 0.6rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 0.2rem;
}

.ci-value {
font-size: 0.9rem; font-weight: 300;
color: rgba(255,255,255,0.8);
}

.contact-right {
background: var(--cream);
padding: 10rem 5rem;
display: flex;
flex-direction: column;
justify-content: center;
}

.cr-title {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem; font-weight: 300;
color: var(--green-deep); margin-bottom: 2rem;
}

.form-group { margin-bottom: 1.5rem; }

.form-label {
display: block;
font-size: 0.65rem; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--green-mid);
margin-bottom: 0.5rem;
}

.form-small {
display: block;
font-size: 9px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--green-mid);
margin-bottom: 0.5rem;
}

.form-input, .form-textarea {
width: 100%;
padding: 0.9rem 1rem;
background: var(--white);
border: 1px solid rgba(74,144,104,0.2);
font-family: 'Jost', sans-serif;
font-size: 0.9rem; font-weight: 300;
color: var(--text-dark);
outline: none;
transition: border-color 0.3s;
}

.form-input:focus, .form-textarea:focus {
border-color: var(--green-fresh);
}

.form-textarea { height: 120px; resize: vertical; }

/* ── ABOUT ── */
.about-hero {
padding: 9rem 3rem 4rem;
background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-mid) 100%);
position: relative; overflow: hidden;
}

.about-hero-desc {
padding: 3rem 6rem;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
position: relative; overflow: hidden;
}

.about-hero::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.about-hero-content {
  padding: 30px;
  /* max-width: 700px; */
  /* position: relative; */
  /* margin: 0 auto; */
  text-align: center;
}


.ah-eyebrow {
font-size: 0.65rem; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 1.2rem;
}

.ah-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(3rem, 5vw, 5.5rem);
font-weight: 300; color: var(--white);
line-height: 1.1; margin-bottom: 1.5rem;
}

.ah-title em { font-style: italic; color: var(--green-light); }

.ah-desc {
font-size: 18px; font-weight: 300;
color: rgba(255,255,255,0.7);
line-height: 1.9;
text-align: left;
}

.about-values {
padding: 7rem 6rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.value-card {
padding: 2.5rem;
background: var(--white);
border: 1px solid rgba(74,144,104,0.12);
position: relative; overflow: hidden;
transition: all 0.3s;
}

.value-card:hover {
box-shadow: 0 20px 60px rgba(26,58,42,0.1);
transform: translateY(-4px);
}

.vc-num {
font-family: 'Cormorant Garamond', serif;
font-size: 5rem; font-weight: 300;
color: rgba(74,144,104,0.08);
position: absolute; right: 1rem; top: 0;
line-height: 1;
}

.vc-icon { font-size: 2rem; margin-bottom: 1rem; }

.vc-title {
font-family: 'Cormorant Garamond', serif;
font-size: 1.4rem; font-weight: 600;
color: var(--green-deep); margin-bottom: 0.6rem;
}

.vc-text {
font-size: 0.85rem; font-weight: 300;
color: var(--text-mid); line-height: 1.7;
}

.about-story {
background: var(--green-deep);
padding: 7rem 6rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}

.as-label {
font-size: 0.65rem; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 1rem;
}

.as-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2.5rem, 3vw, 3.8rem);
font-weight: 300; color: var(--white);
line-height: 1.15; margin-bottom: 1.5rem;
}

.as-title em { font-style: italic; color: var(--gold-light); }

.as-text {
font-size: 0.9rem; font-weight: 300;
color: rgba(255,255,255,0.65);
line-height: 1.9; margin-bottom: 1.2rem;
}

.as-visual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}

.asv-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
padding: 2rem;
text-align: center;
}

.asv-num {
font-family: 'Cormorant Garamond', serif;
font-size: 2.8rem; font-weight: 300;
color: var(--gold); margin-bottom: 0.3rem;
}

.asv-label {
font-size: 0.7rem; letter-spacing: 0.15em;
text-transform: uppercase; color: rgba(255,255,255,0.5);
}

/* ── FOOTER ── */
footer {
background: #0f2018;
padding: 4rem 6rem 2rem;
}

.footer-grid {
display: grid;
/* grid-template-columns: 2fr 1fr 1fr 1fr; */
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-bottom: 3rem;
}

.footer-brand-desc {
font-size: 0.85rem; font-weight: 300;
color: rgba(255,255,255,0.5);
line-height: 1.8;
margin-top: 1rem;
}

.footer-col-title {
font-size: 0.65rem; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--gold);
margin-bottom: 1.2rem;
}

.footer-links { list-style: none; }

.footer-links li {
margin-bottom: 0.6rem;
}

.footer-links a {
font-size: 0.85rem; font-weight: 300;
color: rgba(255,255,255,0.5);
text-decoration: none;
transition: color 0.3s;
cursor: pointer;
}

.footer-links a:hover { color: var(--green-light); }

.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 2rem;
display: flex; align-items: center; justify-content: space-between;
}

.footer-copy {
font-size: 0.75rem; font-weight: 300;
color: rgba(255,255,255,0.3);
}

.footer-bottom-links { display: flex; gap: 2rem; }

.footer-bottom-links a {
font-size: 0.7rem;
color: rgba(255,255,255,0.3);
text-decoration: none; cursor: pointer;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}

/* ── GOLD DIVIDER ── */
.gold-divider {
display: flex; align-items: center; gap: 1.5rem;
margin: 3rem auto;
max-width: 300px;
}

.gold-divider::before,
.gold-divider::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.gold-diamond {
width: 8px; height: 8px;
background: var(--gold);
transform: rotate(45deg);
flex-shrink: 0;
}

/* ── WHATSAPP FLOAT ── */
.wa-float {
position: fixed;
bottom: 2rem; right: 2rem;
width: 60px; height: 60px;
background: #25D366;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 30px rgba(37,211,102,0.5);
cursor: pointer;
z-index: 999;
transition: all 0.3s;
text-decoration: none;
}

.wa-float:hover {
transform: scale(1.1);
box-shadow: 0 12px 40px rgba(37,211,102,0.6);
}

.wa-float svg { color: white; }

/* ── FILTER BAR ── */
.filter-bar {
display: flex; align-items: center; justify-content: center;
gap: 0.5rem;
padding: 0 6rem 2rem;
flex-wrap: wrap;
}

.filter-btn {
padding: 0.5rem 1.2rem;
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
background: transparent;
border: 1px solid rgba(74,144,104,0.3);
color: var(--text-mid);
cursor: pointer;
transition: all 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
background: var(--green-deep);
border-color: var(--green-deep);
color: var(--white);
}

/* Notification toast */
.toast {
position: fixed; bottom: 7rem; right: 2rem;
background: var(--green-deep);
color: var(--white);
padding: 1rem 1.5rem;
font-size: 0.8rem;
font-weight: 300;
letter-spacing: 0.05em;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
z-index: 998;
opacity: 0;
transform: translateX(100px);
transition: all 0.4s ease;
max-width: 260px;
border-left: 3px solid var(--gold);
}

.toast.show {
opacity: 1; transform: translateX(0);
}

/* ─────────────────────────────
   GLOBAL SCROLL REVEAL
───────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
  will-change: opacity, transform;
}

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

/* Different reveal styles */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.9s ease;
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.9s ease;
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: all 0.8s ease;
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* stagger cards */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
.stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
.stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
.stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
.stagger.active > *:nth-child(6) { transition-delay: 0.6s; }

/* ── RESPONSIVE DESIGN ── */

/* Large screens (default styles already apply) */

/* Tablets (≤ 992px) */
@media (max-width: 992px) {
  .nav-inner {
    padding: 0 2rem;
  }

  .hero {
    /* grid-template-columns: 1fr;
    text-align: center; */
    /* display: unset; */
    /* padding: 6rem 2rem; */
    all: unset;
  }
  
  /* .hero {
    all: unset;
  } */

  .hero-right {
    display: none;
  }

  /* .hero-left {
    padding: 4rem 2rem;
    align-items: center;
  } */

  .hero-left {
    width: 100%;
  }

  .hero-left {
    /* order: 1; */
    padding: 7rem 1.5rem 3rem;
    text-align: center;
    align-items: center;
  }

  /* .hero-right {
    padding: 4rem 2rem;
  } */

  .hero-cta-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stats {
    position: relative;
    left: auto;
    bottom: auto;

    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    margin-top: 2rem;
  }

  .home-feature {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding: 5rem 2rem;
  }

  .loyalty-teaser {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 5rem 2rem;
    text-align: center;
  }

  .products-grid {
    padding: 3rem 2rem;
    gap: 1.5rem;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .about-values {
    grid-template-columns: 1fr 1fr;
  }

  .about-story {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  footer {
    padding: 3rem 2rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-left {
    padding-top: 7rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
  }
  
  .contact-right {
    padding: 2rem 1rem;
  }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 1rem;
    position: relative;
  }

  /* Hamburger */
  .menu-toggle {
    width: 22px;
    height: 18px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    cursor: pointer;

    position: absolute;
    right: 1rem;

    z-index: 1100;
  }

  /* Lines */
  .menu-toggle span {
    width: 100%;
    height: 2px;

    background: var(--green-deep);
    border-radius: 20px;

    transition: all 0.4s ease;
    transform-origin: center;
  }

  /* Navbar scrolled */
  nav.scrolled .menu-toggle span {
    background: var(--cream);
  }

  /* OPEN STATE */
  /* Creates eye-close / X animation */

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
  }

  /* Mobile dropdown menu */
  .nav-links {
    position: absolute;
    top: 50px;
    left: 0;

    width: 100%;
    background: rgba(247,243,235,0.98);

    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    padding: 0;

    max-height: 0;
    overflow: hidden;

    transition: max-height 0.4s ease;
  }

  nav.scrolled .nav-links {
    background: rgba(26,58,42,0.98);
  }

  .nav-links.open {
    max-height: 500px;
    padding: 2rem 0;
  }

  .nav-links li {
    list-style: none;
  }

  .nav-links a {
    display: block;
    font-size: 0.8rem;
  }

  .nav-carnation-logo {
    width: auto;
    height: 30px;
    display: inline-block;
  }

  .btn-primary, .btn-outline, .wa-btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
  
  .hero {
    /* grid-template-columns: 1fr;
    min-height: auto; */
    all: unset;
  }

  .hero-right {
    display: none;
  }

  .hero-left,
  .hero-right {
    width: 100%;
  }

  .hero-left {
    order: 1;
    padding: 6rem 1.5rem 3rem;
    text-align: center;
    align-items: center;
  }

  /* .hero-right {
    order: 2;
    padding: 2rem 1rem 4rem;
    min-height: 350px;
  } */

  .hero-cta-row {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stats {
    position: relative;
    left: auto;
    bottom: auto;

    flex-direction: row;
    justify-content: center;
    gap: 2rem;
    opacity: 0;
    margin-top: 2rem;
  }
  
  .feature-grid {
    gap: 0.5rem;
  }

  .feature-card {
    padding: 1rem;
  }

  .fc-icon {
    font-size: 26px;
  }

  .lt-step-info h4, .lt-step-info p {
    text-align: left;
  }

  .lt-desc {
    margin-bottom: 0;
  }

  .lt-cta-row {
    justify-content: center;
    align-items: flex-end;
  }

  .home-feature,
  .loyalty-teaser,
  .points-section,
  .lucky-section,
  .about-values,
  .about-story,
  .contact-left,
  .contact-right {
    padding: 2rem 1rem;
  }

  /* Products */
  .products-header {
    padding: 70px 30px 20px 30px;
  }

  .filter-bar {
    display: flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    padding: 10px 10px 20px 10px;
    flex-wrap: wrap;
  }

  .filter-btn {
    padding: 4px;
    font-size: 0.56rem;
  }
  
  .products-grid {
    padding: 0px 10px 10px 10px;
    /* gap: 5px; */
  }

  /* Loyalty */
  .loyalty-header {
    padding: 80px 80px 30px;
  }
    
  .how-works {
    padding: 2rem 2rem;
  }

  .section-desc {
    margin-bottom: 18px;
  }

  .how-steps::before {
    background: none;
  }

  .how-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1rem;
    padding: 1rem 0;
  }

  .hs-circle {
    width: 45px; height: 45px;
    font-size: 1rem;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .how-step-content {
    display: flex;
    flex-direction: column;
  }

  .hs-title {
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
  }

  .hs-desc {
    font-size: 0.75rem;
  }

  .points-grid {
    margin-top: 18px;
    gap: 1rem;
  }

  .points-card {
    padding: 10px;
  }

  .points-card::after {
    font-size: 6rem;
  }

  .pc-icon {
    font-size: 28px;
  }

  .pc-title {
    font-size: 20px;
  }

  .pc-text, .lh-sub, .ph-subtitle {
    font-size: 12px;
  }

  .lucky-prizes {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 30px;
  }

  .prize-card {
    width: 100%;
    max-width: 320px;
    padding: 1.5rem 1.2rem;
  }

  /* Put Grand Prize at top */
  .prize-card.featured {
    order: -1;
  }

  .prize-rank {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }

  .prize-icon {
    font-size: 2rem;
  }

  .prize-name {
    font-size: 1.1rem;
  }

  .prize-pts {
    font-size: 0.7rem;
  }

  /* .prize-card {
    padding: 5px 5px;
    width: 120px;
  } */

  /* About */
  .about-story {
    display: block;
  }

  .about-hero {
    padding: 60px 10px 10px;
  }

  .ah-title {
    font-size: 40px;
  }

  .ah-desc, .as-text, .cl-desc, .section-desc {
    font-size: 13px;
    text-align: left;
  }

  .value-card {
    padding: 10px;
  }

  .vc-num {
    font-size: 50px;
  }

  .vc-icon {
    font-size: 28px;
  }

  .vc-title {
    font-size: 16px;
  }

  .vc-text {
    font-size: 11px;
  }

  .lh-title, .section-title, .as-title, .cl-title, .ph-title {
    font-size: 30px;
  }

  .lh-title br, .as-title br, .cl-title br {
    display: none;
  }

  .asv-card {
  padding: 10px;
  text-align: center;
  }

  .asv-num {
  font-size: 28px;
  color: var(--gold); margin-bottom: 10px;
  }

  .asv-label {
  font-size: 9px;
  }

  /* Contact */
  .contact-layout {
    margin-top: 50px;
  }

  .ci-item {
    padding: 12px 11.5px;
  }

  .ci-icon {
    font-size: 16px;
  }

  .ci-label, .section-label, .pc-subtitle {
    font-size: 8px;
  }

  .ci-value {
    font-size: 11px;
  }

  .contact-info { gap: 10px; }

  .products-grid {
    /* grid-template-columns: 1fr; */
  }

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

  .how-steps {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}