:root {
      color-scheme: light;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 110px;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }

    body {
      font-family: 'Manrope', system-ui, sans-serif;
      background: #f7f4ed;
      color: #10291f;
    }

    .glass {
      background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
      border: 1px solid rgba(255,255,255,0.28);
      box-shadow: 0 24px 80px rgba(7, 24, 17, 0.28);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    .glass-light {
      background: rgba(255,255,255,0.62);
      border: 1px solid rgba(255,255,255,0.7);
      box-shadow: 0 18px 60px rgba(16, 41, 31, 0.12);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .leaf-bg {
      background:
        radial-gradient(circle at 18% 12%, rgba(169, 190, 164, .72), transparent 24%),
        radial-gradient(circle at 78% 18%, rgba(109, 143, 99, .45), transparent 28%),
        linear-gradient(135deg, rgba(16, 41, 31, .94), rgba(57, 95, 67, .82)),
        url('https://images.unsplash.com/photo-1523528283115-9bf9b1699245?auto=format&fit=crop&w=1800&q=80');
      background-size: cover;
      background-position: center;
    }

    .soft-leaf-pattern {
      background-image:
        radial-gradient(circle at 20% 20%, rgba(169, 190, 164, 0.32), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(57, 95, 67, 0.18), transparent 26%),
        linear-gradient(180deg, #f7f4ed 0%, #eef2e8 100%);
    }

    .noise:before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .18;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.35'/%3E%3C/svg%3E");
    }

    .reveal {
      animation: reveal .9s ease-out both;
    }

    @keyframes reveal {
      from { opacity: 0; transform: translateY(22px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .focus-ring:focus-visible {
      outline: 3px solid rgba(199, 170, 134, .95);
      outline-offset: 4px;
    }