/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #7a9200;
  --primary-dark: #7a9200;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #7a9200;
  --accent-light: #7a9200;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
}

/* Wilderness Gateway Section */
.wilderness-gateway {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nature-canvas {
  position: relative;
  width: 100%;
  max-width: 1400px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "image content";
  gap: 0;
  align-items: center;
}

.visual-foundation {
  grid-area: image;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0 89px 89px 0;
}

.landscape-essence {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.landscape-essence:hover {
  transform: scale(1.1);
}

.wisdom-proclamation {
  grid-area: content;
  padding: 67px 89px 67px 144px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.wisdom-proclamation::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.message-core {
  position: relative;
  z-index: 2;
  max-width: 610px;
}

.ancient-knowledge {
  font-family: var(--font-heading);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--primary-dark);
  margin-bottom: 34px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.revelation-text {
  margin-bottom: 55px;
}

.primary-wisdom {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--secondary-color);
  margin-bottom: 21px;
  line-height: 1.7;
}

.secondary-insight {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.65;
  font-weight: 300;
}

.discovery-pathway {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  margin-bottom: 55px;
}

.benefit-capsule {
  background: var(--primary-color);
  color: white;
  padding: 21px 34px;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 144px;
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.benefit-capsule:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 180, 216, 0.4);
}

.benefit-marker {
  font-size: 1.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  display: block;
  margin-bottom: 8px;
}

.benefit-detail {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
}

.action-gateway {
  display: flex;
  gap: 21px;
  flex-wrap: wrap;
}

.exploration-trigger {
  background: var(--accent-color);
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 18px 42px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.exploration-trigger:hover {
  background: #e55a2b;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 107, 53, 0.4);
}

.knowledge-portal {
  background: transparent;
  color: var(--primary-dark);
  font-size: 1.1rem;
  font-weight: 500;
  padding: 18px 42px;
  border: 2px solid var(--primary-color);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-body);
}

.knowledge-portal:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

/* Responsive Design */
@media (max-width: 1280px) {
  .nature-canvas {
    max-width: 1200px;
  }
  
  .wisdom-proclamation {
    padding: 55px 67px 55px 89px;
  }
  
  .ancient-knowledge {
    font-size: 3.2rem;
  }
}

@media (max-width: 890px) {
  .nature-canvas {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "image"
      "content";
    height: auto;
    min-height: 100vh;
  }
  
  .visual-foundation {
    border-radius: 0 0 67px 67px;
    height: 50vh;
  }
  
  .wisdom-proclamation {
    padding: 67px 34px;
    height: auto;
  }
  
  .ancient-knowledge {
    font-size: 2.8rem;
    margin-bottom: 27px;
  }
  
  .primary-wisdom {
    font-size: 1.2rem;
  }
  
  .secondary-insight {
    font-size: 1rem;
  }
  
  .discovery-pathway {
    justify-content: center;
    gap: 21px;
  }
  
  .benefit-capsule {
    min-width: 120px;
    padding: 18px 27px;
  }
  
  .action-gateway {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .wilderness-gateway {
    height: auto;
    min-height: 100vh;
  }
  
  .visual-foundation {
    border-radius: 0 0 42px 42px;
    height: 40vh;
  }
  
  .wisdom-proclamation {
    padding: 42px 21px;
  }
  
  .ancient-knowledge {
    font-size: 2.2rem;
    margin-bottom: 21px;
    text-align: center;
  }
  
  .primary-wisdom {
    font-size: 1.1rem;
    margin-bottom: 18px;
  }
  
  .secondary-insight {
    font-size: 0.95rem;
  }
  
  .discovery-pathway {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .benefit-capsule {
    width: 100%;
    max-width: 200px;
    padding: 16px 24px;
  }
  
  .action-gateway {
    flex-direction: column;
    gap: 16px;
  }
  
  .exploration-trigger,
  .knowledge-portal {
    width: 100%;
    padding: 16px 32px;
    font-size: 1rem;
  }
}

















/* Longevity Revelation Section */
.longevity-revelation {
  padding: 134px 0 178px 0;
  background: linear-gradient(165deg, var(--neutral-light) 0%, var(--primary-light) 35%, var(--secondary-light) 100%);
  position: relative;
  overflow: hidden;
}

.longevity-revelation::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(0, 180, 216, 0.08) 0%, transparent 70%);
  transform: rotate(-15deg);
  z-index: 1;
}

.knowledge-convergence {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 42px;
  position: relative;
  z-index: 2;
}

.section-awakening {
  text-align: center;
  margin-bottom: 89px;
  max-width: 890px;
  margin-left: auto;
  margin-right: auto;
}

.profound-title {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 34px;
  line-height: 1.2;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.enlightenment-intro {
  font-size: 1.25rem;
  color: var(--secondary-color);
  line-height: 1.6;
  font-weight: 400;
  font-style: italic;
}

.wisdom-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 67px;
  margin-bottom: 134px;
}

.scientific-lens,
.traditional-lens {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  padding: 55px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.scientific-lens:hover,
.traditional-lens:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.research-core,
.heritage-core {
  height: 100%;
}

.discovery-heading,
.wisdom-heading {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 27px;
  position: relative;
}





.research-summary,
.heritage-summary {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.65;
  margin-bottom: 42px;
}

.mechanism-grid {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.bio-mechanism {
  display: flex;
  align-items: flex-start;
  gap: 21px;
  padding: 27px;
  background: var(--primary-light);
  border-radius: 27px;
  transition: all 0.3s ease;
}

.bio-mechanism:hover {
  background: rgba(0, 180, 216, 0.15);
  transform: translateX(8px);
}

.mechanism-symbol {
  font-size: 2.5rem;
  min-width: 55px;
  text-align: center;
}

.mechanism-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 13px;
}

.mechanism-explanation {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

.cultural-wisdom {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.culture-block {
  padding: 27px;
  background: var(--secondary-light);
  border-radius: 27px;
  border-left: 5px solid var(--secondary-color);
  transition: all 0.3s ease;
}

.culture-block:hover {
  background: rgba(45, 80, 22, 0.15);
  transform: translateX(8px);
}

.culture-origin {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 13px;
}

.culture-principle {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
  font-style: italic;
}

.convergence-bridge {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 55px;
  padding: 67px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
  position: relative;
}

.convergence-bridge::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
  border-radius: 55px;
  z-index: -1;
}

.unity-statement {
  text-align: center;
}

.bridge-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 42px;
}

.unified-explanation {
  max-width: 1050px;
  margin: 0 auto;
}

.primary-reason {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.7;
  margin-bottom: 55px;
  font-weight: 400;
}

.evidence-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 55px;
}

.proof-element {
  background: var(--primary-color);
  color: white;
  padding: 34px 27px;
  border-radius: 34px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 180, 216, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.proof-element:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 20px 50px rgba(0, 180, 216, 0.4);
}

.proof-number {
  display: block;
  font-size: 2.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 13px;
}

.proof-description {
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}

.conclusion-wisdom {
  font-size: 1.15rem;
  color: var(--primary-dark);
  line-height: 1.8;
  font-weight: 500;
  text-align: left;
  background: var(--accent-light);
  padding: 34px;
  border-radius: 27px;
  border-left: 5px solid var(--accent-color);
}

/* Responsive Design */
@media (max-width: 1280px) {
  .longevity-revelation {
    padding: 89px 0 134px 0;
  }
  
  .knowledge-convergence {
    max-width: 1200px;
    padding: 0 34px;
  }
  
  .profound-title {
    font-size: 2.8rem;
  }
  
  .wisdom-matrix {
    gap: 55px;
    margin-bottom: 89px;
  }
  
  .scientific-lens,
  .traditional-lens {
    padding: 42px;
  }
}

@media (max-width: 890px) {
  .longevity-revelation {
    padding: 67px 0 89px 0;
  }
  
  .knowledge-convergence {
    padding: 0 27px;
  }
  
  .section-awakening {
    margin-bottom: 67px;
  }
  
  .profound-title {
    font-size: 2.4rem;
    margin-bottom: 27px;
  }
  
  .enlightenment-intro {
    font-size: 1.15rem;
  }
  
  .wisdom-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    margin-bottom: 67px;
  }
  
  .scientific-lens,
  .traditional-lens {
    padding: 34px;
  }
  
  .discovery-heading,
  .wisdom-heading {
    font-size: 1.8rem;
  }
  
  .evidence-showcase {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  
  .convergence-bridge {
    padding: 42px;
  }
  
  .bridge-title {
    font-size: 2.1rem;
  }
}

@media (max-width: 640px) {
  .longevity-revelation {
    padding: 55px 0 67px 0;
  }
  
  .knowledge-convergence {
    padding: 0 21px;
  }
  
  .section-awakening {
    margin-bottom: 55px;
  }
  
  .profound-title {
    font-size: 2rem;
    margin-bottom: 21px;
  }
  
  .enlightenment-intro {
    font-size: 1.05rem;
  }
  
  .wisdom-matrix {
    gap: 34px;
    margin-bottom: 55px;
  }
  
  .scientific-lens,
  .traditional-lens {
    padding: 27px;
    border-radius: 27px;
  }
  
  .discovery-heading,
  .wisdom-heading {
    font-size: 1.6rem;
    margin-bottom: 21px;
  }
  
  .mechanism-grid {
    gap: 27px;
  }
  
  .bio-mechanism,
  .culture-block {
    padding: 21px;
    border-radius: 21px;
  }
  
  .bio-mechanism {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .mechanism-symbol {
    font-size: 2rem;
  }
  
  .convergence-bridge {
    padding: 27px;
    border-radius: 27px;
  }
  
  .bridge-title {
    font-size: 1.8rem;
    margin-bottom: 27px;
  }
  
  .primary-reason {
    font-size: 1.1rem;
    margin-bottom: 34px;
  }
  
  .evidence-showcase {
    margin-bottom: 34px;
  }
  
  .proof-element {
    padding: 27px 21px;
  }
  
  .proof-number {
    font-size: 2.2rem;
  }
  
  .conclusion-wisdom {
    font-size: 1.05rem;
    padding: 27px;
  }
}













/* Botanical Treasure Section */
.botanical-treasure {
  padding: 144px 0 189px 0;
  background: radial-gradient(ellipse at top, var(--tertiary-light) 0%, var(--neutral-light) 40%, var(--primary-light) 100%);
  position: relative;
  overflow: hidden;
}

.botanical-treasure::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60"><circle cx="30" cy="30" r="1.5" fill="rgba(0,180,216,0.1)"/></svg>') repeat;
  pointer-events: none;
}

.nutrient-universe {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.properties-dawn {
  text-align: center;
  margin-bottom: 111px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.essence-proclamation {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 38px;
  line-height: 1.15;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
}

.discovery-narrative {
  font-size: 1.3rem;
  color: var(--secondary-color);
  line-height: 1.65;
  font-weight: 400;
  max-width: 750px;
  margin: 0 auto;
}

.compound-constellation {
  display: flex;
  flex-direction: column;
  gap: 89px;
  margin-bottom: 134px;
}

.nutrient-showcase {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 55px;
  padding: 67px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.nutrient-showcase:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.category-essence {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 27px;
  text-align: center;
}

.category-description {
  font-size: 1.15rem;
  color: var(--neutral-color);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 55px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* Vitamin Section */
.vitamin-collection {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.vitamin-sphere {
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 34px;
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: 89px;
  transition: all 0.4s ease;
}

.vitamin-sphere:hover {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  transform: scale(1.02);
}

.vitamin-sphere:hover .vitamin-symbol {
  background: white;
  color: var(--primary-color);
}

.vitamin-sphere:hover .vitamin-name {
  color: var(--primary-dark);
}

.vitamin-symbol {
  width: 89px;
  height: 89px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  font-weight: 700;
  font-family: var(--font-heading);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.vitamin-details {
  flex: 1;
}

.vitamin-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 13px;
  transition: color 0.3s ease;
}

.vitamin-function {
  font-size: 1.05rem;
  color: var(--neutral-color);
  line-height: 1.6;
  margin-bottom: 13px;
}

.vitamin-concentration {
  display: inline-block;
  background: var(--accent-color);
  color: white;
  padding: 8px 21px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Mineral Section */
.mineral-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 27px;
}

.mineral-cluster {
  background: linear-gradient(145deg, var(--secondary-light) 0%, rgba(255, 255, 255, 0.9) 100%);
  padding: 34px;
  border-radius: 34px;
  text-align: center;
  transition: all 0.35s ease;
  border: 3px solid transparent;
}

.mineral-cluster:hover {
  background: linear-gradient(145deg, var(--secondary-color) 0%, var(--secondary-light) 100%);
  transform: translateY(-8px) rotate(1deg);
  border-color: var(--secondary-color);
}

.mineral-cluster:hover .mineral-symbol {
  background: white;
  color: var(--secondary-color);
}

.mineral-cluster:hover .mineral-name,
.mineral-cluster:hover .mineral-benefit {
  color: white;
}

.mineral-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 21px;
}

.mineral-symbol {
  width: 67px;
  height: 67px;
  background: var(--secondary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: 13px;
  transition: all 0.3s ease;
}

.mineral-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--secondary-color);
  transition: color 0.3s ease;
}

.mineral-benefit {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
  transition: color 0.3s ease;
}

/* Flavonoid Section */
.flavonoid-garden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px;
}

.flavonoid-bloom {
  position: relative;
  height: 200px;
  border-radius: 89px;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.flavonoid-bloom:hover {
  transform: scale(1.05) rotate(-2deg);
}

.bloom-core {
  height: 100%;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bloom-core::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.9;
  z-index: 1;
}

.bloom-core > * {
  position: relative;
  z-index: 2;
}

.quercetin::before {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.rutin::before {
  background: linear-gradient(135deg, #8b4513 0%, #d2691e 100%);
}

.anthocyanins::before {
  background: linear-gradient(135deg, #663399 0%, #9966cc 100%);
}

.catechins::before {
  background: linear-gradient(135deg, #2d5016 0%, #228b22 100%);
}

.flavonoid-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: white;
  margin-bottom: 16px;
}

.flavonoid-action {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.5;
}

/* Synergy Section */
.synergy-revelation {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 67px;
  padding: 89px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
}

.synergy-revelation::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--primary-color), var(--accent-color), var(--secondary-color), var(--tertiary-color));
  border-radius: 67px;
  z-index: -1;
}

.synergy-title {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 55px;
}

.synergy-principle {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 67px;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.synergy-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
  margin-bottom: 55px;
}

.synergy-case {
  background: var(--tertiary-light);
  padding: 34px;
  border-radius: 42px;
  transition: all 0.4s ease;
}

.synergy-case:hover {
  background: var(--accent-light);
  transform: translateY(-5px);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 13px;
}

.case-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.effectiveness-boost {
  background: var(--success-color);
  color: white;
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.case-explanation {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

.wisdom-conclusion {
  text-align: center;
  padding: 42px;
  background: var(--primary-light);
  border-radius: 34px;
}

.final-insight {
  font-size: 1.15rem;
  color: var(--primary-dark);
  line-height: 1.8;
  font-weight: 500;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .botanical-treasure {
    padding: 111px 0 144px 0;
  }
  
  .nutrient-universe {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .essence-proclamation {
    font-size: 3rem;
  }
  
  .compound-constellation {
    gap: 67px;
    margin-bottom: 111px;
  }
  
  .nutrient-showcase {
    padding: 55px;
  }
}

@media (max-width: 890px) {
  .botanical-treasure {
    padding: 89px 0 111px 0;
  }
  
  .nutrient-universe {
    padding: 0 34px;
  }
  
  .properties-dawn {
    margin-bottom: 89px;
  }
  
  .essence-proclamation {
    font-size: 2.5rem;
    margin-bottom: 27px;
  }
  
  .discovery-narrative {
    font-size: 1.2rem;
  }
  
  .compound-constellation {
    gap: 55px;
    margin-bottom: 89px;
  }
  
  .nutrient-showcase {
    padding: 42px;
  }
  
  .category-essence {
    font-size: 2rem;
  }
  
  .vitamin-sphere {
    flex-direction: column;
    text-align: center;
    gap: 27px;
    padding: 27px;
  }
  
  .mineral-matrix {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  
  .flavonoid-garden {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .synergy-revelation {
    padding: 55px;
  }
  
  .synergy-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 640px) {
  .botanical-treasure {
    padding: 67px 0 89px 0;
  }
  
  .nutrient-universe {
    padding: 0 21px;
  }
  
  .properties-dawn {
    margin-bottom: 67px;
  }
  
  .essence-proclamation {
    font-size: 2.1rem;
    margin-bottom: 21px;
  }
  
  .discovery-narrative {
    font-size: 1.1rem;
  }
  
  .compound-constellation {
    gap: 42px;
    margin-bottom: 67px;
  }
  
  .nutrient-showcase {
    padding: 27px;
    border-radius: 34px;
  }
  
  .category-essence {
    font-size: 1.8rem;
    margin-bottom: 21px;
  }
  
  .category-description {
    margin-bottom: 42px;
  }
  
  .vitamin-collection {
    gap: 27px;
  }
  
  .vitamin-sphere {
    border-radius: 42px;
    padding: 21px;
  }
  
  .vitamin-symbol {
    width: 67px;
    height: 67px;
    font-size: 2.2rem;
  }
  
  .mineral-cluster {
    padding: 27px;
  }
  
  .flavonoid-garden {
    grid-template-columns: 1fr;
  }
  
  .flavonoid-bloom {
    height: 180px;
  }
  
  .bloom-core {
    padding: 27px;
  }
  
  .synergy-revelation {
    padding: 34px;
    border-radius: 42px;
  }
  
  .synergy-title {
    font-size: 1.9rem;
    margin-bottom: 34px;
  }
  
  .synergy-principle {
    font-size: 1.1rem;
    margin-bottom: 42px;
  }
  
  .synergy-examples {
    grid-template-columns: 1fr;
    gap: 27px;
    margin-bottom: 42px;
  }
  
  .synergy-case {
    padding: 27px;
  }
  
  .case-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .wisdom-conclusion {
    padding: 27px;
  }
  
  .final-insight {
    font-size: 1.05rem;
  }
}



















/* Harvest Wisdom Section */
.harvest-wisdom {
  padding: 156px 0 198px 0;
  background: linear-gradient(180deg, var(--secondary-light) 0%, rgba(255, 255, 255, 0.9) 35%, var(--tertiary-light) 100%);
  position: relative;
  overflow: hidden;
}

.harvest-wisdom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(45, 80, 22, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(139, 69, 19, 0.06) 0%, transparent 50%);
  pointer-events: none;
}

.collection-sanctuary {
  max-width: 1460px;
  margin: 0 auto;
  padding: 0 63px;
  position: relative;
  z-index: 2;
}

.gathering-awakening {
  text-align: center;
  margin-bottom: 123px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.collection-mastery {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 43px;
  line-height: 1.12;
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1);
}

.sustainable-motto {
  font-size: 1.35rem;
  color: var(--secondary-color);
  line-height: 1.68;
  font-weight: 400;
  max-width: 820px;
  margin: 0 auto;
  font-style: italic;
}

.harvesting-methodology {
  display: flex;
  flex-direction: column;
  gap: 98px;
  margin-bottom: 156px;
}

.temporal-guidance,
.spatial-guidance,
.method-guidance {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  border-radius: 67px;
  padding: 76px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.09);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

.temporal-guidance:hover,
.spatial-guidance:hover,
.method-guidance:hover {
  transform: translateY(-15px);
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.16);
}

.timing-essence,
.location-essence,
.technique-essence {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 32px;
  text-align: center;
  position: relative;
}

.timing-essence::after {
  content: '🌿';
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
}

.location-essence::after {
  content: '🗺️';
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
}

.technique-essence::after {
  content: '✂️';
  position: absolute;
  right: -45px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
}

.timing-philosophy,
.location-philosophy,
.technique-philosophy {
  font-size: 1.18rem;
  color: var(--neutral-color);
  line-height: 1.72;
  text-align: center;
  margin-bottom: 67px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Seasonal Calendar */
.seasonal-calendar {
  display: flex;
  flex-direction: column;
  gap: 43px;
  margin-bottom: 67px;
}

.season-period {
  border-radius: 54px;
  padding: 43px;
  transition: all 0.45s ease;
  position: relative;
  overflow: hidden;
}

.season-period::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.9;
  z-index: 1;
}

.season-period > * {
  position: relative;
  z-index: 2;
}

.spring::before {
  background: linear-gradient(135deg, #90EE90 0%, #98FB98 100%);
}

.summer::before {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.autumn::before {
  background: linear-gradient(135deg, #CD853F 0%, #D2691E 100%);
}

.season-period:hover {
  transform: scale(1.02) rotate(0.5deg);
}

.season-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 27px;
  flex-wrap: wrap;
  gap: 16px;
}

.season-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.energy-phase {
  background: rgba(255, 255, 255, 0.8);
  color: var(--secondary-color);
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 500;
}

.season-activities {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.harvest-focus {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  padding: 21px;
  border-radius: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.plant-part {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 1.05rem;
}

.optimal-time {
  color: var(--secondary-color);
  font-style: italic;
  font-size: 0.98rem;
}

.recommended-herbs {
  background: rgba(255, 255, 255, 0.6);
  padding: 21px;
  border-radius: 32px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--neutral-color);
}

/* Lunar Influence */
.lunar-influence {
  background: var(--primary-light);
  border-radius: 43px;
  padding: 43px;
}

.lunar-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 27px;
  text-align: center;
}

.moon-phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px;
}

.moon-guidance {
  background: rgba(255, 255, 255, 0.8);
  padding: 27px;
  border-radius: 32px;
  text-align: center;
}

.moon-phase {
  display: block;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 12px;
  font-size: 1.05rem;
}

.moon-effect {
  color: var(--neutral-color);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Location Wisdom */
.habitat-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  margin-bottom: 67px;
}

.ideal-locations,
.forbidden-zones {
  border-radius: 43px;
  padding: 43px;
}

.ideal-locations {
  background: linear-gradient(135deg, var(--success-color) 0%, rgba(16, 185, 129, 0.8) 100%);
}

.forbidden-zones {
  background: linear-gradient(135deg, var(--warning-color) 0%, rgba(239, 68, 68, 0.8) 100%);
}

.location-category {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  margin-bottom: 32px;
  text-align: center;
}

.location-list,
.danger-list {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.location-item,
.danger-item {
  background: rgba(255, 255, 255, 0.9);
  padding: 21px;
  border-radius: 27px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.location-type,
.danger-source {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 1.05rem;
}

.location-benefit,
.danger-reason {
  color: var(--neutral-color);
  font-size: 0.95rem;
  line-height: 1.5;
}

.distance-rule {
  background: var(--tertiary-light);
  border-radius: 43px;
  padding: 43px;
  text-align: center;
}

.rule-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.rule-explanation {
  font-size: 1.1rem;
  color: var(--secondary-color);
  line-height: 1.6;
  font-weight: 500;
}

/* Collection Methods */
.collection-methods {
  display: flex;
  flex-direction: column;
  gap: 43px;
  margin-bottom: 67px;
}

.method-category {
  border-radius: 43px;
  padding: 43px;
  transition: all 0.4s ease;
}

.leaves {
  background: linear-gradient(135deg, var(--secondary-light) 0%, rgba(240, 247, 230, 0.8) 100%);
}

.flowers {
  background: linear-gradient(135deg, var(--accent-light) 0%, rgba(255, 244, 240, 0.8) 100%);
}

.roots {
  background: linear-gradient(135deg, var(--tertiary-light) 0%, rgba(253, 245, 230, 0.8) 100%);
}

.method-category:hover {
  transform: translateX(12px);
}

.method-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.method-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.method-timing {
  background: var(--primary-color);
  color: white;
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
}

.method-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step-instruction {
  background: rgba(255, 255, 255, 0.8);
  padding: 18px 27px;
  border-radius: 27px;
  font-size: 1rem;
  color: var(--secondary-color);
  line-height: 1.6;
  position: relative;
  padding-left: 54px;
}

.step-instruction::before {
  content: '→';
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--primary-color);
}

/* Equipment Essentials */
.equipment-essentials {
  background: var(--primary-light);
  border-radius: 43px;
  padding: 43px;
}

.equipment-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 32px;
  text-align: center;
}

.tool-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 27px;
}

.tool-item {
  background: rgba(255, 255, 255, 0.9);
  padding: 27px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.tool-name {
  font-weight: 600;
  color: var(--primary-dark);
  font-size: 1.1rem;
}

.tool-purpose {
  color: var(--neutral-color);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Sustainability Charter */
.sustainability-charter {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 76px;
  padding: 98px;
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.12);
  position: relative;
}

.sustainability-charter::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--success-color), var(--primary-color), var(--secondary-color), var(--accent-color));
  border-radius: 76px;
  z-index: -1;
}

.sustainability-title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 67px;
}

.charter-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 43px;
  margin-bottom: 67px;
}

.principle-block {
  background: var(--accent-light);
  padding: 43px;
  border-radius: 43px;
  text-align: center;
  transition: all 0.4s ease;
  border: 3px solid transparent;
}

.principle-block:hover {
  background: var(--primary-light);
  transform: translateY(-8px) scale(1.02);
  border-color: var(--primary-color);
}

.principle-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.principle-description {
  font-size: 1.05rem;
  color: var(--secondary-color);
  line-height: 1.65;
}

.wisdom-legacy {
  background: var(--secondary-light);
  border-radius: 43px;
  padding: 54px;
  text-align: center;
}

.legacy-message {
  font-size: 1.25rem;
  color: var(--primary-dark);
  line-height: 1.8;
  font-weight: 500;
  font-style: italic;
  max-width: 890px;
  margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .harvest-wisdom {
    padding: 123px 0 156px 0;
  }
  
  .collection-sanctuary {
    max-width: 1200px;
    padding: 0 54px;
  }
  
  .collection-mastery {
    font-size: 3.2rem;
  }
  
  .harvesting-methodology {
    gap: 76px;
    margin-bottom: 123px;
  }
  
  .temporal-guidance,
  .spatial-guidance,
  .method-guidance {
    padding: 54px;
  }
  
  .sustainability-charter {
    padding: 76px;
  }
}

@media (max-width: 890px) {
  .harvest-wisdom {
    padding: 98px 0 123px 0;
  }
  
  .collection-sanctuary {
    padding: 0 43px;
  }
  
  .gathering-awakening {
    margin-bottom: 98px;
  }
  
  .collection-mastery {
    font-size: 2.8rem;
    margin-bottom: 32px;
  }
  
  .sustainable-motto {
    font-size: 1.2rem;
  }
  
  .harvesting-methodology {
    gap: 54px;
    margin-bottom: 98px;
  }
  
  .temporal-guidance,
  .spatial-guidance,
  .method-guidance {
    padding: 43px;
  }
  
  .timing-essence,
  .location-essence,
  .technique-essence {
    font-size: 2.1rem;
  }
  
  .timing-essence::after,
  .location-essence::after,
  .technique-essence::after {
    display: none;
  }
  
  .seasonal-calendar {
    gap: 32px;
  }
  
  .season-period {
    padding: 32px;
  }
  
  .moon-phases {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  
  .habitat-matrix {
    grid-template-columns: 1fr;
    gap: 43px;
  }
  
  .collection-methods {
    gap: 32px;
  }
  
  .method-category {
    padding: 32px;
  }
  
  .tool-collection {
    grid-template-columns: 1fr;
  }
  
  .sustainability-charter {
    padding: 54px;
  }
  
  .sustainability-title {
    font-size: 2.4rem;
  }
  
  .charter-principles {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .harvest-wisdom {
    padding: 76px 0 98px 0;
  }
  
  .collection-sanctuary {
    padding: 0 27px;
  }
  
  .gathering-awakening {
    margin-bottom: 76px;
  }
  
  .collection-mastery {
    font-size: 2.3rem;
    margin-bottom: 27px;
  }
  
  .sustainable-motto {
    font-size: 1.1rem;
  }
  
  .harvesting-methodology {
    gap: 43px;
    margin-bottom: 76px;
  }
  
  .temporal-guidance,
  .spatial-guidance,
  .method-guidance {
    padding: 27px;
    border-radius: 43px;
  }
  
  .timing-essence,
  .location-essence,
  .technique-essence {
    font-size: 1.8rem;
    margin-bottom: 21px;
  }
  
  .timing-philosophy,
  .location-philosophy,
  .technique-philosophy {
    font-size: 1.05rem;
    margin-bottom: 43px;
  }
  
  .seasonal-calendar {
    gap: 27px;
    margin-bottom: 43px;
  }
  
  .season-period {
    padding: 27px;
    border-radius: 32px;
  }
  
  .season-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .season-name {
    font-size: 1.3rem;
  }
  
  .harvest-focus {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }
  
  .lunar-influence {
    padding: 32px;
  }
  
  .lunar-title {
    font-size: 1.2rem;
  }
  
  .moon-guidance {
    padding: 21px;
  }
  
  .habitat-matrix {
    gap: 32px;
    margin-bottom: 43px;
  }
  
  .ideal-locations,
  .forbidden-zones {
    padding: 32px;
  }
  
  .location-category {
    font-size: 1.2rem;
    margin-bottom: 27px;
  }
  
  .location-item,
  .danger-item {
    padding: 18px;
  }
  
  .distance-rule {
    padding: 32px;
  }
  
  .rule-title {
    font-size: 1.2rem;
  }
  
  .rule-explanation {
    font-size: 1rem;
  }
  
  .collection-methods {
    gap: 27px;
    margin-bottom: 43px;
  }
  
  .method-category {
    padding: 27px;
  }
  
  .method-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 21px;
  }
  
  .method-name {
    font-size: 1.3rem;
  }
  
  .method-steps {
    gap: 16px;
  }
  
  .step-instruction {
    padding: 16px 21px 16px 43px;
    font-size: 0.95rem;
  }
  
  .equipment-essentials {
    padding: 32px;
  }
  
  .equipment-title {
    font-size: 1.2rem;
    margin-bottom: 27px;
  }
  
  .tool-item {
    padding: 21px;
  }
  
  .sustainability-charter {
    padding: 32px;
    border-radius: 43px;
  }
  
  .sustainability-title {
    font-size: 2rem;
    margin-bottom: 43px;
  }
  
  .charter-principles {
    gap: 27px;
    margin-bottom: 43px;
  }
  
  .principle-block {
    padding: 32px;
  }
  
  .principle-name {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  
  .principle-description {
    font-size: 1rem;
  }
  
  .wisdom-legacy {
    padding: 32px;
  }
  
  .legacy-message {
    font-size: 1.1rem;
  }
}












/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.contact-trigger:active {
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1280px) {
  .menu-foundation {
    max-width: 1200px;
    padding: 16px 42px;
  }
  
  .site-proclamation {
    font-size: 1.7rem;
  }
}

@media (max-width: 890px) {
  .menu-foundation {
    padding: 14px 34px;
  }
  
  .site-proclamation {
    font-size: 1.6rem;
  }
  
  .contact-trigger {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
}

@media (max-width: 640px) {
  .menu-foundation {
    padding: 12px 21px;
  }
  
  .site-proclamation {
    font-size: 1.4rem;
  }
  
  .contact-trigger {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
}








/* Foundation Closure */
.foundation-closure {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 89px 0 67px 0;
  position: relative;
  overflow: hidden;
}

.foundation-closure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 180, 216, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer-sanctuary {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.disclaimer-realm {
  text-align: center;
  margin-bottom: 67px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.informational-notice {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 400;
}

.footer-matrix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 55px;
  align-items: center;
  text-align: center;
}

.brand-foundation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-identity {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-detail {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.legal-pathways {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
}

.policy-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 27px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.copyright-statement {
  text-align: right;
}

.rights-declaration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .footer-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .foundation-closure {
    padding: 67px 0 55px 0;
  }
  
  .footer-matrix {
    gap: 42px;
  }
}

@media (max-width: 890px) {
  .footer-sanctuary {
    padding: 0 34px;
  }
  
  .foundation-closure {
    padding: 55px 0 42px 0;
  }
  
  .disclaimer-realm {
    margin-bottom: 55px;
    padding: 27px;
  }
  
  .informational-notice {
    font-size: 1.05rem;
  }
  
  .footer-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }
  
  .brand-foundation {
    text-align: center;
  }
  
  .footer-identity {
    font-size: 1.5rem;
  }
  
  .legal-pathways {
    flex-direction: row;
    justify-content: center;
    gap: 27px;
  }
  
  .copyright-statement {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .footer-sanctuary {
    padding: 0 21px;
  }
  
  .foundation-closure {
    padding: 42px 0 34px 0;
  }
  
  .disclaimer-realm {
    margin-bottom: 42px;
    padding: 21px;
    border-radius: 27px;
  }
  
  .informational-notice {
    font-size: 1rem;
  }
  
  .footer-matrix {
    gap: 34px;
  }
  
  .footer-identity {
    font-size: 1.4rem;
  }
  
  .contact-detail {
    font-size: 1rem;
  }
  
  .legal-pathways {
    flex-direction: column;
    gap: 18px;
  }
  
  .policy-link {
    font-size: 0.95rem;
    padding: 10px 24px;
  }
  
  .rights-declaration {
    font-size: 0.95rem;
  }
}














/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #e6f7fc;
  --primary-dark: #007a92;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #ff6b35;
  --accent-light: #fff4f0;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
  padding-top: 80px;
}

/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* Connection Realm Section */
.connection-realm {
  padding: 89px 0 67px 0;
  background: linear-gradient(145deg, var(--primary-light) 0%, var(--secondary-light) 35%, var(--neutral-light) 100%);
  position: relative;
  overflow: hidden;
}

.connection-realm::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(0, 180, 216, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(45, 80, 22, 0.04) 0%, transparent 50%);
  transform: rotate(-8deg);
  z-index: 1;
}

.contact-sanctuary {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.connection-introduction {
  text-align: center;
  margin-bottom: 89px;
}

.connection-symbol {
  font-size: 4rem;
  margin-bottom: 27px;
  display: inline-block;
  animation: gentleGrow 4s ease-in-out infinite;
}

@keyframes gentleGrow {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }
}

.connection-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 27px;
  line-height: 1.15;
}

.connection-philosophy {
  font-size: 1.3rem;
  color: var(--secondary-color);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 400;
}

/* Contact Information */
.contact-information {
  margin-bottom: 67px;
}

.info-garden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 42px;
}

.info-bloom {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 55px;
  padding: 55px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.info-bloom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.info-bloom > * {
  position: relative;
  z-index: 2;
}

.info-bloom:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.15);
}

.info-bloom:hover::before {
  opacity: 0.05;
}

.location::before {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--tertiary-color) 100%);
}

.phone::before {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--primary-color) 100%);
}

.hours::before {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--info-color) 100%);
}

.bloom-icon {
  font-size: 3rem;
  width: 89px;
  height: 89px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.4s ease;
}

.info-bloom:hover .bloom-icon {
  background: var(--accent-color);
  transform: rotate(10deg) scale(1.1);
}

.bloom-content {
  flex: 1;
}

.bloom-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.bloom-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.address-line {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.5;
}

.phone-link {
  font-size: 1.3rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.phone-link:hover {
  color: var(--accent-color);
  transform: scale(1.05);
}

.availability {
  font-size: 1rem;
  color: var(--neutral-color);
  font-style: italic;
}

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
}

.hours-row:last-child {
  border-bottom: none;
}

.day {
  font-size: 1.1rem;
  color: var(--secondary-color);
  font-weight: 500;
}

.time {
  font-size: 1.1rem;
  color: var(--primary-dark);
  font-weight: 600;
}

/* Communication Realm Section */
.communication-realm {
  padding: 67px 0 134px 0;
  background: linear-gradient(160deg, var(--tertiary-light) 0%, var(--neutral-light) 40%, var(--primary-light) 100%);
  position: relative;
}

.form-sanctuary {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 55px;
}

.form-garden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 89px;
  align-items: start;
}

/* Form Section */
.form-section {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

.form-introduction {
  text-align: center;
  margin-bottom: 55px;
}

.form-title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.form-subtitle {
  font-size: 1.1rem;
  color: var(--secondary-color);
  line-height: 1.6;
}

.message-form {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.form-field {
  position: relative;
}

.field-label {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--secondary-color);
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.field-input,
.field-textarea {
  width: 100%;
  padding: 18px 24px;
  border: 2px solid rgba(0, 180, 216, 0.2);
  border-radius: 27px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  resize: none;
}

.field-input:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.15);
  transform: translateY(-2px);
}

.field-input:focus + .field-decoration,
.field-textarea:focus + .field-decoration {
  transform: scaleX(1);
}

.field-decoration {
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 0 0 27px 27px;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

.submit-button {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  color: white;
  border: none;
  border-radius: 9999px;
  padding: 21px 55px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 25px rgba(0, 180, 216, 0.3);
  align-self: center;
}

.submit-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 180, 216, 0.4);
}

.submit-button:active {
  transform: translateY(-1px) scale(1.02);
}

.button-text {
  transition: transform 0.3s ease;
}

.button-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.submit-button:hover .button-icon {
  transform: rotate(20deg) scale(1.2);
}

/* Map Section */
.map-section {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

.map-introduction {
  text-align: center;
  margin-bottom: 42px;
}

.map-title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.map-subtitle {
  font-size: 1.1rem;
  color: var(--secondary-color);
  line-height: 1.6;
}

.map-container {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.map-placeholder {
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  height: 300px;
}

.location-map {
  width: 100%;
  height: 100%;
  border: none;
}

.map-info {
  background: var(--secondary-light);
  border-radius: 34px;
  padding: 34px;
}

.transport-options {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.transport-item {
  display: flex;
  align-items: center;
  gap: 21px;
  padding: 21px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 27px;
  transition: all 0.3s ease;
}

.transport-item:hover {
  background: white;
  transform: translateX(8px);
}

.transport-icon {
  font-size: 2rem;
  width: 55px;
  height: 55px;
  background: var(--secondary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transport-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.transport-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.4;
}

/* Foundation Closure */
.foundation-closure {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 89px 0 67px 0;
  position: relative;
  overflow: hidden;
}

.foundation-closure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 180, 216, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer-sanctuary {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.disclaimer-realm {
  text-align: center;
  margin-bottom: 67px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.informational-notice {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 400;
}

.footer-matrix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 55px;
  align-items: center;
  text-align: center;
}

.brand-foundation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-identity {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-detail {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.legal-pathways {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
}

.policy-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 27px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.copyright-statement {
  text-align: right;
}

.rights-declaration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .menu-foundation {
    max-width: 1200px;
    padding: 16px 42px;
  }
  
  .contact-sanctuary {
    max-width: 1100px;
    padding: 0 42px;
  }
  
  .form-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .footer-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .connection-title {
    font-size: 3rem;
  }
  
  .form-garden {
    gap: 67px;
  }
  
  .info-bloom {
    padding: 42px;
  }
  
  .form-section,
  .map-section {
    padding: 55px;
  }
}

@media (max-width: 890px) {
  .menu-foundation {
    padding: 14px 34px;
  }
  
  .site-proclamation {
    font-size: 1.6rem;
  }
  
  .contact-trigger {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
  
  .contact-sanctuary {
    padding: 0 34px;
  }
  
  .form-sanctuary {
    padding: 0 34px;
  }
  
  .footer-sanctuary {
    padding: 0 34px;
  }
  
  .connection-introduction {
    margin-bottom: 67px;
  }
  
  .connection-title {
    font-size: 2.6rem;
    margin-bottom: 21px;
  }
  
  .connection-philosophy {
    font-size: 1.2rem;
  }
  
  .info-garden {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  
  .info-bloom {
    flex-direction: column;
    text-align: center;
    gap: 24px;
    padding: 34px;
  }
  
  .bloom-icon {
    align-self: center;
  }
  
  .hours-row {
    justify-content: center;
    gap: 32px;
  }
  
  .form-garden {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  
  .form-section,
  .map-section {
    padding: 42px;
    border-radius: 55px;
  }
  
  .form-title,
  .map-title {
    font-size: 2rem;
  }
  
  .map-container {
    gap: 34px;
  }
  
  .footer-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }
  
  .brand-foundation {
    text-align: center;
  }
  
  .legal-pathways {
    flex-direction: row;
    justify-content: center;
    gap: 27px;
  }
  
  .copyright-statement {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .menu-foundation {
    padding: 12px 21px;
  }
  
  .site-proclamation {
    font-size: 1.4rem;
  }
  
  .contact-trigger {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  
  .connection-realm {
    padding: 67px 0 55px 0;
  }
  
  .communication-realm {
    padding: 55px 0 89px 0;
  }
  
  .contact-sanctuary {
    padding: 0 21px;
  }
  
  .form-sanctuary {
    padding: 0 21px;
  }
  
  .footer-sanctuary {
    padding: 0 21px;
  }
  
  .connection-introduction {
    margin-bottom: 55px;
  }
  
  .connection-symbol {
    font-size: 3rem;
    margin-bottom: 21px;
  }
  
  .connection-title {
    font-size: 2.2rem;
    margin-bottom: 18px;
  }
  
  .connection-philosophy {
    font-size: 1.1rem;
  }
  
  .contact-information {
    margin-bottom: 55px;
  }
  
  .info-garden {
    gap: 27px;
  }
  
  .info-bloom {
    padding: 27px;
    border-radius: 42px;
  }
  
  .bloom-icon {
    width: 67px;
    height: 67px;
    font-size: 2.5rem;
  }
  
  .bloom-title {
    font-size: 1.4rem;
    margin-bottom: 16px;
  }
  
  .address-line {
    font-size: 1rem;
  }
  
  .phone-link {
    font-size: 1.2rem;
  }
  
  .availability {
    font-size: 0.95rem;
  }
  
  .day,
  .time {
    font-size: 1rem;
  }
  
  .form-garden {
    gap: 42px;
  }
  
  .form-section,
  .map-section {
    padding: 27px;
    border-radius: 42px;
  }
  
  .form-introduction,
  .map-introduction {
    margin-bottom: 42px;
  }
  
  .form-title,
  .map-title {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }
  
  .form-subtitle,
  .map-subtitle {
    font-size: 1rem;
  }
  
  .message-form {
    gap: 27px;
  }
  
  .field-label {
    font-size: 1rem;
    margin-bottom: 8px;
  }
  
  .field-input,
  .field-textarea {
    padding: 16px 21px;
    border-radius: 21px;
    font-size: 0.95rem;
  }
  
  .field-textarea {
    min-height: 100px;
  }
  
  .field-decoration {
    left: 21px;
    right: 21px;
    border-radius: 0 0 21px 21px;
  }
  
  .submit-button {
    padding: 18px 42px;
    font-size: 1rem;
    gap: 8px;
  }
  
  .map-container {
    gap: 27px;
  }
  
  .map-placeholder {
    height: 250px;
    border-radius: 27px;
  }
  
  .map-info {
    padding: 27px;
    border-radius: 27px;
  }
  
  .transport-options {
    gap: 18px;
  }
  
  .transport-item {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 18px;
    border-radius: 21px;
  }
  
  .transport-icon {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }
  
  .transport-title {
    font-size: 1.1rem;
  }
  
  .transport-description {
    font-size: 0.95rem;
  }
  
  .disclaimer-realm {
    margin-bottom: 55px;
    padding: 27px;
    border-radius: 27px;
  }
  
  .informational-notice {
    font-size: 1rem;
  }
  
  .footer-matrix {
    gap: 34px;
  }
  
  .footer-identity {
    font-size: 1.4rem;
  }
  
  .contact-detail {
    font-size: 1rem;
  }
  
  .legal-pathways {
    flex-direction: column;
    gap: 18px;
  }
  
  .policy-link {
    font-size: 0.95rem;
    padding: 10px 24px;
  }
  
  .rights-declaration {
    font-size: 0.95rem;
  }
}



















/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #e6f7fc;
  --primary-dark: #007a92;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #ff6b35;
  --accent-light: #fff4f0;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
  padding-top: 80px;
}

/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* Transparency Realm Section */
.transparency-realm {
  padding: 89px 0 134px 0;
  background: linear-gradient(160deg, var(--primary-light) 0%, var(--neutral-light) 30%, var(--tertiary-light) 70%, var(--secondary-light) 100%);
  position: relative;
  overflow: hidden;
}

.transparency-realm::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(0, 180, 216, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(139, 69, 19, 0.04) 0%, transparent 50%);
  transform: rotate(-5deg);
  z-index: 1;
}

.cookie-sanctuary {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

/* Clarity Introduction */
.clarity-introduction {
  text-align: center;
  margin-bottom: 89px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
}

.transparency-icon {
  font-size: 4rem;
  margin-bottom: 27px;
  display: inline-block;
  animation: gentleBounce 3s ease-in-out infinite;
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.transparency-title {
  font-family: var(--font-heading);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 27px;
  line-height: 1.2;
}

.transparency-subtitle {
  font-size: 1.3rem;
  color: var(--secondary-color);
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 400;
}

/* Understanding Garden */
.understanding-garden {
  display: flex;
  flex-direction: column;
  gap: 67px;
  margin-bottom: 89px;
}

.concept-bloom {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 55px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
}

.concept-bloom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.concept-bloom > * {
  position: relative;
  z-index: 2;
}

.concept-bloom:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
}

.concept-bloom:hover::before {
  opacity: 0.03;
}

.what-are::before {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--primary-color) 100%);
}

.how-we-use::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
}

.your-control::before {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%);
}

.bloom-essence {
  padding: 55px;
}

.concept-symbol {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 32px;
  display: block;
}

.concept-title {
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 42px;
}

.concept-explanation {
  max-width: 900px;
  margin: 0 auto;
}

.primary-explanation {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.7;
  margin-bottom: 34px;
  text-align: center;
}

/* Analogy Box */
.analogy-box {
  background: var(--accent-light);
  border-radius: 34px;
  padding: 34px;
  display: flex;
  align-items: flex-start;
  gap: 21px;
  border-left: 5px solid var(--accent-color);
}

.analogy-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.analogy-text {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.6;
  font-style: italic;
}

/* Usage Categories */
.usage-categories {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.usage-category {
  background: var(--primary-light);
  border-radius: 42px;
  padding: 42px;
  transition: all 0.4s ease;
}

.usage-category:hover {
  background: rgba(0, 180, 216, 0.15);
  transform: translateX(12px);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 21px;
}

.category-icon {
  font-size: 2rem;
  width: 55px;
  height: 55px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-name {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.category-purpose {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.6;
  margin-bottom: 27px;
}

.category-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.example {
  background: var(--secondary-light);
  color: var(--secondary-color);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Control Options */
.control-intro {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.7;
  margin-bottom: 42px;
  text-align: center;
}

.control-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  margin-bottom: 42px;
}

.control-method {
  background: var(--tertiary-light);
  border-radius: 34px;
  padding: 34px;
  text-align: center;
}

.method-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

.method-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

.important-note {
  background: var(--warning-color);
  color: white;
  border-radius: 34px;
  padding: 27px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.note-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.note-text {
  font-size: 1rem;
  line-height: 1.6;
}

/* Commitment Statement */
.commitment-statement {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  position: relative;
}

.commitment-statement::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--primary-color), var(--accent-color), var(--secondary-color), var(--success-color));
  border-radius: 67px;
  z-index: -1;
}

.commitment-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 55px;
}

.commitment-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 55px;
}

.principle-card {
  background: var(--primary-light);
  border-radius: 42px;
  padding: 42px;
  text-align: center;
  transition: all 0.4s ease;
}

.principle-card:hover {
  background: var(--secondary-light);
  transform: translateY(-8px) rotate(1deg);
}

.principle-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 21px;
}

.principle-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

.principle-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

.final-message {
  background: var(--accent-light);
  border-radius: 34px;
  padding: 42px;
  text-align: center;
}

.closing-wisdom {
  font-size: 1.2rem;
  color: var(--primary-dark);
  line-height: 1.7;
  font-style: italic;
  font-weight: 500;
}

/* Foundation Closure */
.foundation-closure {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 89px 0 67px 0;
  position: relative;
  overflow: hidden;
}

.foundation-closure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 180, 216, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer-sanctuary {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.disclaimer-realm {
  text-align: center;
  margin-bottom: 67px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.informational-notice {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 400;
}

.footer-matrix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 55px;
  align-items: center;
  text-align: center;
}

.brand-foundation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-identity {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-detail {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.legal-pathways {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
}

.policy-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 27px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.copyright-statement {
  text-align: right;
}

.rights-declaration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .menu-foundation {
    max-width: 1200px;
    padding: 16px 42px;
  }
  
  .cookie-sanctuary {
    max-width: 1000px;
    padding: 0 42px;
  }
  
  .footer-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .clarity-introduction {
    padding: 55px;
  }
  
  .transparency-title {
    font-size: 2.8rem;
  }
  
  .bloom-essence {
    padding: 42px;
  }
  
  .commitment-statement {
    padding: 55px;
  }
}

@media (max-width: 890px) {
  .menu-foundation {
    padding: 14px 34px;
  }
  
  .site-proclamation {
    font-size: 1.6rem;
  }
  
  .contact-trigger {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
  
  .cookie-sanctuary {
    padding: 0 34px;
  }
  
  .footer-sanctuary {
    padding: 0 34px;
  }
  
  .clarity-introduction {
    padding: 42px;
    border-radius: 42px;
  }
  
  .transparency-title {
    font-size: 2.4rem;
    margin-bottom: 21px;
  }
  
  .transparency-subtitle {
    font-size: 1.2rem;
  }
  
  .understanding-garden {
    gap: 55px;
    margin-bottom: 67px;
  }
  
  .concept-bloom {
    border-radius: 42px;
  }
  
  .bloom-essence {
    padding: 34px;
  }
  
  .concept-title {
    font-size: 1.8rem;
  }
  
  .control-options {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  
  .commitment-principles {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  
  .commitment-statement {
    padding: 42px;
    border-radius: 42px;
  }
  
  .commitment-title {
    font-size: 2.1rem;
  }
  
  .footer-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }
  
  .brand-foundation {
    text-align: center;
  }
  
  .legal-pathways {
    flex-direction: row;
    justify-content: center;
    gap: 27px;
  }
  
  .copyright-statement {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .menu-foundation {
    padding: 12px 21px;
  }
  
  .site-proclamation {
    font-size: 1.4rem;
  }
  
  .contact-trigger {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  
  .transparency-realm {
    padding: 67px 0 89px 0;
  }
  
  .cookie-sanctuary {
    padding: 0 21px;
  }
  
  .footer-sanctuary {
    padding: 0 21px;
  }
  
  .clarity-introduction {
    padding: 27px;
    margin-bottom: 67px;
    border-radius: 27px;
  }
  
  .transparency-icon {
    font-size: 3rem;
    margin-bottom: 21px;
  }
  
  .transparency-title {
    font-size: 2rem;
    margin-bottom: 18px;
  }
  
  .transparency-subtitle {
    font-size: 1.1rem;
  }
  
  .understanding-garden {
    gap: 42px;
    margin-bottom: 55px;
  }
  
  .concept-bloom {
    border-radius: 27px;
  }
  
  .bloom-essence {
    padding: 27px;
  }
  
  .concept-symbol {
    font-size: 2.5rem;
    margin-bottom: 21px;
  }
  
  .concept-title {
    font-size: 1.6rem;
    margin-bottom: 27px;
  }
  
  .primary-explanation {
    font-size: 1.1rem;
    margin-bottom: 27px;
  }
  
  .analogy-box {
    padding: 27px;
    border-radius: 21px;
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .analogy-text {
    font-size: 1rem;
  }
  
  .usage-category {
    padding: 27px;
    border-radius: 27px;
  }
  
  .category-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .category-icon {
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
  }
  
  .category-name {
    font-size: 1.2rem;
  }
  
  .category-purpose {
    font-size: 1rem;
    margin-bottom: 21px;
  }
  
  .category-examples {
    justify-content: center;
  }
  
  .control-intro {
    font-size: 1.1rem;
    margin-bottom: 32px;
  }
  
  .control-method {
    padding: 27px;
    border-radius: 21px;
  }
  
  .method-title {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  
  .method-description {
    font-size: 0.95rem;
  }
  
  .important-note {
    padding: 21px;
    border-radius: 21px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .note-text {
    font-size: 0.95rem;
  }
  
  .commitment-statement {
    padding: 27px;
    border-radius: 27px;
  }
  
  .commitment-title {
    font-size: 1.8rem;
    margin-bottom: 42px;
  }
  
  .commitment-principles {
    gap: 21px;
    margin-bottom: 42px;
  }
  
  .principle-card {
    padding: 27px;
    border-radius: 27px;
  }
  
  .principle-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
  }
  
  .principle-name {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }
  
  .principle-description {
    font-size: 0.95rem;
  }
  
  .final-message {
    padding: 27px;
    border-radius: 21px;
  }
  
  .closing-wisdom {
    font-size: 1.1rem;
  }
  
  .disclaimer-realm {
    margin-bottom: 55px;
    padding: 27px;
    border-radius: 27px;
  }
  
  .informational-notice {
    font-size: 1rem;
  }
  
  .footer-matrix {
    gap: 34px;
  }
  
  .footer-identity {
    font-size: 1.4rem;
  }
  
  .contact-detail {
    font-size: 1rem;
  }
  
  .legal-pathways {
    flex-direction: column;
    gap: 18px;
  }
  
  .policy-link {
    font-size: 0.95rem;
    padding: 10px 24px;
  }
  
  .rights-declaration {
    font-size: 0.95rem;
  }
}














/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #e6f7fc;
  --primary-dark: #007a92;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #ff6b35;
  --accent-light: #fff4f0;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
  padding-top: 80px;
}

/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* Sanctuary Realm Section */
.sanctuary-realm {
  padding: 89px 0 134px 0;
  background: linear-gradient(170deg, var(--secondary-light) 0%, var(--neutral-light) 25%, var(--primary-light) 60%, var(--tertiary-light) 100%);
  position: relative;
  overflow: hidden;
}

.sanctuary-realm::before {
  content: '';
  position: absolute;
  top: -25%;
  left: -15%;
  width: 130%;
  height: 150%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(45, 80, 22, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0, 180, 216, 0.04) 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(139, 69, 19, 0.03) 0%, transparent 50%);
  transform: rotate(-3deg);
  z-index: 1;
}

.privacy-garden {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

/* Sanctuary Introduction */
.sanctuary-introduction {
  text-align: center;
  margin-bottom: 111px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  border-radius: 76px;
  padding: 76px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.09);
  position: relative;
}

.sanctuary-introduction::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(45deg, var(--success-color), var(--primary-color), var(--secondary-color));
  border-radius: 76px;
  z-index: -1;
}

.guardian-symbol {
  font-size: 4.5rem;
  margin-bottom: 32px;
  display: inline-block;
  animation: protectivePulse 4s ease-in-out infinite;
}

@keyframes protectivePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.3)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(16, 185, 129, 0.5)); }
}

.sanctuary-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 32px;
  line-height: 1.15;
}

.sanctuary-philosophy {
  font-size: 1.35rem;
  color: var(--secondary-color);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto;
  font-weight: 400;
  font-style: italic;
}

/* Protection Ecosystem */
.protection-ecosystem {
  display: flex;
  flex-direction: column;
  gap: 76px;
  margin-bottom: 111px;
}

.protection-grove {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  border-radius: 67px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

.protection-grove::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.protection-grove > * {
  position: relative;
  z-index: 2;
}

.protection-grove:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.protection-grove:hover::before {
  opacity: 0.04;
}

.data-collection::before {
  background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);
}

.data-usage::before {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--secondary-color) 100%);
}

.data-protection::before {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%);
}

.user-rights::before {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--warning-color) 100%);
}

.grove-essence {
  padding: 67px;
}

.protection-icon {
  font-size: 4rem;
  text-align: center;
  margin-bottom: 38px;
  display: block;
}

.grove-title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 42px;
}

.essence-explanation {
  font-size: 1.25rem;
  color: var(--secondary-color);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 55px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Data Categories */
.data-categories {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.data-type {
  background: var(--primary-light);
  border-radius: 42px;
  padding: 42px;
  transition: all 0.5s ease;
}

.data-type:hover {
  background: rgba(0, 180, 216, 0.12);
  transform: scale(1.02);
}

.type-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 27px;
}

.type-symbol {
  font-size: 2.5rem;
  width: 67px;
  height: 67px;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.type-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-dark);
}

.type-description {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.65;
  margin-bottom: 27px;
}

.data-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.data-item {
  background: var(--secondary-light);
  color: var(--secondary-color);
  padding: 8px 18px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Usage Purposes */
.usage-purposes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 42px;
}

.purpose-seed {
  background: var(--tertiary-light);
  border-radius: 42px;
  padding: 42px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.purpose-seed::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.purpose-seed > * {
  position: relative;
  z-index: 2;
}

.purpose-seed:hover {
  transform: translateY(-12px) rotate(2deg);
}

.purpose-seed:hover::before {
  opacity: 0.06;
}

.analytics::before {
  background: radial-gradient(circle, var(--info-color) 0%, transparent 70%);
}

.personalization::before {
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
}

.security::before {
  background: radial-gradient(circle, var(--success-color) 0%, transparent 70%);
}

.purpose-icon {
  font-size: 3rem;
  margin-bottom: 24px;
  display: block;
}

.purpose-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.purpose-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

/* Security Layers */
.security-layers {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.security-layer {
  background: var(--accent-light);
  border-radius: 34px;
  padding: 34px;
  display: flex;
  align-items: center;
  gap: 27px;
  transition: all 0.4s ease;
}

.security-layer:hover {
  background: rgba(255, 107, 53, 0.15);
  transform: translateX(12px);
}

.layer-badge {
  font-size: 2.5rem;
  width: 67px;
  height: 67px;
  background: var(--accent-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.layer-name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 8px;
}

.layer-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

/* Rights Garden */
.rights-garden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.right-flower {
  background: var(--success-color);
  border-radius: 42px;
  padding: 34px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.right-flower::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.right-flower > * {
  position: relative;
  z-index: 2;
}

.right-flower:hover {
  transform: translateY(-8px) rotate(-3deg);
  box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
}

.right-flower:hover::before {
  opacity: 1;
}

.flower-bloom {
  color: white;
}

.right-symbol {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 18px;
}

.right-name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.right-description {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.95;
}

/* Sacred Promise */
.sacred-promise {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 76px;
  padding: 76px;
  box-shadow: 0 25px 75px rgba(0, 0, 0, 0.12);
  position: relative;
}

.sacred-promise::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--primary-color), var(--success-color), var(--secondary-color), var(--accent-color));
  border-radius: 76px;
  z-index: -1;
}

.promise-title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 67px;
}

.promise-principles {
  display: flex;
  flex-direction: column;
  gap: 42px;
  margin-bottom: 67px;
}

.principle-leaf {
  background: var(--secondary-light);
  border-radius: 55px;
  padding: 42px;
  display: flex;
  align-items: center;
  gap: 34px;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.principle-leaf::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.principle-leaf > * {
  position: relative;
  z-index: 2;
}

.principle-leaf:hover {
  transform: translateX(21px) scale(1.02);
}

.principle-leaf:hover::before {
  opacity: 0.08;
}

.transparency::before {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--info-color) 100%);
}

.minimalism::before {
  background: linear-gradient(135deg, var(--success-color) 0%, var(--secondary-color) 100%);
}

.respect::before {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--tertiary-color) 100%);
}

.leaf-symbol {
  font-size: 3.5rem;
  flex-shrink: 0;
  animation: gentleFloat 6s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

.leaf-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 16px;
}

.leaf-wisdom {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.65;
}

.final-commitment {
  background: var(--primary-light);
  border-radius: 42px;
  padding: 55px;
  text-align: center;
}

.commitment-message {
  font-size: 1.3rem;
  color: var(--primary-dark);
  line-height: 1.8;
  font-weight: 500;
  font-style: italic;
  max-width: 800px;
  margin: 0 auto;
}

/* Foundation Closure */
.foundation-closure {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 89px 0 67px 0;
  position: relative;
  overflow: hidden;
}

.foundation-closure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 180, 216, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer-sanctuary {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.disclaimer-realm {
  text-align: center;
  margin-bottom: 67px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.informational-notice {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 400;
}

.footer-matrix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 55px;
  align-items: center;
  text-align: center;
}

.brand-foundation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-identity {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-detail {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.legal-pathways {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
}

.policy-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 27px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.copyright-statement {
  text-align: right;
}

.rights-declaration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .menu-foundation {
    max-width: 1200px;
    padding: 16px 42px;
  }
  
  .privacy-garden {
    max-width: 1000px;
    padding: 0 42px;
  }
  
  .footer-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .sanctuary-introduction {
    padding: 67px;
  }
  
  .sanctuary-title {
    font-size: 3rem;
  }
  
  .protection-ecosystem {
    gap: 67px;
    margin-bottom: 89px;
  }
  
  .grove-essence {
    padding: 55px;
  }
  
  .sacred-promise {
    padding: 67px;
  }
}

@media (max-width: 890px) {
  .menu-foundation {
    padding: 14px 34px;
  }
  
  .site-proclamation {
    font-size: 1.6rem;
  }
  
  .contact-trigger {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
  
  .privacy-garden {
    padding: 0 34px;
  }
  
  .footer-sanctuary {
    padding: 0 34px;
  }
  
  .sanctuary-introduction {
    padding: 55px;
    border-radius: 55px;
    margin-bottom: 89px;
  }
  
  .sanctuary-title {
    font-size: 2.6rem;
    margin-bottom: 27px;
  }
  
  .sanctuary-philosophy {
    font-size: 1.2rem;
  }
  
  .protection-ecosystem {
    gap: 55px;
    margin-bottom: 76px;
  }
  
  .protection-grove {
    border-radius: 55px;
  }
  
  .grove-essence {
    padding: 42px;
  }
  
  .grove-title {
    font-size: 2rem;
  }
  
  .data-type {
    padding: 34px;
  }
  
  .type-header {
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  
  .usage-purposes {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  
  .security-layer {
    flex-direction: column;
    text-align: center;
    gap: 21px;
    padding: 27px;
  }
  
  .rights-garden {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 27px;
  }
  
  .principle-leaf {
    flex-direction: column;
    text-align: center;
    gap: 27px;
    padding: 34px;
  }
  
  .sacred-promise {
    padding: 55px;
    border-radius: 55px;
  }
  
  .promise-title {
    font-size: 2.4rem;
  }
  
  .footer-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }
  
  .brand-foundation {
    text-align: center;
  }
  
  .legal-pathways {
    flex-direction: row;
    justify-content: center;
    gap: 27px;
  }
  
  .copyright-statement {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .menu-foundation {
    padding: 12px 21px;
  }
  
  .site-proclamation {
    font-size: 1.4rem;
  }
  
  .contact-trigger {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  
  .sanctuary-realm {
    padding: 67px 0 89px 0;
  }
  
  .privacy-garden {
    padding: 0 21px;
  }
  
  .footer-sanctuary {
    padding: 0 21px;
  }
  
  .sanctuary-introduction {
    padding: 34px;
    margin-bottom: 67px;
    border-radius: 42px;
  }
  
  .guardian-symbol {
    font-size: 3.5rem;
    margin-bottom: 24px;
  }
  
  .sanctuary-title {
    font-size: 2.2rem;
    margin-bottom: 24px;
  }
  
  .sanctuary-philosophy {
    font-size: 1.1rem;
  }
  
  .protection-ecosystem {
    gap: 42px;
    margin-bottom: 67px;
  }
  
  .protection-grove {
    border-radius: 42px;
  }
  
  .grove-essence {
    padding: 27px;
  }
  
  .protection-icon {
    font-size: 3rem;
    margin-bottom: 27px;
  }
  
  .grove-title {
    font-size: 1.8rem;
    margin-bottom: 27px;
  }
  
  .essence-explanation {
    font-size: 1.1rem;
    margin-bottom: 42px;
  }
  
  .data-categories {
    gap: 32px;
  }
  
  .data-type {
    padding: 27px;
    border-radius: 27px;
  }
  
  .type-symbol {
    width: 55px;
    height: 55px;
    font-size: 2rem;
  }
  
  .type-name {
    font-size: 1.4rem;
  }
  
  .type-description {
    font-size: 1rem;
    margin-bottom: 21px;
  }
  
  .purpose-seed {
    padding: 27px;
    border-radius: 27px;
  }
  
  .purpose-icon {
    font-size: 2.5rem;
    margin-bottom: 18px;
  }
  
  .purpose-title {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }
  
  .purpose-description {
    font-size: 0.95rem;
  }
  
  .security-layer {
    padding: 21px;
    border-radius: 21px;
  }
  
  .layer-badge {
    width: 55px;
    height: 55px;
    font-size: 2rem;
  }
  
  .layer-name {
    font-size: 1.2rem;
  }
  
  .layer-description {
    font-size: 0.95rem;
  }
  
  .rights-garden {
    grid-template-columns: 1fr;
  }
  
  .right-flower {
    padding: 27px;
    border-radius: 27px;
  }
  
  .right-symbol {
    font-size: 2rem;
    margin-bottom: 16px;
  }
  
  .right-name {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }
  
  .right-description {
    font-size: 0.9rem;
  }
  
  .sacred-promise {
    padding: 34px;
    border-radius: 42px;
  }
  
  .promise-title {
    font-size: 2rem;
    margin-bottom: 42px;
  }
  
  .promise-principles {
    gap: 32px;
    margin-bottom: 42px;
  }
  
  .principle-leaf {
    padding: 27px;
    border-radius: 34px;
  }
  
  .leaf-symbol {
    font-size: 2.5rem;
  }
  
  .leaf-title {
    font-size: 1.4rem;
    margin-bottom: 12px;
  }
  
  .leaf-wisdom {
    font-size: 1rem;
  }
  
  .final-commitment {
    padding: 34px;
    border-radius: 27px;
  }
  
  .commitment-message {
    font-size: 1.1rem;
  }
  
  .disclaimer-realm {
    margin-bottom: 55px;
    padding: 27px;
    border-radius: 27px;
  }
  
  .informational-notice {
    font-size: 1rem;
  }
  
  .footer-matrix {
    gap: 34px;
  }
  
  .footer-identity {
    font-size: 1.4rem;
  }
  
  .contact-detail {
    font-size: 1rem;
  }
  
  .legal-pathways {
    flex-direction: column;
    gap: 18px;
  }
  
  .policy-link {
    font-size: 0.95rem;
    padding: 10px 24px;
  }
  
  .rights-declaration {
    font-size: 0.95rem;
  }
}


















/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #e6f7fc;
  --primary-dark: #007a92;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #ff6b35;
  --accent-light: #fff4f0;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
  padding-top: 80px;
}

/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* Gratitude Realm Section */
.gratitude-realm {
  padding: 89px 0 134px 0;
  background: linear-gradient(160deg, var(--success-color) 0%, var(--primary-light) 25%, var(--secondary-light) 60%, var(--neutral-light) 100%);
  position: relative;
  overflow: hidden;
}

.gratitude-realm::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 120%;
  height: 140%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(0, 180, 216, 0.06) 0%, transparent 60%),
    radial-gradient(circle at 50% 90%, rgba(45, 80, 22, 0.04) 0%, transparent 50%);
  transform: rotate(-5deg);
  z-index: 1;
  animation: gentleShift 20s ease-in-out infinite;
}

@keyframes gentleShift {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(-3deg) scale(1.02); }
}

.thanksgiving-sanctuary {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.celebration-garden {
  display: flex;
  flex-direction: column;
  gap: 89px;
  align-items: center;
}

/* Success Bloom */
.success-bloom {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 89px;
  padding: 89px;
  box-shadow: 0 25px 75px rgba(16, 185, 129, 0.2);
  position: relative;
  max-width: 800px;
  width: 100%;
}

.success-bloom::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, var(--success-color), var(--primary-color), var(--accent-color));
  border-radius: 89px;
  z-index: -1;
  animation: successGlow 3s ease-in-out infinite;
}

@keyframes successGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.gratitude-symbol {
  font-size: 5rem;
  margin-bottom: 34px;
  display: inline-block;
  animation: celebrationBounce 2s ease-in-out infinite;
}

@keyframes celebrationBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(-8px) rotate(-2deg); }
}

.gratitude-title {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--success-color);
  margin-bottom: 34px;
  line-height: 1.1;
  text-shadow: 2px 2px 6px rgba(16, 185, 129, 0.2);
}

.gratitude-message {
  font-size: 1.4rem;
  color: var(--secondary-color);
  line-height: 1.7;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

/* Confirmation Details */
.confirmation-details {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(15px);
  border-radius: 55px;
  padding: 55px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
  max-width: 600px;
  width: 100%;
}

.detail-card {
  text-align: center;
}

.detail-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 34px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 27px;
  background: var(--primary-light);
  border-radius: 27px;
  transition: all 0.3s ease;
}

.detail-row:hover {
  background: rgba(0, 180, 216, 0.15);
  transform: scale(1.02);
}

.detail-label {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.detail-value {
  font-weight: 500;
  color: var(--primary-dark);
  font-size: 1.1rem;
}

/* Next Steps */
.next-steps {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.09);
  max-width: 900px;
  width: 100%;
}

.steps-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 55px;
}

.step-flowers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 42px;
}

.step-flower {
  background: var(--secondary-light);
  border-radius: 42px;
  padding: 42px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.step-flower::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.step-flower > * {
  position: relative;
  z-index: 2;
}

.step-flower:hover {
  transform: translateY(-12px) rotate(2deg);
}

.step-flower:hover::before {
  opacity: 0.08;
}

.step-flower:nth-child(1)::before {
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
}

.step-flower:nth-child(2)::before {
  background: radial-gradient(circle, var(--success-color) 0%, transparent 70%);
}

.step-flower:nth-child(3)::before {
  background: radial-gradient(circle, var(--info-color) 0%, transparent 70%);
}

.flower-icon {
  font-size: 3.5rem;
  margin-bottom: 24px;
  display: block;
  animation: gentleFloat 4s ease-in-out infinite;
}

.step-flower:nth-child(2) .flower-icon {
  animation-delay: 1s;
}

.step-flower:nth-child(3) .flower-icon {
  animation-delay: 2s;
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.flower-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 18px;
}

.flower-description {
  font-size: 1rem;
  color: var(--neutral-color);
  line-height: 1.6;
}

/* Continue Journey */
.continue-journey {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 67px;
  padding: 67px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.09);
  text-align: center;
  max-width: 700px;
  width: 100%;
}

.journey-title {
  font-family: var(--font-heading);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 27px;
}

.journey-message {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.6;
  margin-bottom: 55px;
}

.journey-actions {
  display: flex;
  gap: 27px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 21px 42px;
  border-radius: 9999px;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.action-button.primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--success-color) 100%);
  color: white;
}

.action-button.primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 180, 216, 0.3);
}

.action-button.secondary {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%);
  color: white;
}

.action-button.secondary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(45, 80, 22, 0.3);
}

.button-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.action-button:hover .button-icon {
  transform: scale(1.2) rotate(10deg);
}

/* Wellness Quote */
.wellness-quote {
  background: var(--tertiary-light);
  border-radius: 55px;
  padding: 55px;
  max-width: 800px;
  width: 100%;
  position: relative;
}

.wellness-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 40px;
  font-size: 8rem;
  color: var(--tertiary-color);
  opacity: 0.3;
  font-family: var(--font-heading);
  line-height: 1;
}

.quote-essence {
  text-align: center;
}

.wisdom-quote {
  font-size: 1.3rem;
  color: var(--primary-dark);
  line-height: 1.8;
  font-style: italic;
  font-weight: 500;
  margin-bottom: 27px;
  position: relative;
  z-index: 2;
}

.quote-attribution {
  font-size: 1.1rem;
  color: var(--tertiary-color);
  font-weight: 600;
  font-style: normal;
}

/* Foundation Closure */
.foundation-closure {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--secondary-color) 100%);
  color: white;
  padding: 89px 0 67px 0;
  position: relative;
  overflow: hidden;
}

.foundation-closure::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 180, 216, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.footer-sanctuary {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
}

.disclaimer-realm {
  text-align: center;
  margin-bottom: 67px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.informational-notice {
  font-size: 1.1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 920px;
  margin: 0 auto;
  font-weight: 400;
}

.footer-matrix {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 55px;
  align-items: center;
  text-align: center;
}

.brand-foundation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.footer-identity {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: white;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-detail {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

.legal-pathways {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
}

.policy-link {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 27px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.policy-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.copyright-statement {
  text-align: right;
}

.rights-declaration {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
}

/* Responsive Design */
@media (max-width: 1280px) {
  .menu-foundation {
    max-width: 1200px;
    padding: 16px 42px;
  }
  
  .thanksgiving-sanctuary {
    max-width: 1000px;
    padding: 0 42px;
  }
  
  .footer-sanctuary {
    max-width: 1200px;
    padding: 0 42px;
  }
  
  .celebration-garden {
    gap: 67px;
  }
  
  .success-bloom {
    padding: 67px;
  }
  
  .gratitude-title {
    font-size: 3.2rem;
  }
}

@media (max-width: 890px) {
  .menu-foundation {
    padding: 14px 34px;
  }
  
  .site-proclamation {
    font-size: 1.6rem;
  }
  
  .contact-trigger {
    padding: 12px 28px;
    font-size: 0.95rem;
  }
  
  .thanksgiving-sanctuary {
    padding: 0 34px;
  }
  
  .footer-sanctuary {
    padding: 0 34px;
  }
  
  .celebration-garden {
    gap: 55px;
  }
  
  .success-bloom {
    padding: 55px;
    border-radius: 55px;
  }
  
  .gratitude-symbol {
    font-size: 4rem;
    margin-bottom: 27px;
  }
  
  .gratitude-title {
    font-size: 2.8rem;
    margin-bottom: 27px;
  }
  
  .gratitude-message {
    font-size: 1.2rem;
  }
  
  .confirmation-details {
    padding: 42px;
    border-radius: 42px;
  }
  
  .detail-title {
    font-size: 1.6rem;
  }
  
  .next-steps,
  .continue-journey {
    padding: 55px;
    border-radius: 55px;
  }
  
  .steps-title {
    font-size: 2.1rem;
  }
  
  .step-flowers {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  
  .step-flower {
    padding: 34px;
    border-radius: 34px;
  }
  
  .flower-icon {
    font-size: 3rem;
    margin-bottom: 21px;
  }
  
  .flower-title {
    font-size: 1.3rem;
    margin-bottom: 16px;
  }
  
  .flower-description {
    font-size: 0.95rem;
  }
  
  .journey-title {
    font-size: 2rem;
    margin-bottom: 21px;
  }
  
  .journey-message {
    font-size: 1.1rem;
    margin-bottom: 42px;
  }
  
  .journey-actions {
    flex-direction: column;
    gap: 21px;
  }
  
  .action-button {
    padding: 18px 34px;
    font-size: 1rem;
  }
  
  .wellness-quote {
    padding: 42px;
    border-radius: 42px;
  }
  
  .wisdom-quote {
    font-size: 1.2rem;
    margin-bottom: 21px;
  }
  
  .quote-attribution {
    font-size: 1rem;
  }
  
  .footer-matrix {
    grid-template-columns: 1fr;
    gap: 42px;
    text-align: center;
  }
  
  .brand-foundation {
    text-align: center;
  }
  
  .legal-pathways {
    flex-direction: row;
    justify-content: center;
    gap: 27px;
  }
  
  .copyright-statement {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .menu-foundation {
    padding: 12px 21px;
  }
  
  .site-proclamation {
    font-size: 1.4rem;
  }
  
  .contact-trigger {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  
  .gratitude-realm {
    padding: 67px 0 89px 0;
  }
  
  .thanksgiving-sanctuary {
    padding: 0 21px;
  }
  
  .footer-sanctuary {
    padding: 0 21px;
  }
  
  .celebration-garden {
    gap: 42px;
  }
  
  .success-bloom {
    padding: 34px;
    border-radius: 42px;
  }
  
  .gratitude-symbol {
    font-size: 3.5rem;
    margin-bottom: 21px;
  }
  
  .gratitude-title {
    font-size: 2.3rem;
    margin-bottom: 21px;
  }
  
  .gratitude-message {
    font-size: 1.1rem;
  }
  
  .confirmation-details {
    padding: 27px;
    border-radius: 34px;
  }
  
  .detail-title {
    font-size: 1.4rem;
    margin-bottom: 27px;
  }
  
  .detail-content {
    gap: 16px;
  }
  
  .detail-row {
    flex-direction: column;
    gap: 8px;
    padding: 16px 21px;
    text-align: center;
    border-radius: 21px;
  }
  
  .detail-label,
  .detail-value {
    font-size: 1rem;
  }
  
  .next-steps,
  .continue-journey {
    padding: 34px;
    border-radius: 42px;
  }
  
  .steps-title {
    font-size: 1.8rem;
    margin-bottom: 42px;
  }
  
  .step-flowers {
    gap: 27px;
  }
  
  .step-flower {
    padding: 27px;
    border-radius: 27px;
  }
  
  .flower-icon {
    font-size: 2.5rem;
    margin-bottom: 18px;
  }
  
  .flower-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
  }
  
  .flower-description {
    font-size: 0.9rem;
  }
  
  .journey-title {
    font-size: 1.8rem;
    margin-bottom: 18px;
  }
  
  .journey-message {
    font-size: 1rem;
    margin-bottom: 34px;
  }
  
  .journey-actions {
    gap: 16px;
  }
  
  .action-button {
    padding: 16px 32px;
    font-size: 0.95rem;
    gap: 8px;
  }
  
  .button-icon {
    font-size: 1.1rem;
  }
  
  .wellness-quote {
    padding: 27px;
    border-radius: 34px;
  }
  
  .wellness-quote::before {
    font-size: 6rem;
    top: -15px;
    left: 25px;
  }
  
  .wisdom-quote {
    font-size: 1.1rem;
    margin-bottom: 18px;
  }
  
  .quote-attribution {
    font-size: 0.95rem;
  }
  
  .disclaimer-realm {
    margin-bottom: 55px;
    padding: 27px;
    border-radius: 27px;
  }
  
  .informational-notice {
    font-size: 1rem;
  }
  
  .footer-matrix {
    gap: 34px;
  }
  
  .footer-identity {
    font-size: 1.4rem;
  }
  
  .contact-detail {
    font-size: 1rem;
  }
  
  .legal-pathways {
    flex-direction: column;
    gap: 18px;
  }
  
  .policy-link {
    font-size: 0.95rem;
    padding: 10px 24px;
  }
  
  .rights-declaration {
    font-size: 0.95rem;
  }
}















/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #7a9200;
  --primary-light: #e6f7fc;
  --primary-dark: #007a92;
  --secondary-color: #2d5016;
  --secondary-light: #f0f7e6;
  --tertiary-color: #8b4513;
  --tertiary-light: #fdf5e6;
  --accent-color: #ff6b35;
  --accent-light: #fff4f0;
  --neutral-color: #6b7280;
  --neutral-light: #f8fafc;
  --info-color: #3b82f6;
  --warning-color: #ef4444;
  --success-color: #10b981;
  
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'PT Sans', sans-serif;
}

body {
  font-family: var(--font-body);
  line-height: 1.6;
  color: var(--primary-dark);
  background-color: var(--neutral-light);
  padding-top: 80px;
}

/* Navigation Realm */
.navigation-realm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 180, 216, 0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.navigation-realm:hover {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
}

.menu-foundation {
  max-width: 1440px;
  margin: 0 auto;
  padding: 18px 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-identity {
  flex-shrink: 0;
}

.site-proclamation {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-proclamation:hover {
  color: var(--primary-color);
  transform: translateY(-1px);
}

.contact-gateway {
  flex-shrink: 0;
}

.contact-trigger {
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 9999px;
  text-decoration: none;
  font-family: var(--font-body);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.25);
  display: inline-block;
}

.contact-trigger:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

/* Harmony Introduction Section */
.harmony-introduction {
  padding: 89px 0 134px 0;
  background: linear-gradient(145deg, var(--primary-light) 0%, var(--secondary-light) 35%, var(--neutral-light) 100%);
  position: relative;
  overflow: hidden;
}

.harmony-introduction::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -15%;
  width: 130%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(0, 180, 216, 0.06) 0%, transparent 70%);
  transform: rotate(-8deg);
  z-index: 1;
}

.wellness-canvas {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 67px;
  align-items: center;
}

.hero-visual {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 55px;
}

.intro-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 55px;
}

.wellness-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.wellness-image:hover {
  transform: scale(1.05);
}

.about-essence {
  max-width: none;
  margin: 0;
  text-align: left;
}

.wellness-title {
  font-family: var(--font-heading);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 55px;
  line-height: 1.15;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

.mission-story {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.primary-mission {
  font-size: 1.4rem;
  color: var(--secondary-color);
  line-height: 1.7;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.8);
  padding: 42px;
  border-radius: 42px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.vision-statement {
  font-size: 1.2rem;
  color: var(--neutral-color);
  line-height: 1.65;
  font-weight: 400;
  background: rgba(255, 255, 255, 0.7);
  padding: 34px;
  border-radius: 34px;
  backdrop-filter: blur(8px);
  border-left: 5px solid var(--accent-color);
}

/* Daily Rhythm Section */
.daily-rhythm {
  padding: 134px 0 156px 0;
  background: linear-gradient(170deg, var(--neutral-light) 0%, var(--tertiary-light) 40%, var(--primary-light) 100%);
  position: relative;
}

.lifestyle-sanctuary {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 55px;
}

.rhythm-awakening {
  text-align: center;
  margin-bottom: 89px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.daily-wisdom {
  font-family: var(--font-heading);
  font-size: 3.1rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 34px;
  line-height: 1.2;
}

.rhythm-intro {
  font-size: 1.25rem;
  color: var(--secondary-color);
  line-height: 1.6;
  font-weight: 400;
}

.day-timeline {
  display: flex;
  flex-direction: column;
  gap: 67px;
}

.time-period {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 55px;
  padding: 55px;
  display: grid;
  grid-template-columns: 200px auto 1fr;
  align-items: center;
  gap: 42px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.period-visual {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 34px;
}

.period-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
}

.time-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.time-period:hover .time-image {
  transform: scale(1.1);
}

.time-period::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.time-period > * {
  position: relative;
  z-index: 2;
}

.time-period:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.time-period:hover::before {
  opacity: 0.05;
}

.morning::before {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
}

.midday::before {
  background: linear-gradient(135deg, #87CEEB 0%, #4682B4 100%);
}

.evening::before {
  background: linear-gradient(135deg, #9370DB 0%, #663399 100%);
}

.period-icon {
  font-size: 3rem;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-color);
  transition: all 0.4s ease;
  justify-self: center;
}

.time-period:hover .period-icon {
  background: var(--accent-color);
  transform: rotate(10deg) scale(1.1);
}

.period-content {
  flex: 1;
}

.period-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 27px;
}

.period-practices {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 27px;
}

.practice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--primary-light);
  padding: 18px 27px;
  border-radius: 27px;
  transition: all 0.3s ease;
}

.practice-item:hover {
  background: var(--secondary-light);
  transform: translateX(8px);
}

.herb-name {
  font-weight: 600;
  color: var(--secondary-color);
  font-size: 1.1rem;
}

.herb-benefit {
  color: var(--neutral-color);
  font-size: 0.95rem;
  font-style: italic;
  text-align: right;
}

.ritual-tip {
  background: var(--accent-light);
  padding: 21px;
  border-radius: 21px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--primary-dark);
  border-left: 4px solid var(--accent-color);
}

/* Practical Wisdom Section */
.practical-wisdom {
  padding: 134px 0 156px 0;
  background: radial-gradient(ellipse at top, var(--secondary-light) 0%, var(--neutral-light) 50%, var(--tertiary-light) 100%);
  position: relative;
}

.implementation-guide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 55px;
}

.practical-awakening {
  text-align: center;
  margin-bottom: 89px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.implementation-title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 32px;
  line-height: 1.2;
}

.practical-intro {
  font-size: 1.2rem;
  color: var(--secondary-color);
  line-height: 1.65;
  font-weight: 400;
}

.method-collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 55px;
}

.simple-method {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 55px;
  padding: 55px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.simple-method::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.simple-method > * {
  position: relative;
  z-index: 2;
}

.simple-method:hover {
  transform: translateY(-15px) rotate(2deg);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.simple-method:hover::before {
  opacity: 0.05;
}

.tea::before {
  background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
}

.aromatherapy::before {
  background: radial-gradient(circle, var(--secondary-color) 0%, transparent 70%);
}

.culinary::before {
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
}

.method-visual {
  font-size: 4rem;
  margin-bottom: 32px;
  display: inline-block;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.simple-method:hover .method-visual {
  transform: scale(1.2) rotate(-5deg);
}

.method-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: 21px;
}

.method-description {
  font-size: 1.1rem;
  color: var(--neutral-color);
  line-height: 1.6;
  margin-bottom: 32px;
}

.method-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.step {
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 12px 24px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 500;
  min-width: 200px;
  transition: all 0.3s ease;
}

.step:hover {
  background: var(--primary-color);
  color: white;
  transform: scale(1.05);
}

/* Transformation Promise Section */
.transformation-promise {
  padding: 134px 0 156px 0;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.transformation-promise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 107, 53, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.promise-sanctuary {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 55px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 89px;
  align-items: center;
}

.promise-visual {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 55px;
  order: 2;
}

.promise-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 55px;
}

.lifestyle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.lifestyle-image:hover {
  transform: scale(1.05);
}

.promise-content {
  text-align: left;
  order: 1;
}

.promise-title {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 42px;
  line-height: 1.2;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.promise-message {
  font-size: 1.3rem;
  line-height: 1.7;
  margin-bottom: 67px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
}

.gentle-commitment {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 700px;
  margin: 0 auto;
}

.commitment-point {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.1);
  padding: 27px 42px;
  border-radius: 42px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
}