:root {
             --cream: #F5EDD9;
             --warm-white: #FBF7EF;
             --brown: #3D1F0D;
             --coffee: #6B3A1F;
             --caramel: #C47A35;
             --green: #2D5A27;
             --light-green: #4A7C59;
             --accent: #E8651A;
             --rice: #F0E4C4;
             --shadow: rgba(61, 31, 13, 0.15);
         }
         
         *,
         *::before,
         *::after {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         
         html {
             scroll-behavior: smooth;
         }
         
         body {
             font-family: 'Be Vietnam Pro', sans-serif;
             background: var(--warm-white);
             color: var(--brown);
             overflow-x: hidden;
         }
         /* ===== NOISE TEXTURE OVERLAY ===== */
         
         body::before {
             content: '';
             position: fixed;
             inset: 0;
             background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
             pointer-events: none;
             z-index: 1000;
             opacity: 0.4;
         }
         /* ===== HEADER ===== */
         
         header {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 100;
             padding: 18px 5%;
             display: flex;
             align-items: center;
             justify-content: space-between;
             background: rgba(251, 247, 239, 0.85);
             backdrop-filter: blur(16px);
             border-bottom: 1px solid rgba(196, 122, 53, 0.2);
             transition: all 0.3s ease;
         }
         
         header.scrolled {
             padding: 12px 5%;
             box-shadow: 0 4px 30px var(--shadow);
         }
         
         .logo {
             display: flex;
             align-items: center;
             gap: 10px;
         }
         
         .logo-icon {
             width: 42px;
             height: 42px;
             background: var(--brown);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 18px;
             flex-shrink: 0;
         }
         
         .logo-text {
             font-family: 'Dancing Script', cursive;
             font-size: 1.4rem;
             color: var(--coffee);
             line-height: 1.1;
         }
         
         .logo-text span {
             display: block;
             font-family: 'Be Vietnam Pro', sans-serif;
             font-size: 0.6rem;
             letter-spacing: 0.25em;
             text-transform: uppercase;
             color: var(--caramel);
             font-weight: 500;
         }
         
         nav {
             display: flex;
             align-items: center;
             gap: 32px;
         }
         
         nav a {
             text-decoration: none;
             color: var(--coffee);
             font-size: 0.85rem;
             font-weight: 500;
             letter-spacing: 0.05em;
             text-transform: uppercase;
             position: relative;
             transition: color 0.3s;
         }
         
         nav a::after {
             content: '';
             position: absolute;
             bottom: -3px;
             left: 0;
             width: 0;
             height: 2px;
             background: var(--accent);
             transition: width 0.3s ease;
         }
         
         nav a:hover {
             color: var(--accent);
         }
         
         nav a:hover::after {
             width: 100%;
         }
         
         .btn-order-header {
             background: var(--brown);
             color: var(--cream) !important;
             padding: 10px 22px;
             border-radius: 50px;
             font-size: 0.8rem !important;
             font-weight: 600 !important;
             letter-spacing: 0.08em !important;
             transition: all 0.3s ease !important;
         }
         
         .btn-order-header:hover {
             background: var(--accent) !important;
             transform: translateY(-2px);
             box-shadow: 0 8px 20px rgba(232, 101, 26, 0.35) !important;
             color: white !important;
         }
         
         .btn-order-header::after {
             display: none !important;
         }
         /* ===== HERO ===== */
         
         .hero {
             min-height: 100vh;
             display: grid;
             grid-template-columns: 1fr 1fr;
             position: relative;
             overflow: hidden;
             padding-top: 80px;
         }
         
         .hero-bg {
             position: absolute;
             inset: 0;
             background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(196, 122, 53, 0.12) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(45, 90, 39, 0.08) 0%, transparent 60%), var(--warm-white);
             z-index: 0;
         }
         
         .hero-left {
             position: relative;
             z-index: 2;
             display: flex;
             flex-direction: column;
             justify-content: center;
             padding: 80px 6% 80px 8%;
         }
         
         .hero-tag {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             background: rgba(196, 122, 53, 0.12);
             border: 1px solid rgba(196, 122, 53, 0.3);
             color: var(--caramel);
             padding: 6px 16px;
             border-radius: 50px;
             font-size: 0.75rem;
             font-weight: 600;
             letter-spacing: 0.15em;
             text-transform: uppercase;
             margin-bottom: 28px;
             width: fit-content;
             animation: fadeInUp 0.8s ease both;
         }
         
         .hero-tag::before {
             content: '';
             width: 6px;
             height: 6px;
             background: var(--caramel);
             border-radius: 50%;
             animation: pulse 2s infinite;
         }
         
         @keyframes pulse {
             0%,
             100% {
                 opacity: 1;
                 transform: scale(1);
             }
             50% {
                 opacity: 0.5;
                 transform: scale(1.4);
             }
         }
         
         .hero-title {
             font-family: 'Playfair Display', serif;
             font-size: clamp(2.8rem, 5vw, 5rem);
             font-weight: 900;
             line-height: 1.0;
             color: var(--brown);
             margin-bottom: 12px;
             animation: fadeInUp 0.8s 0.1s ease both;
         }
         
         .hero-title em {
             font-style: italic;
             color: var(--caramel);
             display: block;
         }
         
         .hero-title .ampersand {
             font-family: 'Dancing Script', cursive;
             font-size: 1.2em;
             color: var(--accent);
             display: inline;
         }
         
         .hero-subtitle {
             font-size: 1rem;
             color: var(--coffee);
             line-height: 1.8;
             max-width: 400px;
             margin-bottom: 40px;
             font-weight: 300;
             animation: fadeInUp 0.8s 0.2s ease both;
         }
         
         .hero-cta {
             display: flex;
             align-items: center;
             gap: 16px;
             animation: fadeInUp 0.8s 0.3s ease both;
             flex-wrap: wrap;
         }
         
         .btn-primary {
             background: var(--brown);
             color: var(--cream);
             padding: 16px 36px;
             border-radius: 50px;
             font-size: 0.9rem;
             font-weight: 600;
             letter-spacing: 0.06em;
             cursor: pointer;
             border: none;
             transition: all 0.3s ease;
             box-shadow: 0 6px 24px rgba(61, 31, 13, 0.3);
             text-decoration: none;
             display: inline-flex;
             align-items: center;
             gap: 8px;
         }
         
         .btn-primary:hover {
             background: var(--accent);
             transform: translateY(-3px);
             box-shadow: 0 12px 32px rgba(232, 101, 26, 0.4);
         }
         
         .btn-primary .arrow {
             transition: transform 0.3s ease;
         }
         
         .btn-primary:hover .arrow {
             transform: translateX(4px);
         }
         
         .btn-secondary {
             color: var(--coffee);
             font-size: 0.85rem;
             font-weight: 500;
             cursor: pointer;
             display: flex;
             align-items: center;
             gap: 6px;
             text-decoration: none;
             transition: color 0.3s;
         }
         
         .btn-secondary:hover {
             color: var(--accent);
         }
         
         .hero-stats {
             display: flex;
             gap: 32px;
             margin-top: 52px;
             padding-top: 32px;
             border-top: 1px solid rgba(196, 122, 53, 0.2);
             animation: fadeInUp 0.8s 0.4s ease both;
         }
         
         .stat-item {
             text-align: left;
         }
         
         .stat-num {
             font-family: 'Playfair Display', serif;
             font-size: 2rem;
             font-weight: 900;
             color: var(--brown);
             line-height: 1;
         }
         
         .stat-label {
             font-size: 0.72rem;
             color: var(--coffee);
             font-weight: 400;
             letter-spacing: 0.08em;
             text-transform: uppercase;
             margin-top: 4px;
         }
         /* ===== HERO VISUAL ===== */
         
         .hero-right {
             position: relative;
             z-index: 2;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 60px 6%;
         }
         
         .hero-visual {
             position: relative;
             width: 100%;
             max-width: 520px;
             aspect-ratio: 1;
         }
         
         .circle-bg {
             position: absolute;
             inset: 10%;
             background: radial-gradient(circle, rgba(196, 122, 53, 0.15) 0%, rgba(240, 228, 196, 0.4) 60%, transparent 80%);
             border-radius: 50%;
             animation: rotate-slow 20s linear infinite;
         }
         
         @keyframes rotate-slow {
             from {
                 transform: rotate(0deg);
             }
             to {
                 transform: rotate(360deg);
             }
         }
         
         .product-card-float {
             position: absolute;
             background: white;
             border-radius: 20px;
             padding: 12px 16px;
             box-shadow: 0 8px 32px var(--shadow);
             display: flex;
             align-items: center;
             gap: 10px;
             animation: float 3s ease-in-out infinite;
             font-size: 0.8rem;
             font-weight: 600;
             color: var(--brown);
             white-space: nowrap;
             z-index: 10;
         }
         
         .product-card-float.card-1 {
             top: 8%;
             left: 0;
             animation-delay: 0s;
         }
         
         .product-card-float.card-2 {
             top: 40%;
             right: -15%;
             animation-delay: 1s;
         }
         
         .product-card-float.card-3 {
             bottom: 8%;
             left: 5%;
             animation-delay: 2s;
         }
         
         @keyframes float {
             0%,
             100% {
                 transform: translateY(0px);
             }
             50% {
                 transform: translateY(-8px);
             }
         }
         
         .product-card-float .icon {
             font-size: 1.4rem;
         }
         
         .hero-main-img {
             position: absolute;
             inset: 15%;
             border-radius: 50%;
             overflow: hidden;
             border: 4px solid rgba(196, 122, 53, 0.3);
             display: flex;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, #F0E4C4 0%, #E8D5A8 100%);
         }
         
         .product-illustration {
             font-size: 7rem;
             animation: gentle-bounce 4s ease-in-out infinite;
             filter: drop-shadow(0 8px 16px rgba(61, 31, 13, 0.2));
             object-fit: cover;
             width: 365px;
             height: 365px;
         }
         
         @keyframes gentle-bounce {
             0%,
             100% {
                 transform: scale(1) rotate(-2deg);
             }
             50% {
                 transform: scale(1.05) rotate(2deg);
             }
         }
         
         .decorative-ring {
             position: absolute;
             inset: -5%;
             border-radius: 50%;
             border: 2px dashed rgba(196, 122, 53, 0.2);
             animation: rotate-slow 30s linear infinite reverse;
         }
         /* ===== SECTION SHARED ===== */
         
         section {
             position: relative;
         }
         
         .section-header {
             text-align: center;
             margin-bottom: 60px;
         }
         
         .section-tag {
             display: inline-block;
             font-size: 0.7rem;
             font-weight: 700;
             letter-spacing: 0.25em;
             text-transform: uppercase;
             color: var(--caramel);
             margin-bottom: 14px;
             position: relative;
             padding: 0 24px;
         }
         
         .section-tag::before,
         .section-tag::after {
             content: '—';
             position: absolute;
             top: 0;
             opacity: 0.5;
         }
         
         .section-tag::before {
             left: 0;
         }
         
         .section-tag::after {
             right: 0;
         }
         
         .section-title {
             font-family: 'Playfair Display', serif;
             font-size: clamp(2rem, 4vw, 3.2rem);
             font-weight: 900;
             color: var(--brown);
             line-height: 1.1;
         }
         
         .section-title em {
             font-style: italic;
             color: var(--caramel);
         }
         /* ===== MARQUEE ===== */
         
         .marquee-section {
             background: var(--brown);
             padding: 18px 0;
             overflow: hidden;
         }
         
         .marquee-track {
             display: flex;
             gap: 0;
             animation: marquee 18s linear infinite;
         }
         
         .marquee-item {
             display: flex;
             align-items: center;
             gap: 12px;
             color: var(--cream);
             font-size: 0.8rem;
             font-weight: 600;
             letter-spacing: 0.15em;
             text-transform: uppercase;
             white-space: nowrap;
             padding: 0 32px;
         }
         
         .marquee-dot {
             color: var(--caramel);
             font-size: 1.2rem;
         }
         
         @keyframes marquee {
             from {
                 transform: translateX(0);
             }
             to {
                 transform: translateX(-50%);
             }
         }
         /* ===== PRODUCTS ===== */
         
         .products {
             padding: 100px 8%;
             background: var(--warm-white);
         }
         
         .products-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 28px;
         }
         
         .product-card {
             background: white;
             border-radius: 24px;
             overflow: hidden;
             box-shadow: 0 4px 20px var(--shadow);
             transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             cursor: pointer;
             position: relative;
         }
         
         .product-card:hover {
             transform: translateY(-8px) scale(1.01);
             box-shadow: 0 20px 50px rgba(61, 31, 13, 0.2);
         }
         
         .product-card-img {
             height: 350px;
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             overflow: hidden;
         }
         
         .product-card:nth-child(1) .product-card-img {
             background: linear-gradient(135deg, #E8F5E2 0%, #C8E6C0 100%);
         }
         
         .product-card:nth-child(2) .product-card-img {
             background: linear-gradient(135deg, #F3E0C8 0%, #E8C89A 100%);
         }
         
         .product-card:nth-child(3) .product-card-img {
             background: linear-gradient(135deg, #FFF5E0 0%, #F5E0C0 100%);
         }
         
         .product-emoji {
             height: 350px;
             font-size: 5.5rem;
             transition: transform 0.4s ease;
             filter: drop-shadow(0 6px 12px rgba(61, 31, 13, 0.15));
         }
         
         .product-card:hover .product-emoji {
             transform: scale(1.15) rotate(5deg);
         }
         
         .product-badge {
             position: absolute;
             top: 14px;
             right: 14px;
             background: var(--accent);
             color: white;
             font-size: 0.65rem;
             font-weight: 700;
             letter-spacing: 0.1em;
             text-transform: uppercase;
             padding: 5px 12px;
             border-radius: 50px;
         }
         
         .product-body {
             padding: 22px 24px 24px;
         }
         
         .product-name {
             font-family: 'Playfair Display', serif;
             font-size: 1.3rem;
             font-weight: 700;
             color: var(--brown);
             margin-bottom: 8px;
         }
         
         .product-desc {
             font-size: 0.82rem;
             color: var(--coffee);
             line-height: 1.7;
             margin-bottom: 18px;
             font-weight: 300;
         }
         
         .product-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
         }
         
         .product-price {
             font-family: 'Playfair Display', serif;
             font-size: 1.4rem;
             font-weight: 900;
             color: var(--brown);
         }
         
         .product-price span {
             font-family: 'Be Vietnam Pro', sans-serif;
             font-size: 0.7rem;
             font-weight: 400;
             color: var(--coffee);
             margin-left: 2px;
         }
         
         .btn-buy {
             background: var(--brown);
             color: var(--cream);
             border: none;
             padding: 10px 22px;
             border-radius: 50px;
             font-size: 0.8rem;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
             font-family: 'Be Vietnam Pro', sans-serif;
         }
         
         .btn-buy:hover {
             background: var(--accent);
             transform: scale(1.05);
             box-shadow: 0 6px 16px rgba(232, 101, 26, 0.35);
         }
         /* ===== ABOUT ===== */
         
         .about {
             padding: 100px 8%;
             background: var(--brown);
             color: var(--cream);
             position: relative;
             overflow: hidden;
         }
         
         .about::before {
             content: '';
             position: absolute;
             top: -50%;
             right: -10%;
             width: 60%;
             height: 200%;
             background: radial-gradient(ellipse, rgba(196, 122, 53, 0.15) 0%, transparent 70%);
             pointer-events: none;
         }
         
         .about-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 80px;
             align-items: center;
         }
         
         .about-visual {
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
             height: 420px;
         }
         
         .about-circle-main {
             width: 280px;
             height: 280px;
             background: rgba(255, 255, 255, 0.06);
             border-radius: 50%;
             border: 1px solid rgba(196, 122, 53, 0.3);
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             z-index: 2;
         }
         
         .about-circle-main .big-emoji {
             font-size: 8rem;
             filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
         }
         
         .orbit-item {
             position: absolute;
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(196, 122, 53, 0.25);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 2rem;
             animation: orbit 8s linear infinite;
         }
         
         .orbit-item:nth-child(2) {
             width: 80px;
             height: 80px;
             top: 20px;
             left: 20px;
             animation-delay: 0s;
         }
         
         .orbit-item:nth-child(3) {
             width: 70px;
             height: 70px;
             top: 30px;
             right: 20px;
             animation-delay: -2.7s;
             animation-direction: reverse;
         }
         
         .orbit-item:nth-child(4) {
             width: 75px;
             height: 75px;
             bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
             animation-delay: -5.3s;
         }
         
         @keyframes orbit {
             0%,
             100% {
                 transform: translateY(0);
             }
             50% {
                 transform: translateY(-12px);
             }
         }
         
         .about-content .section-tag {
             color: var(--caramel);
         }
         
         .about-content .section-title {
             color: var(--cream);
             text-align: left;
             margin-bottom: 24px;
         }
         
         .about-content .section-title em {
             color: var(--caramel);
         }
         
         .about-text {
             font-size: 0.92rem;
             line-height: 1.9;
             color: rgba(245, 237, 217, 0.8);
             font-weight: 300;
             margin-bottom: 36px;
         }
         
         .about-features {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 16px;
         }
         
         .feature-item {
             display: flex;
             align-items: flex-start;
             gap: 12px;
             padding: 16px;
             background: rgba(255, 255, 255, 0.05);
             border-radius: 14px;
             border: 1px solid rgba(196, 122, 53, 0.15);
             transition: all 0.3s;
         }
         
         .feature-item:hover {
             background: rgba(196, 122, 53, 0.1);
             border-color: rgba(196, 122, 53, 0.3);
         }
         
         .feature-icon {
             font-size: 1.4rem;
             flex-shrink: 0;
         }
         
         .feature-text strong {
             display: block;
             font-size: 0.82rem;
             font-weight: 600;
             color: var(--cream);
             margin-bottom: 2px;
         }
         
         .feature-text small {
             font-size: 0.72rem;
             color: rgba(245, 237, 217, 0.6);
             font-weight: 300;
         }
         /* ===== TESTIMONIALS ===== */
         
         .testimonials {
             padding: 100px 8%;
             background: var(--rice);
             position: relative;
         }
         
         .testimonials::before {
             content: '"';
             position: absolute;
             top: 60px;
             left: 6%;
             font-family: 'Playfair Display', serif;
             font-size: 15rem;
             color: rgba(196, 122, 53, 0.08);
             line-height: 1;
             pointer-events: none;
         }
         
         .testimonials-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 24px;
             margin-top: 20px;
         }
         
         .testimonial-card {
             background: white;
             border-radius: 20px;
             padding: 28px;
             box-shadow: 0 4px 20px var(--shadow);
             position: relative;
             transition: transform 0.3s ease;
         }
         
         .testimonial-card:hover {
             transform: translateY(-4px);
         }
         
         .stars {
             display: flex;
             gap: 3px;
             margin-bottom: 16px;
             font-size: 0.9rem;
         }
         
         .testimonial-text {
             font-size: 0.88rem;
             line-height: 1.8;
             color: var(--coffee);
             font-weight: 300;
             margin-bottom: 20px;
             font-style: italic;
         }
         
         .testimonial-author {
             display: flex;
             align-items: center;
             gap: 12px;
         }
         
         .author-avatar {
             width: 42px;
             height: 42px;
             border-radius: 50%;
             background: linear-gradient(135deg, var(--caramel), var(--brown));
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 1.1rem;
             color: white;
             font-weight: 700;
             font-family: 'Playfair Display', serif;
         }
         
         .author-name {
             font-weight: 600;
             font-size: 0.85rem;
             color: var(--brown);
         }
         
         .author-loc {
             font-size: 0.72rem;
             color: var(--coffee);
             margin-top: 2px;
         }
         /* ===== COMBO DEAL ===== */
         
         .combo {
             padding: 100px 8%;
             background: var(--warm-white);
             text-align: center;
         }
         
         .combo-card {
             background: linear-gradient(135deg, var(--brown) 0%, #5A2D0C 100%);
             border-radius: 32px;
             padding: 60px;
             position: relative;
             overflow: hidden;
             max-width: 900px;
             margin: 0 auto;
         }
         
         .combo-card::before {
             content: '';
             position: absolute;
             top: -50%;
             right: -20%;
             width: 70%;
             height: 200%;
             background: radial-gradient(ellipse, rgba(196, 122, 53, 0.2) 0%, transparent 70%);
             pointer-events: none;
         }
         
         .combo-emojis {
             font-size: 4rem;
             margin-bottom: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 12px;
         }
         
         .combo-plus {
             font-family: 'Be Vietnam Pro', sans-serif;
             font-size: 2rem;
             color: var(--caramel);
         }
         
         .combo-title {
             font-family: 'Playfair Display', serif;
             font-size: clamp(1.8rem, 4vw, 3rem);
             font-weight: 900;
             color: var(--cream);
             margin-bottom: 12px;
         }
         
         .combo-desc {
             font-size: 0.92rem;
             color: rgba(245, 237, 217, 0.75);
             margin-bottom: 32px;
             font-weight: 300;
             max-width: 500px;
             margin-left: auto;
             margin-right: auto;
         }
         
         .combo-price-row {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 20px;
             margin-bottom: 36px;
         }
         
         .combo-old-price {
             font-family: 'Playfair Display', serif;
             font-size: 1.6rem;
             color: rgba(245, 237, 217, 0.4);
             text-decoration: line-through;
         }
         
         .combo-new-price {
             font-family: 'Playfair Display', serif;
             font-size: 3rem;
             font-weight: 900;
             color: var(--caramel);
         }
         
         .combo-save {
             background: var(--accent);
             color: white;
             font-size: 0.7rem;
             font-weight: 700;
             letter-spacing: 0.1em;
             text-transform: uppercase;
             padding: 6px 14px;
             border-radius: 50px;
         }
         
         .btn-combo {
             background: var(--caramel);
             color: var(--brown);
             padding: 18px 48px;
             border-radius: 50px;
             font-size: 1rem;
             font-weight: 700;
             cursor: pointer;
             border: none;
             transition: all 0.3s ease;
             font-family: 'Be Vietnam Pro', sans-serif;
             letter-spacing: 0.05em;
             box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
             display: inline-flex;
             align-items: center;
             gap: 8px;
         }
         
         .btn-combo:hover {
             background: var(--accent);
             color: white;
             transform: translateY(-3px) scale(1.03);
             box-shadow: 0 14px 36px rgba(232, 101, 26, 0.4);
         }
         /* ===== FOOTER ===== */
         
         footer {
             background: var(--brown);
             color: var(--cream);
             padding: 60px 8% 30px;
             position: relative;
             overflow: hidden;
         }
         
         footer::before {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 1px;
             background: rgba(196, 122, 53, 0.25);
         }
         
         .footer-grid {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr 1.5fr;
             gap: 48px;
             margin-bottom: 48px;
         }
         
         .footer-brand .logo-text {
             font-size: 1.8rem;
             color: var(--cream);
             margin-bottom: 14px;
             display: block;
         }
         
         .footer-brand .logo-text span {
             color: var(--caramel);
         }
         
         .footer-desc {
             font-size: 0.82rem;
             line-height: 1.9;
             color: rgba(245, 237, 217, 0.6);
             font-weight: 300;
             max-width: 280px;
             margin-bottom: 24px;
         }
         
         .social-links {
             display: flex;
             gap: 10px;
         }
         
         .social-link {
             width: 38px;
             height: 38px;
             background: rgba(255, 255, 255, 0.07);
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 1rem;
             text-decoration: none;
             border: 1px solid rgba(196, 122, 53, 0.2);
             transition: all 0.3s;
         }
         
         .social-link:hover {
             background: var(--caramel);
             border-color: var(--caramel);
             transform: translateY(-2px);
         }
         
         .footer-col-title {
             font-size: 0.75rem;
             font-weight: 700;
             letter-spacing: 0.2em;
             text-transform: uppercase;
             color: var(--caramel);
             margin-bottom: 20px;
         }
         
         .footer-links {
             list-style: none;
             display: flex;
             flex-direction: column;
             gap: 12px;
         }
         
         .footer-links a {
             text-decoration: none;
             color: rgba(245, 237, 217, 0.65);
             font-size: 0.83rem;
             font-weight: 300;
             transition: all 0.3s;
             display: flex;
             align-items: center;
             gap: 6px;
         }
         
         .footer-links a:hover {
             color: var(--cream);
             gap: 10px;
         }
         
         .footer-contact p {
             font-size: 0.82rem;
             color: rgba(245, 237, 217, 0.65);
             font-weight: 300;
             margin-bottom: 10px;
             display: flex;
             align-items: flex-start;
             gap: 8px;
             line-height: 1.6;
         }
         
         .footer-bottom {
             padding-top: 28px;
             border-top: 1px solid rgba(196, 122, 53, 0.15);
             display: flex;
             align-items: center;
             justify-content: space-between;
             flex-wrap: wrap;
             gap: 12px;
         }
         
         .footer-copy {
             font-size: 0.75rem;
             color: rgba(245, 237, 217, 0.4);
             font-weight: 300;
         }
         
         .footer-legal {
             display: flex;
             gap: 20px;
         }
         
         .footer-legal a {
             font-size: 0.75rem;
             color: rgba(245, 237, 217, 0.4);
             text-decoration: none;
             transition: color 0.3s;
         }
         
         .footer-legal a:hover {
             color: var(--caramel);
         }
         /* ===== POPUP ===== */
         
         .popup-overlay {
             position: fixed;
             inset: 0;
             background: rgba(61, 31, 13, 0.7);
             backdrop-filter: blur(8px);
             z-index: 9999;
             display: none;
             align-items: center;
             justify-content: center;
             padding: 20px;
             animation: fadeOverlay 0.3s ease;
         }
         
         .popup-overlay.active {
             display: flex;
         }
         
         @keyframes fadeOverlay {
             from {
                 opacity: 0;
             }
             to {
                 opacity: 1;
             }
         }
         
         .popup {
             background: white;
             border-radius: 28px;
             width: 100%;
             max-width: 520px;
             overflow: hidden;
             box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
             animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         
         @keyframes popIn {
             from {
                 opacity: 0;
                 transform: scale(0.85) translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: scale(1) translateY(0);
             }
         }
         
         .popup-header {
             background: linear-gradient(135deg, var(--brown) 0%, #5A2D0C 100%);
             padding: 36px 36px 32px;
             text-align: center;
             position: relative;
         }
         
         .popup-header-emojis {
             font-size: 2.5rem;
             margin-bottom: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 6px;
         }
         
         .popup-title {
             font-family: 'Playfair Display', serif;
             font-size: 1.6rem;
             font-weight: 900;
             color: var(--cream);
             margin-bottom: 6px;
         }
         
         .popup-subtitle {
             font-size: 0.8rem;
             color: rgba(245, 237, 217, 0.7);
             font-weight: 300;
         }
         
         .popup-close {
             position: absolute;
             top: 16px;
             right: 16px;
             width: 32px;
             height: 32px;
             background: rgba(255, 255, 255, 0.12);
             border: none;
             border-radius: 50%;
             cursor: pointer;
             color: var(--cream);
             font-size: 1rem;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: all 0.3s;
         }
         
         .popup-close:hover {
             background: rgba(255, 255, 255, 0.25);
             transform: rotate(90deg);
         }
         
         .popup-body {
             padding: 32px 36px 36px;
         }
         /* Product selector in popup */
         
         .popup-products {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 10px;
             margin-bottom: 24px;
         }
         
         .popup-product-btn {
             border: 2px solid rgba(196, 122, 53, 0.2);
             background: transparent;
             border-radius: 14px;
             padding: 12px 6px;
             cursor: pointer;
             transition: all 0.3s;
             text-align: center;
             font-family: 'Be Vietnam Pro', sans-serif;
         }
         
         .popup-product-btn:hover,
         .popup-product-btn.selected {
             border-color: var(--caramel);
             background: rgba(196, 122, 53, 0.08);
         }
         
         .popup-product-btn .p-emoji {
             font-size: 1.8rem;
             display: block;
             margin-bottom: 4px;
         }
         
         .popup-product-btn .p-name {
             font-size: 0.7rem;
             font-weight: 600;
             color: var(--brown);
         }
         
         .popup-product-btn .p-price {
             font-size: 0.68rem;
             color: var(--caramel);
             font-weight: 500;
         }
         
         .form-group {
             margin-bottom: 18px;
         }
         
         .form-group label {
             display: block;
             font-size: 0.75rem;
             font-weight: 600;
             letter-spacing: 0.08em;
             text-transform: uppercase;
             color: var(--coffee);
             margin-bottom: 8px;
         }
         
         .form-group input,
         .form-group textarea,
         .form-group select {
             width: 100%;
             padding: 13px 16px;
             border: 1.5px solid rgba(196, 122, 53, 0.25);
             border-radius: 12px;
             font-size: 0.88rem;
             color: var(--brown);
             background: var(--warm-white);
             font-family: 'Be Vietnam Pro', sans-serif;
             transition: border-color 0.3s, box-shadow 0.3s;
             outline: none;
         }
         
         .form-group input:focus,
         .form-group textarea:focus,
         .form-group select:focus {
             border-color: var(--caramel);
             box-shadow: 0 0 0 3px rgba(196, 122, 53, 0.12);
         }
         
         .form-row {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 14px;
         }
         
         .form-group textarea {
             resize: none;
             height: 80px;
         }
         
         .btn-submit {
             width: 100%;
             background: var(--brown);
             color: var(--cream);
             border: none;
             padding: 16px;
             border-radius: 14px;
             font-size: 0.92rem;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
             font-family: 'Be Vietnam Pro', sans-serif;
             letter-spacing: 0.05em;
             margin-top: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
         }
         
         .btn-submit:hover {
             background: var(--accent);
             transform: translateY(-2px);
             box-shadow: 0 8px 24px rgba(232, 101, 26, 0.35);
         }
         
         .btn-submit:disabled {
             opacity: 0.6;
             cursor: not-allowed;
             transform: none;
         }
         
         .form-note {
             font-size: 0.72rem;
             color: var(--coffee);
             text-align: center;
             margin-top: 12px;
             opacity: 0.7;
         }
         /* ===== SUCCESS STATE ===== */
         
         .success-state {
             display: none;
             text-align: center;
             padding: 40px 36px 36px;
         }
         
         .success-state.active {
             display: block;
         }
         
         .success-icon {
             font-size: 4rem;
             margin-bottom: 16px;
             animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         
         @keyframes bounce-in {
             from {
                 transform: scale(0);
             }
             to {
                 transform: scale(1);
             }
         }
         
         .success-title {
             font-family: 'Playfair Display', serif;
             font-size: 1.6rem;
             font-weight: 900;
             color: var(--brown);
             margin-bottom: 8px;
         }
         
         .success-text {
             font-size: 0.85rem;
             color: var(--coffee);
             line-height: 1.7;
             font-weight: 300;
         }
         /* ===== TOAST ===== */
         
         .toast {
             position: fixed;
             bottom: 30px;
             right: 30px;
             background: var(--brown);
             color: var(--cream);
             padding: 14px 22px;
             border-radius: 14px;
             font-size: 0.85rem;
             font-weight: 500;
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
             z-index: 99999;
             transform: translateY(80px);
             opacity: 0;
             transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             display: flex;
             align-items: center;
             gap: 10px;
             max-width: 320px;
         }
         
         .toast.show {
             transform: translateY(0);
             opacity: 1;
         }
         /* ===== ANIMATIONS ===== */
         
         @keyframes fadeInUp {
             from {
                 opacity: 0;
                 transform: translateY(24px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
             }
         }
         
         .reveal {
             opacity: 0;
             transform: translateY(32px);
             transition: opacity 0.7s ease, transform 0.7s ease;
         }
         
         .reveal.visible {
             opacity: 1;
             transform: translateY(0);
         }
         /* ===== SCROLL TO TOP ===== */
         
         .scroll-top {
             position: fixed;
             bottom: 30px;
             left: 30px;
             width: 44px;
             height: 44px;
             background: var(--brown);
             color: var(--cream);
             border: none;
             border-radius: 50%;
             cursor: pointer;
             font-size: 1.1rem;
             display: flex;
             align-items: center;
             justify-content: center;
             box-shadow: 0 4px 16px var(--shadow);
             transition: all 0.3s;
             opacity: 0;
             pointer-events: none;
             z-index: 500;
         }
         
         .scroll-top.visible {
             opacity: 1;
             pointer-events: all;
         }
         
         .scroll-top:hover {
             background: var(--accent);
             transform: translateY(-3px);
         }
         /* ===== RESPONSIVE ===== */
         
         @media (max-width: 900px) {
             .hero {
                 grid-template-columns: 1fr;
             }
             .hero-right {
                 display: none;
             }
             .hero-left {
                 padding: 60px 6%;
             }
             .products-grid {
                 grid-template-columns: 1fr;
             }
             .about-grid {
                 grid-template-columns: 1fr;
             }
             .about-visual {
                 display: none;
             }
             .testimonials-grid {
                 grid-template-columns: 1fr;
             }
             .footer-grid {
                 grid-template-columns: 1fr 1fr;
             }
             nav a:not(.btn-order-header) {
                 display: none;
             }
             .form-row {
                 grid-template-columns: 1fr;
             }
         }
         
         @media (max-width: 600px) {
             .footer-grid {
                 grid-template-columns: 1fr;
             }
             .combo-card {
                 padding: 36px 24px;
             }
             .popup-products {
                 grid-template-columns: repeat(3, 1fr);
             }
                         .product-card-img,
                         .product-emoji {
                             height: 260px;
                         }
         }