:root {
      --sage: #5a685b;
      --sage-light: #A8C5AA;
      --sage-dark: #4E7050;
      --cream: #F8F4EE;
      --warm: #E8D5B0;
      --charcoal: #2C2C2C;
      --muted: #6B7280;
      --accent: #D4956A;
      --accent-light: #F0C9A8;
    }
    * { font-family: 'DM Sans', sans-serif; }
    html { scroll-behavior: smooth; }
    body { background-color: var(--cream); color: var(--charcoal); overflow-x: hidden; }

    /* NAV */
    nav { background: rgba(248,244,238,0.92); backdrop-filter: blur(12px); }
    .nav-link { position: relative; font-weight: 500; color: var(--charcoal); transition: color 0.3s; }
    .nav-link::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--sage); transition:width 0.3s; }
    .nav-link:hover { color: var(--sage-dark); }
    .nav-link:hover::after { width:100%; }
    .btn-primary { background: var(--sage); color: #fff; border-radius: 100px; padding: 0.55rem 1.4rem; font-weight: 600; transition: all 0.3s; }
    .btn-primary:hover { background: var(--sage-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(78,112,80,0.3); }

    /* HAMBURGER */
    #menu-btn span { display:block; width:24px; height:2px; background:var(--charcoal); margin:5px 0; transition:all 0.35s ease; transform-origin:center; }
    #menu-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #menu-btn.open span:nth-child(2) { opacity:0; transform: scaleX(0); }
    #menu-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    #mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    #mobile-menu.open { max-height: 400px; }

    /* HERO */
    .hero-bg {
      background: linear-gradient(135deg, #e8f0e9 0%, #f8f4ee 40%, #f0e8d8 100%);
      position: relative; overflow: hidden;
    }
    .hero-blob { position:absolute; border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; opacity:0.18; }
    .blob1 { width:480px; height:480px; background:var(--sage); top:-100px; right:-80px; animation: morphBlob 8s ease-in-out infinite; }
    .blob2 { width:300px; height:300px; background:var(--accent); bottom:0; left:-60px; animation: morphBlob 10s ease-in-out infinite reverse; }
    @keyframes morphBlob {
      0%,100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
      33% { border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%; }
      66% { border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; }
    }
    .hero-badge { display:inline-flex; align-items:center; gap:6px; background: rgba(124,154,126,0.15); border:1px solid rgba(124,154,126,0.3); border-radius:100px; padding:6px 14px; font-size:0.78rem; font-weight:600; color:var(--sage-dark); letter-spacing:0.04em; text-transform:uppercase; }
    .hero-title { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight:700; line-height:1.1; letter-spacing:-0.02em; }
    .hero-title span { color: var(--sage-dark); position:relative; display:inline-block; }
    .hero-title span::after { content:''; position:absolute; left:0; bottom:2px; width:100%; height:6px; background: var(--accent-light); z-index:-1; border-radius:3px; }
    .floating { animation: float 4s ease-in-out infinite; }
    @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
    .stat-card { background:#fff; border-radius:16px; box-shadow:0 2px 20px rgba(0,0,0,0.06); padding:1.2rem 1.6rem; }

    /* SCROLL REVEAL */
    .reveal { opacity:0; transform:translateY(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity:1; transform:none; }
    .reveal-left { opacity:0; transform:translateX(-32px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal-left.visible { opacity:1; transform:none; }
    .reveal-right { opacity:0; transform:translateX(32px); transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal-right.visible { opacity:1; transform:none; }

    /* SECTIONS */
    .section-tag { display:inline-block; background:rgba(124,154,126,0.12); color:var(--sage-dark); font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 14px; border-radius:100px; margin-bottom:1rem; }
    .section-title { font-size: clamp(1.8rem,4vw,2.8rem); font-weight:700; line-height:1.2; letter-spacing:-0.02em; }

    /* TOPIC CARDS */
    .topic-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,0.06); transition: transform 0.35s ease, box-shadow 0.35s ease; cursor:pointer; }
    .topic-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,0.12); }
    .topic-card:hover .card-arrow { transform:translateX(4px); }
    .card-arrow { transition: transform 0.3s ease; }
    .card-img { width:100%; height:200px; object-fit:cover; display:block; }
    .card-emoji { font-size:2.2rem; line-height:1; margin-bottom:0.5rem; }

    /* FEATURED */
    .featured-card { background:linear-gradient(135deg,#4E7050,#7C9A7E); border-radius:24px; color:#fff; overflow:hidden; position:relative; }
    .featured-card::before { content:''; position:absolute; top:-60px; right:-60px; width:220px; height:220px; background:rgba(255,255,255,0.08); border-radius:50%; }
    .featured-card::after { content:''; position:absolute; bottom:-40px; left:-40px; width:160px; height:160px; background:rgba(255,255,255,0.06); border-radius:50%; }

    /* NEWSLETTER */
    .nl-section { background: linear-gradient(135deg, var(--charcoal) 0%, #3d3d3d 100%); }
    .nl-input { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:100px; padding:0.75rem 1.4rem; color:#fff; outline:none; transition:border 0.3s; }
    .nl-input::placeholder { color:rgba(255,255,255,0.45); }
    .nl-input:focus { border-color: var(--sage-light); }
    .nl-btn { background:var(--sage); color:#fff; border-radius:100px; padding:0.75rem 1.8rem; font-weight:600; transition:all 0.3s; white-space:nowrap; }
    .nl-btn:hover { background:var(--sage-dark); }

    /* QUOTE */
    .quote-section { background: linear-gradient(135deg, #f0e8d8, #e8f0e9); }
    .quote-mark { font-size:8rem; line-height:1; color:var(--sage); opacity:0.2; font-family:Georgia,serif; position:absolute; top:-20px; left:0; }

    /* TIPS */
    .tip-card { border-left:4px solid var(--sage); background:#fff; border-radius:0 16px 16px 0; transition:transform 0.3s; }
    .tip-card:hover { transform:translateX(6px); }

    /* FOOTER */
    footer { background:var(--charcoal); color:rgba(255,255,255,0.7); }
    .footer-link { color:rgba(255,255,255,0.6); transition:color 0.3s; }
    .footer-link:hover { color:#fff; }
    .social-icon { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; transition:background 0.3s; }
    .social-icon:hover { background:var(--sage); }

    /* PROGRESS BAR */
    #progress-bar { position:fixed; top:0; left:0; height:3px; background: linear-gradient(90deg, var(--sage), var(--accent)); z-index:1000; transition:width 0.1s linear; }

    /* BACK TO TOP */
    #back-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; background:var(--sage); border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(78,112,80,0.4); cursor:pointer; opacity:0; transform:translateY(20px); transition:all 0.3s; z-index:99; }
    #back-top.show { opacity:1; transform:translateY(0); }
    #back-top:hover { background:var(--sage-dark); }

    /* COUNTER ANIMATION */
    .counter { font-variant-numeric: tabular-nums; }

    /* STAGGER delays */
    .stagger-1 { transition-delay: 0.1s; }
    .stagger-2 { transition-delay: 0.2s; }
    .stagger-3 { transition-delay: 0.3s; }
    .stagger-4 { transition-delay: 0.4s; }
    .stagger-5 { transition-delay: 0.5s; }

    /* IMAGE PLACEHOLDERS (colored gradients as stand-ins) */
    .img-placeholder { display:flex; align-items:center; justify-content:center; font-size:3rem; }
    .p1 { background:linear-gradient(135deg,#a8c5aa,#7c9a7e); }
    .p2 { background:linear-gradient(135deg,#f0c9a8,#d4956a); }
    .p3 { background:linear-gradient(135deg,#b8d4f0,#7aA8d4); }
    .p4 { background:linear-gradient(135deg,#d4b8f0,#a87ad4); }
    .p5 { background:linear-gradient(135deg,#f0d4b8,#d4a87a); }
    .p6 { background:linear-gradient(135deg,#b8f0d4,#7ad4a8); }