/* Reference palette and surfaces only; existing animation rules remain untouched. */
:root { --header-height: 76px; }
body { background: #f8fbfd url('assets/flow-background.svg') center top / 100% 100% no-repeat; }
.header { width: calc(100% - 104px); max-width: 1600px; margin: 18px auto 0; top: 16px; height: var(--header-height); padding-inline: clamp(24px,3vw,52px); gap: clamp(18px,2.3vw,36px); border: 1px solid #ffffffed; border-radius: 30px; background: #fffffff2; box-shadow: 0 8px 32px #155b9220,0 1px 4px #fff9 inset; backdrop-filter: blur(16px); }
.header .brand,.header .brand-vector { width: 170px; }
.header .button.small { border-radius: 13px; }
.hero-hd { background: transparent; border-color: transparent; box-shadow: none; }
.hero-canvas { box-shadow: 0 12px 42px #9a541514; }
.mobile-services a { border-color: #fff; box-shadow: 0 3px 10px #182b4910; border-radius: 18px; }
.marketplace-strip { position: relative; max-width: 1540px; width: calc(100% - 48px); margin: 0 auto; padding: 22px 0; border: 1px solid #fff; border-radius: 22px; background: #ffffffdc; box-shadow: 0 8px 24px #77431112; }
.mp-inner { padding-inline: 24px; }
.mp-card { border-color: #edf0f4; box-shadow: 0 4px 12px #10284608; }
.services-wrap,.testimonials-wrap { background: #edf7ff40; border-color: #ffffff80; }
.expertise { background: #ffffffb8; border-color: #fff; box-shadow: 0 5px 22px #23547806; }
.world-panel { background: linear-gradient(120deg,#eff6ffde,#fffffff0 65%,#fff5edcf); border-color: #fff; box-shadow: 0 8px 30px #30537508; }
.quote,.service-card { box-shadow: 0 6px 20px #14385a0d; }
footer { background: #ffffffb8; border-radius: 20px 20px 0 0; }
@media (min-width:901px) {
 .hero-hd { min-height: calc(100svh - var(--header-height) - 64px); }
 .hero-canvas { max-width: calc((100svh - var(--header-height) - 80px) * 1022 / 868); }
}
@media (max-width:1100px) { .header { width:calc(100% - 40px); padding-inline:24px; gap:18px; } .header nav { gap:18px; } .header .brand,.header .brand-vector { width:150px; } }
@media (max-width:900px) { .header > nav { top:calc(100% + 10px); left:0; right:0; border-radius:20px; } }
@media (max-width:700px) {
 :root { --header-height:68px; }
 body { background-size:100% 100%; }
 .header { width:calc(100% - 24px); top:10px; margin-top:10px; padding-inline:18px; gap:12px; border-radius:24px; }
 .header .brand,.header .brand-vector { width:135px; }
 .marketplace-strip { width:calc(100% - 24px); padding-block:20px; border-radius:18px; }
 .mp-inner { padding-inline:18px; }
}
html.dark-mode body,body.dark-mode { background-image:linear-gradient(#070f1aed,#070f1aed),url('assets/flow-background.svg')!important; }
html.dark-mode .header,body.dark-mode .header { border:1px solid #27456b!important; box-shadow:0 8px 30px #0005; }
html.dark-mode .hero-hd,body.dark-mode .hero-hd { background:transparent!important; border-color:transparent!important; }
html.dark-mode footer,body.dark-mode footer { background:#0b1828d9; }