@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto:wght@300;400;700&display=swap');

:root {
    --dark-bg: #0d0f11;
    --text-color: #f0f0f0;
    --accent-color: #00ff88;
    --secondary-accent: #ffffff;
    --gray-text: #8e9498;
    --navbar-bg: rgba(0,0,0,0.9);
    --card-border-color: rgba(255,255,255,0.2);
    --hazard-yellow: #ffcc00;
}

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: var(--dark-bg);
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Navbar --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: var(--navbar-bg);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--secondary-accent);
    text-decoration: none;
    margin-right: 30px;
    letter-spacing: 2px;
}

.navbar-left nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

.navbar-left nav ul li a {
    color: var(--gray-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.navbar-left nav ul li a:hover {
    color: var(--accent-color);
}

/* Social icons */
.navbar-right, .mobile-socials {
    display: flex;
    align-items: center;
    gap: 25px;
}

.icon-link {
    display: flex;
    align-items: center;
    color: var(--gray-text);
    text-decoration: none;
    font-size: 0.85em;
    letter-spacing: 1px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.icon-link img {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.6));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.icon-link:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.icon-link:hover img {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(0, 255, 136, 1));
}

/* --- Hamburger Menu --- */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--secondary-accent);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.navbar-left nav { display: flex; }
.mobile-socials { display: none; }

@media (max-width: 768px) {
    .hamburger { display: flex; }
    .navbar-left nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--navbar-bg);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        flex-direction: column;
    }
    .navbar-left nav.active { max-height: 500px; }
    .navbar-left nav ul { flex-direction: column; gap: 15px; padding: 15px; }
    .navbar-left nav ul li { margin: 0; }
    .mobile-socials { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    .navbar-right { display: none; }
}

/* Make mobile social icon text visible */
.mobile-socials .icon-link span {
    display: inline;
}

/* --- Hero Section --- */
.hero-section { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
#bg-video { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,15,17,0.9) 0%, rgba(13,15,17,0.4) 50%, rgba(13,15,17,0.1) 100%); z-index:1; }
.hero-content { position:relative; z-index:2; }
.large-brand-name { font-family:'Oswald',sans-serif; font-size:7em; font-weight:700; color:var(--secondary-accent); text-shadow:0 0 15px rgba(0,255,136,0.5); }
.tagline { font-size:1.5em; color:var(--gray-text); margin-top:20px; }

/* Mobile override */
@media (max-width: 768px) {
    .large-brand-name { font-size: 5em; }
}

/* --- Content Cards --- */
.full-width-banner { width:100%; background-color:var(--accent-color); color:var(--dark-bg); padding:15px 40px; border-top:2px solid var(--secondary-accent); border-bottom:2px solid var(--secondary-accent); text-align:center; }
.banner-content p { font-family:'Oswald',sans-serif; font-weight:700; letter-spacing:3px; }
.section-protocol-title { text-align:center; font-family:'Oswald',sans-serif; font-size:2.5em; color:var(--secondary-accent); margin:50px 0 30px 0; letter-spacing:2px; }
.large-content-card { background-color: rgba(0,0,0,0.8); border:1px solid var(--card-border-color); border-left:15px solid transparent; margin:0 auto 40px auto; padding:40px; max-width:900px; position:relative; overflow:hidden; box-shadow:0 0 20px rgba(0,0,0,0.6); transition:border-color 0.3s ease, box-shadow 0.3s ease; }
.large-content-card:hover { border-color:var(--accent-color); box-shadow:0 0 25px rgba(0,255,136,0.4); }
.large-content-card::before { content:""; position:absolute; top:0; left:0; width:15px; height:100%; background: repeating-linear-gradient(45deg, var(--hazard-yellow), var(--hazard-yellow) 8px, transparent 8px, transparent 16px); }

.card-header-icon { display:flex; align-items:center; gap:20px; margin-bottom:20px; }
.card-large-icon { width:70px; height:70px; filter:drop-shadow(0 0 5px rgba(0,255,136,0.5)); }
.card-header-icon h2 { font-family:'Oswald',sans-serif; font-size:2em; color:var(--secondary-accent); text-transform:uppercase; letter-spacing:2px; }
.card-tagline { font-family:'Oswald',sans-serif; color:var(--accent-color); text-transform:uppercase; margin-bottom:10px; }
.card-main-text { line-height:1.7; margin-bottom:15px; }
.card-sub-text { color:var(--gray-text); margin-bottom:20px; }
.read-more { display:inline-block; padding:10px 18px; border:1px solid var(--accent-color); background-color: rgba(0,255,136,0.1); color:var(--secondary-accent); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:1px; transition:all 0.3s ease; }
.read-more:hover { background-color:var(--accent-color); color:var(--dark-bg); box-shadow:0 0 10px var(--accent-color); }

/* --- Footer --- */
.section-footer-cta { text-align:center; max-width:900px; margin:60px auto; border-top:2px solid var(--accent-color); padding-top:40px; }
.footer-links { display:flex; justify-content:center; gap:25px; }
.footer-links .social-icon img { width:48px; height:48px; filter: drop-shadow(0 0 6px rgba(0,255,136,0.7)); transition: transform 0.3s ease, filter 0.3s ease; }
.footer-links .social-icon:hover img { transform:scale(1.15); filter: drop-shadow(0 0 12px rgba(0,255,136,1)); }

/* --- Responsive --- */
@media(max-width:992px){ .large-content-card{ padding:30px; } }
@media(max-width:768px){ .large-content-card{ padding:25px; } }
@media(max-width:576px){
    .card-header-icon{ flex-direction:column; align-items:flex-start; }
    .card-large-icon{ margin-bottom:10px; }
    /* removed icon-link span display:none so text shows on mobile */
}