/* Glass sits behind the controls, keeping navigation crisp and readable. */
.site-header { background:transparent; border-bottom-color:transparent; }
.site-header::before { content:''; position:absolute; z-index:-1; inset:0; background:#f8f7f4; border-bottom:1px solid #d9d8d180; box-shadow:inset 0 1px 0 #ffffffb3; pointer-events:none; }
.site-header.scrolled { border-bottom-color:transparent; }
.site-header.scrolled::before { box-shadow:inset 0 1px 0 #ffffffb3,0 5px 24px #20201d06; }
.services-dropdown { border-color:#ffffffc9; box-shadow:inset 0 1px 0 #fff,0 24px 65px #20201d1c,0 0 0 1px #b9afa52b; }
.menu-service-icon { border:1px solid #ffffffa8; box-shadow:inset 0 1px 0 #fff,0 3px 7px #986a3d10; }
.button { box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #9e351629,0 4px 12px #d4622020; }
.whatsapp-float { box-shadow:inset 0 1px 0 #ffffff59,inset 0 -1px 0 #075e5429,0 4px 12px #128c4a26; }

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .site-header { -webkit-backdrop-filter:blur(20px) saturate(145%); backdrop-filter:blur(20px) saturate(145%); }
 .site-header::before { background:rgba(248,247,244,.62); }
 .services-dropdown { background:rgba(255,253,250,.97); -webkit-backdrop-filter:blur(24px) saturate(130%); backdrop-filter:blur(24px) saturate(130%); }
 .mobile-nav { background:rgba(248,247,244,.98); -webkit-backdrop-filter:blur(24px) saturate(130%); backdrop-filter:blur(24px) saturate(130%); }
}

/* Existing product examples gain a second, translucent sheet and soft depth. */
.email-example { position:relative; isolation:isolate; }
.email-example::before { content:''; position:absolute; z-index:0; inset:12px -9px -10px 9px; border:1px solid #ffffffb3; border-radius:20px; background:linear-gradient(135deg,#ffffff7d,#efdcc547); box-shadow:0 12px 35px #40302108; transform:rotate(1.2deg); pointer-events:none; }
.email-example::before { border-radius:15px; background:linear-gradient(135deg,#ffffff30,#ffffff09); border-color:#ffffff45; }
.email-example-sheet { position:relative; z-index:1; box-shadow:0 20px 42px -20px #25241e45,inset 0 1px 0 #fff; border-color:#ffffffc4; }
.email-example-subject { background:linear-gradient(125deg,#ffffff8c,#ffffff00 75%); }
.email-example-sheet { border-color:#ffffff9c; }
.product-image { border:1px solid #ffffffa6; box-shadow:inset 0 1px 0 #fff,0 16px 38px -28px #25322159; }

@media (min-width:851px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .email-example-sheet { transform:perspective(1200px) rotateX(2deg) rotateY(-3deg); transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease; }
 .email-example-sheet { transform:perspective(1200px) rotateX(2deg) rotateY(3deg); }
 .email-example:hover .email-example-sheet { transform:perspective(1200px) rotateX(0) rotateY(0) translateY(-4px); box-shadow:0 26px 48px -22px #25241e52,inset 0 1px 0 #fff; }
}

@media (max-width:850px) {
 .site-header::before { background:rgba(248,247,244,.76); }
 .mobile-nav .services-dropdown { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
 .email-example::before { inset:7px -4px -6px 4px; transform:none; }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 .site-header::before,.mobile-nav { background:#f8f7f4; }
 .services-dropdown { background:#fffdfa; }
}

@media (prefers-reduced-transparency:reduce) {
 .site-header { -webkit-backdrop-filter:none; backdrop-filter:none; }
 .site-header::before,.mobile-nav { background:#f8f7f4; -webkit-backdrop-filter:none; backdrop-filter:none; }
 .services-dropdown { background:#fffdfa; -webkit-backdrop-filter:none; backdrop-filter:none; }
}