
/* =========================================================
   CYBERSECURITY LIFE — MALWARE AWARENESS PAGE
   Full stylesheet with moving grid and animated threat-monitoring UI
   ========================================================= */

.digital-forensics-page {
    --forensics-bg: #070307;
    --forensics-bg-soft: #120711;
    --forensics-panel: rgba(28, 8, 18, 0.93);
    --forensics-cyan: #61e8ff;
    --forensics-blue: #348cff;
    --forensics-green: #5cffb0;
    --forensics-yellow: #ffd166;
    --forensics-red: #ff5f74;
    --forensics-purple: #b26dff;
    --forensics-text: #fff7fa;
    --forensics-muted: #d0bac4;
    --forensics-border: rgba(255, 95, 116, 0.2);
    --forensics-shadow: 0 0 34px rgba(255, 95, 116, 0.12), 0 22px 55px rgba(0, 0, 0, 0.44);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--forensics-text);
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 95, 116, 0.15), transparent 28%),
        radial-gradient(circle at 84% 20%, rgba(178, 109, 255, 0.11), transparent 26%),
        radial-gradient(circle at 50% 72%, rgba(97, 232, 255, 0.06), transparent 34%),
        linear-gradient(180deg, #070307 0%, #120711 52%, #070307 100%);
}

.digital-forensics-page *,
.digital-forensics-page *::before,
.digital-forensics-page *::after {
    box-sizing: border-box;
}

.digital-forensics-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 95, 116, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 232, 255, 0.04) 1px, transparent 1px);
    background-size: 46px 46px;
    animation: malwareGridMove 18s linear infinite;
}

.digital-forensics-page::after {
    content: "";
    position: fixed;
    inset: -40%;
    z-index: -3;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            128deg,
            transparent 0,
            transparent 94px,
            rgba(255, 95, 116, 0.026) 95px,
            transparent 96px
        );
    animation: malwareDataSweep 28s linear infinite;
}

/* SHARED SECTIONS */

.forensics-overview,
.forensics-types,
.forensics-process,
.digital-evidence-section,
.chain-custody-section,
.forensics-tools-section,
.hashing-section,
.timeline-analysis-section,
.forensics-practices-section,
.forensics-check-section {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 96px 0;
}

.forensics-overview + section,
.forensics-types + section,
.forensics-process + section,
.digital-evidence-section + section,
.chain-custody-section + section,
.forensics-tools-section + section,
.hashing-section + section,
.timeline-analysis-section + section,
.forensics-practices-section + section {
    border-top: 1px solid rgba(255, 95, 116, 0.07);
}

.section-heading {
    max-width: 860px;
    margin: 0 auto 48px;
    text-align: center;
}

.section-label {
    margin: 0 0 10px;
    color: var(--forensics-red);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-heading h2,
.chain-content h2,
.hashing-content h2,
.check-content h2,
.forensics-cta-content h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4.7vw, 3.7rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: transparent;
    background: linear-gradient(90deg, #fff, var(--forensics-red) 50%, var(--forensics-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-heading h2 span,
.chain-content h2 span,
.hashing-content h2 span,
.check-content h2 span,
.forensics-cta-content h2 span {
    color: transparent;
    background: linear-gradient(90deg, var(--forensics-purple), var(--forensics-cyan), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-heading > p:last-child,
.chain-content > p,
.hashing-content > p,
.check-content > p,
.forensics-cta-content > p {
    color: var(--forensics-muted);
    line-height: 1.82;
}

/* HERO */

.forensics-hero {
    position: relative;
    min-height: 860px;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr);
    align-items: center;
    gap: 70px;
    padding: 130px max(28px, calc((100vw - 1180px) / 2)) 110px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 95, 116, 0.14);
}

.forensics-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 95, 116, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 232, 255, 0.055) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(780px) rotateX(64deg) scale(1.55) translateY(31%);
    transform-origin: bottom;
    opacity: 0.84;
    animation: malwareHeroGrid 13s linear infinite;
}

.forensics-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--forensics-red), var(--forensics-purple), var(--forensics-cyan), transparent);
    box-shadow: 0 0 18px rgba(255, 95, 116, 0.8), 0 0 34px rgba(178, 109, 255, 0.4);
    animation: malwareDividerPulse 3.5s ease-in-out infinite;
}

.forensics-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 40%, rgba(255, 95, 116, 0.18), transparent 35%),
        radial-gradient(circle at 79% 45%, rgba(178, 109, 255, 0.12), transparent 31%);
    animation: malwareHeroGlow 8s ease-in-out infinite;
}

.forensics-hero-content {
    position: relative;
    z-index: 3;
    min-width: 0;
    animation: malwareFadeUp 0.9s ease both;
}

.forensics-status {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 1px solid rgba(255, 95, 116, 0.36);
    border-radius: 999px;
    color: var(--forensics-red);
    background: rgba(255, 95, 116, 0.06);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    animation: malwareBadgeFloat 4s ease-in-out infinite;
}

.status-dot,
.tool-status span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--forensics-red);
    box-shadow: 0 0 0 0 rgba(255, 95, 116, 0.72);
    animation: malwareStatusPulse 1.8s ease-out infinite;
}

.forensics-eyebrow {
    margin: 0 0 14px;
    color: var(--forensics-cyan);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.forensics-hero h1 {
    margin: 0;
    padding: 8px 24px 10px 0;
    font-size: clamp(3.8rem, 7vw, 6.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: transparent;
    background: linear-gradient(90deg, #fff 0%, var(--forensics-red) 45%, var(--forensics-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.forensics-hero h1 span {
    display: block;
    background: linear-gradient(90deg, var(--forensics-purple), var(--forensics-cyan), #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.forensics-hero-description {
    max-width: 690px;
    margin: 27px 0 0;
    color: #d7c4cc;
    font-size: clamp(1rem, 1.65vw, 1.15rem);
    line-height: 1.82;
}

.forensics-hero-buttons,
.forensics-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 32px;
}

.forensics-primary-btn,
.forensics-secondary-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 23px;
    border-radius: 9px;
    text-decoration: none;
    font-weight: 900;
    transition: 0.25s ease;
}

.forensics-primary-btn {
    color: #190006;
    background: linear-gradient(135deg, var(--forensics-red), var(--forensics-purple));
    box-shadow: 0 0 28px rgba(255, 95, 116, 0.3);
}

.forensics-secondary-btn {
    color: #f8e8ee;
    border: 1px solid rgba(97, 232, 255, 0.42);
    background: rgba(20, 4, 13, 0.78);
}

.forensics-primary-btn:hover,
.forensics-secondary-btn:hover {
    transform: translateY(-4px);
}

.forensics-hero-data {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.hero-data-card {
    padding: 16px;
    border: 1px solid rgba(255, 95, 116, 0.15);
    border-radius: 12px;
    background: rgba(22, 5, 14, 0.76);
    text-align: center;
}

.data-number,
.data-label {
    display: block;
}

.data-number {
    color: var(--forensics-red);
    font-weight: 900;
}

.data-label {
    margin-top: 5px;
    color: var(--forensics-muted);
    font-size: 0.72rem;
}

/* HERO VISUAL */

.forensics-hero-visual {
    position: relative;
    min-height: 560px;
    display: grid;
    place-items: center;
}

.evidence-scanner {
    position: relative;
    width: 430px;
    height: 430px;
    display: grid;
    place-items: center;
}

.scanner-ring {
    position: absolute;
    border: 1px solid rgba(255, 95, 116, 0.2);
    border-radius: 50%;
}

.scanner-ring-one {
    width: 180px;
    height: 180px;
    animation: malwareRingSpin 8s linear infinite;
}

.scanner-ring-two {
    width: 290px;
    height: 290px;
    border-color: rgba(178, 109, 255, 0.18);
    animation: malwareRingSpinReverse 12s linear infinite;
}

.scanner-ring-three {
    width: 410px;
    height: 410px;
    border-color: rgba(97, 232, 255, 0.14);
    animation: malwareRingSpin 17s linear infinite;
}

.scanner-center {
    position: relative;
    z-index: 4;
    width: 145px;
    height: 145px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 95, 116, 0.36);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 95, 116, 0.14), transparent 68%),
        rgba(22, 5, 14, 0.96);
    box-shadow: 0 0 45px rgba(255, 95, 116, 0.2);
    animation: malwareScannerPulse 3.5s ease-in-out infinite;
}

.scanner-icon {
    color: var(--forensics-cyan);
    font-size: 4rem;
}

.scanner-center small {
    color: var(--forensics-red);
    font-weight: 900;
    letter-spacing: 0.14em;
}

.scanner-line {
    position: absolute;
    z-index: 3;
    width: 50%;
    height: 2px;
    left: 50%;
    top: 50%;
    transform-origin: left center;
    background: linear-gradient(90deg, var(--forensics-red), transparent);
    box-shadow: 0 0 12px rgba(255, 95, 116, 0.7);
    animation: malwareScannerRotate 4.5s linear infinite;
}

.evidence-node {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--forensics-yellow);
    box-shadow: 0 0 16px rgba(255, 209, 102, 0.8);
    animation: malwareNodePulse 2s ease-in-out infinite;
}

.node-one { top: 9%; left: 48%; }
.node-two { top: 48%; right: 7%; animation-delay: 0.5s; }
.node-three { bottom: 8%; left: 46%; animation-delay: 1s; }
.node-four { top: 48%; left: 6%; animation-delay: 1.5s; }

.evidence-terminal {
    position: absolute;
    right: -10px;
    bottom: 10px;
    width: 330px;
    overflow: hidden;
    border: 1px solid rgba(255, 95, 116, 0.24);
    border-radius: 14px;
    background: rgba(18, 4, 12, 0.97);
    box-shadow: var(--forensics-shadow);
    animation: malwareTerminalFloat 5s ease-in-out infinite;
}

.terminal-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 95, 116, 0.12);
}

.terminal-header > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.terminal-header > span:nth-child(1) { background: var(--forensics-red); }
.terminal-header > span:nth-child(2) { background: var(--forensics-yellow); }
.terminal-header > span:nth-child(3) { background: var(--forensics-green); }

.terminal-header p {
    margin: 0 0 0 auto;
    color: #e3cfd7;
    font-family: "Courier New", monospace;
    font-size: 0.72rem;
}

.terminal-body {
    padding: 18px;
    font-family: "Courier New", monospace;
}

.terminal-body p {
    margin: 8px 0;
    color: #d2bcc5;
    font-size: 0.74rem;
    line-height: 1.55;
}

.terminal-body p span {
    color: var(--forensics-cyan);
}

.terminal-success {
    color: var(--forensics-green) !important;
}

/* SHARED CARDS */

.overview-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
}

.overview-side-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.overview-main-card,
.overview-small-card,
.forensics-type-card,
.process-content,
.evidence-list-item,
.evidence-dashboard,
.custody-document,
.forensics-tool-card,
.hashing-feature,
.hash-file,
.activity-card,
.practice-card,
.check-answer,
.recovery-drive,
.forensics-cta {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 95, 116, 0.18);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(30, 8, 18, 0.92), rgba(14, 4, 10, 0.97));
    box-shadow: var(--forensics-shadow);
}

.overview-main-card {
    padding: 34px;
}

.overview-small-card,
.forensics-type-card,
.forensics-tool-card,
.practice-card {
    padding: 26px;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.overview-small-card:hover,
.forensics-type-card:hover,
.forensics-tool-card:hover,
.practice-card:hover {
    transform: translateY(-8px);
    border-color: rgba(178, 109, 255, 0.46);
    box-shadow: 0 0 34px rgba(178, 109, 255, 0.11), 0 18px 42px rgba(0, 0, 0, 0.35);
}

.card-number,
.type-number,
.practice-number {
    color: rgba(255, 95, 116, 0.46);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.overview-icon,
.small-card-icon,
.type-icon,
.tool-icon,
.file-icon,
.hash-file-icon,
.answer-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: 18px 0;
    border: 1px solid rgba(178, 109, 255, 0.3);
    border-radius: 16px;
    color: var(--forensics-purple);
    background: rgba(178, 109, 255, 0.06);
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(178, 109, 255, 0.1);
    animation: malwareIconPulse 3s ease-in-out infinite;
}

.overview-main-card p,
.overview-small-card p,
.forensics-type-card p,
.forensics-tool-card p,
.practice-card p,
.activity-card p,
.hashing-feature p {
    color: var(--forensics-muted);
    line-height: 1.72;
}

.evidence-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.evidence-tags span,
.forensics-type-card li {
    color: var(--forensics-cyan);
}

.evidence-tags span {
    padding: 7px 10px;
    border: 1px solid rgba(97, 232, 255, 0.2);
    border-radius: 999px;
    background: rgba(97, 232, 255, 0.05);
    font-size: 0.7rem;
}

/* TYPES / TOOLS / PRACTICES */

.forensics-types-grid,
.forensics-tools-grid,
.practices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.type-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.type-icon,
.tool-icon {
    margin: 0;
}

.forensics-type-card ul {
    padding-left: 18px;
    margin: 18px 0 0;
    display: grid;
    gap: 8px;
}

.tool-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--forensics-cyan);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

/* PROCESS */

.process-timeline {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.process-timeline::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 25px;
    bottom: 25px;
    width: 2px;
    background: linear-gradient(var(--forensics-red), var(--forensics-purple), var(--forensics-cyan));
    box-shadow: 0 0 14px rgba(255, 95, 116, 0.45);
}

.process-step {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 20px;
    align-items: center;
}

.process-marker {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 95, 116, 0.32);
    border-radius: 50%;
    background: #16050d;
    color: var(--forensics-red);
    font-weight: 900;
    box-shadow: 0 0 0 8px rgba(255, 95, 116, 0.04);
}

.process-content {
    padding: 24px;
}

.process-status {
    margin: 0 0 6px;
    color: var(--forensics-cyan);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.process-content h3 {
    margin: 0 0 9px;
}

.process-content p {
    color: var(--forensics-muted);
    line-height: 1.7;
}

.process-command {
    width: fit-content;
    margin-top: 16px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 95, 116, 0.14);
    border-radius: 8px;
    color: #e0cbd3;
    background: rgba(14, 3, 9, 0.78);
    font-family: "Courier New", monospace;
    font-size: 0.76rem;
}

.process-command span {
    color: var(--forensics-cyan);
}

/* TWO-COLUMN SECTIONS */

.digital-evidence-section,
.chain-custody-section,
.hashing-section,
.forensics-check-section {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 34px;
    align-items: center;
}

.evidence-heading {
    text-align: left;
    margin: 0 0 28px;
}

.evidence-list,
.custody-points,
.hashing-features {
    display: grid;
    gap: 14px;
}

.evidence-list-item,
.hashing-feature {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 18px;
}

.evidence-list-number,
.hashing-feature > span,
.custody-point span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 95, 116, 0.24);
    border-radius: 50%;
    color: var(--forensics-red);
    background: rgba(255, 95, 116, 0.05);
    font-weight: 900;
}

.evidence-list-item h3,
.hashing-feature h3 {
    margin: 0 0 6px;
}

.evidence-list-item p,
.hashing-feature p {
    margin: 0;
    color: var(--forensics-muted);
    line-height: 1.65;
}

/* DASHBOARD */

.evidence-dashboard,
.custody-document,
.recovery-drive {
    padding: 28px;
    animation: malwarePanelFloat 5s ease-in-out infinite;
}

.dashboard-header,
.dashboard-file,
.progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dashboard-header {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 95, 116, 0.1);
}

.dashboard-label {
    color: var(--forensics-cyan);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.case-status {
    padding: 7px 10px;
    border: 1px solid rgba(255, 95, 116, 0.24);
    border-radius: 999px;
    color: var(--forensics-red);
    background: rgba(255, 95, 116, 0.05);
    font-size: 0.67rem;
    font-weight: 900;
}

.dashboard-file {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid rgba(255, 95, 116, 0.1);
    border-radius: 12px;
    background: rgba(20, 4, 12, 0.7);
}

.file-icon {
    margin: 0;
}

.file-information {
    flex: 1;
}

.file-information span,
.file-information strong,
.file-information small {
    display: block;
}

.file-information span {
    color: var(--forensics-cyan);
    font-size: 0.66rem;
    font-weight: 900;
}

.file-information small {
    margin-top: 4px;
    color: var(--forensics-muted);
}

.file-verified,
.verified-text {
    color: var(--forensics-green);
}

.dashboard-hash {
    margin-top: 18px;
    padding: 16px;
    border-left: 3px solid var(--forensics-purple);
    border-radius: 0 10px 10px 0;
    background: rgba(178, 109, 255, 0.05);
}

.dashboard-hash span {
    color: var(--forensics-cyan);
    font-size: 0.67rem;
    font-weight: 900;
}

.dashboard-hash code {
    display: block;
    margin-top: 8px;
    color: #ead6de;
}

.dashboard-progress {
    margin-top: 20px;
}

.progress-track {
    height: 10px;
    overflow: hidden;
    margin-top: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.progress-fill {
    width: 85%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--forensics-red), var(--forensics-purple), var(--forensics-cyan));
    box-shadow: 0 0 14px rgba(255, 95, 116, 0.35);
    animation: malwareProgressPulse 4s ease-in-out infinite;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.dashboard-stats div {
    padding: 14px;
    text-align: center;
    border: 1px solid rgba(255, 95, 116, 0.1);
    border-radius: 10px;
    background: rgba(20, 4, 12, 0.64);
}

.dashboard-stats strong,
.dashboard-stats span {
    display: block;
}

.dashboard-stats strong {
    color: var(--forensics-cyan);
}

.dashboard-stats span {
    margin-top: 5px;
    color: var(--forensics-muted);
    font-size: 0.72rem;
}

/* DOCUMENT */

.chain-visual,
.recovery-visual {
    display: grid;
    place-items: center;
}

.custody-document {
    width: min(100%, 480px);
}

.document-top {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 95, 116, 0.1);
}

.document-logo {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(178, 109, 255, 0.28);
    border-radius: 16px;
    color: var(--forensics-purple);
    background: rgba(178, 109, 255, 0.05);
    font-weight: 900;
}

.document-top span {
    color: var(--forensics-cyan);
    font-size: 0.66rem;
    font-weight: 900;
}

.document-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 95, 116, 0.08);
}

.document-row span {
    color: var(--forensics-muted);
}

.document-seal {
    margin-top: 24px;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(88, 255, 173, 0.25);
    border-radius: 10px;
    color: var(--forensics-green);
    background: rgba(88, 255, 173, 0.05);
    font-weight: 900;
    letter-spacing: 0.07em;
}

.custody-point {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 13px;
    align-items: center;
}

.custody-point p {
    margin: 0;
    color: var(--forensics-muted);
}

/* BACKUP VISUAL */

.hashing-visual {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 12px;
}

.hash-file {
    padding: 22px;
    text-align: center;
}

.hash-file-icon {
    margin: 18px auto;
}

.hash-file-label {
    color: var(--forensics-cyan);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.hash-file code {
    color: var(--forensics-green);
}

.hash-transfer {
    position: relative;
    text-align: center;
}

.transfer-line {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--forensics-red), var(--forensics-green));
    box-shadow: 0 0 12px rgba(255, 95, 116, 0.4);
}

.transfer-icon {
    width: 42px;
    height: 42px;
    margin: -21px auto 9px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #00170d;
    background: var(--forensics-green);
    font-weight: 900;
    animation: malwareStatusPulse 2s ease-out infinite;
}

.hash-transfer p {
    color: var(--forensics-green);
    font-size: 0.68rem;
    font-weight: 900;
}

/* ACTIVITY TIMELINE */

.activity-timeline {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.activity-item {
    display: grid;
    grid-template-columns: 90px 30px 1fr;
    gap: 18px;
    align-items: center;
}

.activity-time {
    text-align: right;
}

.activity-time strong,
.activity-time span {
    display: block;
}

.activity-time strong {
    color: var(--forensics-cyan);
}

.activity-time span {
    color: var(--forensics-muted);
    font-size: 0.7rem;
}

.activity-line {
    position: relative;
    align-self: stretch;
    display: grid;
    place-items: center;
}

.activity-line::before {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 2px;
    background: linear-gradient(var(--forensics-red), var(--forensics-purple));
}

.activity-line span {
    position: relative;
    z-index: 2;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--forensics-red);
    box-shadow: 0 0 14px rgba(255, 95, 116, 0.7);
}

.activity-card {
    padding: 22px;
}

.activity-type {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.login-event { color: var(--forensics-cyan); background: rgba(97, 232, 255, 0.08); }
.file-event { color: var(--forensics-yellow); background: rgba(255, 209, 102, 0.08); }
.network-event { color: var(--forensics-purple); background: rgba(178, 109, 255, 0.08); }
.delete-event { color: var(--forensics-red); background: rgba(255, 95, 116, 0.08); }

/* KNOWLEDGE CHECK */

.check-answer {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
    padding: 18px;
    border-color: rgba(255, 209, 102, 0.24);
    background: rgba(255, 209, 102, 0.05);
}

.answer-icon {
    margin: 0;
    border-color: rgba(255, 209, 102, 0.3);
    color: var(--forensics-yellow);
    background: rgba(255, 209, 102, 0.06);
}

.check-answer h3 {
    margin: 0 0 6px;
}

.check-answer p {
    margin: 0;
    color: var(--forensics-muted);
}

.recovery-drive {
    width: min(100%, 470px);
}

.drive-top {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.drive-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--forensics-red);
}

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

.data-block {
    aspect-ratio: 1;
    border-radius: 9px;
    animation: malwareBlockPulse 3s ease-in-out infinite;
}

.active-block {
    background: rgba(97, 232, 255, 0.3);
    border: 1px solid rgba(97, 232, 255, 0.44);
}

.deleted-block {
    background: rgba(255, 209, 102, 0.28);
    border: 1px solid rgba(255, 209, 102, 0.46);
}

.empty-block {
    background: rgba(255, 95, 116, 0.18);
    border: 1px solid rgba(255, 95, 116, 0.34);
}

.drive-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 22px;
    color: var(--forensics-muted);
    font-size: 0.72rem;
}

.drive-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.drive-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.active-key { background: var(--forensics-cyan); }
.deleted-key { background: var(--forensics-yellow); }
.empty-key { background: var(--forensics-red); }

/* FINAL CTA */

.forensics-cta {
    position: relative;
    width: min(1180px, calc(100% - 40px));
    margin: 20px auto 0;
    padding: 88px 70px;
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: 40px;
    background:
        radial-gradient(circle at 82% 50%, rgba(255, 95, 116, 0.13), transparent 30%),
        linear-gradient(145deg, rgba(29, 7, 18, 0.96), rgba(13, 3, 9, 0.98));
}

.cta-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    top: -20%;
    height: 18%;
    background: linear-gradient(transparent, rgba(255, 95, 116, 0.09), transparent);
    animation: malwareCtaScan 5s linear infinite;
}

.forensics-cta-content,
.cta-case-display {
    position: relative;
    z-index: 2;
}

.cta-case-display {
    text-align: center;
}

.cta-case-label {
    color: var(--forensics-cyan);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.cta-case-circle {
    width: 130px;
    height: 130px;
    margin: 18px auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(88, 255, 173, 0.34);
    border-radius: 50%;
    color: var(--forensics-green);
    background: rgba(88, 255, 173, 0.06);
    font-size: 3.6rem;
    box-shadow: 0 0 40px rgba(88, 255, 173, 0.14);
    animation: malwareScannerPulse 3s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes malwareGridMove {
    to { background-position: 46px 46px, 46px 46px; }
}

@keyframes malwareDataSweep {
    from { transform: translate3d(-8%, -8%, 0) rotate(0deg); }
    to { transform: translate3d(8%, 8%, 0) rotate(3deg); }
}

@keyframes malwareHeroGrid {
    to { background-position: 0 58px, 58px 0; }
}

@keyframes malwareDividerPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes malwareHeroGlow {
    0%, 100% { opacity: 0.72; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.04); }
}

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

@keyframes malwareBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes malwareStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 95, 116, 0.72); }
    70% { box-shadow: 0 0 0 11px rgba(255, 95, 116, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 95, 116, 0); }
}

@keyframes malwareRingSpin {
    to { transform: rotate(360deg); }
}

@keyframes malwareRingSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes malwareScannerRotate {
    to { transform: rotate(360deg); }
}

@keyframes malwareScannerPulse,
malwareIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes malwareNodePulse {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes malwareTerminalFloat,
malwarePanelFloat {
    0%, 100% { transform: translateY(0) rotate(-0.2deg); }
    50% { transform: translateY(-10px) rotate(0.2deg); }
}

@keyframes malwareProgressPulse {
    0%, 100% { filter: brightness(0.9); }
    50% { filter: brightness(1.3); }
}

@keyframes malwareBlockPulse {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

@keyframes malwareCtaScan {
    from { top: -20%; }
    to { top: 110%; }
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .forensics-hero,
    .digital-evidence-section,
    .chain-custody-section,
    .hashing-section,
    .forensics-check-section,
    .forensics-cta {
        grid-template-columns: 1fr;
    }

    .forensics-hero {
        text-align: center;
    }

    .forensics-status,
    .forensics-hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .forensics-hero-buttons,
    .forensics-cta-buttons {
        justify-content: center;
    }

    .forensics-hero-data {
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .overview-layout {
        grid-template-columns: 1fr;
    }

    .forensics-types-grid,
    .forensics-tools-grid,
    .practices-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .evidence-heading,
    .chain-content,
    .hashing-content,
    .check-content,
    .forensics-cta-content {
        text-align: center;
    }

    .evidence-heading {
        margin-left: auto;
        margin-right: auto;
    }

    .custody-points,
    .hashing-features {
        text-align: left;
    }
}

@media (max-width: 760px) {
    .forensics-overview,
    .forensics-types,
    .forensics-process,
    .digital-evidence-section,
    .chain-custody-section,
    .forensics-tools-section,
    .hashing-section,
    .timeline-analysis-section,
    .forensics-practices-section,
    .forensics-check-section {
        width: min(100% - 28px, 1180px);
        padding: 76px 0;
    }

    .forensics-hero {
        min-height: auto;
        padding: 100px 18px 82px;
    }

    .forensics-hero h1 {
        font-size: clamp(3rem, 15vw, 5rem);
        line-height: 1.02;
    }

    .forensics-primary-btn,
    .forensics-secondary-btn {
        width: 100%;
    }

    .forensics-hero-buttons,
    .forensics-cta-buttons {
        flex-direction: column;
    }

    .forensics-hero-data,
    .overview-side-grid,
    .forensics-types-grid,
    .forensics-tools-grid,
    .practices-grid {
        grid-template-columns: 1fr;
    }

    .forensics-hero-visual {
        transform: scale(0.86);
        margin: -35px 0;
    }

    .process-step {
        grid-template-columns: 52px 1fr;
    }

    .process-timeline::before {
        left: 25px;
    }

    .hashing-visual {
        grid-template-columns: 1fr;
    }

    .hash-transfer {
        min-height: 80px;
    }

    .transfer-line {
        width: 2px;
        height: 80px;
        margin: 0 auto;
    }

    .activity-item {
        grid-template-columns: 70px 22px 1fr;
        gap: 12px;
    }

    .forensics-cta {
        width: min(100% - 28px, 1180px);
        padding: 70px 28px;
    }
}

@media (max-width: 500px) {
    .overview-main-card,
    .overview-small-card,
    .forensics-type-card,
    .process-content,
    .evidence-dashboard,
    .custody-document,
    .forensics-tool-card,
    .practice-card,
    .recovery-drive {
        padding: 22px;
    }

    .process-timeline::before {
        display: none;
    }

    .process-step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .process-marker {
        margin: 0 auto;
    }

    .process-command {
        margin-left: auto;
        margin-right: auto;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .document-row {
        flex-direction: column;
        gap: 5px;
    }

    .activity-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .activity-time {
        text-align: center;
    }

    .activity-line {
        display: none;
    }

    .check-answer {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .answer-icon {
        margin: 0 auto;
    }

    .drive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .forensics-hero-visual {
        transform: scale(0.72);
        margin: -85px 0;
    }
}

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