/* ================= RESET ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ================= BASE ================= */
body {
    font-family: monospace;
    background: radial-gradient(circle at center, #0a0f14 0%, #020305 100%);
    color: #eaeaea;
}

/* ================= LAYOUT ================= */
.container {
    width: 92%;
    margin: auto;
    padding: 20px 0;
}

/* ================= CARBON TEXTURE ================= */
.carbon {
    background:
        repeating-linear-gradient(
            45deg,
            #0c0f13,
            #0c0f13 2px,
            #06080b 4px
        );
}

/* ================= PANEL (CORE UI) ================= */
.panel-frame {
    position: relative;
    padding: 25px;
    margin: 40px 0;

    background: linear-gradient(145deg, #0b0f14, #1a2028);
    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.05),
        inset 0 -2px 6px rgba(0,0,0,0.7),
        0 15px 30px rgba(0,0,0,0.9);
}

/* ================= HUD CORNERS ================= */
.panel-frame::before,
.panel-frame::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border: 2px solid #00ffe0;
    opacity: 0.6;
}

.panel-frame::before {
    top: 12px;
    left: 12px;
    border-right: none;
    border-bottom: none;
}

.panel-frame::after {
    bottom: 12px;
    right: 12px;
    border-left: none;
    border-top: none;
}

/* ================= HUD LINES ================= */
.panel-frame .scan-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
        transparent,
        transparent 2px,
        rgba(255,255,255,0.02) 3px
    );
}

/* ================= TITLES ================= */
.big-title {
    font-size: 56px;
    margin: 10px 0;

    background: linear-gradient(180deg,#ffffff,#aaaaaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-title {
    margin-bottom: 20px;
    font-size: 20px;
    color: #00ffe0;
}

/* ================= TEXT ================= */
.codex-label {
    color: #00ffe0;
    font-size: 12px;
    letter-spacing: 2px;
}

.subtitle {
    color: #aaa;
}

/* ================= STATUS ================= */
.status-row {
    display: flex;
    gap: 25px;
    margin-top: 10px;

    color: #00ffe0;
    font-size: 13px;
}

/* ================= METAL ================= */
.metal {
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #d0d0d0 25%,
        #888 50%,
        #d0d0d0 75%,
        #ffffff 100%
    );

    color: #000;
    padding: 6px 10px;

    text-shadow: 0 1px 1px rgba(255,255,255,0.5);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.6),
        inset 0 -3px 6px rgba(0,0,0,0.6);
}

/* ================= GRID ================= */
.grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

/* ================= CARD ================= */
.drone-card {
    width: 260px;
    padding: 15px;

    background: linear-gradient(145deg,#0c1016,#1a1f27);
    border: 1px solid rgba(255,255,255,0.08);

    text-decoration: none;
    color: white;

    position: relative;

    transition: 0.25s ease;
}

/* ================= CARD HOVER ================= */
.drone-card:hover {
    transform: translateY(-5px) scale(1.02);

    box-shadow:
        0 0 10px rgba(0,255,224,0.3),
        0 0 20px rgba(0,255,224,0.2);
}

/* ================= CARD HEADER ================= */
.card-header {
    font-size: 13px;
    margin-bottom: 10px;
}

/* ================= IMAGES ================= */
.drone-card img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    filter: contrast(1.1) brightness(1.1);
}

/* ================= SPECS ================= */
.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 12px;
    gap: 4px;
    margin-top: 10px;
}

/* ================= INSIGHT ================= */
.insight {
    margin-top: 10px;
    font-size: 12px;
    color: #aaa;
}

/* ================= RADAR ================= */
.radar {
    display: block;
    margin: 10px auto;
    width: 200px;
    height: 200px;
}

/* ================= GLOW ================= */
.glow {
    color: #00ffe0;

    text-shadow:
        0 0 5px #00ffe0,
        0 0 10px #00ffe0,
        0 0 20px #00ffe0;
}

/* ================= BUTTON ================= */
.cta {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 14px;

    background: #00ffe0;
    color: black;
    font-size: 13px;

    text-decoration: none;
}

.cta:hover {
    box-shadow: 0 0 10px #00ffe0;
}

/* ================= PANEL VARIANTS ================= */
.top-block {
    border: 2px solid #00ffe0;
}

/* ================= HERO ================= */
.hero-content {
    position: relative;
    z-index: 1;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {

    .grid {
        flex-direction: column;
    }

    .drone-card {
        width: 100%;
    }

    .big-title {
        font-size: 32px;
    }
}