:root {
       --orange: #ff7a2e;
       --orange-dk: #e05c10;
       --yellow: #f7c948;
       --yellow-lt: #fde98a;
       --cream: #fff8ed;
       --brown: #3d2007;
       --brown-md: #7a4012;
       --white: #ffffff;
       --nav-h: 68px;
       --radius: 24px;
       --shadow: 0 8px 40px rgba(61, 32, 7, .12);
   }

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

   html {
       scroll-behavior: smooth;
       font-size: 16px;
   }

   body {
       font-family: 'Nunito', sans-serif;
       background: var(--orange);
       color: var(--brown);
       padding-top: var(--nav-h);
       overflow-x: hidden;
   }

   img {
       display: block;
       max-width: 100%;
   }

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

   /* ───────────────────────────────
       NAVBAR
    ─────────────────────────────── */
   .navbar {
       position: fixed;
       inset: 0 0 auto 0;
       height: var(--nav-h);
       background: var(--white);
       box-shadow: 0 2px 20px rgba(61, 32, 7, .10);
       z-index: 1000;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 0 5vw;
   }

   .navbar-brand {
       font-family: 'Playfair Display', serif;
       font-weight: 900;
       font-size: 1.35rem;
       color: var(--orange);
   }

   /* hamburger */
   .hamburger {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
       background: none;
       border: none;
       padding: 6px;
   }

   .hamburger span {
       display: block;
       width: 24px;
       height: 2.5px;
       background: var(--brown);
       border-radius: 4px;
       transition: transform .3s, opacity .3s;
   }

   .hamburger.open span:nth-child(1) {
       transform: translateY(7.5px) rotate(45deg);
   }

   .hamburger.open span:nth-child(2) {
       opacity: 0;
   }

   .hamburger.open span:nth-child(3) {
       transform: translateY(-7.5px) rotate(-45deg);
   }

   .nav-links {
       list-style: none;
       display: flex;
       gap: 6px;
   }

   .nav-links a {
       font-weight: 700;
       font-size: .875rem;
       color: var(--brown-md);
       padding: 7px 14px;
       border-radius: 50px;
       transition: background .2s, color .2s;
   }

   .nav-links a:hover {
       background: var(--orange);
       color: var(--white);
   }

   /* mobile nav */
   @media (max-width: 768px) {
       .hamburger {
           display: flex;
       }

       .nav-links {
           display: none;
           position: absolute;
           top: var(--nav-h);
           left: 0;
           right: 0;
           background: var(--white);
           flex-direction: column;
           padding: 16px 5vw 24px;
           gap: 4px;
           box-shadow: 0 8px 24px rgba(61, 32, 7, .10);
       }

       .nav-links.open {
           display: flex;
       }

       .nav-links a {
           font-size: 1rem;
       }
   }

   /* ───────────────────────────────
       HERO
    ─────────────────────────────── */
   .hero {
       min-height: calc(100vh - var(--nav-h));
       background: var(--orange);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 60px 5vw;
       position: relative;
       overflow: hidden;
   }

   /* subtle radial glow */
   .hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 70% 60% at 70% 55%, #ffb347 0%, transparent 70%);
       pointer-events: none;
   }

   .hero-inner {
       max-width: 1100px;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 40px;
       position: relative;
       z-index: 1;
   }

   .hero-text {
       color: var(--cream);
   }

   .hero-logo {
       display: flex;
       align-items: center;
       gap: 16px;
       margin-bottom: 20px;
   }

   .hero-logo img {
       width: 90px;
       transform: rotate(-8deg);
       filter: drop-shadow(0 4px 12px rgba(61, 32, 7, .20));
   }

   .hero-logo h1 {
       font-family: 'Playfair Display', serif;
       font-weight: 900;
       font-size: clamp(2.2rem, 5vw, 3.6rem);
       line-height: 1;
       color: var(--white);
   }

   .hero-tagline {
       font-size: clamp(1rem, 2.5vw, 1.25rem);
       font-weight: 600;
       color: var(--yellow-lt);
       margin-bottom: 32px;
   }

   .hero-cta {
       display: inline-block;
       background: var(--white);
       color: var(--orange);
       font-weight: 800;
       font-size: .95rem;
       padding: 14px 32px;
       border-radius: 50px;
       box-shadow: 0 6px 24px rgba(61, 32, 7, .18);
       transition: transform .2s, box-shadow .2s;
   }

   .hero-cta:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 32px rgba(61, 32, 7, .22);
   }

   /* blob + pets */
   .hero-visual {
       position: relative;
       flex-shrink: 0;
       width: clamp(260px, 38vw, 420px);
       height: clamp(260px, 38vw, 420px);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .hero-blob {
       position: absolute;
       inset: 0;
       background: var(--yellow);
       border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
       animation: morphBlob 6s ease-in-out infinite alternate;
   }

   @keyframes morphBlob {
       to {
           border-radius: 45% 55% 40% 60% / 55% 50% 50% 45%;
       }
   }

   .hero-visual img {
       position: relative;
       z-index: 1;
       width: 88%;
       filter: drop-shadow(0 12px 30px rgba(61, 32, 7, .18));
       animation: float 4s ease-in-out infinite alternate;
   }

   @keyframes float {
       to {
           transform: translateY(-10px);
       }
   }

   @media (max-width: 700px) {
       .hero-inner {
           flex-direction: column;
           text-align: center;
       }

       .hero-logo {
           justify-content: center;
       }
   }

   /* ───────────────────────────────
       SHARED SECTION HELPERS
    ─────────────────────────────── */
   .section-label {
       display: flex;
       flex-direction: column;
       align-items: center;
       line-height: 1;
       margin-bottom: 52px;
   }

   .section-label .top {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2rem, 5vw, 3rem);
       font-weight: 900;
   }

   .section-label .bottom {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2.4rem, 6vw, 3.8rem);
       font-weight: 900;
   }

   /* ───────────────────────────────
       ABOUT
    ─────────────────────────────── */
   .about {
       background: var(--yellow);
       padding: 80px 5vw;
       overflow: hidden;
   }

   .about-inner {
       max-width: 1100px;
       margin: auto;
       display: flex;
       align-items: center;
       gap: 60px;
   }

   .about-visual {
       position: relative;
       flex-shrink: 0;
       width: clamp(220px, 34vw, 380px);
       aspect-ratio: 1;
   }

   .about-blob {
       position: absolute;
       inset: 0;
       background: linear-gradient(135deg, var(--orange), #ffb347);
       border-radius: 50% 50% 48% 52% / 44% 46% 54% 56%;
   }

   .about-visual img {
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 80%;
       filter: drop-shadow(0 8px 20px rgba(61, 32, 7, .15));
   }

   .about-text .section-label {
       align-items: flex-start;
       margin-bottom: 24px;
   }

   .about-text .section-label .top {
       color: var(--orange);
   }

   .about-text .section-label .bottom {
       color: var(--white);
   }

   .about-text p {
       font-size: clamp(1rem, 2vw, 1.2rem);
       line-height: 1.7;
       color: var(--brown-md);
       max-width: 480px;
   }

   @media (max-width: 700px) {
       .about-inner {
           flex-direction: column;
           align-items: center;
       }

       .about-text .section-label {
           align-items: center;
       }
   }

   /* ───────────────────────────────
       BEST PRODUCT
    ─────────────────────────────── */
   .best-product {
       background: var(--orange);
       padding: 80px 5vw;
       overflow: hidden;
   }

   .best-product-inner {
       max-width: 1100px;
       margin: auto;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 60px;
   }

   .best-product-text {
       color: var(--white);
       text-align: center;
   }

   .best-product-text img {
       width: 160px;
       margin: 0 auto 16px;
       filter: drop-shadow(0 6px 16px rgba(61, 32, 7, .20));
   }

   .best-product-title {
       font-family: 'Playfair Display', serif;
       font-weight: 900;
       line-height: 1;
       margin-bottom: 16px;
   }

   .best-product-title .t1 {
       display: block;
       font-size: clamp(3rem, 7vw, 5rem);
       color: var(--brown);
   }

   .best-product-title .t2 {
       display: block;
       font-size: clamp(3rem, 7vw, 5rem);
       color: var(--yellow);
   }

   .best-product-text p {
       font-size: 1.1rem;
       color: var(--cream);
       max-width: 260px;
       margin: 0 auto;
       line-height: 1.6;
   }

   .best-visual {
       position: relative;
       width: clamp(240px, 36vw, 400px);
       height: clamp(240px, 36vw, 400px);
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .best-blob {
       position: absolute;
       inset: 0;
       background: var(--yellow);
       border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
       animation: morphBlob 7s ease-in-out infinite alternate-reverse;
   }

   .best-visual img {
       position: relative;
       z-index: 1;
       width: 85%;
       filter: drop-shadow(0 10px 28px rgba(61, 32, 7, .18));
   }

   @media (max-width: 700px) {
       .best-product-inner {
           flex-direction: column;
       }
   }

   /* ───────────────────────────────
       PRODUCTS
    ─────────────────────────────── */
   .products {
       background: var(--yellow);
       padding: 80px 5vw;
       text-align: center;
   }

   .products .section-label .top {
       color: var(--white);
   }

   .products .section-label .bottom {
       color: var(--orange-dk);
   }

   .products-grid {
       display: flex;
       justify-content: center;
       gap: 32px;
       flex-wrap: wrap;
       max-width: 1000px;
       margin: auto;
   }

   .product-card {
       background: var(--white);
       border-radius: var(--radius);
       padding: 36px 28px;
       width: 260px;
       box-shadow: var(--shadow);
       transition: transform .3s, box-shadow .3s;
   }

   .product-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 16px 48px rgba(61, 32, 7, .16);
   }

   .product-circle {
       width: 100px;
       height: 100px;
       border-radius: 50%;
       background: var(--yellow-lt);
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       overflow: hidden;
   }

   .product-circle img {
       width: 72px;
       height: 72px;
       object-fit: contain;
   }

   .product-card h3 {
       font-family: 'Playfair Display', serif;
       font-weight: 700;
       font-size: 1.25rem;
       color: var(--orange-dk);
       margin-bottom: 10px;
   }

   .product-card p {
       font-size: .95rem;
       color: var(--brown-md);
       line-height: 1.6;
   }

   /* ───────────────────────────────
       REVIEWS
    ─────────────────────────────── */
   .reviews {
       background: var(--orange-dk);
       padding: 80px 5vw;
       text-align: center;
   }

   .reviews .section-label .top {
       color: var(--white);
   }

   .reviews .section-label .bottom {
       color: var(--yellow);
   }

   .reviews-grid {
       display: flex;
       justify-content: center;
       gap: 32px;
       flex-wrap: wrap;
       max-width: 1000px;
       margin: auto;
   }

   .review-card {
       background: rgba(255, 255, 255, .10);
       border: 1px solid rgba(255, 255, 255, .20);
       backdrop-filter: blur(8px);
       border-radius: var(--radius);
       padding: 36px 28px;
       width: 260px;
       transition: background .3s, transform .3s;
   }

   .review-card:hover {
       background: rgba(255, 255, 255, .18);
       transform: translateY(-4px);
   }

   .review-avatar {
       width: 90px;
       height: 90px;
       border-radius: 50%;
       overflow: hidden;
       border: 4px solid var(--yellow);
       margin: 0 auto 18px;
       background: rgba(255, 255, 255, .15);
   }

   .review-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .review-card h4 {
       font-family: 'Playfair Display', serif;
       font-size: 1.15rem;
       color: var(--yellow);
       margin-bottom: 10px;
   }

   .review-card p {
       font-size: .95rem;
       color: rgba(255, 255, 255, .88);
       line-height: 1.7;
   }

   /* ───────────────────────────────
       CONTACT
    ─────────────────────────────── */
   .contact {
       background: var(--cream);
       padding: 80px 5vw;
       text-align: center;
   }

   .contact .section-label .top {
       color: var(--orange);
   }

   .contact .section-label .bottom {
       color: var(--brown);
   }

   .contact-grid {
       display: flex;
       justify-content: center;
       gap: 24px;
       flex-wrap: wrap;
       max-width: 1000px;
       margin: auto;
   }

   .contact-card {
       background: var(--white);
       border-radius: var(--radius);
       padding: 32px 24px;
       width: 210px;
       box-shadow: var(--shadow);
       transition: transform .3s, box-shadow .3s;
   }

   .contact-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 14px 40px rgba(61, 32, 7, .14);
   }

   .contact-card .icon {
       font-size: 2.2rem;
       margin-bottom: 12px;
   }

   .contact-card h4 {
       font-family: 'Playfair Display', serif;
       font-size: 1.1rem;
       color: var(--orange);
       margin-bottom: 8px;
   }

   .contact-card p {
       font-size: .875rem;
       color: var(--brown-md);
       line-height: 1.8;
   }

   .contact-card a {
       color: var(--orange);
       font-weight: 700;
   }

   .contact-card a:hover {
       text-decoration: underline;
   }

   /* ───────────────────────────────
       FOOTER
    ─────────────────────────────── */
   footer {
       background: var(--brown);
       color: rgba(255, 255, 255, .55);
       text-align: center;
       padding: 24px 5vw;
       font-size: .85rem;
   }

   footer span {
       color: var(--yellow);
       font-weight: 700;
   }

   /* ───────────────────────────────
       SCROLL FADE-IN
    ─────────────────────────────── */
   .reveal {
       opacity: 0;
       transform: translateY(28px);
       transition: opacity .65s ease, transform .65s ease;
   }

   .reveal.visible {
       opacity: 1;
       transform: none;
   }