
.homepage-header{position:absolute;inset:0 0 auto;z-index:10;border:0;background:transparent;backdrop-filter:none;color:#020c21}
.homepage-header .inner{width:min(1400px,90%);margin:auto}
.homepage-header .header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.homepage-header .logo{display:flex;align-items:center;gap:9px;font-size:24px;letter-spacing:-.05em;text-decoration:none;font-weight:530;white-space:nowrap}
.homepage-header .logo-mark{display:block;width:29px;height:29px;border-radius:50%;background:repeating-radial-gradient(ellipse at 30% 70%,#18314e 0 1px,transparent 2px 4px);border:1px solid #213752}
.homepage-header .sub-nav{display:flex;align-items:center;gap:28px;font-size:14px;line-height:1.5}
.homepage-header .sub-nav a{text-decoration:none;color:#4d5b77}
.homepage-header .sub-nav a:hover{color:#020c21}
.homepage-header .action{position:relative;width:230px;height:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:flex-start;gap:0;border-radius:999px;background:#f7faff!important;color:#0f1b31!important;border:1px solid #d7e1ee!important;padding:4px 56px 4px 24px;font-size:14px;line-height:1.5;white-space:nowrap;transition:padding .5s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.homepage-header .action .arrow{position:absolute;right:4px;left:auto;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#0f1b31!important;color:#fff!important}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.homepage-header .action:hover,.homepage-header .action:focus-visible{padding-left:68px;padding-right:24px;box-shadow:none!important}.homepage-header .action:hover .arrow,.homepage-header .action:focus-visible .arrow{right:calc(100% - 44px)}.homepage-header .action:hover .ui-arrow[data-direction="up-right"],.homepage-header .action:focus-visible .ui-arrow[data-direction="up-right"]{transform:rotate(45deg)}}
.homepage-header .mobile-nav{display:none}
.homepage-header a:focus-visible,.homepage-header button:focus-visible,.homepage-header summary:focus-visible{outline:2px solid #4a78b0;outline-offset:5px}
@media(max-width:900px){.homepage-header .sub-nav{gap:17px}.homepage-header .header-row{gap:15px}.homepage-header .header-row>.action{display:none}}
@media(max-width:700px){.homepage-header .inner{width:calc(100% - 40px)}.homepage-header .header-row{padding:20px 0}.homepage-header .sub-nav{display:none}.homepage-header .mobile-nav{display:block}.homepage-header .mobile-nav summary{cursor:pointer;list-style:none;border:1px solid #d7e1ee;border-radius:999px;padding:10px 18px;font-size:14px;line-height:1.5}.homepage-header summary::-webkit-details-marker{display:none}.homepage-header .mobile-nav nav{position:absolute;left:20px;right:20px;top:78px;padding:20px;background:#f6f9fd;border:1px solid #fff;border-radius:22px;box-shadow:0 20px 50px #020c2120;display:grid;gap:18px;font-size:16px;line-height:1.5;max-height:70vh;overflow:auto;overscroll-behavior:contain}.homepage-header .mobile-nav:not([open]) nav{display:none}.homepage-header .mobile-nav a{text-decoration:none}.homepage-header .mobile-nav a:hover{color:#4a78b0}}
@media(max-aspect-ratio:87/80),(max-width:899px),(max-height:639px){
 .card{height:auto;min-height:100vh;min-height:100dvh}
 .stack{position:relative;inset:auto;min-height:inherit;gap:16px}
 .homepage-header{position:relative;inset:auto;flex:none;width:100%}
 .homepage-header .inner{width:100%}
 .homepage-header .header-row{padding:0;min-height:42px}
 .homepage-header .mobile-nav nav{left:0;right:0;top:calc(100% + 12px)}
}

/* KLYROO GLASS BRAND */
.logo .brand-logo{display:block;width:180px;height:auto;object-fit:contain}.logo:has(.brand-logo){gap:0;font-size:0;line-height:0}.sub-footer .brand-logo{width:150px}.footer-brand .brand-logo{display:block;width:156px;height:auto}.footer-brand{font-size:0!important;line-height:0}.homepage-header .brand-logo{width:180px}.homepage-header .logo{gap:0}
/* END KLYROO GLASS BRAND */
@media(max-width:700px){.logo .brand-logo{width:156px}.sub-footer .brand-logo{width:142px}.footer-brand .brand-logo{width:140px}.homepage-header .brand-logo{width:156px}}
