/* =========================================
   AstraOS Official Website
   Premium Dark Theme
========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#050816;

    color:#ffffff;

    overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#0b1120;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

/* Loader */

#loader{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-logo{

    font-size:45px;

    font-weight:700;

    color:#3b82f6;

    margin-bottom:25px;

}

.loader-bar{

    width:250px;

    height:6px;

    background:#222;

    border-radius:20px;

    overflow:hidden;

}

.loader-bar span{

    display:block;

    height:100%;

    width:0;

    background:#3b82f6;

    animation:loading 2s linear forwards;

}

@keyframes loading{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

/* Progress Bar */

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#3b82f6;

    z-index:9999;

}

/* Navbar */

header{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    background:rgba(5,8,22,.85);

    backdrop-filter:blur(15px);

}

.navbar{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    font-size:28px;

    color:#3b82f6;

    font-weight:700;

}

.nav-links{

    display:flex;

    list-style:none;

    gap:30px;

}

.nav-links a{

    text-decoration:none;

    color:white;

    transition:.3s;

}

.nav-links a:hover{

    color:#3b82f6;

}

.github-btn{

    text-decoration:none;

    background:#2563eb;

    color:white;

    padding:12px 22px;

    border-radius:10px;

    transition:.3s;

}

.github-btn:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}
/* =========================================
   HERO SECTION
========================================= */

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 10% 80px;

    background:
    radial-gradient(circle at top,#1e3a8a22,transparent 60%),
    #050816;

}

.hero-content{

    max-width:850px;

}

.hero h1{

    font-size:65px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:25px;

}

.hero span{

    color:#3b82f6;

}

.hero p{

    color:#cbd5e1;

    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* Buttons */

.primary-btn{

    display:inline-block;

    padding:15px 35px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 0 25px #2563eb;

}

.secondary-btn{

    display:inline-block;

    padding:15px 35px;

    border:2px solid #2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:12px;

    transition:.35s;

}

.secondary-btn:hover{

    background:#2563eb;

}

/* =========================================
   SECTION TITLE
========================================= */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:42px;

    color:#3b82f6;

    margin-bottom:15px;

}

.section-title p{

    color:#94a3b8;

    font-size:18px;

}

/* =========================================
   ABOUT
========================================= */

.about{

    padding:100px 10%;

    text-align:center;

}

.about h2{

    color:#3b82f6;

    font-size:42px;

    margin-bottom:25px;

}

.about p{

    max-width:900px;

    margin:auto;

    line-height:2;

    color:#cbd5e1;

    font-size:18px;

}

/* =========================================
   FEATURES
========================================= */

.features{

    padding:100px 8%;

}

.feature-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.feature-card{

    background:#0f172a;

    border:1px solid rgba(255,255,255,.05);

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:0 0 30px rgba(37,99,235,.35);

}

.feature-card i{

    font-size:45px;

    color:#3b82f6;

    margin-bottom:20px;

}

.feature-card h3{

    font-size:24px;

    margin-bottom:15px;

}

.feature-card p{

    color:#cbd5e1;

    line-height:1.8;

}

/* =========================================
   TEAM SECTION
========================================= */

.team{

    padding:100px 8%;

    background:#08101f;

}

.team-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.team-card{

    background:#0f172a;

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.4s;

    border:1px solid rgba(255,255,255,.06);

}

.team-card:hover{

    transform:translateY(-10px);

    box-shadow:0 0 30px rgba(37,99,235,.35);

}

.team-card img{

    width:130px;

    height:130px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #2563eb;

    margin-bottom:20px;

}

.team-card h3{

    font-size:24px;

    margin-bottom:10px;

}

.team-card span{

    display:block;

    color:#3b82f6;

    margin-bottom:15px;

    font-weight:600;

}

.team-card p{

    color:#cbd5e1;

    line-height:1.7;

    margin-bottom:20px;

}

.social-links{

    display:flex;

    justify-content:center;

    gap:18px;

}

.social-links a{

    color:white;

    font-size:22px;

    transition:.3s;

}

.social-links a:hover{

    color:#3b82f6;

}

.social-links .social-placeholder{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#64748b;
    font-size:inherit;
    cursor:default;
}

.join-btn{

    display:inline-block;

    margin-top:15px;

    padding:12px 28px;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    transition:.3s;

}

.join-btn:hover{

    background:#1d4ed8;

}

/* =========================================
   ROADMAP
========================================= */

.roadmap{

    padding:100px 8%;

}

.roadmap-container{

    max-width:1000px;

    margin:auto;

}

.roadmap-item{

    display:flex;

    align-items:flex-start;

    gap:25px;

    margin-bottom:45px;

}

.roadmap-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

}

.roadmap-content{

    background:#0f172a;

    padding:25px;

    border-radius:15px;

    width:100%;

}

.roadmap-content h3{

    margin-bottom:10px;

}

.roadmap-content p{

    color:#cbd5e1;

    line-height:1.8;

}

/* =========================================
   PROJECT STATS
========================================= */

.stats{

    padding:100px 8%;

    background:#08101f;

}

.stats-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

}

.stat-card{

    background:#0f172a;

    text-align:center;

    padding:40px;

    border-radius:18px;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:0 0 25px rgba(37,99,235,.35);

}

.stat-card i{

    font-size:45px;

    color:#3b82f6;

    margin-bottom:20px;

}

.stat-card h2{

    font-size:40px;

    margin-bottom:10px;

}

.stat-card p{

    color:#cbd5e1;

}

/* =========================================
   WHY ASTRAOS
========================================= */

.why-astraos{

    padding:100px 8%;

}

/* =========================================
   CONTACT SECTION
========================================= */

.contact{

    padding:100px 8%;

    background:#050816;

}

.contact-container{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:50px;

    align-items:start;

}

.contact-info h3{

    font-size:30px;

    margin-bottom:20px;

    color:#3b82f6;

}

.contact-info p{

    color:#cbd5e1;

    line-height:1.8;

    margin-bottom:30px;

}

.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

    color:#fff;

}

.contact-item i{

    color:#3b82f6;

    font-size:22px;

}

.contact-item a{

    color:#fff;

    text-decoration:none;

}

.contact-item a:hover{

    color:#3b82f6;

}

/* Contact Form */

.contact-form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.contact-form input,

.contact-form textarea{

    background:#0f172a;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    padding:16px;

    border-radius:10px;

    outline:none;

    font-size:16px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border:1px solid #2563eb;

}

.contact-form button{

    background:#2563eb;

    color:#fff;

    border:none;

    padding:16px;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

.contact-form button:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}

/* =========================================
   FOOTER
========================================= */

footer{

    background:#08101f;

    padding:50px 8%;

    text-align:center;

}

.footer-content h2{

    color:#3b82f6;

    font-size:32px;

    margin-bottom:10px;

}

.footer-content p{

    color:#cbd5e1;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:25px;

    margin:25px 0;

}

.footer-social a{

    color:#fff;

    font-size:26px;

    transition:.3s;

}

.footer-social a:hover{

    color:#3b82f6;

    transform:translateY(-5px);

}

.copyright{

    font-size:14px;

    color:#94a3b8;

}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

.hero h1{

font-size:48px;

}

.nav-links{

display:none;

}

}

@media(max-width:768px){

.hero{

padding:140px 8% 80px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.section-title h2{

font-size:34px;

}

.contact-container{

grid-template-columns:1fr;

}

.roadmap-item{

flex-direction:column;

}

.team-card img{

width:110px;

height:110px;

}

}

@media(max-width:480px){

.hero h1{

font-size:30px;

}

.primary-btn,

.secondary-btn{

width:100%;

text-align:center;

}

.logo{

font-size:22px;

}

.github-btn{

padding:10px 18px;

}

}

/* =========================================
   SIMPLE ANIMATIONS
========================================= */

.feature-card,

.team-card,

.stat-card,

.roadmap-content{

transition:.35s ease;

}

.feature-card:hover,

.team-card:hover,

.stat-card:hover{

transform:translateY(-10px);

}

.hero h1{

animation:fadeDown 1s ease;

}

.hero p{

animation:fadeUp 1.2s ease;

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* =========================================
   ABOUT PAGE
========================================= */

.about-hero{

    min-height:60vh;

    padding-top:140px;

}

.architecture,
.technologies,
.timeline{

    padding:100px 8%;

}

.architecture .feature-card,
.technologies .stat-card,
.timeline .stat-card{

    min-height:260px;

}

/* =========================================
   CODE BLOCKS
========================================= */

pre{

    background:#0b1220;

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:25px;

    overflow:auto;

    margin-top:30px;

}

code{

    color:#7dd3fc;

    font-family:Consolas,monospace;

    font-size:15px;

    line-height:1.8;

}

/* =========================================
   DOCUMENTATION
========================================= */

.documentation{

    padding:100px 8%;

}

.doc-card{

    background:#0f172a;

    border-radius:18px;

    padding:30px;

    margin-bottom:30px;

    border-left:5px solid #2563eb;

}

.doc-card h3{

    color:#3b82f6;

    margin-bottom:15px;

}

.doc-card p{

    color:#cbd5e1;

    line-height:1.8;

}

/* =========================================
   TABLES
========================================= */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:30px;

}

table th{

    background:#2563eb;

    color:white;

    padding:15px;

}

table td{

    padding:15px;

    border:1px solid rgba(255,255,255,.08);

}

table tr{

    background:#0f172a;

}

/* =========================================
   ALERT BOXES
========================================= */

.alert{

    padding:18px 25px;

    border-left:5px solid #2563eb;

    background:#111827;

    border-radius:10px;

    margin:25px 0;

}

.alert strong{

    color:#60a5fa;

}
/* =========================================
   PREMIUM EFFECTS
========================================= */

/* Gradient Text */

.hero span,
.section-title h2,
.logo{

    background:linear-gradient(90deg,#3b82f6,#60a5fa,#38bdf8);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* Glass Cards */

.feature-card,
.team-card,
.stat-card,
.roadmap-content,
.doc-card{

    backdrop-filter:blur(12px);

    background:rgba(15,23,42,.75);

}

/* Glow Border */

.feature-card:hover,
.team-card:hover,
.stat-card:hover,
.doc-card:hover{

    border:1px solid #3b82f6;

}

/* =========================================
   HERO BACKGROUND
========================================= */

.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(#2563eb55,transparent 70%);

    top:-250px;

    right:-250px;

    filter:blur(80px);

}

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(#38bdf855,transparent 70%);

    bottom:-220px;

    left:-220px;

    filter:blur(90px);

}

/* =========================================
   HOVER EFFECT
========================================= */

.feature-card,
.team-card,
.stat-card,
.doc-card{

    transition:.4s ease;

}

.feature-card:hover,
.team-card:hover,
.stat-card:hover,
.doc-card:hover{

    transform:translateY(-12px) scale(1.02);

}

/* =========================================
   IMAGE EFFECT
========================================= */

.team-card img{

    transition:.4s;

}

.team-card:hover img{

    transform:scale(1.08);

    box-shadow:0 0 25px #2563eb;

}

/* =========================================
   BUTTON EFFECT
========================================= */

.primary-btn,
.secondary-btn,
.github-btn{

    position:relative;

    overflow:hidden;

}

.primary-btn::before,
.secondary-btn::before,
.github-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.15);

    transform:skewX(-25deg);

    transition:.6s;

}

.primary-btn:hover::before,
.secondary-btn:hover::before,
.github-btn:hover::before{

    left:120%;

}

/* =========================================
   FOOTER
========================================= */

footer{

    border-top:1px solid rgba(255,255,255,.08);

}

/* =========================================
   ACTIVE NAVBAR LINK
========================================= */

.nav-links a.active{

    color:#3b82f6;

    font-weight:600;

}

.release-screenshot {
    width: min(92%, 1100px);
    margin: 0 auto;
    padding: 70px 0;
}

.release-screenshot figure {
    margin: 28px 0 0;
    overflow: hidden;
    border: 1px solid rgba(73, 199, 255, .35);
    border-radius: 16px;
    background: #07101f;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}

.release-screenshot img {
    display: block;
    width: 100%;
    height: auto;
}

.release-screenshot figcaption {
    padding: 12px 18px;
    color: #b8c8dc;
    font-size: .9rem;
}

/* AstraOS v0.1 release and guide panels */
.release-kicker{
    color:#7dd3fc;
    font-size:13px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:12px;
}

.roadmap-status{
    display:inline-block;
    margin-left:8px;
    padding:3px 9px;
    border:1px solid rgba(125,211,252,.35);
    border-radius:999px;
    color:#7dd3fc;
    font-size:12px;
    letter-spacing:.04em;
    vertical-align:middle;
}

.release-panel{
    max-width:1100px;
    margin:0 auto;
    padding:36px;
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(230px,.8fr);
    gap:36px;
    align-items:center;
    background:linear-gradient(135deg,rgba(37,99,235,.18),#0f172a 58%);
    border:1px solid rgba(125,211,252,.2);
    border-radius:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}

.release-panel h3{
    font-size:28px;
    margin:6px 0 14px;
}

.release-panel p,
.release-note{
    color:#cbd5e1;
    line-height:1.8;
}

.release-note{
    margin-top:18px;
    padding:14px 16px;
    border-left:3px solid #38bdf8;
    background:rgba(2,6,23,.45);
    border-radius:0 10px 10px 0;
}

.release-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.release-actions .primary-btn,
.release-actions .secondary-btn{
    text-align:center;
}

.text-link{
    color:#7dd3fc;
    text-decoration:underline;
    text-underline-offset:3px;
}

.checksum code{
    display:block;
    overflow-wrap:anywhere;
    word-break:break-all;
    line-height:1.8;
}

.guide-list{
    padding-left:24px;
    color:#cbd5e1;
    line-height:2;
    margin-bottom:20px;
}

@media(max-width:768px){
    .release-panel{
        grid-template-columns:1fr;
        padding:24px;
    }
    .release-actions{
        width:100%;
    }
    .release-actions .primary-btn,
    .release-actions .secondary-btn{
        width:100%;
    }
}

/* =========================================
   SELECTION
========================================= */

::selection{

    background:#2563eb;

    color:white;

}

/* =========================================
   INPUT PLACEHOLDER
========================================= */

::placeholder{

    color:#94a3b8;

}

/* =========================================
   SMOOTH FADE
========================================= */

section{

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* Progress Bar */

.progress{

width:100%;

height:14px;

background:#1e293b;

border-radius:20px;

overflow:hidden;

margin-top:15px;

}

.progress-bar{

height:100%;

background:linear-gradient(90deg,#2563eb,#38bdf8);

color:#fff;

font-size:11px;

font-weight:600;

display:flex;

align-items:center;

justify-content:center;

transition:width .8s ease;

}
/* Toast */

.toast{

position:fixed;
top:30px;
right:-350px;
background:#2563eb;
color:white;
padding:15px 25px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
transition:.4s;
z-index:9999;

}

.toast.show{

right:30px;

}

.toast.error{

background:#dc2626;

}

/* Ripple */

.primary-btn,
.secondary-btn,
.btn{

position:relative;
overflow:hidden;

}

.ripple{

position:absolute;
width:20px;
height:20px;
background:rgba(255,255,255,.5);
border-radius:50%;
transform:translate(-50%,-50%);
animation:ripple .6s linear;

}

@keyframes ripple{

from{

width:0;
height:0;
opacity:1;

}

to{

width:400px;
height:400px;
opacity:0;

}

}
/* Theme Button */

.theme-toggle{

position:fixed;
right:20px;
bottom:100px;
width:55px;
height:55px;
border:none;
border-radius:50%;
cursor:pointer;
font-size:22px;
background:#2563eb;
color:#fff;
z-index:9999;
box-shadow:0 10px 25px rgba(0,0,0,.3);

}

/* Back Top */

.back-top{

position:fixed;
right:20px;
bottom:30px;
width:55px;
height:55px;
border:none;
border-radius:50%;
font-size:22px;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.4s;
background:#111827;
color:#fff;
z-index:9999;

}

.back-top.show{

opacity:1;
visibility:visible;

}

/* Toast */

.toast-container{

position:fixed;
top:20px;
right:20px;
z-index:9999;

}

.toast{

background:#2563eb;
color:white;
padding:14px 20px;
margin-bottom:10px;
border-radius:10px;
opacity:0;
transform:translateX(100%);
transition:.4s;

}

.toast.show{

opacity:1;
transform:translateX(0);

}

/* Dark Mode */

.dark-mode{

background:#0f172a;
color:white;

}
/* Mobile Menu */

.menu-toggle{
display:none;
background:none;
border:none;
font-size:24px;
cursor:pointer;
color:white;
}

.nav-links.open{
display:flex;
}

/* Active Link */

.nav-links a.active{
color:#3b82f6;
font-weight:600;
}

@media(max-width:900px){

.menu-toggle{
display:block;
}

.nav-links{

display:none;
flex-direction:column;
position:absolute;
top:80px;
right:20px;
width:250px;
padding:20px;
border-radius:15px;
background:#0f172a;

}

}
.hidden{
opacity:0;
transform:translateY(60px);
transition:.8s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

.feature-card,
.team-card{
transition:.35s;
}

.hero{
transition:transform .2s linear;
}
/* =====================================================
   AstraOS v3.0 - CSS Part 4
   Premium UI Effects
===================================================== */

/* Sticky Navbar */

.navbar.sticky{
    padding:12px 0;
    transition:.35s ease;
}

/* Card Glow */

.feature-card,
.team-card,
.stat-card,
.roadmap-content{
    position:relative;
    overflow:hidden;
}

.feature-card::before,
.team-card::before,
.stat-card::before,
.roadmap-content::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        transparent,
        rgba(59,130,246,.08),
        transparent
    );
    opacity:0;
    transition:.4s;
}

.feature-card:hover::before,
.team-card:hover::before,
.stat-card:hover::before,
.roadmap-content:hover::before{
    opacity:1;
}

/* Image Hover */

.team-card img{
    transition:.4s ease;
}

.team-card:hover img{
    transform:scale(1.08) rotate(2deg);
}

/* Button Animation */

.primary-btn,
.secondary-btn,
.github-btn{
    transition:
        transform .3s,
        box-shadow .3s;
}

.primary-btn:hover,
.secondary-btn:hover,
.github-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(37,99,235,.35);
}

/* Contact Inputs */

.contact-form input,
.contact-form textarea{

    transition:
    border .3s,
    box-shadow .3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

    box-shadow:
    0 0 20px rgba(37,99,235,.2);

}

/* Scroll Reveal Classes */

.hidden{

    opacity:0;
    transform:translateY(50px);

}

.show{

    opacity:1;
    transform:translateY(0);
    transition:
    opacity .8s,
    transform .8s;

}

/* Hero Animation */

.hero-content{

    animation:
    heroFade 1s ease;

}

@keyframes heroFade{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* Footer */

footer{

border-top:1px solid rgba(255,255,255,.08);

}

/* Better Selection */

::selection{

background:#2563eb;
color:white;

}

/* Better Focus */

button:focus,
a:focus,
input:focus,
textarea:focus{

outline:none;

}

/* Smooth Images */

img{

max-width:100%;
display:block;

}

/* Better Sections */

section{

position:relative;
z-index:1;

}
/* =====================================================
   AstraOS v3.0 - CSS Part 5
   Advanced UI & Mobile Enhancements
===================================================== */

/* ==========================
   CSS VARIABLES
========================== */

:root{
    --primary:#2563eb;
    --primary-light:#3b82f6;
    --bg:#050816;
    --card:#0f172a;
    --text:#ffffff;
    --text-light:#cbd5e1;
    --radius:18px;
}

/* ==========================
   Smooth Page Transition
========================== */

body{
    animation:pageLoad .8s ease;
}

@keyframes pageLoad{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==========================
   Animated Background Glow
========================== */

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:
    radial-gradient(circle at 15% 20%,rgba(37,99,235,.08),transparent 35%),
    radial-gradient(circle at 85% 70%,rgba(59,130,246,.08),transparent 35%);
    animation:bgMove 18s linear infinite;
    z-index:-1;
}

@keyframes bgMove{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(25px,-20px);
    }
    100%{
        transform:translate(0,0);
    }
}

/* ==========================
   Hover Lift
========================== */

.feature-card,
.team-card,
.stat-card,
.doc-card{

    will-change:transform;

}

/* ==========================
   Better Links
========================== */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--primary);
    transition:.3s;

}

.nav-links a:hover::after,
.nav-links a.active::after{

    width:100%;

}

/* ==========================
   Glass Navigation
========================== */

header{

    border-bottom:
    1px solid rgba(255,255,255,.06);

}

/* ==========================
   Mobile Improvements
========================== */

@media(max-width:768px){

.hero{

padding-top:150px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

}

.feature-container,
.team-container,
.stats-container{

grid-template-columns:1fr;

}

.contact-form input,
.contact-form textarea{

font-size:15px;

}

}

/* ==========================
   Images
========================== */

img{

user-select:none;
-webkit-user-drag:none;

}

/* ==========================
   Better Button Press
========================== */

.primary-btn:active,
.secondary-btn:active,
.github-btn:active{

transform:scale(.97);

}

/* ==========================
   Card Border Animation
========================== */

.feature-card,
.team-card,
.stat-card{

border:1px solid transparent;

}

.feature-card:hover,
.team-card:hover,
.stat-card:hover{

border-color:rgba(59,130,246,.35);

}

/* ==========================
   Scrollbar Upgrade
========================== */

::-webkit-scrollbar-thumb:hover{

background:#3b82f6;

}

/* ==========================
   Disable Selection on Icons
========================== */

i{

user-select:none;

}
/* =====================================================
   AstraOS v3.0 - CSS Part 6
   Final Premium Effects
===================================================== */

/* ==========================
   Theme Variables
========================== */

:root{
    --bg:#050816;
    --bg2:#0f172a;
    --card:#111827;
    --primary:#2563eb;
    --secondary:#3b82f6;
    --text:#ffffff;
    --text2:#cbd5e1;
}

/* ==========================
   Theme Toggle Button
========================== */

.theme-toggle{

position:fixed;
right:20px;
bottom:95px;

width:55px;
height:55px;

border:none;
border-radius:50%;

background:var(--primary);

color:#fff;
font-size:22px;

cursor:pointer;

z-index:9999;

transition:.35s;

box-shadow:
0 10px 25px rgba(0,0,0,.35);

}

.theme-toggle:hover{

transform:rotate(180deg) scale(1.08);

}

/* ==========================
   Back To Top
========================== */

.back-top{

position:fixed;

right:20px;
bottom:25px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#111827;

color:#fff;

font-size:22px;

cursor:pointer;

opacity:0;
visibility:hidden;

transition:.35s;

z-index:9999;

}

.back-top.show{

opacity:1;
visibility:visible;

}

.back-top:hover{

transform:translateY(-6px);

background:var(--primary);

}

/* ==========================
   Toast
========================== */

.toast{

position:fixed;

top:25px;
right:-400px;

padding:16px 22px;

background:var(--primary);

border-radius:12px;

color:white;

font-weight:500;

transition:.45s;

box-shadow:
0 15px 35px rgba(0,0,0,.3);

z-index:99999;

}

.toast.show{

right:25px;

}

.toast.success{

background:#16a34a;

}

.toast.error{

background:#dc2626;

}

.toast.warning{

background:#f59e0b;

}

/* ==========================
   Ripple
========================== */

.ripple{

position:absolute;

border-radius:50%;

transform:translate(-50%,-50%);

background:rgba(255,255,255,.35);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

0%{

width:0;
height:0;

opacity:1;

}

100%{

width:380px;
height:380px;

opacity:0;

}

}

/* ==========================
   Cursor Glow
========================== */

.cursor-glow{

position:fixed;

width:260px;
height:260px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(

rgba(37,99,235,.18),

transparent 70%

);

filter:blur(30px);

z-index:-1;

transition:

left .08s linear,

top .08s linear;

}

/* ==========================
   Floating Animation
========================== */

.float{

animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/* ==========================
   Pulse
========================== */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,99,235,.5);

}

70%{

box-shadow:0 0 0 18px transparent;

}

100%{

box-shadow:0 0 0 0 transparent;

}

}

/* ==========================
   Loading Skeleton
========================== */

.skeleton{

background:

linear-gradient(

90deg,

#111827 25%,

#1e293b 50%,

#111827 75%

);

background-size:300%;

animation:skeleton 1.4s infinite;

}

@keyframes skeleton{

0%{

background-position:100%;

}

100%{

background-position:-100%;

}

}

/* ==========================
   Better Focus
========================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible{

outline:2px solid var(--primary);

outline-offset:4px;

}

/* ==========================
   Better Shadows
========================== */

.feature-card,
.team-card,
.stat-card,
.doc-card{

box-shadow:

0 8px 25px rgba(0,0,0,.18);

}

.feature-card:hover,
.team-card:hover,
.stat-card:hover,
.doc-card:hover{

box-shadow:

0 18px 40px rgba(37,99,235,.25);

}

/* ==========================
   Performance
========================== */

img,
button,
a{

will-change:transform;

}

/* ==========================
   Reduce Motion
========================== */

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;
transition:none!important;
scroll-behavior:auto!important;

}

}
.cursor-glow{
position:fixed;
width:20px;
height:20px;
border-radius:50%;
background:#00d9ff;
pointer-events:none;
transform:translate(-50%,-50%);
filter:blur(15px);
opacity:.6;
z-index:9999;
transition:left .08s linear, top .08s linear;
}
.secret-mode{

animation:secretGlow .8s infinite alternate;

}

@keyframes secretGlow{

from{

filter:hue-rotate(0deg);

}

to{

filter:hue-rotate(180deg);

}

}
.member-skills{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:18px 0;
}

.member-skills span{
    padding:7px 14px;
    background:rgba(59,130,246,.12);
    border:1px solid rgba(59,130,246,.35);
    border-radius:25px;
    color:#6ea8ff;
    font-size:.82rem;
    font-weight:600;
    transition:.3s;
}

.member-skills span:hover{
    background:#2563eb;
    color:#fff;
    transform:translateY(-2px);
}

/* ==========================
   Core Team Card Size
========================== */

.core-team .team-card{
    width: 560px;      /* Pehle 480px tha */
    max-width: 560px;
    min-height: 500px; /* Height kam */
    padding: 25px 30px;
}

.core-team .team-card p{
    max-width: 90%;
    margin: 15px auto;
    line-height: 1.6;
}

.core-team .member-skills{
    margin: 18px 0;
    gap: 10px;
}

.core-team .team-card img{
    width: 120px;
    height: 120px;
    margin-bottom: 18px;
}

.core-team .team-container{
    display:flex;
    justify-content:center;
    gap:40px;
    margin:30px 0;
}

.nav-logo{
    height:90px;
    width:auto;
    display:block;
}

.github-card{
    cursor:pointer;
    transition:0.3s;
}

.github-card:hover{
    transform:translateY(-8px);
}

.btn-linkedin{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2563eb;
    color: #fff;
    padding: 14px 28px;
    border-radius: 14px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    transition: 0.3s ease;
    border: 2px solid transparent;
}

.btn-linkedin i{
    font-size: 24px;
}

.btn-linkedin:hover{
    background: #1d4ed8;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37,99,235,.35);
}

.profile-page {
    min-height: 72vh;
    padding: 90px 6%;
}

.profile-card {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 36px;
    width: min(100%, 1040px);
    margin: 0 auto;
    padding: 36px;
    text-align: left;
}

.profile-card > img {
    width: 100%;
    max-width: 320px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.profile-card h1 {
    margin: 0 0 8px;
}

.profile-card h2 {
    margin: 0 0 18px;
    color: #7dd3fc;
    font-size: 1.15rem;
}

.profile-card .hero-buttons {
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .profile-card {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 24px;
    }

    .profile-card > img {
        max-width: 240px;
    }
}

/* Accessibility, privacy controls, and responsive fixes */
:root {
    color-scheme: dark;
    --astra-link: #93c5fd;
    --astra-muted: #cbd5e1;
}

a:not(.primary-btn):not(.secondary-btn):not(.github-btn):not(.btn-linkedin),
.text-link, .nav-links a:hover, .nav-links a.active,
.team-card span, .doc-card h3, .logo, .release-kicker {
    color: var(--astra-link);
}

p, li, .doc-card p, .feature-card p, .team-card p {
    color: var(--astra-muted);
}

:focus-visible {
    outline: 3px solid #7dd3fc !important;
    outline-offset: 3px;
}

button, input, textarea, select {
    font: inherit;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-legal-links {
    justify-content: center;
    margin: 18px auto;
}

.footer-legal-links a {
    border: 0;
    background: transparent;
    color: #bfdbfe;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px 8px;
}

.hero-secondary-link {
    margin-top: 16px;
}

.hero-secondary-link a {
    color: #bfdbfe;
    text-underline-offset: 4px;
}

.form-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-note {
    margin-top: 12px;
    color: #cbd5e1;
    font-size: .9rem;
}

.legal-page .doc-card {
    max-width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

.legal-page .doc-card h2 {
    margin: 26px 0 10px;
    color: #bfdbfe;
}

.legal-page .doc-card h2:first-child {
    margin-top: 0;
}

.security-lab-page pre, .feature-card pre {
    max-width: 100%;
    margin-top: 14px;
    padding: 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.not-found-page {
    min-height: 75vh;
}

@media (max-width: 900px) {
    .navbar {
        position: relative;
        width: 92%;
    }

    .navbar .social-links {
        gap: 8px;
        font-size: .9rem;
    }

    .navbar .btn-linkedin {
        padding: 9px 12px;
        font-size: .95rem;
    }

    .nav-links {
        top: calc(100% + 8px);
        right: 0;
        width: min(300px, 92vw);
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        gap: 8px;
    }

    .nav-links.open {
        display: flex;
    }
}

@media (max-width: 600px) {
    .navbar .github-btn, .navbar .btn-linkedin {
        display: none;
    }

    .footer-legal-links {
        gap: 4px;
    }

    .doc-card, .feature-card, .team-card {
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* AstraOS security-workstation home */
:root {
    --cyber-bg: #060a12;
    --cyber-panel: #0c1420;
    --cyber-panel-raised: #101d2b;
    --cyber-stroke: rgba(144, 180, 209, .16);
    --cyber-text: #eff7ff;
    --cyber-muted: #9caec1;
    --cyber-cyan: #63e6ff;
    --cyber-blue: #7395ff;
    --cyber-green: #8ae6bd;
}

body.cyber-site {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 78% 8%, rgba(31, 97, 151, .17), transparent 36rem),
        radial-gradient(ellipse at 12% 34%, rgba(62, 61, 157, .10), transparent 31rem),
        var(--cyber-bg);
    color: var(--cyber-text);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    overflow-x: clip;
}

body.cyber-site::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(105, 173, 214, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 173, 214, .025) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    animation: cyber-grid-drift 46s linear infinite;
    content: "";
    pointer-events: none;
}

@keyframes cyber-grid-drift {
    to { background-position: 62px 62px; }
}

body.cyber-site p {
    color: var(--cyber-muted);
}

.brand-accent {
    color: var(--cyber-cyan);
}

.cyber-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    padding: 14px 0;
    border-bottom: 1px solid rgba(164, 196, 223, .10);
    background: rgba(6, 10, 18, .82);
    backdrop-filter: blur(18px);
}

.cyber-nav {
    width: min(1240px, calc(100% - 56px));
    min-height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.cyber-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--cyber-text) !important;
    font: 800 15px/1 Inter, "Segoe UI", sans-serif;
    letter-spacing: .11em;
    text-decoration: none;
}

.cyber-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.cyber-nav .nav-links {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2vw, 27px);
    width: auto;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    list-style: none;
}

.cyber-nav .nav-links a {
    color: #a8b8c9;
    font: 550 12px/1.4 Inter, "Segoe UI", sans-serif;
    text-decoration: none;
    transition: color .2s ease;
}

.cyber-nav .nav-links a:hover,
.cyber-nav .nav-links a:focus-visible {
    color: var(--cyber-cyan);
}

.cyber-nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.cyber-nav .github-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #bdccda;
    font: 600 12px/1.4 Inter, sans-serif;
    text-decoration: none;
}

.cyber-nav-cta {
    padding: 11px 15px;
    border: 1px solid rgba(99, 230, 255, .35);
    border-radius: 9px;
    color: var(--cyber-cyan);
    font: 700 11px/1 Inter, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.cyber-nav-cta:hover {
    background: rgba(99, 230, 255, .09);
}

.cyber-nav .menu-toggle {
    color: var(--cyber-text);
    border: 1px solid var(--cyber-stroke);
    background: var(--cyber-panel);
}

.cyber-shell {
    width: min(1240px, calc(100% - 56px));
    margin: 0 auto;
}

.cyber-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .98fr) minmax(450px, 1.02fr);
    align-items: center;
    gap: clamp(38px, 6vw, 88px);
    min-height: 680px;
    padding: 88px 0 70px;
}

.cyber-hero::before {
    position: absolute;
    z-index: -1;
    inset: 5% -8% 10% 18%;
    background:
        linear-gradient(115deg, transparent 42%, rgba(102, 211, 242, .08) 49%, transparent 56%),
        radial-gradient(ellipse at 70% 48%, rgba(39, 104, 169, .16), transparent 68%);
    mask-image: radial-gradient(ellipse at 67% 48%, #000 10%, transparent 75%);
    content: "";
    pointer-events: none;
    animation: cyber-scan-glow 12s ease-in-out infinite alternate;
}

@keyframes cyber-scan-glow {
    from { opacity: .42; transform: translateX(-1.5%); }
    to { opacity: .9; transform: translateX(1.5%); }
}

.cyber-atmosphere {
    position: absolute;
    z-index: -1;
    top: 12%;
    right: -8%;
    width: 62%;
    height: 76%;
    pointer-events: none;
}

.cyber-atmosphere span {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(95, 220, 255, .08);
    border-radius: 50%;
    transform: rotate(-18deg) scaleY(.6);
    animation: cyber-orbit-drift 28s linear infinite;
}

.cyber-atmosphere span:nth-child(2) {
    inset: 18% 2%;
    border-color: rgba(134, 147, 255, .11);
    animation-duration: 36s;
    animation-direction: reverse;
}

.cyber-atmosphere span:nth-child(3) {
    inset: 26% 10%;
    border-style: dashed;
    animation-duration: 52s;
}

@keyframes cyber-orbit-drift {
    to { transform: rotate(342deg) scaleY(.6); }
}

.cyber-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 630px;
    animation: cyber-rise .75s cubic-bezier(.2,.7,.2,1) both;
}

.cyber-visual {
    animation: cyber-rise .9s .1s cubic-bezier(.2,.7,.2,1) both;
}

@keyframes cyber-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.cyber-kicker {
    margin: 0 0 20px;
    color: var(--cyber-cyan) !important;
    font: 750 10px/1.5 Inter, "Segoe UI", sans-serif;
    letter-spacing: .18em;
}

.status-light,
.terminal-foot .status-light {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--cyber-green);
    box-shadow: 0 0 14px rgba(138, 230, 189, .85);
    vertical-align: 1px;
}

.cyber-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--cyber-text);
    font: 760 clamp(42px, 5.2vw, 70px)/1.05 Inter, "Segoe UI", sans-serif;
    letter-spacing: -.055em;
}

.cyber-hero h1 span,
.cyber-section-heading h2 span {
    color: transparent;
    background: linear-gradient(105deg, #70a5ff 5%, #6be7f9 54%, #93ebca 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.cyber-lede {
    max-width: 560px;
    margin: 23px 0 0;
    color: #a7b9cb !important;
    font-size: 15px;
    line-height: 1.85;
}

.cyber-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 29px;
}

.cyber-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: 700 12px/1.2 Inter, "Segoe UI", sans-serif;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.cyber-button:hover {
    transform: translateY(-2px);
}

.cyber-button-primary {
    background: linear-gradient(105deg, #1764a8, #177f93);
    color: #f3f8ff;
    box-shadow: 0 4px 14px rgba(38, 142, 189, .15);
}

.cyber-button-primary:hover {
    background: linear-gradient(105deg, #2073b8, #198c9d);
    box-shadow: 0 6px 18px rgba(38, 142, 189, .2);
}

.cyber-button:focus-visible {
    outline: 2px solid #7dd3fc;
    outline-offset: 3px;
}

.cyber-button-quiet {
    border-color: var(--cyber-stroke);
    background: rgba(13, 25, 39, .75);
    color: #c8d7e6;
}

.cyber-button-quiet:hover {
    border-color: rgba(99, 230, 255, .4);
}

.cyber-release-note {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    max-width: 530px;
    margin-top: 22px;
    color: #98a9bb;
    font-size: 11px;
    line-height: 1.7;
}

.cyber-release-note strong {
    color: #dcecff;
}

.release-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: 6px 9px 0 1px;
    border-radius: 50%;
    background: #ffc46d;
}

.cyber-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 36px;
}

.cyber-metrics > div {
    min-width: 115px;
    padding: 0 20px;
    border-left: 1px solid var(--cyber-stroke);
}

.cyber-metrics > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.cyber-metrics strong,
.cyber-metrics span {
    display: block;
}

.cyber-metrics strong {
    color: #e5f3ff;
    font-size: 12px;
}

.cyber-metrics span {
    margin-top: 5px;
    color: #8397aa;
    font-size: 10px;
}

.cyber-visual {
    position: relative;
    min-width: 0;
    padding: 38px 14px 24px;
    perspective: 1400px;
}

.cyber-orbit {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 84%;
    aspect-ratio: 1.4;
    border: 1px solid rgba(93, 204, 242, .14);
    border-radius: 50%;
    transform: rotate(-22deg);
    pointer-events: none;
}

.orbit-two {
    top: 1%;
    left: 16%;
    width: 70%;
    border-color: rgba(132, 139, 255, .15);
    transform: rotate(26deg);
}

.cyber-window {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(152, 193, 224, .23);
    border-radius: 16px;
    background: rgba(8, 16, 26, .96);
    box-shadow: 0 32px 90px rgba(0, 0, 0, .48), 0 0 70px rgba(59, 176, 225, .08);
    transform: rotateY(-4deg) rotateX(1deg);
    transition: transform .5s ease, box-shadow .5s ease;
}

.cyber-window:hover {
    transform: rotateY(0) rotateX(0) translateY(-3px);
    box-shadow: 0 38px 100px rgba(0, 0, 0, .53), 0 0 82px rgba(59, 176, 225, .13);
}

.cyber-window-titlebar {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(152, 193, 224, .12);
    background: linear-gradient(90deg, #101c29, #0c1420);
}

.window-lights {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.window-lights span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fb7185;
}

.window-lights span:nth-child(2) { background: #f6bd4f; }
.window-lights span:nth-child(3) { background: #50dca8; }

.window-title {
    margin: 0 auto;
    color: #9cafc1;
    font: 10px "DejaVu Sans Mono", monospace;
}

.window-session {
    color: #708497;
    font: 750 8px Inter, sans-serif;
    letter-spacing: .13em;
}

.cyber-window-body {
    display: flex;
    min-height: 310px;
}

.cyber-rail {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 17px;
    width: 54px;
    padding: 17px 0;
    border-right: 1px solid rgba(152, 193, 224, .10);
    background: #09111b;
}

.rail-logo,
.rail-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #8398ac;
    font: 13px "DejaVu Sans Mono", monospace;
}

.rail-logo {
    margin-bottom: 11px;
    background: rgba(99, 230, 255, .11);
    color: var(--cyber-cyan);
    font-weight: 800;
}

.rail-icon.active {
    background: rgba(102, 154, 255, .18);
    color: #9cc1ff;
}

.cyber-terminal {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 19px 18px 15px;
}

.cyber-terminal::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 230, 255, .58), transparent);
    box-shadow: 0 0 16px rgba(99, 230, 255, .3);
    content: "";
    pointer-events: none;
    animation: terminal-scan 7s linear infinite;
}

@keyframes terminal-scan {
    from { transform: translateY(0); opacity: .1; }
    12% { opacity: .75; }
    to { transform: translateY(320px); opacity: 0; }
}

.terminal-head,
.terminal-foot,
.cyber-window-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #7690a6;
    font: 750 8px/1.5 Inter, sans-serif;
    letter-spacing: .12em;
}

.simulation-tag {
    padding: 4px 7px;
    border: 1px solid rgba(255, 196, 109, .26);
    border-radius: 4px;
    color: #ffcf87;
    letter-spacing: .08em;
}

.terminal-output {
    min-height: 196px;
    margin: 25px 0 10px;
    padding: 0;
    overflow: hidden;
    color: #b3d1e3;
    background: transparent;
    font: 11px/2 "DejaVu Sans Mono", Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    animation: terminal-glow 3.4s ease-in-out infinite alternate;
}

@keyframes terminal-glow {
    from { opacity: .84; }
    to { opacity: 1; }
}

.terminal-cursor {
    width: 7px;
    height: 13px;
    margin-top: -4px;
    background: var(--cyber-cyan);
    box-shadow: 0 0 12px rgba(99, 230, 255, .8);
    animation: cursor-blink 1.05s steps(2, jump-none) infinite;
}

@keyframes cursor-blink {
    50% { opacity: .12; }
}

.terminal-foot {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(152, 193, 224, .10);
    font-size: 7px;
    letter-spacing: .06em;
}

.terminal-foot .status-light {
    width: 6px;
    height: 6px;
    margin-right: 5px;
}

.cyber-window-footer {
    padding: 9px 15px;
    border-top: 1px solid rgba(152, 193, 224, .11);
    background: #0a121d;
    font-size: 8px;
    font-weight: 550;
    letter-spacing: .02em;
}

.cyber-demo-toggle {
    display: block;
    margin: 14px auto 0;
    padding: 8px 11px;
    border: 1px solid rgba(152, 193, 224, .20);
    border-radius: 7px;
    background: rgba(10, 20, 32, .75);
    color: #a6bbcc;
    cursor: pointer;
    font: 10px Inter, sans-serif;
}

.cyber-demo-toggle:hover {
    border-color: rgba(99, 230, 255, .45);
    color: var(--cyber-cyan);
}

.cyber-window.is-paused .terminal-output,
.cyber-window.is-paused .terminal-cursor,
.cyber-window.is-paused .cyber-terminal::after,
.cyber-window.is-paused ~ .cyber-demo-toggle {
    animation-play-state: paused;
}

.cyber-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 23px 26px;
    border: 1px solid var(--cyber-stroke);
    border-radius: 12px;
    background: rgba(12, 20, 32, .8);
}

.cyber-proof > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.proof-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(99, 230, 255, .20);
    border-radius: 9px;
    color: var(--cyber-cyan);
    font: 700 10px "DejaVu Sans Mono", monospace;
}

.cyber-proof p {
    margin: 0;
    font-size: 10px;
    line-height: 1.6;
}

.cyber-proof strong {
    color: #e3f1fc;
    font-size: 11px;
}

.cyber-section {
    padding: 112px 0 0;
    scroll-margin-top: 92px;
}

.cyber-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.cyber-section-heading .cyber-kicker {
    margin-bottom: 13px;
}

.cyber-section-heading h2 {
    margin: 0;
    color: var(--cyber-text);
    font: 730 clamp(32px, 4vw, 48px)/1.1 Inter, "Segoe UI", sans-serif;
    letter-spacing: -.045em;
}

.cyber-section-heading > p {
    max-width: 420px;
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.9;
}

.cyber-platform-grid,
.cyber-track-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.cyber-feature,
.cyber-track {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--cyber-stroke);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(15, 28, 43, .96), rgba(8, 15, 24, .92));
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.cyber-feature:hover,
.cyber-track:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 230, 255, .33);
    background: linear-gradient(145deg, rgba(18, 39, 56, .98), rgba(9, 17, 28, .96));
}

.cyber-feature-main {
    background:
        radial-gradient(ellipse at 84% 5%, rgba(82, 152, 255, .16), transparent 48%),
        linear-gradient(145deg, rgba(15, 28, 43, .96), rgba(8, 15, 24, .92));
}

.feature-number,
.track-index {
    color: #8398aa;
    font: 750 9px/1.4 "DejaVu Sans Mono", monospace;
    letter-spacing: .12em;
}

.feature-symbol {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 28px 0 19px;
    border: 1px solid rgba(99, 230, 255, .22);
    border-radius: 11px;
    background: rgba(99, 230, 255, .07);
    color: var(--cyber-cyan);
    font-size: 22px;
}

.cyber-feature h3,
.cyber-track h3 {
    margin: 0;
    color: var(--cyber-text);
    font: 680 17px/1.35 Inter, "Segoe UI", sans-serif;
}

.cyber-feature p,
.cyber-track p {
    margin: 12px 0 20px;
    color: var(--cyber-muted);
    font-size: 11px;
    line-height: 1.85;
}

.cyber-feature a {
    color: var(--cyber-cyan);
    font: 650 10px/1.5 Inter, sans-serif;
    text-decoration: none;
}

.cyber-feature a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cyber-toolkit-section {
    padding-top: 122px;
}

.cyber-track-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cyber-track {
    min-height: 250px;
    padding: 20px;
}

.track-glyph {
    margin: 29px 0 19px;
    color: var(--cyber-cyan);
    font: 26px/1 "DejaVu Sans Mono", monospace;
    text-shadow: 0 0 20px rgba(99, 230, 255, .34);
}

.cyber-track h3 {
    font-size: 14px;
}

.cyber-track p {
    min-height: 38px;
    margin-bottom: 17px;
    font-size: 10px;
}

.track-scope {
    display: inline-block;
    padding-top: 10px;
    border-top: 1px solid rgba(152, 193, 224, .12);
    color: #9aaec0;
    font-size: 9px;
}

.cyber-scope-note {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 16px;
    padding: 15px 17px;
    border: 1px solid rgba(138, 230, 189, .18);
    border-radius: 10px;
    background: rgba(39, 106, 83, .09);
}

.scope-shield {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(138, 230, 189, .34);
    border-radius: 8px;
    color: var(--cyber-green);
}

.cyber-scope-note p {
    flex: 1;
    margin: 0;
    font-size: 10px;
    line-height: 1.7;
}

.cyber-scope-note strong {
    color: #b8f4da;
}

.cyber-scope-note a,
.cyber-text-link {
    flex: 0 0 auto;
    color: var(--cyber-green);
    font-size: 10px;
    text-decoration: none;
}

.cyber-scope-note a:hover,
.cyber-text-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cyber-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--cyber-stroke);
    border-radius: 13px;
    background: rgba(12, 20, 32, .7);
}

.cyber-steps article {
    padding: 25px;
    border-right: 1px solid var(--cyber-stroke);
}

.cyber-steps article:last-child {
    border-right: 0;
}

.cyber-steps article > span {
    color: var(--cyber-cyan);
    font: 750 10px "DejaVu Sans Mono", monospace;
    letter-spacing: .1em;
}

.cyber-steps h3 {
    margin: 17px 0 9px;
    color: #eaf5ff;
    font: 650 14px Inter, sans-serif;
}

.cyber-steps p {
    margin: 0;
    font-size: 10px;
    line-height: 1.8;
}

.cyber-workflow .cyber-text-link {
    display: inline-block;
    margin-top: 20px;
}

.cyber-release-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    overflow: hidden;
    margin: 112px 0 85px;
    padding: 32px;
    border: 1px solid rgba(113, 159, 255, .24);
    border-radius: 15px;
    background: linear-gradient(115deg, rgba(28, 45, 76, .82), rgba(12, 21, 35, .93) 58%);
}

.release-panel-glow {
    position: absolute;
    top: -125px;
    right: 7%;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: rgba(69, 119, 245, .13);
    filter: blur(55px);
    pointer-events: none;
}

.cyber-release-panel > div:not(.release-panel-glow) {
    position: relative;
    max-width: 660px;
}

.cyber-release-panel .cyber-kicker {
    margin-bottom: 9px;
    color: #aabfff !important;
}

.cyber-release-panel h2 {
    margin: 0;
    color: var(--cyber-text);
    font: 720 25px Inter, sans-serif;
}

.cyber-release-panel p:not(.cyber-kicker) {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.8;
}

.release-panel-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}

.release-panel-actions .cyber-button {
    white-space: nowrap;
}

.release-source-link {
    color: #acbfd2;
    font-size: 10px;
    text-decoration: none;
}

.release-source-link:hover {
    color: var(--cyber-cyan);
}

.cyber-footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    padding: 35px 24px 25px;
    border-top: 1px solid rgba(164, 196, 223, .10);
    background: rgba(6, 10, 18, .75);
    text-align: center;
}

.cyber-footer .cyber-brand {
    font-size: 13px;
}

.cyber-footer .cyber-brand img {
    width: 30px;
    height: 30px;
}

.cyber-footer > p {
    margin: 0;
    font-size: 10px;
}

.cyber-founder {
    max-width: 1180px;
    margin: 4rem auto;
    padding: clamp(1.4rem, 4vw, 3rem);
    display: grid;
    grid-template-columns: minmax(150px, 240px) 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid rgba(84, 220, 255, .2);
    border-radius: 1.5rem;
    background: linear-gradient(120deg, rgba(13, 27, 44, .96), rgba(7, 17, 31, .88));
}

.cyber-founder img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1.1rem;
    border: 1px solid rgba(84, 220, 255, .32);
}

.cyber-founder h2 { margin: .25rem 0 .75rem; color: #ecf7ff; }
.cyber-founder p:not(.cyber-kicker) { color: #a4b8cc; line-height: 1.7; }
.cyber-security-points { margin-top: 1.25rem; }

@media (max-width: 620px) {
    .cyber-founder { margin: 2rem 1rem; grid-template-columns: 1fr; }
    .cyber-founder img { width: min(100%, 240px); }
}

.cyber-footer .footer-legal-links {
    margin: 4px 0;
}

.cyber-footer .footer-legal-links a,
.cyber-footer .footer-legal-links button {
    color: #a9bdcf;
    font-size: 10px;
}

.cyber-copyright {
    color: #71869a;
    font-size: 9px;
}

@media (max-width: 1060px) {
    .cyber-nav {
        gap: 18px;
    }

    .cyber-nav .nav-links {
        gap: 14px;
    }

    .cyber-nav .nav-links a {
        font-size: 11px;
    }

    .cyber-nav .github-btn {
        display: none;
    }

    .cyber-hero {
        grid-template-columns: minmax(0, .94fr) minmax(390px, 1.06fr);
        gap: 30px;
    }
}

@media (max-width: 960px) {
    .cyber-header {
        padding: 9px 0;
    }

    .cyber-nav {
        position: relative;
        width: calc(100% - 34px);
        justify-content: space-between;
    }

    .cyber-nav .nav-links {
        position: absolute;
        top: calc(100% + 13px);
        right: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        width: min(330px, calc(100vw - 34px));
        max-height: calc(100vh - 105px);
        gap: 4px;
        overflow-y: auto;
        padding: 12px;
        border: 1px solid var(--cyber-stroke);
        border-radius: 12px;
        background: rgba(9, 16, 26, .98);
        box-shadow: 0 24px 55px rgba(0, 0, 0, .48);
    }

    .cyber-nav .nav-links.open {
        display: flex;
    }

    .cyber-nav .nav-links a {
        display: block;
        padding: 11px 12px;
        border-radius: 7px;
        font-size: 13px;
    }

    .cyber-nav .nav-links a:hover {
        background: rgba(99, 230, 255, .08);
    }

    .cyber-nav .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        margin-left: 8px;
        border-radius: 8px;
        order: 3;
    }

    .cyber-nav-actions {
        margin-left: auto;
    }

    .cyber-hero {
        grid-template-columns: 1fr;
        gap: 25px;
        min-height: auto;
        padding: 76px 0 55px;
    }

    .cyber-hero-copy {
        max-width: 720px;
    }

    .cyber-visual {
        width: min(760px, 100%);
        margin: 0 auto;
    }

    .cyber-track-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cyber-shell {
        width: calc(100% - 34px);
    }

    .cyber-brand {
        gap: 7px;
        font-size: 12px;
    }

    .cyber-brand img {
        width: 31px;
        height: 31px;
    }

    .cyber-nav-cta {
        padding: 10px;
        font-size: 9px;
    }

    .cyber-hero {
        padding: 60px 0 42px;
    }

    .cyber-hero h1 {
        font-size: clamp(40px, 11vw, 57px);
    }

    .cyber-lede {
        font-size: 13px;
    }

    .cyber-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cyber-button {
        width: 100%;
    }

    .cyber-metrics > div {
        min-width: 0;
        flex: 1;
        padding: 0 11px;
    }

    .cyber-metrics strong {
        font-size: 10px;
    }

    .cyber-metrics span {
        font-size: 9px;
    }

    .cyber-visual {
        padding: 20px 0 16px;
    }

    .cyber-window {
        transform: none;
    }

    .cyber-window-titlebar {
        min-height: 40px;
        padding: 0 9px;
    }

    .window-title {
        font-size: 8px;
    }

    .window-session {
        font-size: 6px;
    }

    .cyber-window-body {
        min-height: 275px;
    }

    .cyber-rail {
        width: 43px;
        gap: 12px;
    }

    .cyber-terminal {
        padding: 14px 11px 12px;
    }

    .terminal-head {
        font-size: 7px;
    }

    .terminal-output {
        min-height: 177px;
        font-size: 9px;
        line-height: 1.9;
    }

    .terminal-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        font-size: 6px;
    }

    .cyber-window-footer {
        font-size: 7px;
    }

    .cyber-proof,
    .cyber-platform-grid,
    .cyber-track-grid,
    .cyber-steps {
        grid-template-columns: 1fr;
    }

    .cyber-proof {
        gap: 16px;
        padding: 18px;
    }

    .cyber-section {
        padding-top: 78px;
    }

    .cyber-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 23px;
    }

    .cyber-section-heading h2 {
        font-size: 36px;
    }

    .cyber-feature {
        padding: 21px;
    }

    .cyber-track {
        min-height: auto;
    }

    .cyber-track p {
        min-height: 0;
    }

    .cyber-scope-note {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .cyber-scope-note p {
        flex-basis: calc(100% - 50px);
    }

    .cyber-scope-note a {
        margin-left: 41px;
    }

    .cyber-steps article {
        border-right: 0;
        border-bottom: 1px solid var(--cyber-stroke);
    }

    .cyber-steps article:last-child {
        border-bottom: 0;
    }

    .cyber-release-panel {
        align-items: flex-start;
        flex-direction: column;
        gap: 22px;
        margin: 78px 0 60px;
        padding: 23px;
    }

    .release-panel-actions {
        align-items: flex-start;
        width: 100%;
    }

    .cyber-release-panel h2 {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cyber-site::before,
    .cyber-hero::before,
    .cyber-atmosphere span,
    .cyber-hero-copy,
    .cyber-visual,
    .cyber-terminal::after,
    .terminal-output,
    .terminal-cursor {
        animation: none !important;
    }

    .cyber-window,
    .cyber-button,
    .cyber-feature,
    .cyber-track {
        transition: none !important;
    }
}

.cyber-subhero {
    max-width: 850px;
    padding: 90px 0 18px;
}

.cyber-subhero h1 {
    margin: 0;
    color: var(--cyber-text);
    font: 760 clamp(42px, 6vw, 67px)/1.04 Inter, "Segoe UI", sans-serif;
    letter-spacing: -.055em;
}

.cyber-subhero h1 span {
    color: transparent;
    background: linear-gradient(105deg, #70a5ff 5%, #6be7f9 54%, #93ebca 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

.cyber-subhero > p:not(.cyber-kicker) {
    max-width: 650px;
    margin: 22px 0 0;
    color: #a7b9cb !important;
    font-size: 13px;
    line-height: 1.9;
}

.cyber-subhero .cyber-hero-actions {
    margin-top: 23px;
}

.cyber-subhero + .cyber-section {
    padding-top: 54px;
}

.cyber-feature pre {
    margin-top: 14px;
    padding: 13px;
    border: 1px solid rgba(99, 230, 255, .13);
    border-radius: 8px;
    background: #060c14;
    color: #b9d8e8;
    font: 10px/1.75 "DejaVu Sans Mono", Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cyber-feature code {
    color: inherit;
    font: inherit;
}

@media (max-width: 620px) {
    .cyber-subhero {
        padding-top: 60px;
    }
}

/* Shared workstation chrome for the rest of the site */
body:not(.cyber-site) {
    background:
        radial-gradient(ellipse at 82% 8%, rgba(31, 97, 151, .14), transparent 35rem),
        #060a12 !important;
    color: #eff7ff;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

body:not(.cyber-site) header {
    border-bottom: 1px solid rgba(164, 196, 223, .10);
    background: rgba(6, 10, 18, .86);
}

body:not(.cyber-site) .navbar {
    width: min(1280px, calc(100% - 48px));
    min-height: 64px;
    margin: 10px auto;
    padding: 10px 15px;
    border: 1px solid rgba(144, 180, 209, .16);
    border-radius: 13px;
    background: rgba(12, 20, 32, .9);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

body:not(.cyber-site) .logo,
body:not(.cyber-site) .logo a {
    color: #eff7ff;
    font: 760 15px/1.2 Inter, "Segoe UI", sans-serif;
    letter-spacing: .04em;
    text-decoration: none;
}

body:not(.cyber-site) .nav-links {
    align-items: center;
    gap: clamp(10px, 1.3vw, 20px);
}

body:not(.cyber-site) .nav-links a {
    color: #a8b8c9;
    font: 550 11px/1.4 Inter, "Segoe UI", sans-serif;
}

body:not(.cyber-site) .nav-links a:hover,
body:not(.cyber-site) .nav-links a.active {
    color: #63e6ff;
}

body:not(.cyber-site) .github-btn,
body:not(.cyber-site) .btn-linkedin {
    border: 1px solid rgba(99, 230, 255, .28);
    border-radius: 8px;
    background: rgba(99, 230, 255, .08);
    color: #bfefff;
    font: 650 11px/1.3 Inter, "Segoe UI", sans-serif;
}

body:not(.cyber-site) .hero {
    background:
        radial-gradient(ellipse at 50% 14%, rgba(37, 104, 158, .18), transparent 55%),
        #060a12;
}

body:not(.cyber-site) .hero h1,
body:not(.cyber-site) .section-title h2,
body:not(.cyber-site) .doc-card h2 {
    color: #eff7ff;
    letter-spacing: -.025em;
}

body:not(.cyber-site) .feature-card,
body:not(.cyber-site) .doc-card,
body:not(.cyber-site) .team-card,
body:not(.cyber-site) .roadmap-content,
body:not(.cyber-site) .contact-info,
body:not(.cyber-site) .contact-form {
    border: 1px solid rgba(144, 180, 209, .16);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(15, 28, 43, .96), rgba(8, 15, 24, .92));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

body:not(.cyber-site) .feature-card:hover,
body:not(.cyber-site) .team-card:hover {
    border-color: rgba(99, 230, 255, .32);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .24);
}

@media (max-width: 1120px) {
    body:not(.cyber-site) .navbar {
        position: relative;
        width: calc(100% - 34px);
        flex-wrap: wrap;
    }

    body:not(.cyber-site) .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        width: min(330px, calc(100vw - 34px));
        max-height: calc(100vh - 105px);
        gap: 4px;
        overflow-y: auto;
        padding: 12px;
        border: 1px solid rgba(144, 180, 209, .18);
        border-radius: 12px;
        background: rgba(9, 16, 26, .98);
        box-shadow: 0 24px 55px rgba(0, 0, 0, .48);
    }

    body:not(.cyber-site) .nav-links.open {
        display: flex;
    }

    body:not(.cyber-site) .nav-links a {
        display: block;
        padding: 11px 12px;
        border-radius: 7px;
        font-size: 13px;
    }

    body:not(.cyber-site) .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 39px;
        height: 39px;
        border: 1px solid rgba(144, 180, 209, .20);
        border-radius: 8px;
        background: #0c1420;
        color: #eff7ff;
    }

    body:not(.cyber-site) .navbar .social-links,
    body:not(.cyber-site) .navbar > .github-btn {
        display: none;
    }
}

@media (max-width: 600px) {
    body:not(.cyber-site) .navbar {
        width: calc(100% - 24px);
    }
}