/* =========================================================
   CYBERSECURITY LIFE — ETHICAL HACKING PAGE
   Full stylesheet with moving grid and animations
   ========================================================= */

.ethical-hacking-page {
    --ethical-bg: #02070d;
    --ethical-bg-soft: #06131d;
    --ethical-panel: rgba(5, 20, 30, 0.92);
    --ethical-green: #57ff9a;
    --ethical-cyan: #55e7ff;
    --ethical-blue: #1ab6ff;
    --ethical-yellow: #ffd166;
    --ethical-red: #ff667d;
    --ethical-purple: #a786ff;
    --ethical-text: #f4fbff;
    --ethical-muted: #afc5d2;
    --ethical-border: rgba(85, 231, 255, 0.2);
    --ethical-shadow: 0 0 34px rgba(26, 182, 255, 0.12), 0 22px 55px rgba(0, 0, 0, 0.4);

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--ethical-text);
    background:
        radial-gradient(circle at 13% 10%, rgba(26, 182, 255, 0.14), transparent 27%),
        radial-gradient(circle at 84% 18%, rgba(87, 255, 154, 0.1), transparent 25%),
        radial-gradient(circle at 52% 68%, rgba(167, 134, 255, 0.07), transparent 34%),
        linear-gradient(180deg, #02070d 0%, #06131d 52%, #02070d 100%);
}

.ethical-hacking-page *,
.ethical-hacking-page *::before,
.ethical-hacking-page *::after {
    box-sizing: border-box;
}

.ethical-hacking-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(85, 231, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 231, 255, 0.05) 1px, transparent 1px);
    background-size: 46px 46px;
    animation: ethicalGridMove 18s linear infinite;
}

.ethical-hacking-page::after {
    content: "";
    position: fixed;
    inset: -45%;
    z-index: -3;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            128deg,
            transparent 0,
            transparent 92px,
            rgba(87, 255, 154, 0.026) 93px,
            transparent 94px
        );
    animation: ethicalDataSweep 27s linear infinite;
}

.section-padding {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 96px 0;
    position: relative;
    z-index: 2;
}

.section-padding + .section-padding {
    border-top: 1px solid rgba(85, 231, 255, 0.07);
}

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

.section-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 255, 154, 0.3);
    border-radius: 17px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.06);
    box-shadow: 0 0 26px rgba(87, 255, 154, 0.11);
    font-size: 1.45rem;
    animation: ethicalIconPulse 3s ease-in-out infinite;
}

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

.section-heading h2,
.rules-content h2,
.lab-information h2,
.report-content h2,
.ethical-reminder-card h2,
.ethical-next-content h2 {
    margin: 0;
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: transparent;
    background: linear-gradient(90deg, #fff, var(--ethical-cyan) 55%, var(--ethical-green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-heading > p:last-child,
.rules-content > p,
.lab-information > p,
.report-content > p,
.ethical-reminder-card p,
.ethical-next-content > p {
    color: var(--ethical-muted);
    line-height: 1.8;
}

/* HERO */

.ethical-hero {
    position: relative;
    min-height: 850px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
    align-items: center;
    gap: 70px;
    padding: 130px max(28px, calc((100vw - 1180px) / 2)) 110px;
    overflow: hidden;
    border-bottom: 1px solid rgba(85, 231, 255, 0.12);
}

.ethical-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(87, 255, 154, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 182, 255, 0.075) 1px, transparent 1px);
    background-size: 58px 58px;
    transform: perspective(780px) rotateX(64deg) scale(1.55) translateY(31%);
    transform-origin: bottom;
    opacity: 0.82;
    animation: ethicalHeroGrid 13s linear infinite;
}

.ethical-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ethical-blue), var(--ethical-green), transparent);
    box-shadow: 0 0 18px rgba(26, 182, 255, 0.8), 0 0 34px rgba(87, 255, 154, 0.4);
    animation: ethicalDividerPulse 3.5s ease-in-out infinite;
}

.ethical-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 38%, rgba(26, 182, 255, 0.17), transparent 34%),
        radial-gradient(circle at 78% 43%, rgba(87, 255, 154, 0.1), transparent 32%);
    animation: ethicalHeroGlow 8s ease-in-out infinite;
}

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

.ethical-status-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 1px solid rgba(87, 255, 154, 0.34);
    border-radius: 999px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.055);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    animation: ethicalBadgeFloat 4s ease-in-out infinite;
}

.ethical-status-dot,
.authorization-pulse,
.lab-live-dot,
.tool-status span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ethical-green);
    box-shadow: 0 0 0 0 rgba(87, 255, 154, 0.72);
    animation: ethicalStatusPulse 1.8s ease-out infinite;
}

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

.ethical-hero h1 {
    margin: 0;
    padding: 8px 28px 10px 0;
    font-size: clamp(3.7rem, 7vw, 6.7rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    color: transparent;
    background: linear-gradient(90deg, #fff 0%, var(--ethical-cyan) 45%, var(--ethical-green) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

.ethical-hero-buttons,
.ethical-next-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 33px;
}

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

.ethical-primary-btn {
    color: #00150c;
    background: linear-gradient(135deg, var(--ethical-cyan), var(--ethical-green));
    box-shadow: 0 0 26px rgba(26, 182, 255, 0.28);
}

.ethical-secondary-btn {
    color: #d9f8ff;
    border: 1px solid rgba(85, 231, 255, 0.46);
    background: rgba(2, 14, 24, 0.72);
}

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

.ethical-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
    margin-top: 36px;
}

.ethical-stat {
    padding: 17px;
    border: 1px solid rgba(85, 231, 255, 0.14);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(7, 28, 44, 0.76), rgba(3, 14, 24, 0.9));
}

.ethical-stat strong,
.ethical-stat span {
    display: block;
}

.ethical-stat strong {
    color: var(--ethical-green);
}

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

/* TERMINAL */

.ethical-terminal-card {
    position: relative;
    z-index: 3;
    overflow: hidden;
    width: min(100%, 470px);
    min-height: 510px;
    justify-self: end;
    border: 1px solid rgba(85, 231, 255, 0.28);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(7, 29, 45, 0.95), rgba(2, 11, 20, 0.98));
    box-shadow: 0 0 46px rgba(26, 182, 255, 0.16), 0 28px 65px rgba(0, 0, 0, 0.5);
    animation: ethicalTerminalFloat 5s ease-in-out infinite;
}

.ethical-terminal-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(85, 231, 255, 0.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(85, 231, 255, 0.034) 1px, transparent 1px);
    background-size: 27px 27px;
    animation: ethicalTerminalGrid 10s linear infinite;
}

.terminal-header,
.terminal-body {
    position: relative;
    z-index: 2;
}

.terminal-header {
    min-height: 56px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(85, 231, 255, 0.13);
    background: rgba(3, 15, 25, 0.9);
}

.terminal-dots {
    display: flex;
    gap: 7px;
}

.terminal-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

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

.terminal-header p {
    margin: 0;
    text-align: center;
    color: #cbe2eb;
    font-family: "Courier New", monospace;
    font-size: 0.77rem;
}

.terminal-secure {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 255, 154, 0.25);
    border-radius: 8px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.05);
}

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

.terminal-body p {
    margin: 0 0 14px;
    color: #c8dce5;
    font-size: 0.82rem;
    line-height: 1.7;
}

.terminal-user { color: var(--ethical-cyan); font-weight: 700; }
.terminal-output { color: #9fd9e5 !important; }
.terminal-warning { color: var(--ethical-yellow) !important; }
.terminal-success { color: var(--ethical-green) !important; }

.terminal-progress {
    position: relative;
    overflow: hidden;
    height: 10px;
    margin-top: 25px;
    border: 1px solid rgba(85, 231, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
}

.terminal-progress-bar {
    width: 72%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ethical-blue), var(--ethical-cyan), var(--ethical-green));
    animation: ethicalProgressPulse 3.4s ease-in-out infinite;
}

/* SHARED CARDS */

.ethical-definition-grid,
.hacker-types-grid,
.testing-areas-grid,
.ethical-tools-grid {
    display: grid;
    gap: 22px;
}

.ethical-definition-grid { grid-template-columns: repeat(4, 1fr); }
.hacker-types-grid { grid-template-columns: repeat(3, 1fr); }
.testing-areas-grid,
.ethical-tools-grid { grid-template-columns: repeat(3, 1fr); }

.ethical-definition-card,
.hacker-type-card,
.testing-area-card,
.ethical-tool-card,
.process-card,
.rule-item,
.lab-component,
.skill-row,
.report-preview,
.authorization-panel,
.lab-diagram,
.ethical-reminder-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(85, 231, 255, 0.17);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(8, 30, 48, 0.9), rgba(3, 14, 25, 0.96));
    box-shadow: var(--ethical-shadow);
}

.ethical-definition-card,
.hacker-type-card,
.testing-area-card,
.ethical-tool-card {
    padding: 28px;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.ethical-definition-card:hover,
.hacker-type-card:hover,
.testing-area-card:hover,
.ethical-tool-card:hover {
    transform: translateY(-8px);
    border-color: rgba(87, 255, 154, 0.45);
    box-shadow: 0 0 34px rgba(87, 255, 154, 0.1), 0 18px 42px rgba(0, 0, 0, 0.35);
}

.definition-number,
.testing-card-top > span {
    color: rgba(85, 231, 255, 0.35);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.definition-icon,
.hat-icon,
.testing-icon,
.tool-icon,
.process-icon,
.rule-icon,
.node-icon,
.reminder-shield {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 255, 154, 0.3);
    border-radius: 16px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.055);
    font-size: 1.4rem;
    box-shadow: 0 0 20px rgba(87, 255, 154, 0.09);
    animation: ethicalIconPulse 3s ease-in-out infinite;
}

.ethical-definition-card h3,
.hacker-type-card h3,
.testing-area-card h3,
.ethical-tool-card h3,
.process-card h3,
.rule-item h3,
.lab-component h3 {
    margin: 18px 0 10px;
}

.ethical-definition-card p,
.hacker-type-card p,
.testing-area-card p,
.ethical-tool-card p,
.process-card p,
.rule-item p,
.lab-component p {
    color: var(--ethical-muted);
    line-height: 1.72;
}

.hat-label,
.tool-status,
.report-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0 0;
    color: var(--ethical-cyan);
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.hacker-type-card ul,
.report-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    display: grid;
    gap: 11px;
}

.hacker-type-card li,
.report-list li {
    display: flex;
    gap: 10px;
    color: #cde1ea;
}

.white-hat-card { border-color: rgba(87, 255, 154, 0.24); }
.gray-hat-card { border-color: rgba(255, 209, 102, 0.24); }
.black-hat-card { border-color: rgba(255, 102, 125, 0.24); }

/* RULES + AUTHORIZATION */

.rules-container,
.ethical-lab-container,
.report-container {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 34px;
    align-items: center;
}

.rules-checklist,
.lab-components {
    display: grid;
    gap: 15px;
    margin-top: 28px;
}

.rule-item,
.lab-component {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    align-items: start;
    padding: 18px;
}

.rule-icon,
.lab-component > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: var(--ethical-green);
}

.authorization-panel,
.lab-diagram,
.report-preview {
    padding: 28px;
}

.authorization-header,
.lab-diagram-header,
.report-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(85, 231, 255, 0.12);
}

.authorization-body {
    text-align: center;
    padding-top: 28px;
}

.authorization-shield {
    width: 96px;
    height: 96px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 255, 154, 0.32);
    border-radius: 27px;
    color: var(--ethical-green);
    font-size: 2.6rem;
    background: rgba(87, 255, 154, 0.06);
    animation: ethicalShieldPulse 2.8s ease-in-out infinite;
}

.authorization-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.authorization-details div {
    padding: 14px;
    border: 1px solid rgba(85, 231, 255, 0.1);
    border-radius: 10px;
    background: rgba(4, 18, 30, 0.68);
}

.authorization-details span,
.authorization-details strong {
    display: block;
}

.authorization-details span { color: var(--ethical-muted); font-size: 0.75rem; }
.authorization-details strong { margin-top: 4px; color: var(--ethical-green); }

.authorization-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    color: var(--ethical-green);
    font-size: 0.78rem;
}

/* PROCESS TIMELINE */

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

.process-timeline::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 25px;
    bottom: 25px;
    width: 2px;
    background: linear-gradient(var(--ethical-blue), var(--ethical-green), var(--ethical-purple));
    box-shadow: 0 0 14px rgba(26, 182, 255, 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(85, 231, 255, 0.3);
    border-radius: 50%;
    background: #04131f;
    color: var(--ethical-cyan);
    font-weight: 900;
    box-shadow: 0 0 0 8px rgba(26, 182, 255, 0.035);
}

.process-card {
    padding: 24px;
}

/* TESTING AREA TAGS */

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

.testing-tags,
.ethical-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.testing-tags span,
.ethical-principles span {
    padding: 7px 10px;
    border: 1px solid rgba(87, 255, 154, 0.2);
    border-radius: 999px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.05);
    font-size: 0.7rem;
}

/* LAB */

.lab-safety-note {
    display: flex;
    gap: 14px;
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(255, 209, 102, 0.25);
    border-radius: 13px;
    background: rgba(255, 209, 102, 0.06);
}

.lab-safety-note > i {
    color: var(--ethical-yellow);
    font-size: 1.25rem;
}

.lab-network {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
}

.lab-node {
    text-align: center;
    padding: 18px;
    border: 1px solid rgba(85, 231, 255, 0.14);
    border-radius: 13px;
    background: rgba(4, 18, 30, 0.72);
}

.lab-node .node-icon {
    margin: 0 auto 12px;
}

.lab-node strong,
.lab-node span {
    display: block;
}

.lab-node span {
    margin-top: 5px;
    color: var(--ethical-muted);
    font-size: 0.74rem;
}

.network-connection {
    position: relative;
    text-align: center;
}

.connection-line {
    height: 2px;
    background: linear-gradient(90deg, var(--ethical-cyan), var(--ethical-green));
    box-shadow: 0 0 10px rgba(87, 255, 154, 0.4);
}

.connection-packet {
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ethical-green);
    animation: ethicalPacketMove 2.6s linear infinite;
}

.packet-two { animation-delay: 0.8s; }
.packet-three { animation-delay: 1.6s; }

.network-connection small {
    display: block;
    margin-top: 10px;
    color: var(--ethical-muted);
}

.lab-firewall {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid rgba(87, 255, 154, 0.22);
    border-radius: 12px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.055);
}

.lab-log {
    margin-top: 20px;
    padding: 16px;
    border-radius: 11px;
    background: #020a11;
    font-family: "Courier New", monospace;
}

.lab-log p {
    margin: 7px 0;
    color: #bcd0d9;
    font-size: 0.75rem;
}

.lab-log span { color: var(--ethical-cyan); }
.log-success { color: var(--ethical-green) !important; }

/* TOOLS */

.tool-status {
    margin: 0 0 18px;
}

.tool-icon {
    margin-bottom: 18px;
}

/* REPORT */

.report-summary {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 24px;
}

.report-score {
    text-align: center;
    padding: 18px;
    border: 1px solid rgba(255, 102, 125, 0.22);
    border-radius: 14px;
    background: rgba(255, 102, 125, 0.05);
}

.report-score span,
.report-score strong,
.report-score small {
    display: block;
}

.report-score strong {
    margin: 6px 0;
    color: var(--ethical-red);
    font-size: 2.4rem;
}

.report-bars {
    display: grid;
    gap: 12px;
}

.report-bar-row {
    display: grid;
    grid-template-columns: 62px 1fr 24px;
    align-items: center;
    gap: 10px;
}

.report-bar-track,
.skill-progress {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.report-bar-fill,
.skill-fill {
    height: 100%;
    border-radius: inherit;
    animation: ethicalBarPulse 4s ease-in-out infinite;
}

.critical-fill { width: 8%; background: #ff3e5f; }
.high-fill { width: 70%; background: var(--ethical-red); }
.medium-fill { width: 52%; background: var(--ethical-yellow); }
.low-fill { width: 36%; background: var(--ethical-green); }

.report-finding {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 16px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid rgba(255, 102, 125, 0.2);
    border-radius: 13px;
    background: rgba(255, 102, 125, 0.05);
}

.finding-severity {
    height: fit-content;
    padding: 8px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    background: var(--ethical-red);
    font-size: 0.7rem;
    font-weight: 900;
}

.finding-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--ethical-muted);
    font-size: 0.76rem;
}

.report-list li {
    padding: 12px;
    border: 1px solid rgba(85, 231, 255, 0.09);
    border-radius: 10px;
    background: rgba(4, 18, 30, 0.62);
}

.report-list i { color: var(--ethical-green); }

/* SKILLS */

.skills-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.skills-column {
    display: grid;
    gap: 16px;
}

.skill-row {
    padding: 20px;
}

.skill-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.skill-heading span {
    display: flex;
    align-items: center;
    gap: 9px;
}

.skill-heading i,
.skill-heading strong {
    color: var(--ethical-green);
}

.skill-networking { width: 90%; }
.skill-operating { width: 85%; }
.skill-web { width: 82%; }
.skill-database { width: 75%; }
.skill-documentation { width: 88%; }
.skill-communication { width: 84%; }
.skill-solving { width: 92%; }
.skill-ethics { width: 100%; }

.skill-fill {
    background: linear-gradient(90deg, var(--ethical-blue), var(--ethical-cyan), var(--ethical-green));
    box-shadow: 0 0 12px rgba(87, 255, 154, 0.35);
}

/* REMINDER */

.ethical-reminder-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 34px;
    align-items: center;
    padding: 60px;
    background:
        radial-gradient(circle at 15% 50%, rgba(87, 255, 154, 0.12), transparent 30%),
        linear-gradient(145deg, rgba(8, 31, 49, 0.94), rgba(3, 14, 25, 0.98));
}

.reminder-shield {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    border-radius: 30px;
    font-size: 3rem;
}

/* NEXT SECTION */

.ethical-next-section {
    width: min(1180px, calc(100% - 40px));
    margin: 20px auto 0;
    padding: 88px 70px;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: center;
    border: 1px solid rgba(85, 231, 255, 0.2);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 50%, rgba(87, 255, 154, 0.11), transparent 30%),
        linear-gradient(145deg, rgba(7, 27, 46, 0.94), rgba(3, 13, 24, 0.98));
    box-shadow: var(--ethical-shadow);
}

.ethical-next-visual {
    position: relative;
    min-height: 320px;
    display: grid;
    place-items: center;
}

.next-ring {
    position: absolute;
    border: 1px solid rgba(85, 231, 255, 0.18);
    border-radius: 50%;
}

.ring-one { width: 140px; height: 140px; animation: ethicalRingSpin 8s linear infinite; }
.ring-two { width: 220px; height: 220px; animation: ethicalRingSpinReverse 12s linear infinite; }
.ring-three { width: 300px; height: 300px; animation: ethicalRingSpin 16s linear infinite; }

.next-center-icon {
    width: 100px;
    height: 100px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(87, 255, 154, 0.35);
    border-radius: 28px;
    color: var(--ethical-green);
    background: rgba(87, 255, 154, 0.07);
    font-size: 2.7rem;
    box-shadow: 0 0 34px rgba(87, 255, 154, 0.14);
    animation: ethicalShieldPulse 3s ease-in-out infinite;
}

.orbit-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ethical-cyan);
    box-shadow: 0 0 12px rgba(85, 231, 255, 0.8);
}

.orbit-dot-one { animation: ethicalOrbitOne 6s linear infinite; }
.orbit-dot-two { animation: ethicalOrbitTwo 8s linear infinite; }
.orbit-dot-three { animation: ethicalOrbitThree 10s linear infinite; }

/* ANIMATIONS */

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

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

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

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

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

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

@keyframes ethicalBadgeFloat,
ethicalTerminalFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@keyframes ethicalStatusPulse {
    0% { box-shadow: 0 0 0 0 rgba(87, 255, 154, 0.72); }
    70% { box-shadow: 0 0 0 11px rgba(87, 255, 154, 0); }
    100% { box-shadow: 0 0 0 0 rgba(87, 255, 154, 0); }
}

@keyframes ethicalTerminalGrid {
    to { background-position: 0 27px, 27px 0; }
}

@keyframes ethicalProgressPulse {
    0%, 100% { width: 62%; }
    50% { width: 86%; }
}

@keyframes ethicalIconPulse,
ethicalShieldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes ethicalShieldPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 24px rgba(87, 255, 154, 0.12); }
    50% { transform: scale(1.07); box-shadow: 0 0 42px rgba(87, 255, 154, 0.25); }
}

@keyframes ethicalPacketMove {
    from { left: 0; }
    to { left: calc(100% - 8px); }
}

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

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

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

@keyframes ethicalOrbitOne {
    from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

@keyframes ethicalOrbitTwo {
    from { transform: rotate(120deg) translateX(110px) rotate(-120deg); }
    to { transform: rotate(480deg) translateX(110px) rotate(-480deg); }
}

@keyframes ethicalOrbitThree {
    from { transform: rotate(240deg) translateX(150px) rotate(-240deg); }
    to { transform: rotate(600deg) translateX(150px) rotate(-600deg); }
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .ethical-hero,
    .rules-container,
    .ethical-lab-container,
    .report-container,
    .ethical-next-section {
        grid-template-columns: 1fr;
    }

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

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

    .ethical-hero-buttons {
        justify-content: center;
    }

    .ethical-terminal-card {
        justify-self: center;
        width: min(100%, 620px);
    }

    .ethical-definition-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testing-areas-grid,
    .ethical-tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ethical-next-content {
        text-align: center;
    }

    .ethical-next-buttons {
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .section-padding {
        width: min(100% - 28px, 1180px);
        padding: 76px 0;
    }

    .ethical-hero {
        padding: 100px 18px 82px;
    }

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

    .ethical-hero-buttons,
    .ethical-next-buttons {
        flex-direction: column;
    }

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

    .ethical-hero-stats,
    .ethical-definition-grid,
    .hacker-types-grid,
    .testing-areas-grid,
    .ethical-tools-grid,
    .skills-dashboard {
        grid-template-columns: 1fr;
    }

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

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

    .lab-network {
        grid-template-columns: 1fr;
    }

    .network-connection {
        min-height: 70px;
    }

    .connection-line {
        width: 2px;
        height: 70px;
        margin: 0 auto;
    }

    .connection-packet {
        left: 50%;
        top: 0;
        animation: ethicalPacketMoveVertical 2.6s linear infinite;
    }

    .ethical-reminder-card {
        grid-template-columns: 1fr;
        padding: 48px 28px;
        text-align: center;
    }

    .ethical-next-section {
        width: min(100% - 28px, 1180px);
        padding: 70px 28px;
    }
}

@keyframes ethicalPacketMoveVertical {
    from { top: 0; }
    to { top: 62px; }
}

@media (max-width: 500px) {
    .ethical-definition-card,
    .hacker-type-card,
    .testing-area-card,
    .ethical-tool-card,
    .authorization-panel,
    .lab-diagram,
    .report-preview {
        padding: 22px;
    }

    .authorization-details,
    .report-summary {
        grid-template-columns: 1fr;
    }

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

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

    .process-marker,
    .process-icon {
        margin: 0 auto;
    }

    .report-finding {
        grid-template-columns: 1fr;
    }

    .ethical-next-visual {
        transform: scale(0.82);
        margin: -30px;
    }
}

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