:root{color-scheme:dark;--cyan:#00e8ff}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#03122e;color:#fff}body{height:100vh;height:100dvh;overflow:hidden}.backdrop{position:fixed;inset:0;background:#03122e url('assets/home-background.png') center center/cover no-repeat;z-index:0}.site-header{position:fixed;top:0;left:0;right:0;z-index:10;height:clamp(70px,11vh,104px);padding:16px clamp(24px,6vw,110px);display:flex;justify-content:space-between;align-items:flex-start;gap:24px;background:transparent}.brand{display:block;flex:0 0 auto}.brand img{display:block;width:clamp(150px,16vw,250px);height:auto;max-height:66px;object-fit:contain}.main-nav{display:flex;align-items:center;gap:clamp(10px,1.8vw,28px);padding-top:5px}.nav-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:88px;min-height:37px;padding:8px 15px;text-decoration:none;font-weight:700;font-size:clamp(13px,.9vw,16px);color:#f3faff;background:rgba(3,19,50,.18);border:1px solid rgba(66,201,251,.52);border-radius:12px;cursor:pointer;font-family:inherit;transition:box-shadow .18s,border-color .18s,background .18s}.nav-link.active,.nav-link:hover,.nav-link:focus-visible{color:#69f7ff;border-color:#05e9ff;background:rgba(3,29,68,.55);box-shadow:0 0 11px rgba(0,225,255,.48)}.dropdown{position:relative}.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 7px);width:185px;padding:6px;background:rgba(3,20,53,.97);border:1px solid rgba(1,216,255,.55);border-radius:10px;box-shadow:0 8px 25px #0009}.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,.dropdown.open .dropdown-menu{display:block}.dropdown-menu a{display:block;padding:11px;color:#fff;text-decoration:none;border-radius:7px;font-size:13px}.dropdown-menu a:hover{background:#06527a}.home{position:relative;z-index:1;height:100%}.features{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(28px,7.2vh,95px);width:min(88%,1250px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.5vw,22px)}.feature{position:relative;min-width:0;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 8px 11px;background:rgba(5,31,75,.38);border:1px solid rgba(47,190,245,.65);border-radius:14px;color:white;font:700 clamp(12px,1vw,16px)/1.2 Arial,Helvetica,sans-serif;cursor:pointer;transition:background .18s,box-shadow .18s,border-color .18s,transform .18s}.feature svg{width:34px;height:34px;fill:none;stroke:#65f2ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px #00bfff88)}.feature>span:not(.tip){text-align:center;white-space:normal}.feature:hover,.feature:focus-visible{background:rgba(0,86,137,.6);border-color:#00eeff;box-shadow:0 0 17px #00eaff88;transform:translateY(-2px)}.tip{position:absolute;bottom:calc(100% + 13px);left:50%;transform:translate(-50%,8px);width:max(190px,100%);max-width:245px;padding:12px 14px;border-radius:10px;border:1px solid #1dd7fc;background:rgba(3,24,60,.97);font:400 12px/1.5 Arial,Helvetica,sans-serif;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s;box-shadow:0 8px 25px #0008}.tip b{display:block;margin-bottom:3px;color:#5df4ff}.feature:hover .tip,.feature:focus-visible .tip{opacity:1;visibility:visible;transform:translate(-50%,0)}@media(max-width:700px){.site-header{padding:13px 16px;height:70px}.brand img{width:130px}.main-nav{gap:5px}.nav-link{min-width:0;padding:7px;font-size:11px;min-height:32px}.features{width:96%;gap:5px;bottom:15px}.feature{min-height:72px;padding:7px 2px;font-size:9px;gap:5px}.feature svg{width:25px;height:25px}.tip{width:155px;font-size:10px}.backdrop{background-position:53% center}}@media(max-height:650px){.features{bottom:18px}.feature{min-height:74px}.feature svg{width:26px;height:26px}}

/* Only the selected section glows. Opening Apps temporarily deselects Home. */
.site-header:has(.dropdown:hover) .main-nav > .nav-link.active,
.site-header:has(.dropdown:focus-within) .main-nav > .nav-link.active,
.site-header:has(.dropdown.open) .main-nav > .nav-link.active {color:#f3faff;border-color:rgba(66,201,251,.52);background:rgba(3,19,50,.18);box-shadow:none}
.dropdown:hover > .dropdown-trigger,.dropdown:focus-within > .dropdown-trigger,.dropdown.open > .dropdown-trigger {color:#69f7ff;border-color:#05e9ff;background:rgba(3,29,68,.55);box-shadow:0 0 11px rgba(0,225,255,.48)}

/* Navigation hover exclusivity: Home loses its selected glow while Contact is hovered/focused. */
.site-header:has(.main-nav > a.nav-link:last-child:hover) .main-nav > a.nav-link:first-child.active,
.site-header:has(.main-nav > a.nav-link:last-child:focus-visible) .main-nav > a.nav-link:first-child.active {
 color:#f3faff;
 border-color:rgba(66,201,251,.52);
 background:rgba(3,19,50,.18);
 box-shadow:none;
}

/* Site-wide: only one navigation item glows while hovering another. */
.site-header:has(.main-nav > .nav-link:hover) .nav-link.active:not(:hover),
.site-header:has(.main-nav > .nav-link:focus-visible) .nav-link.active:not(:focus-visible),
.site-header:has(.dropdown:hover) .nav-link.active:not(:hover),
.site-header:has(.dropdown:focus-within) .nav-link.active:not(:focus-visible){color:#f3faff;border-color:rgba(66,201,251,.52);background:rgba(3,19,50,.18);box-shadow:none}