/* Adaptation of ShadcnSpace Hero 01, obtained from its public MIT registry.
   Shared header and navigation across the HTML site. Hero styles stay component-scoped. Values mirror hero.tsx/header.tsx/brand-slider.tsx. */
.site-unified{background:#fff;color:oklch(.145 0 0)}
.site-unified .site-header{height:80px;min-height:80px;background:transparent;border:0;box-shadow:none;padding:0 16px;top:0;z-index:50;font-family:ui-sans-serif,system-ui,sans-serif}
.site-unified .header-inner{width:100%;max-width:1280px;height:fit-content;min-height:64px;gap:24px;transition:background .5s,padding .5s,box-shadow .5s;border:1px solid transparent;border-radius:999px}
.site-unified .site-header[data-scrolled="true"] .header-inner{padding:10px;background:rgb(255 255 255/.6);backdrop-filter:blur(16px);border-color:rgb(229 229 229/.4);box-shadow:0 25px 50px -12px rgb(0 0 0/.05)}
.site-unified .brand-full{width:205px;height:auto}
.site-unified .desktop-nav{flex:0 1 auto;margin-inline:auto;gap:0;padding:2px;background:#f5f5f5;border-radius:999px}
.site-unified .desktop-nav>a,.site-unified .nav-dropdown>button{font-family:inherit;font-size:13px;line-height:20px;font-weight:500;letter-spacing:0;padding:8px 10px;border-radius:999px;color:#737373;white-space:nowrap}
.site-unified .desktop-nav>a:hover,.site-unified .nav-dropdown>button:hover,.site-unified .nav-dropdown>button[aria-expanded="true"]{background:white;color:#171717;box-shadow:0 1px 2px #0000000d}
.site-unified .header-actions{gap:14px;white-space:nowrap}
.site-unified .header-join{border-radius:999px;background:#171717;color:#fff;font-size:13px;font-weight:500;padding:10px 18px;min-height:40px}
.site-unified .header-login{font-size:13px;font-weight:500}
.site-unified .hero01,.site-unified .hero01-brands{font-family:ui-sans-serif,system-ui,sans-serif;color:oklch(.145 0 0)}
.hero01{position:relative;isolation:isolate}
.hero01-wash{position:relative;padding-top:80px;padding-bottom:40px}
.hero01-wash:before{content:"";position:absolute;width:100%;height:100%;background:linear-gradient(to right,#e0f2fe,#fff,#fef3c7);border-radius:9999px;top:96px;filter:blur(64px);z-index:-1;pointer-events:none}
.hero01-container{max-width:1280px;margin:auto;padding:0 32px;position:relative;z-index:1}
.hero01-content{display:flex;flex-direction:column;max-width:1024px;margin:auto;gap:32px}
.hero01-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero01-copy h1{font-family:inherit;font-size:96px;font-weight:500;line-height:96px;letter-spacing:normal;margin:0;animation:hero01-in 1s ease-in-out both}
.hero01-copy h1 span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.025em}
.hero01-copy p{font-family:inherit;font-size:16px;font-weight:400;line-height:24px;max-width:672px;color:oklch(.556 0 0);margin:0;animation:hero01-in 1s .1s ease-in-out both}
.hero01-actions{display:flex;width:100%;align-items:center;justify-content:center;gap:32px;animation:hero01-in 1s .2s ease-in-out both}
.hero01-button{display:inline-flex;align-items:center;justify-content:center;width:fit-content;min-height:48px;padding:0 24px;background:#171717;color:#fff;border-radius:999px;font-size:14px;font-weight:500;line-height:20px;text-decoration:none;transition:background .3s,transform .3s}
.hero01-button:hover{background:#303030;transform:translateY(-2px)}
.hero01-history{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:oklch(.556 0 0);font-size:14px;font-weight:400;line-height:20px}
.hero01-history img{width:144px;height:auto;object-fit:contain}
.hero01-brands{padding:40px 0;position:relative;overflow:hidden}
.hero01-brands-inner{max-width:1152px;margin:auto;display:flex;flex-direction:column;gap:12px}
.hero01-caption{display:flex;align-items:center;justify-content:center;gap:16px;text-align:center;padding:16px 0}
.hero01-caption p{margin:0;padding:0 8px;color:oklch(.556 0 0);font-size:14px;font-weight:400;line-height:20px}
.hero01-caption>span{height:2px;width:160px;background:linear-gradient(to left,#737373,#fff);opacity:.2}
.hero01-caption>span:last-child{transform:rotate(180deg)}
.hero01-marquee{display:flex;gap:0;padding:16px 0;overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.hero01-track{display:flex;flex-shrink:0;align-items:center;animation:hero01-marquee 20s linear infinite}
.hero01-track a{width:144px;margin-right:80px;text-decoration:none;color:#171717;font-size:20px;line-height:32px;font-weight:600;white-space:nowrap;text-align:center;letter-spacing:-.6px}
.hero01-marquee:hover .hero01-track,.hero01-marquee:focus-within .hero01-track{animation-play-state:paused}
.hero01 a:focus-visible,.hero01-brands a:focus-visible{outline:2px solid #171717;outline-offset:5px}
@keyframes hero01-in{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero01-marquee{to{transform:translateX(-100%)}}
@media(max-width:1270px) and (min-width:1181px){.site-unified .header-inner{gap:12px}.site-unified .brand-full{width:170px}.site-unified .desktop-nav>a,.site-unified .nav-dropdown>button{padding-inline:7px;font-size:12px}.site-unified .header-actions{gap:10px}}
@media(max-width:1023px){.hero01-copy h1{font-size:72px;line-height:80px}.hero01-track a{margin-right:24px}}
@media(max-width:767px){.hero01-wash{padding-top:0;padding-bottom:24px}.hero01-container{padding:0 24px}.hero01-copy{gap:16px}.hero01-copy h1{font-size:48px;line-height:56px}.hero01-actions{flex-direction:column;gap:32px}.hero01-brands{padding:24px 0}.hero01-caption{padding:12px 0}.hero01-caption>span{display:none}.hero01-caption p{padding:0 40px}.site-unified .header-inner{min-height:64px}.site-unified .hero01-wash:before{top:96px}}
@media(prefers-reduced-motion:reduce){.hero01-copy h1,.hero01-copy p,.hero01-actions,.hero01-track{animation:none}.hero01-marquee{overflow-x:auto}.hero01-track[aria-hidden="true"]{display:none}.hero01-button{transition:none}}

/* Bring the mobile brand closer to the menu while keeping its touch target. */
@media(max-width:767px){.site-unified .header-inner>.brand{margin-left:-10px}}

/* Mobile navigation follows the same neutral, rounded Hero 01 language. */
.site-unified .mobile-menu-backdrop{background:rgb(23 23 23/.25);backdrop-filter:blur(8px)}
.site-unified .mobile-menu-panel{width:min(100%,420px);height:100dvh;max-height:100dvh;overflow:hidden;background:linear-gradient(135deg,#f3faff 0%,#fff 35%,#fff 75%,#fffbeb 100%);color:#171717;font-family:ui-sans-serif,system-ui,sans-serif;box-shadow:20px 0 60px #00000014}
.site-unified .mobile-menu-heading{flex:none;border:0;padding:24px;gap:20px}
.site-unified .mobile-menu-close{border:1px solid #e5e5e5;border-radius:50%;background:#fff;flex:none;width:44px;height:44px;transition:background .2s}
.site-unified .mobile-menu-close:hover{background:#f5f5f5}
.site-unified .mobile-menu-close span{background:#171717;height:1.5px}
.site-unified .mobile-nav{padding:8px 24px 24px;gap:4px;scrollbar-width:thin;scrollbar-color:#d4d4d4 transparent}
.site-unified .mobile-nav-link,.site-unified .mobile-nav-trigger{flex-shrink:0;border:0;border-radius:999px;min-height:56px;padding:14px 18px;color:#525252;font-family:inherit;font-size:19px;line-height:28px;font-weight:500;letter-spacing:-.025em;transition:background .2s,color .2s}
.site-unified .mobile-nav-group{flex:none}
.site-unified .mobile-nav-link:hover,.site-unified .mobile-nav-link[aria-current="page"],.site-unified .mobile-nav-trigger:hover,.site-unified .mobile-nav-trigger[data-active="true"],.site-unified .mobile-nav-trigger[aria-expanded="true"]{background:#f3f3f3;color:#171717;border:0;padding-inline:18px}
.site-unified .mobile-nav-chevron{width:8px;height:8px;border-width:1.5px;margin-right:4px}
.site-unified .mobile-nav-submenu{background:rgb(245 245 245/.65);border:0;border-radius:20px;margin:6px 0 10px;padding:6px 12px}
.site-unified .mobile-nav-submenu a{font-family:inherit;font-size:15px;font-weight:400;line-height:22px;color:#626262;min-height:46px;padding:12px 16px;border:0;border-radius:999px}
.site-unified .mobile-nav-submenu a:hover,.site-unified .mobile-nav-submenu a[aria-current="page"]{background:#fff;color:#171717}
.site-unified .mobile-menu-actions{background:rgb(255 255 255/.92);border-top:1px solid #ededed;padding:20px 24px max(24px,env(safe-area-inset-bottom));box-shadow:none}
.site-unified .mobile-menu-join{background:#171717;border-radius:999px;color:#fff;min-height:48px;font-family:inherit;font-weight:500;font-size:14px}
.site-unified .mobile-menu-join:hover{background:#303030}
.site-unified .mobile-menu-access{gap:12px;margin-top:12px}
.site-unified .mobile-menu-access a{border:1px solid #e5e5e5;border-radius:999px;background:#fff;color:#525252;min-height:44px;font-family:inherit;font-size:13px;font-weight:500}
.site-unified .mobile-menu-access a:hover{background:#f5f5f5;color:#171717}
.site-unified .mobile-menu-panel :is(a,button):focus-visible{outline:2px solid #171717;outline-offset:2px}
@media(max-width:360px){.site-unified .mobile-menu-heading{padding:20px}.site-unified .mobile-nav{padding:4px 16px 20px}.site-unified .mobile-menu-actions{padding:16px 20px max(20px,env(safe-area-inset-bottom))}.site-unified .mobile-nav-link,.site-unified .mobile-nav-trigger{font-size:18px;min-height:52px}}
@media(max-height:650px){.site-unified .mobile-menu-heading{padding-block:14px}.site-unified .mobile-menu-actions{padding-top:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}.site-unified .mobile-menu-access{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.site-unified .mobile-menu-backdrop,.site-unified .mobile-menu-panel{animation:none}.site-unified .mobile-nav-link,.site-unified .mobile-nav-trigger,.site-unified .mobile-menu-close{transition:none}}

/* Give the desktop brand breathing room inside the scrolled header capsule. */
@media(min-width:1181px){
 .site-unified .site-header[data-scrolled="true"] .header-inner{padding:12px 24px;gap:20px}
 .site-unified .site-header[data-scrolled="true"] .brand-full{width:190px}
}
@media(min-width:1181px) and (max-width:1270px){
 .site-unified .site-header[data-scrolled="true"] .header-inner{gap:12px}
 .site-unified .site-header[data-scrolled="true"] .brand-full{width:160px}
}