/* =====================================================
   NEXO V — HOME.CSS
   Homepage Sections: Hero Extras, Quick, Start, Preview
===================================================== */

/* =========================
   GLOBAL HOME FIXES
========================= */

html {
    scroll-behavior: smooth;
}

body {
    background: #07080f;
    color: #fff;
}

.section-inner {
    width: min(1220px, 92%);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.section-eyebrow {
    font-family: "Share Tech Mono", monospace;
    color: #00d4ff;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0, 212, 255, .7);
}

/* =========================
   HERO EXTRAS
========================= */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 35%, rgba(0, 212, 255, .18), transparent 34%),
        radial-gradient(circle at 82% 60%, rgba(227, 38, 54, .24), transparent 36%);
    z-index: 1;
}

.hero-status-strip {
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    width: min(1050px, calc(100% - 40px));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    z-index: 6;
}

.hero-status-strip div {
    padding: 17px 22px;
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    box-shadow:
        inset 0 0 30px rgba(255,255,255,.025),
        0 0 30px rgba(0,212,255,.08);
}

.hero-status-strip strong {
    display: block;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-status-strip span {
    display: block;
    margin-top: 5px;
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    color: #00d4ff;
}

/* =========================
   QUICK ACCESS
========================= */

.nexo-quick {
    position: relative;
    padding: 115px 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(0,212,255,.12), transparent 34%),
        radial-gradient(circle at 82% 75%, rgba(227,38,54,.14), transparent 38%),
        linear-gradient(180deg, #07080f, #0a0b14);
    overflow: hidden;
}

.nexo-quick::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle, black, transparent 75%);
    opacity: .45;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.quick-card {
    position: relative;
    min-height: 245px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    border-radius: 28px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 0 34px rgba(255,255,255,.025),
        0 20px 50px rgba(0,0,0,.22);

    transition: .32s cubic-bezier(.16, 1, .3, 1);
}

.quick-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 25% 20%, rgba(0,212,255,.28), transparent 38%),
        radial-gradient(circle at 75% 80%, rgba(227,38,54,.26), transparent 40%);
    opacity: 0;
    transition: .32s ease;
}

.quick-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #e32636);
    opacity: .55;
    transition: .28s;
}

.quick-card:hover {
    transform: translateY(-10px) scale(1.018);
    border-color: rgba(0,212,255,.65);
    box-shadow:
        0 0 42px rgba(0,212,255,.18),
        0 0 34px rgba(227,38,54,.11),
        inset 0 0 34px rgba(255,255,255,.03);
}

.quick-card:hover::before {
    opacity: 1;
}

.quick-card:hover::after {
    height: 5px;
    opacity: 1;
}

.quick-card span {
    position: absolute;
    top: 24px;
    left: 26px;
    font-family: "Share Tech Mono", monospace;
    color: #00d4ff;
    font-size: 13px;
    letter-spacing: 2px;
    text-shadow: 0 0 14px rgba(0,212,255,.75);
}

.quick-card h3 {
    font-size: 27px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 800;
    color: #fff;
}

.quick-card p {
    margin-top: 12px;
    color: rgba(255,255,255,.7);
    font-size: 15px;
    line-height: 1.45;
}

/* =========================
   START / ENTRY PROTOCOL
========================= */

.nexo-start {
    position: relative;
    padding: 125px 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(227,38,54,.18), transparent 34%),
        radial-gradient(circle at 20% 80%, rgba(0,212,255,.14), transparent 34%),
        linear-gradient(180deg, #0a0b14, #07080f);
    overflow: hidden;
}

.nexo-start::after {
    content: "ENTRY PROTOCOL";
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 92px;
    font-weight: 900;
    letter-spacing: 8px;
    color: rgba(255,255,255,.025);
    pointer-events: none;
}

.start-layout {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 62px;
    align-items: center;
}

.start-left h2 {
    margin-top: 14px;
    font-size: clamp(44px, 5.5vw, 74px);
    line-height: .9;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -1px;
}

.start-left h2 span {
    color: #e32636;
    text-shadow: 0 0 34px rgba(227,38,54,.46);
}

.start-left p {
    margin-top: 24px;
    max-width: 650px;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    line-height: 1.65;
}

.start-actions {
    margin-top: 34px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.start-right {
    display: grid;
    gap: 14px;
}

.protocol-card {
    position: relative;
    padding: 23px 24px;
    border-radius: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
    border: 1px solid rgba(255,255,255,.105);
    overflow: hidden;
    transition: .28s ease;
}

.protocol-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 0% 50%, rgba(0,212,255,.16), transparent 42%),
        radial-gradient(circle at 100% 50%, rgba(227,38,54,.18), transparent 44%);
    opacity: 0;
    transition: .28s;
}

.protocol-card > * {
    position: relative;
    z-index: 2;
}

.protocol-card:hover,
.protocol-card.active {
    transform: translateX(-10px);
    border-color: rgba(227,38,54,.62);
    box-shadow: 0 0 36px rgba(227,38,54,.16);
}

.protocol-card:hover::before,
.protocol-card.active::before {
    opacity: 1;
}

.protocol-card span {
    font-family: "Share Tech Mono", monospace;
    color: #00d4ff;
    font-size: 12px;
    letter-spacing: 2px;
}

.protocol-card strong {
    display: block;
    margin-top: 9px;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    text-transform: uppercase;
}

.protocol-card p {
    margin-top: 9px;
    color: rgba(255,255,255,.65);
    line-height: 1.45;
    font-size: 15px;
}

/* =========================
   PREVIEW / CITY STRUCTURE
========================= */

.nexo-preview {
    position: relative;
    padding: 125px 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(0,212,255,.12), transparent 34%),
        radial-gradient(circle at 80% 75%, rgba(227,38,54,.16), transparent 36%),
        linear-gradient(180deg, #07080f, #0b0c14);
    overflow: hidden;
}

.preview-header {
    max-width: 850px;
    margin-bottom: 46px;
}

.preview-header h2 {
    margin-top: 14px;
    font-size: clamp(44px, 5.5vw, 74px);
    line-height: .9;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -1px;
}

.preview-header p {
    margin-top: 22px;
    max-width: 700px;
    color: rgba(255,255,255,.68);
    font-size: 18px;
    line-height: 1.6;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.preview-card {
    position: relative;
    min-height: 365px;
    padding: 26px;
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;

    background:
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.86)),
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.11);

    box-shadow:
        inset 0 0 34px rgba(255,255,255,.025),
        0 25px 60px rgba(0,0,0,.28);

    transition: .32s cubic-bezier(.16, 1, .3, 1);
}

.preview-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 50% 18%, rgba(0,212,255,.18), transparent 36%),
        radial-gradient(circle at 80% 72%, rgba(227,38,54,.18), transparent 42%);
    opacity: .75;
}

.preview-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    opacity: .30;
    filter: saturate(1.25) contrast(1.12);
    transition: .38s ease;
}

.preview-card:hover {
    transform: translateY(-12px) scale(1.018);
    border-color: rgba(0,212,255,.65);
    box-shadow:
        0 0 48px rgba(0,212,255,.18),
        0 0 30px rgba(227,38,54,.12);
}

.preview-card:hover::after {
    opacity: .46;
    transform: scale(1.08);
}

.preview-card span {
    font-family: "Share Tech Mono", monospace;
    color: #00d4ff;
    letter-spacing: 2px;
    font-size: 12px;
    text-shadow: 0 0 12px rgba(0,212,255,.65);
}

.preview-card h3 {
    margin-top: 11px;
    font-size: 28px;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
}

.preview-card p {
    margin-top: 11px;
    color: rgba(255,255,255,.72);
    line-height: 1.45;
    font-size: 15px;
}

.preview-card.police::after {
    background-image: url("https://images.unsplash.com/photo-1518458028785-8fbcd101ebb9?auto=format&fit=crop&w=900&q=70");
}

.preview-card.medic::after {
    background-image: url("https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=900&q=70");
}

.preview-card.jobs::after {
    background-image: url("https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=900&q=70");
}

.preview-card.justice::after {
    background-image: url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=900&q=70");
}

/* =========================
   OPTIONAL BUTTON FIXES
========================= */

.btn-primary,
.btn-secondary,
.btn-discord {
    text-decoration: none;
}

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

@media (max-width: 1180px) {
    .quick-grid,
    .preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .start-layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .start-right {
        max-width: 720px;
    }

    .hero-status-strip {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        margin: 38px auto 0;
    }
}

@media (max-width: 760px) {
    .nexo-quick,
    .nexo-start,
    .nexo-preview {
        padding: 78px 0;
    }

    .quick-grid,
    .preview-grid,
    .hero-status-strip {
        grid-template-columns: 1fr;
    }

    .quick-card {
        min-height: 205px;
    }

    .preview-card {
        min-height: 285px;
    }

    .start-left h2,
    .preview-header h2 {
        font-size: 42px;
    }

    .start-left p,
    .preview-header p {
        font-size: 16px;
    }

    .protocol-card:hover,
    .protocol-card.active {
        transform: translateY(-4px);
    }
}

/* =========================
   IDENTITY SECTION
========================= */

.nexo-identity {
    position: relative;
    padding: 130px 0;

    background:
        radial-gradient(circle at 15% 20%, rgba(0,212,255,.12), transparent 35%),
        radial-gradient(circle at 85% 80%, rgba(227,38,54,.14), transparent 35%),
        linear-gradient(180deg, #0a0b14, #07080f);

    overflow: hidden;
}

/* BACK TEXT */
.nexo-identity::before {
    content: "NEXO V";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 200px;
    font-weight: 900;
    letter-spacing: 20px;
    color: rgba(255,255,255,.02);
    pointer-events: none;
}

/* HEADER */
.identity-header {
    max-width: 820px;
    margin-bottom: 60px;
}

.identity-header h2 {
    margin-top: 14px;
    font-size: clamp(44px, 5vw, 72px);
    line-height: .9;
    text-transform: uppercase;
}

.identity-header h2 span {
    color: #e32636;
    text-shadow: 0 0 35px rgba(227,38,54,.5);
}

.identity-header p {
    margin-top: 20px;
    color: rgba(255,255,255,.7);
    font-size: 18px;
    line-height: 1.6;
}

/* GRID */
.identity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* CARD */
.identity-card {
    position: relative;
    padding: 28px;
    border-radius: 26px;

    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));

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

    box-shadow:
        inset 0 0 30px rgba(255,255,255,.03);

    transition: .3s ease;
    overflow: hidden;
}

/* GLOW */
.identity-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 20% 20%, rgba(0,212,255,.3), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(227,38,54,.3), transparent 40%);

    opacity: 0;
    transition: .3s;
}

/* HOVER */
.identity-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0,212,255,.6);

    box-shadow:
        0 0 45px rgba(0,212,255,.2),
        0 0 30px rgba(227,38,54,.15);
}

.identity-card:hover::before {
    opacity: 1;
}

/* NUMBER */
.identity-card span {
    font-family: "Share Tech Mono", monospace;
    color: #00d4ff;
    font-size: 12px;
    letter-spacing: 2px;
}

/* TITLE */
.identity-card strong {
    display: block;
    margin-top: 12px;
    font-size: 24px;
    text-transform: uppercase;
}

/* TEXT */
.identity-card p {
    margin-top: 10px;
    color: rgba(255,255,255,.65);
    line-height: 1.5;
}

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

@media (max-width: 1100px) {
    .identity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .identity-grid {
        grid-template-columns: 1fr;
    }

    .nexo-identity {
        padding: 80px 0;
    }

    .identity-header h2 {
        font-size: 38px;
    }
}

/* =========================
   NAV BUTTONS — NEXO STYLE
========================= */

.nav-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* BASE BUTTON */
.nav-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 18px;
    border-radius: 14px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;

    color: #fff;
    text-decoration: none;

    background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));

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

    backdrop-filter: blur(10px);

    overflow: hidden;

    transition: .25s cubic-bezier(.16,1,.3,1);
}

/* SHINE EFFECT */
.nav-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );

    transition: .5s;
}

/* HOVER */
.nav-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(0,212,255,.6);

    box-shadow:
        0 0 25px rgba(0,212,255,.2),
        0 0 12px rgba(227,38,54,.15);
}

.nav-cta:hover::before {
    left: 120%;
}

/* =========================
   DASHBOARD BUTTON (MAIN)
========================= */

.nav-dashboard {
    background:
        linear-gradient(135deg, #00d4ff, #e32636);

    border: none;

    font-weight: 700;

    box-shadow:
        0 0 25px rgba(0,212,255,.35),
        0 0 20px rgba(227,38,54,.25);
}

.nav-dashboard:hover {
    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 0 35px rgba(0,212,255,.55),
        0 0 30px rgba(227,38,54,.4);
}

/* =========================
   ROADMAP BUTTON (SECONDARY)
========================= */

.nav-cta:not(.nav-dashboard) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));

    border: 1px solid rgba(0,212,255,.3);
}

.nav-cta:not(.nav-dashboard):hover {
    border-color: rgba(227,38,54,.6);
}

/* =========================
   ICON STYLE
========================= */

.nav-cta i {
    font-size: 14px;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(0,212,255,.5));
}

/* =========================
   NEXO LOGO — CLEAN PREMIUM
========================= */

.nav-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* NEXO */
.logo-text {
    font-family: "Oswald", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #ffffff;

    text-shadow:
        0 0 8px rgba(0,212,255,.6),
        0 0 18px rgba(0,212,255,.3);
}

/* V */
.logo-v {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    font-weight: 900;

    color: #ffd166;

    text-shadow:
        0 0 10px rgba(255,209,102,.7),
        0 0 20px rgba(227,38,54,.5);

    transform: translateY(-1px);
}

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

.nav-logo:hover .logo-text {
    text-shadow:
        0 0 12px rgba(0,212,255,.9),
        0 0 25px rgba(0,212,255,.6);
}

.nav-logo:hover .logo-v {
    text-shadow:
        0 0 14px rgba(255,209,102,1),
        0 0 30px rgba(227,38,54,.8);
}