/* V21 — iOS-inspired liquid glass. Web approximation, not Apple's proprietary renderer. */
:root{--lg-edge:rgba(255,255,255,.32);--lg-shadow:0 20px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.07)}
/* Preserve the dark editorial palette and red brand accents. */
.nav{background:linear-gradient(115deg,rgba(29,29,34,.68),rgba(7,7,12,.56) 55%,rgba(40,9,17,.52));border-bottom:1px solid rgba(255,255,255,.17);-webkit-backdrop-filter:blur(28px) saturate(175%);backdrop-filter:blur(28px) saturate(175%);box-shadow:0 10px 36px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.13)}
.brands-section .brand-card,.dynamic-brand-rail .brand-card,.about-photo,.toolkit-card{
 background:linear-gradient(145deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.055) 28%,rgba(20,22,30,.27) 65%,rgba(255,20,36,.065) 100%);
 border:1px solid var(--lg-edge);border-radius:24px;box-shadow:var(--lg-shadow);
 -webkit-backdrop-filter:blur(28px) saturate(185%) brightness(1.07);backdrop-filter:blur(28px) saturate(185%) brightness(1.07);
}
.brands-section .brand-card::before,.dynamic-brand-rail .brand-card::before,.about-photo::before,.toolkit-card::before{
 content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:linear-gradient(155deg,rgba(255,255,255,.24),transparent 31%,transparent 67%,rgba(255,255,255,.07));opacity:.75;z-index:1;
}
.brands-section .brand-card::after,.dynamic-brand-rail .brand-card::after,.about-photo::after,.toolkit-card::after{
 content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
 background:radial-gradient(ellipse 68% 52% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.33),rgba(255,255,255,.07) 43%,transparent 80%);
 mix-blend-mode:screen;opacity:.53;transition:opacity .3s ease;
}
.toolkit-card{position:relative;isolation:isolate;overflow:hidden;--gx:50%;--gy:50%;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.toolkit-card>*{position:relative;z-index:3}
.brands-section .brand-card:hover,.dynamic-brand-rail .brand-card:hover,.about-photo:hover,.toolkit-card:hover{border-color:rgba(255,255,255,.52);box-shadow:0 24px 58px rgba(0,0,0,.39),0 0 26px rgba(255,20,36,.13),inset 0 1px rgba(255,255,255,.4)}
.toolkit-card:hover{transform:translateY(-5px)}
.brands-section .brand-card:hover::after,.dynamic-brand-rail .brand-card:hover::after,.about-photo:hover::after,.toolkit-card:hover::after{opacity:.95}
@media(max-width:700px){.brands-section .brand-card,.dynamic-brand-rail .brand-card,.about-photo,.toolkit-card{border-radius:19px;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}.nav{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}}
@media(prefers-reduced-motion:reduce){.toolkit-card:hover{transform:none}.toolkit-card::after{opacity:.3}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.brands-section .brand-card,.dynamic-brand-rail .brand-card,.about-photo,.toolkit-card,.nav{background:rgba(24,24,30,.92)}}