/* ============================================================
   JKONTOS.COM — DESIGN SYSTEM
   Inspired by: soft blush + deep purple + gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Jost:wght@300;400;500&family=Sacramento&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

body {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  background: #fdf5f7;
  color: #2e2030;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* --- Tokens --- */
:root {
  --blush:       #fdf5f7;
  --blush-mid:   #f5e6ee;
  --blush-deep:  #ecdde8;
  --purple:      #6b3fa0;
  --purple-mid:  #8a5cbf;
  --purple-deep: #3d1f6b;
  --purple-bg:   #f0e8f8;
  --amethyst:    #7b4fa8;
  --gold:        #c9a96e;
  --gold-dark:   #a07840;
  --gold-light:  #f0deba;
  --text-dark:   #2e2030;
  --text-mid:    #6b5070;
  --text-light:  #a090a8;
  --white:       #ffffff;
}

/* --- Typography --- */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  color: #2e2030;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.script-heading {
  font-family: 'Sacramento', cursive;
  font-size: clamp(3.5rem, 7vw, 6rem);
  color: #8a5cbf;
  font-weight: 400;
  line-height: 1.2;
  display: block;
}

em { font-style: italic; color: #8a5cbf; }
p  { color: #4a3558; line-height: 1.75; }

/* --- Layout --- */
.container { max-width: 1060px; margin: 0 auto; padding: 0 28px; }

/* --- Labels --- */
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9a96e;
  display: block;
  margin-bottom: 12px;
}

.divider {
  width: 60px; height: 1px;
  background: linear-gradient(90deg, #c9a96e, transparent);
  margin: 18px 0;
}
.divider-center { margin: 18px auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 30px;
  border-radius: 999px;
  transition: all 0.22s;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

/* Gold textured button — like Amy's "SIGN UP NOW" */
.btn-gold {
  background: linear-gradient(135deg, #d4aa60 0%, #c9a050 30%, #e8c878 60%, #b89040 100%);
  color: white;
  letter-spacing: 0.18em;
  box-shadow: 0 2px 12px rgba(180,140,60,0.3);
}
.btn-gold:hover { background: linear-gradient(135deg, #c9a050 0%, #b89040 50%, #d4aa60 100%); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(180,140,60,0.4); }

.btn-primary {
  background: linear-gradient(135deg, #d4aa60 0%, #c9a050 30%, #e8c878 60%, #b89040 100%);
  color: white;
  box-shadow: 0 2px 12px rgba(180,140,60,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(180,140,60,0.4); }

.btn-purple {
  background: #7b4fa8;
  color: white;
}
.btn-purple:hover { background: #6b3fa0; transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: #7b4fa8;
  border: 1.5px solid #7b4fa8;
}
.btn-outline:hover { background: #7b4fa8; color: white; }

.btn-outline-gold {
  background: transparent;
  color: #a07840;
  border: 1.5px solid #c9a96e;
}
.btn-outline-gold:hover { background: #c9a96e; color: white; }

.btn-ghost {
  background: transparent;
  color: #7b4fa8;
  border: 1.5px solid #c9a96e;
}
.btn-ghost:hover { background: #f0e8f8; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,245,247,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(180,140,180,0.15);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 120px;
}
.nav-logo img { height: 120px; width: auto; display: block; }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: 0.8rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #4a3558;
  transition: color 0.2s;
}
.nav-links a:hover, .nav-links a.active { color: #7b4fa8; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: #6b5070; border-radius: 2px; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero {
  background: linear-gradient(160deg, #fdf5f7 0%, #f0e8f8 50%, #ecdde8 100%);
  padding: 90px 28px 80px;
  text-align: center;
  position: relative; overflow: hidden;
  min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
/* Tree of life centered behind heading */
.page-hero::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; height: 420px;
  background: url('tree_of_life.svg') center center / contain no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* Sparkle glow */
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url('sparkle_overlay.png') center / cover no-repeat;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: 10px; font-size: clamp(2.4rem, 4.5vw, 3.8rem); }
.page-hero .script-heading { 
  color: #c9a96e; 
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  text-shadow: 0 1px 3px rgba(180,140,60,0.2);
}
.page-hero p { max-width: 52ch; margin: 0 auto; font-size: 1.15rem; color: #4a3558; }

/* ============================================================
   GLITTER BANNER
   ============================================================ */
.glitter-banner {
  width: 100%;
  height: 100px;
  background: url('glitter_banner.png') center center / cover no-repeat;
  display: block;
  margin: 0; padding: 0;
}

/* ============================================================
   GOLD FOIL PANEL
   ============================================================ */
.gold-foil-panel {
  background: url('gold_foil.jpg') center center / cover;
  min-height: 200px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(180,140,180,0.2);
  box-shadow: 0 2px 20px rgba(100,60,120,0.06);
  padding: 32px 28px;
  transition: box-shadow 0.25s, transform 0.25s;
}
.card:hover { box-shadow: 0 6px 32px rgba(100,60,120,0.12); transform: translateY(-2px); }

/* Purple card variant */
.card-purple {
  background: #6b3fa0;
  border: none;
  color: white;
}
.card-purple h3, .card-purple p { color: white; }
.card-purple .eyebrow { color: #e8c878; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-card {
  background: rgba(107, 63, 160, 0.08);
  border: 1px solid rgba(180,140,200,0.2);
  border-radius: 12px;
  padding: 28px 32px;
  break-inside: avoid;
  margin-bottom: 20px;
}
.testimonial-mark { color: #c9a96e; font-size: 1.2rem; margin-bottom: 12px; }
.testimonial-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-style: italic;
  color: #2e2030; line-height: 1.65; margin-bottom: 16px;
}
.testimonial-name {
  font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #7b4fa8;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, #6b3fa0 0%, #8a5cbf 100%);
  text-align: center; padding: 80px 28px;
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, transparent 65%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: white; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 44ch; margin: 0 auto 28px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #2e1f45;
  border-top: none;
  padding: 56px 0 28px;
}
.footer-inner { max-width: 1060px; margin: 0 auto; padding: 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-logo img { height: 44px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); }
.footer-p { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.65; }
.footer-heading { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c9a96e; display: block; margin-bottom: 14px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.7); transition: color 0.2s; }
.footer-links a:hover { color: #c9a96e; }
.footer-disclaimer { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0 16px; margin-bottom: 16px; }
.footer-disclaimer p { font-size: 0.74rem; color: rgba(255,255,255,0.45); font-style: italic; line-height: 1.6; text-align: center; max-width: 800px; margin: 0 auto; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; display: flex; justify-content: space-between; font-size: 0.75rem; color: rgba(255,255,255,0.4); flex-wrap: wrap; gap: 8px; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background: white; border-bottom: 1px solid rgba(180,140,180,0.15); padding: 14px 0; }
.trust-bar-inner { display: flex; align-items: center; justify-content: center; gap: 12px 28px; flex-wrap: wrap; padding: 0 16px; }
.trust-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; letter-spacing: 0.04em; color: #4a3558; white-space: nowrap; }
.trust-item .icon { color: #c9a96e; }

/* ============================================================
   PHOTO BLOB
   ============================================================ */
.photo-blob { border-radius: 60% 40% 55% 45% / 50% 60% 40% 55%; overflow: hidden; background: linear-gradient(135deg, #f0e8f8 0%, #ecdde8 100%); }
.photo-placeholder { width: 100%; height: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond',Georgia,serif; font-size: 0.9rem; font-style: italic; color: rgba(100,60,120,0.4); text-align: center; padding: 20px; }

/* ============================================================
   SECTION BACKGROUNDS
   ============================================================ */
.bg-blush    { background: #fdf5f7; }
.bg-blush-mid { background: #f5e6ee; }
.bg-purple-light { background: #f0e8f8; }
.bg-purple   { background: #6b3fa0; }
.bg-white    { background: #ffffff; }
.bg-dark     { background: #2e1f45; }

/* ============================================================
   SACRED GEOMETRY BACKGROUND DECORATION
   ============================================================ */

/* ============================================================
   SPARKLE OVERLAY — magical bokeh effect on light sections
   ============================================================ */
.sparkle-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('sparkle_overlay.png') center center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Ensure content sits above sparkle */
.sparkle-bg > * { position: relative; z-index: 1; }
.sparkle-bg .container { position: relative; z-index: 1; }

/* Sacred geometry — lush Tree of Life */
.sacred-geo {
  position: relative;
  overflow: hidden;
}
.sacred-geo::before {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 340px; height: 340px;
  background-image: url('tree_of_life.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.sacred-geo-tl::after {
  content: '';
  position: absolute;
  top: -30px; left: -30px;
  width: 220px; height: 220px;
  background-image: url('tree_of_life.svg');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 320px; height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='0.38'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3C!-- Trunk --%3E%3Cline x1='100' y1='155' x2='100' y2='105'/%3E%3C!-- Roots spreading --%3E%3Cpath d='M100,155 Q88,160 78,170'/%3E%3Cpath d='M100,155 Q112,160 122,170'/%3E%3Cpath d='M100,155 Q92,162 85,175'/%3E%3Cpath d='M100,155 Q108,162 115,175'/%3E%3Cpath d='M100,155 Q100,163 100,178'/%3E%3Cpath d='M78,170 Q68,172 60,180'/%3E%3Cpath d='M122,170 Q132,172 140,180'/%3E%3C!-- Main branches spreading wide --%3E%3Cpath d='M100,110 Q82,100 62,98'/%3E%3Cpath d='M100,110 Q118,100 138,98'/%3E%3Cpath d='M100,108 Q78,92 55,88'/%3E%3Cpath d='M100,108 Q122,92 145,88'/%3E%3Cpath d='M100,106 Q85,88 68,78'/%3E%3Cpath d='M100,106 Q115,88 132,78'/%3E%3Cpath d='M100,104 Q88,84 75,68'/%3E%3Cpath d='M100,104 Q112,84 125,68'/%3E%3Cpath d='M100,104 Q100,82 100,62'/%3E%3C!-- Left side branch tips curling --%3E%3Cpath d='M62,98 Q48,92 38,96'/%3E%3Cpath d='M62,98 Q50,88 44,78'/%3E%3Cpath d='M55,88 Q42,80 34,82'/%3E%3Cpath d='M55,88 Q44,76 38,65'/%3E%3Cpath d='M68,78 Q55,68 48,60'/%3E%3Cpath d='M68,78 Q58,65 55,52'/%3E%3Cpath d='M75,68 Q65,56 60,46'/%3E%3Cpath d='M75,68 Q68,54 68,42'/%3E%3C!-- Right side branch tips curling --%3E%3Cpath d='M138,98 Q152,92 162,96'/%3E%3Cpath d='M138,98 Q150,88 156,78'/%3E%3Cpath d='M145,88 Q158,80 166,82'/%3E%3Cpath d='M145,88 Q156,76 162,65'/%3E%3Cpath d='M132,78 Q145,68 152,60'/%3E%3Cpath d='M132,78 Q142,65 145,52'/%3E%3Cpath d='M125,68 Q135,56 140,46'/%3E%3Cpath d='M125,68 Q132,54 132,42'/%3E%3C!-- Top center branches --%3E%3Cpath d='M100,62 Q92,50 86,38'/%3E%3Cpath d='M100,62 Q108,50 114,38'/%3E%3Cpath d='M100,62 Q100,48 100,35'/%3E%3Cpath d='M86,38 Q80,28 76,20'/%3E%3Cpath d='M114,38 Q120,28 124,20'/%3E%3C!-- Leaf dots at branch tips --%3E%3Ccircle cx='38' cy='96' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='44' cy='78' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='34' cy='82' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='38' cy='65' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='48' cy='60' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='55' cy='52' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='60' cy='46' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='68' cy='42' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='76' cy='20' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='100' cy='35' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='124' cy='20' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='132' cy='42' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='140' cy='46' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='145' cy='52' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='152' cy='60' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='156' cy='78' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='162' cy='65' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='162' cy='96' r='2.5' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='166' cy='82' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='60' cy='180' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='140' cy='180' r='2' fill='%23c9a96e' stroke='none'/%3E%3Ccircle cx='100' cy='178' r='2' fill='%23c9a96e' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.sacred-geo-tl::after {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  width: 210px; height: 210px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1.2' stroke-linecap='round' opacity='0.22'%3E%3Ccircle cx='100' cy='100' r='95'/%3E%3Cline x1='100' y1='155' x2='100' y2='105'/%3E%3Cpath d='M100,155 Q88,160 78,170'/%3E%3Cpath d='M100,155 Q112,160 122,170'/%3E%3Cpath d='M100,155 Q100,163 100,178'/%3E%3Cpath d='M100,110 Q82,100 62,98'/%3E%3Cpath d='M100,110 Q118,100 138,98'/%3E%3Cpath d='M100,106 Q85,88 68,78'/%3E%3Cpath d='M100,106 Q115,88 132,78'/%3E%3Cpath d='M100,104 Q88,84 75,68'/%3E%3Cpath d='M100,104 Q112,84 125,68'/%3E%3Cpath d='M100,104 Q100,82 100,62'/%3E%3Cpath d='M62,98 Q48,92 38,96'/%3E%3Cpath d='M62,98 Q50,88 44,78'/%3E%3Cpath d='M68,78 Q55,68 48,60'/%3E%3Cpath d='M132,78 Q145,68 152,60'/%3E%3Cpath d='M138,98 Q152,92 162,96'/%3E%3Cpath d='M138,98 Q150,88 156,78'/%3E%3Cpath d='M100,62 Q92,50 86,38'/%3E%3Cpath d='M100,62 Q108,50 114,38'/%3E%3Cpath d='M100,62 Q100,48 100,35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

  content: '';
  position: absolute;
  bottom: -30px; right: -30px;
  width: 300px; height: 300px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1' stroke-linecap='round' opacity='0.35'%3E%3C!-- Outer circle --%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3C!-- Trunk --%3E%3Cline x1='100' y1='190' x2='100' y2='120'/%3E%3C!-- Roots --%3E%3Cpath d='M100,190 Q80,195 65,205'/%3E%3Cpath d='M100,190 Q120,195 135,205'/%3E%3Cpath d='M100,190 Q85,192 75,198'/%3E%3Cpath d='M100,190 Q115,192 125,198'/%3E%3Cpath d='M100,190 Q100,195 100,208'/%3E%3C!-- Main branches left --%3E%3Cpath d='M100,150 Q75,140 50,145'/%3E%3Cpath d='M100,135 Q72,118 48,118'/%3E%3Cpath d='M100,122 Q78,105 58,98'/%3E%3C!-- Main branches right --%3E%3Cpath d='M100,150 Q125,140 150,145'/%3E%3Cpath d='M100,135 Q128,118 152,118'/%3E%3Cpath d='M100,122 Q122,105 142,98'/%3E%3C!-- Center top branch --%3E%3Cpath d='M100,120 Q100,100 100,80'/%3E%3C!-- Secondary branches left --%3E%3Cpath d='M50,145 Q35,135 25,140'/%3E%3Cpath d='M50,145 Q38,132 32,122'/%3E%3Cpath d='M48,118 Q32,108 22,112'/%3E%3Cpath d='M48,118 Q36,105 30,95'/%3E%3Cpath d='M58,98 Q44,88 38,80'/%3E%3Cpath d='M58,98 Q48,85 45,72'/%3E%3C!-- Secondary branches right --%3E%3Cpath d='M150,145 Q165,135 175,140'/%3E%3Cpath d='M150,145 Q162,132 168,122'/%3E%3Cpath d='M152,118 Q168,108 178,112'/%3E%3Cpath d='M152,118 Q164,105 170,95'/%3E%3Cpath d='M142,98 Q156,88 162,80'/%3E%3Cpath d='M142,98 Q152,85 155,72'/%3E%3C!-- Top branches --%3E%3Cpath d='M100,80 Q88,65 78,55'/%3E%3Cpath d='M100,80 Q112,65 122,55'/%3E%3Cpath d='M100,80 Q100,62 100,48'/%3E%3Cpath d='M78,55 Q68,44 62,36'/%3E%3Cpath d='M122,55 Q132,44 138,36'/%3E%3Cpath d='M100,48 Q94,36 90,26'/%3E%3Cpath d='M100,48 Q106,36 110,26'/%3E%3C!-- Leaf dots --%3E%3Ccircle cx='25' cy='140' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='32' cy='122' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='22' cy='112' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='30' cy='95' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='38' cy='80' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='45' cy='72' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='62' cy='36' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='90' cy='26' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='110' cy='26' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='138' cy='36' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='155' cy='72' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='162' cy='80' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='170' cy='95' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='178' cy='112' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='168' cy='122' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='175' cy='140' r='2.5' fill='%23c9a96e'/%3E%3Ccircle cx='65' cy='205' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='135' cy='205' r='2' fill='%23c9a96e'/%3E%3Ccircle cx='100' cy='208' r='2' fill='%23c9a96e'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

/* Smaller tree top left */
.sacred-geo-tl::after {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  width: 200px; height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cg fill='none' stroke='%23c9a96e' stroke-width='1' stroke-linecap='round' opacity='0.22'%3E%3Ccircle cx='100' cy='100' r='90'/%3E%3Cline x1='100' y1='190' x2='100' y2='120'/%3E%3Cpath d='M100,190 Q80,195 65,205'/%3E%3Cpath d='M100,190 Q120,195 135,205'/%3E%3Cpath d='M100,150 Q75,140 50,145'/%3E%3Cpath d='M100,135 Q72,118 48,118'/%3E%3Cpath d='M100,122 Q78,105 58,98'/%3E%3Cpath d='M100,150 Q125,140 150,145'/%3E%3Cpath d='M100,135 Q128,118 152,118'/%3E%3Cpath d='M100,122 Q122,105 142,98'/%3E%3Cpath d='M100,120 Q100,100 100,80'/%3E%3Cpath d='M50,145 Q35,135 25,140'/%3E%3Cpath d='M48,118 Q32,108 22,112'/%3E%3Cpath d='M58,98 Q44,88 38,80'/%3E%3Cpath d='M150,145 Q165,135 175,140'/%3E%3Cpath d='M152,118 Q168,108 178,112'/%3E%3Cpath d='M142,98 Q156,88 162,80'/%3E%3Cpath d='M100,80 Q88,65 78,55'/%3E%3Cpath d='M100,80 Q112,65 122,55'/%3E%3Cpath d='M100,80 Q100,62 100,48'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}


@media (max-width: 860px) {
  .nav-links, .nav .btn { display: none; }
  .nav-toggle { display: flex; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 70px; left: 0; right: 0;
    background: #fdf5f7; padding: 24px 28px; gap: 20px;
    border-bottom: 1px solid rgba(180,140,180,0.2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08); z-index: 99;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* Large tree of life watermark background */
.tree-watermark {
  position: relative;
  overflow: hidden;
}
.tree-watermark::before {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 500px;
  height: 500px;
  background: url('tree_of_life.svg') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.tree-watermark > * { position: relative; z-index: 1; }

/* Tree watermark centered version */
.tree-watermark-center::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: url('tree_of_life.svg') center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Wave section transitions */
.wave-bottom {
  position: relative;
  padding-bottom: 0 !important;
}
.wave-bottom::after {
  content: '';
  display: block;
  height: 80px;
  background: inherit;
  clip-path: ellipse(55% 100% at 50% 0%);
  position: relative;
  z-index: 2;
  margin-top: -1px;
}
.wave-top {
  position: relative;
  margin-top: -60px;
  z-index: 1;
  padding-top: 80px !important;
}

/* Floating orb backgrounds */
.orb-section {
  position: relative;
  overflow: hidden;
}
.orb-section::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(138,92,191,0.08) 0%, transparent 70%);
  top: -150px; right: -150px;
  pointer-events: none;
}
.orb-section::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.07) 0%, transparent 70%);
  bottom: -100px; left: -80px;
  pointer-events: none;
  z-index: 0;
}
.orb-section > * { position: relative; z-index: 1; }

/* Concentric rings for CTA */
.ring-bg {
  position: relative;
  overflow: hidden;
}
.ring-bg::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ring-bg::after {
  content: '';
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}