:root {
  --forest:#0f2a1d;
  --forest-light:#183b2a;
  --cream:#fbf9f1;
  --gold:#e0a96d;
  --charcoal:#222222;
  --sage:#dce5dd;
  --muted:#69756e;
  --white:#ffffff;
  --border:#e6e1d6;
}

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

html {
  scroll-behavior:smooth;
}

body {
  font-family:"Inter",sans-serif;
  background:var(--cream);
  color:var(--charcoal);
  line-height:1.65;
}

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

button,
select {
  font:inherit;
}

.container {
  width:min(1180px,92%);
  margin:auto;
}


/* HEADER */

.header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,249,241,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(15,42,29,.08);
}

.nav {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo {
  font-family:"Playfair Display",serif;
  font-size:1.75rem;
  font-weight:700;
  color:var(--forest);
}

.logo span {
  color:var(--gold);
}

nav {
  display:flex;
  gap:30px;
  font-size:.92rem;
  font-weight:500;
}

nav a:hover {
  color:var(--gold);
}

.menu-button {
  display:none;
  border:0;
  background:transparent;
  font-size:1.5rem;
}


/* HERO */

.hero {
  min-height:720px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 85% 30%,rgba(224,169,109,.19),transparent 29%),
    linear-gradient(180deg,#fbf9f1 0%,#f8f4e9 100%);
}

.hero-content {
  position:relative;
  z-index:2;
}

.eyebrow {
  color:var(--gold);
  letter-spacing:.2em;
  font-size:.75rem;
  font-weight:700;
  margin-bottom:18px;
}

.hero h1 {
  font-family:"Playfair Display",serif;
  font-size:clamp(3.8rem,8vw,7.3rem);
  max-width:900px;
  line-height:.98;
  color:var(--forest);
  letter-spacing:-.035em;
}

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

.hero-text {
  max-width:620px;
  margin-top:30px;
  font-size:1.1rem;
  color:var(--muted);
}

.hero-actions {
  display:flex;
  gap:14px;
  margin-top:34px;
  flex-wrap:wrap;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:14px 25px;
  border-radius:100px;
  font-weight:600;
  border:0;
  cursor:pointer;
  transition:.25s ease;
}

.primary {
  background:var(--forest);
  color:white;
}

.primary:hover {
  background:var(--forest-light);
  transform:translateY(-2px);
}

.secondary {
  border:1px solid var(--forest);
  color:var(--forest);
}

.secondary:hover {
  background:var(--forest);
  color:white;
}

.gold {
  background:var(--gold);
  color:var(--forest);
}

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

.hero-note {
  margin-top:50px;
  color:#7d887f;
  font-size:.88rem;
}

.hero-decoration {
  position:absolute;
  border-radius:50%;
}

.hero-decoration-one {
  width:440px;
  height:440px;
  border:1px solid rgba(15,42,29,.07);
  right:-90px;
  top:90px;
}

.hero-decoration-two {
  width:290px;
  height:290px;
  border:1px solid rgba(224,169,109,.18);
  right:70px;
  top:210px;
}


/* INTRO */

.intro {
  padding:90px 0;
  background:white;
}

.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:end;
}

.intro h2,
.section-heading h2,
.birth-copy h2,
.final-cta h2 {
  font-family:"Playfair Display",serif;
  color:var(--forest);
  font-size:clamp(2.3rem,4vw,4rem);
  line-height:1.12;
}

.intro-grid > p {
  color:var(--muted);
  font-size:1.03rem;
}


/* TOOLS */

.tools {
  padding:110px 0;
}

.section-heading {
  max-width:700px;
  margin-bottom:50px;
}

.section-heading > p:last-child {
  color:var(--muted);
  margin-top:15px;
}

.tool-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.tool-card {
  position:relative;
  min-height:310px;
  background:white;
  border:1px solid var(--border);
  border-radius:24px;
  padding:30px;
  transition:.25s ease;
}

.tool-card:hover {
  transform:translateY(-6px);
  box-shadow:0 22px 55px rgba(15,42,29,.09);
  border-color:var(--gold);
}

.tool-card.featured {
  background:var(--forest);
  color:white;
}

.tool-card .icon {
  font-size:2.4rem;
  display:block;
  margin-bottom:28px;
}

.tool-card h3 {
  font-family:"Playfair Display",serif;
  font-size:1.45rem;
  margin-bottom:12px;
}

.tool-card:not(.featured) h3 {
  color:var(--forest);
}

.tool-card p {
  font-size:.92rem;
  opacity:.72;
}

.tool-card a {
  display:inline-block;
  margin-top:22px;
  color:var(--gold);
  font-weight:600;
}

.small-label {
  color:var(--gold);
  font-size:.65rem!important;
  letter-spacing:.15em;
  font-weight:700;
  margin-bottom:8px;
}


/* FLOWERS */

.flowers {
  padding:110px 0;
  background:var(--sage);
}

.flower-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.flower-card {
  background:var(--cream);
  padding:35px;
  border-radius:24px;
  transition:.25s ease;
}

.flower-card:hover {
  transform:translateY(-5px);
}

.flower-art {
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5rem;
  background:rgba(255,255,255,.5);
  border-radius:18px;
  margin-bottom:24px;
}

.flower-card h3 {
  color:var(--forest);
  font-family:"Playfair Display",serif;
  font-size:1.5rem;
}

.flower-card p {
  color:var(--muted);
  font-size:.85rem;
  margin-top:4px;
}


/* BIRTH FLOWER */

.birth-section {
  padding:110px 0;
}

.birth-box {
  background:var(--forest);
  color:white;
  border-radius:34px;
  padding:70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.birth-copy h2 {
  color:white;
}

.birth-copy > p:last-child {
  margin-top:20px;
  color:#b9c6bd;
}

.finder {
  background:white;
  color:var(--charcoal);
  padding:34px;
  border-radius:24px;
}

.finder label {
  display:block;
  color:var(--forest);
  font-weight:600;
  margin-bottom:10px;
}

.finder select {
  width:100%;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:white;
  outline:none;
  margin-bottom:16px;
}

.finder .button {
  width:100%;
}

.result {
  margin-top:20px;
  background:#f5f0e6;
  border-radius:16px;
  padding:22px;
}

.result h3 {
  font-family:"Playfair Display",serif;
  color:var(--forest);
  font-size:1.6rem;
}

.result .result-icon {
  font-size:2.8rem;
  margin-bottom:8px;
}

.hidden {
  display:none;
}


/* GUIDES */

.guides {
  padding:110px 0;
  background:white;
}

.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.guide-grid article {
  padding:30px 0;
  border-top:1px solid var(--border);
}

.guide-grid span {
  color:var(--gold);
  font-size:.7rem;
  letter-spacing:.13em;
  font-weight:700;
}

.guide-grid h3 {
  font-family:"Playfair Display",serif;
  color:var(--forest);
  font-size:1.5rem;
  margin:14px 0 10px;
}

.guide-grid p {
  color:var(--muted);
  font-size:.92rem;
}


/* CTA */

.final-cta {
  text-align:center;
  padding:120px 0;
  background:#f4efe3;
}

.final-cta h2 {
  max-width:700px;
  margin:0 auto 30px;
}


/* FOOTER */

footer {
  background:#081a11;
  color:#aab8af;
  padding-top:70px;
}

.footer-grid {
  display:flex;
  justify-content:space-between;
  gap:40px;
}

.footer-logo {
  color:white;
}

.footer-grid p {
  max-width:400px;
  margin-top:14px;
}

.footer-links {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

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

.copyright {
  text-align:center;
  margin-top:60px;
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px;
  font-size:.82rem;
}


/* MOBILE */

@media(max-width:900px) {

  nav {
    display:none;
    position:absolute;
    top:76px;
    left:0;
    right:0;
    flex-direction:column;
    background:var(--cream);
    padding:25px;
    border-bottom:1px solid var(--border);
  }

  nav.open {
    display:flex;
  }

  .menu-button {
    display:block;
  }

  .tool-grid,
  .flower-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .birth-box {
    grid-template-columns:1fr;
    gap:40px;
  }

  .intro-grid {
    grid-template-columns:1fr;
    gap:30px;
  }

}

@media(max-width:600px) {

  .hero {
    min-height:630px;
  }

  .hero h1 {
    font-size:3.7rem;
  }

  .tool-grid,
  .flower-grid,
  .guide-grid {
    grid-template-columns:1fr;
  }

  .birth-box {
    padding:35px 25px;
    border-radius:24px;
  }

  .footer-grid {
    flex-direction:column;
  }

}

/* Real botanical image upgrade */

.flower-art.real-flower {
  padding: 0;
  overflow: hidden;
  background: #e7e4db;
}

.flower-art.real-flower img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.flower-card:hover .real-flower img {
  transform: scale(1.055);
}

.flower-card {
  overflow: hidden;
}


/* Botanical photography */

.flower-art {
  overflow: hidden;
}

.flower-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.flower-card:hover .flower-art img {
  transform: scale(1.06);
}


/* Premium homepage botanical hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #fbf9f1 0%,
      #fbf9f1 37%,
      rgba(251,249,241,.94) 47%,
      rgba(251,249,241,.45) 64%,
      rgba(251,249,241,.08) 100%
    ),
    url("../images/home/hero.webp") center right / cover no-repeat;
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% 45%,
      rgba(251,249,241,.35),
      transparent 45%
    );
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 800px) {

  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(251,249,241,.98) 0%,
        rgba(251,249,241,.94) 45%,
        rgba(251,249,241,.55) 70%,
        rgba(251,249,241,.25) 100%
      ),
      url("../images/home/hero.webp") center bottom / cover no-repeat;
  }

}