/* critical path — nav + shell; full styles.css loads async */
/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent !important;
}

:root {
    /* multiplies font-size everywhere; lowered on mobile below */
    --font-scale: 1;
}

@media (max-width: 768px) {
    :root {
        --font-scale: 0.9;
    }
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

html {
    background: #000000 !important;
}

body {
    font-family: 'Orbitron', sans-serif;
    line-height: 1.6;
    color: #e7e1e5;
    background: #000000 !important;
    min-height: 100vh;
    position: relative;
    text-align: center;
}

/* home is transparent so the fixed backdrop video can show through */
body.home {
    background: transparent !important;
}

/* Space Age Security Clearance Theme - Main Content */
.site-content {
    background: #000000 !important;
    position: relative;
    min-height: 100vh;
}

.site-content::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}

/* Navigation Menu */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 26, 46, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 0, 0.2);
    padding: 0;
    transition: all 0.3s ease;
}


.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    min-height: auto;
    flex-wrap: wrap;
}

.nav-logo {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.nav-logo-img {
    height: 200px;
    width: auto;
    transition: all 0.3s ease;
}

.nav-logo-img:hover {
    transform: scale(1.05);
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nav-link {
    color: #e7e1e5;
    text-decoration: none;
    font-weight: 600;
    font-size: calc(0.75rem * var(--font-scale));
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 0, 0.2);
    white-space: nowrap;
}

.nav-link i {
    font-size: calc(1rem * var(--font-scale));
    transition: all 0.2s ease;
}

.nav-link span {
    font-weight: 600;
    letter-spacing: 0.5px;
}

.nav-link:hover {
    color: #ffff00;
    background: rgba(255, 255, 0, 0.1);
    border-color: rgba(255, 255, 0, 0.4);
}

.nav-link:hover {
    color: #ffff00;
    background: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.3);
    transform: translateY(-2px);
}

.nav-link:hover i {
    transform: scale(1.1);
    color: #ffff00;
}

.nav-link.active {
    color: #ffff00;
    background: linear-gradient(135deg, rgba(255, 255, 0, 0.2), rgba(255, 255, 0, 0.1));
    border-color: rgba(255, 255, 0, 0.4);
}

.nav-link.active i {
    color: #ffff00;
}

.nav-link.invest-link {
    background: rgba(255, 255, 255, 0.05);
    color: #e7e1e5;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link.invest-link:hover {
    color: #ffff00;
    background: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.3);
    transform: translateY(-2px);
}

.nav-link.invest-link i {
    color: #e7e1e5;
}

.nav-link.invest-link:hover i {
    color: #ffff00;
}

.nav-link.invest-link span {
    color: #e7e1e5;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 0, 0.06) !important;
    border: 1px solid rgba(255, 255, 0, 0.4);
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.nav-toggle-icon {
    display: block;
    width: 24px;
    height: 24px;
}

/* Main Content Area - Centered Layout */
.main-content {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
    transition: margin-top 0.3s ease;
    position: relative;
    z-index: 2;
    text-align: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

/* Hero Section - Space Age Styling */
.hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 0;
    overflow: hidden;
}

/* Video Background */
.hero-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.hero-video.visible {
    opacity: 1;
}

/* perf critical extras */
body{margin:0;background:#0f0f1e;color:#fff;}
body.home{background:transparent!important;}
.nav-ico,.nav-link svg{width:1em;height:1em;display:inline-block;vertical-align:-0.1em;fill:currentColor;flex-shrink:0;}
.nav-link .nav-ico{width:0.95em;height:0.95em;}
.get-app-bar{position:relative;z-index:4;width:min(920px,100%);margin:1.75rem auto 0;padding:0 1rem;text-align:center;}
.get-app-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.get-app-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1.15rem 1.35rem;border-radius:12px;text-decoration:none;text-align:left;border:2px solid #ffff00;background:rgba(0,0,0,.72)!important;color:#fff;}
.get-app-btn-ios{border-color:rgba(102,126,234,.85);}
.get-app-btn-soon{opacity:.72;cursor:default;pointer-events:none;}
.get-app-os{font-size: calc(.75rem * var(--font-scale));letter-spacing:.14em;text-transform:uppercase;color:#ffff00;}
.get-app-title{font-size: calc(1.35rem * var(--font-scale));font-weight:700;}
.get-app-meta,.get-app-note{color:rgba(255,255,255,.75);font-size: calc(.9rem * var(--font-scale));}
.get-app-count{color:#ffff00;font-size: calc(.78rem * var(--font-scale));text-transform:uppercase;}
@media (max-width:700px){.get-app-actions{grid-template-columns:1fr;}}

/* leaflet measures its container the instant it's constructed, so giving
   dlmap-canvas its real height here (not only in the deferred styles.css)
   means it never has to init against a 0-height box while the async
   stylesheet is still loading. see styles.css for the justify-items fix —
   the actual bug that made the map render fully black on desktop. */
.download-map-section{max-width:1100px;margin:3rem auto 0;padding:0 1rem;}
.dlmap-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.5rem;align-items:start;justify-items:stretch;}
.dlmap-canvas{height:360px;border-radius:14px;overflow:hidden;background:#04040e;}
@media (max-width:800px){.dlmap-grid{grid-template-columns:1fr;}.dlmap-canvas{height:280px;}}

/* flush mobile lists so they don't eat the left edge; apt/threat intel opt out */
@media (max-width:768px){
    body:not(.threat-intel) ul,
    body:not(.threat-intel) ol{padding-left:0;margin-left:0;list-style-position:inside;}
    body:not(.threat-intel) ul ul,
    body:not(.threat-intel) ol ol,
    body:not(.threat-intel) ul ol,
    body:not(.threat-intel) ol ul{padding-left:.85rem;}
}