:root {
        --kvm-dark: #003f38;
        --kvm-deep: #042f2b;
        --kvm-green: #007c68;
        --kvm-mint: #73d7a3;
        --kvm-aqua: #28c7a2;
        --spring: #0f5f54;
        --ink: #09251f;
        --muted: #60756e;
        --line: rgba(7, 75, 64, 0.14);
        --soft: #eef9f5;
        --white: #ffffff;
        --danger: #c2412d;
        --warn: #b7791f;
        --success: #067a52;
        --shadow: 0 22px 70px rgba(0, 48, 41, 0.18);
        --radius-xl: 30px;
        --radius-lg: 22px;
        --radius-md: 16px;
        --max: 1180px;
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        color: var(--ink);
        background:
          radial-gradient(
            circle at top left,
            rgba(115, 215, 163, 0.32),
            transparent 26rem
          ),
          radial-gradient(
            circle at 86% 18%,
            rgba(40, 199, 162, 0.18),
            transparent 22rem
          ),
          linear-gradient(180deg, #f9fffc 0%, #edf8f3 38%, #ffffff 100%);
        font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
        overflow-x: hidden;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(
            115deg,
            transparent 0 74%,
            rgba(0, 124, 104, 0.035) 74% 75%,
            transparent 75%
          ),
          linear-gradient(
            18deg,
            transparent 0 82%,
            rgba(115, 215, 163, 0.05) 82% 83%,
            transparent 83%
          );
        background-size:
          160px 160px,
          220px 220px;
        mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
        z-index: -2;
      }

      .grain {
        position: fixed;
        inset: 0;
        pointer-events: none;
        opacity: 0.12;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        z-index: -1;
      }

      a {
        color: inherit;
      }
      button,
      input {
        font: inherit;
      }
      .container {
        width: min(var(--max), calc(100% - 40px));
        margin: 0 auto;
      }

      .topbar {
        position: sticky;
        top: 0;
        z-index: 50;
        backdrop-filter: blur(18px);
        background: rgba(249, 255, 252, 0.82);
        border-bottom: 1px solid rgba(0, 91, 78, 0.1);
      }

      .nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 76px;
        gap: 22px;
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
      }
      .logo-shell {
        display: grid;
        place-items: center;
        width: 154px;
        height: 48px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 10px 30px rgba(0, 66, 57, 0.12);
        border: 1px solid rgba(0, 91, 78, 0.12);
        padding: 8px 14px;
        flex: 0 0 auto;
      }
      .logo-shell img {
        width: 100%;
        height: auto;
        display: block;
      }
      .brand-copy {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
      }
      .brand-copy strong {
        font-size: 14px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--kvm-dark);
      }
      .brand-copy span {
        font-size: 12px;
        color: var(--muted);
        white-space: nowrap;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
      }
      .nav-links a {
        text-decoration: none;
        color: #18443b;
        font-size: 13px;
        font-weight: 700;
        padding: 10px 12px;
        border-radius: 999px;
        transition: 0.2s ease;
      }
      .nav-links a:hover {
        background: rgba(0, 124, 104, 0.08);
        color: var(--kvm-green);
      }

      .hero {
        padding: 78px 0 62px;
        position: relative;
        overflow: hidden;
      }

      .hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.04fr) minmax(330px, 0.96fr);
        gap: 42px;
        align-items: center;
      }

      .hero h1 {
        margin: 0;
        font-size: clamp(42px, 7vw, 82px);
        line-height: 0.92;
        letter-spacing: -0.055em;
        color: var(--kvm-deep);
      }
      .hero h1 span {
        display: block;
        color: var(--kvm-green);
      }
      .hero p {
        margin: 24px 0 0;
        max-width: 710px;
        color: #3b5850;
        font-size: clamp(18px, 2.2vw, 23px);
        line-height: 1.6;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 30px;
      }
      .btn {
        border: 0;
        border-radius: 999px;
        padding: 14px 20px;
        font-weight: 850;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        min-height: 48px;
        transition:
          transform 0.2s ease,
          box-shadow 0.2s ease,
          background 0.2s ease;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--kvm-green), var(--kvm-aqua));
        color: white;
        box-shadow: 0 18px 42px rgba(0, 124, 104, 0.28);
      }
      .btn-secondary {
        background: rgba(255, 255, 255, 0.88);
        color: var(--kvm-dark);
        border: 1px solid rgba(0, 91, 78, 0.14);
      }
      .btn-ghost {
        background: transparent;
        color: var(--kvm-dark);
        border: 1px solid rgba(0, 91, 78, 0.18);
      }

      .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 34px;
        max-width: 690px;
      }
      .stat {
        padding: 16px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid rgba(0, 91, 78, 0.11);
        box-shadow: 0 14px 34px rgba(0, 48, 41, 0.08);
      }
      .stat b {
        display: block;
        color: var(--kvm-green);
        font-size: 22px;
      }
      .stat span {
        color: var(--muted);
        font-size: 13px;
        line-height: 1.4;
      }

      .simulation-card {
        position: relative;
        background:
          linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(239, 251, 246, 0.86)
          ),
          radial-gradient(
            circle at top right,
            rgba(115, 215, 163, 0.32),
            transparent 16rem
          );
        border: 1px solid rgba(0, 91, 78, 0.14);
        border-radius: 36px;
        padding: 24px;
        box-shadow: var(--shadow);
        overflow: hidden;
        isolation: isolate;
      }
      .simulation-card::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -72px;
        top: -80px;
        background: radial-gradient(
          circle,
          rgba(115, 215, 163, 0.5),
          transparent 68%
        );
        z-index: -1;
      }

      .device {
        border-radius: 30px;
        background: #081f1b;
        padding: 14px;
        color: white;
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.08),
          0 30px 80px rgba(0, 34, 29, 0.28);
      }
      .device-top {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px 10px 16px;
      }
      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
      }
      .dot:nth-child(1) {
        background: #ff6b6b;
      }
      .dot:nth-child(2) {
        background: #ffd166;
      }
      .dot:nth-child(3) {
        background: #74d3ae;
      }
      .device-url {
        flex: 1;
        margin-left: 8px;
        border-radius: 999px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.72);
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .fake-page {
        border-radius: 24px;
        background:
          radial-gradient(
            circle at 90% 10%,
            rgba(115, 215, 163, 0.2),
            transparent 18rem
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03)
          );
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 22px;
        min-height: 410px;
        position: relative;
        overflow: hidden;
      }
      .fake-page::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(115, 215, 163, 0.14),
          transparent
        );
        transform: translateX(-110%);
        animation: scan 4.5s ease-in-out infinite;
      }
      @keyframes scan {
        0%,
        42% {
          transform: translateX(-110%);
        }
        65%,
        100% {
          transform: translateX(110%);
        }
      }
      .security-seal {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(115, 215, 163, 0.12);
        color: #b7ffe1;
        border: 1px solid rgba(115, 215, 163, 0.24);
        font-size: 12px;
        font-weight: 750;
      }
      .fake-page h2 {
        margin: 24px 0 12px;
        font-size: 28px;
        line-height: 1.1;
        letter-spacing: -0.02em;
      }
      .fake-page p {
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
        margin: 0 0 20px;
      }
      .fake-doc {
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 14px;
        align-items: center;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        margin: 20px 0;
      }
      .doc-icon {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        background: linear-gradient(135deg, #73d7a3, #00a78c);
        display: grid;
        place-items: center;
        color: #052b25;
      }
      .fake-doc strong {
        display: block;
        color: white;
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      .fake-doc span {
        display: block;
        color: rgba(255, 255, 255, 0.58);
        font-size: 13px;
        margin-top: 3px;
      }
      .fake-input {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.62);
        border-radius: 16px;
        padding: 14px 15px;
        margin: 10px 0 14px;
        outline: none;
      }
      .fake-input:focus {
        border-color: rgba(115, 215, 163, 0.6);
        box-shadow: 0 0 0 4px rgba(115, 215, 163, 0.1);
      }
      .device-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .microcopy {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.52);
        margin-top: 12px;
        line-height: 1.45;
      }

      .reveal-panel {
        display: none;
        margin-top: 20px;
        padding: 18px;
        border-radius: 22px;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.94),
          rgba(238, 249, 245, 0.94)
        );
        border: 1px solid rgba(0, 91, 78, 0.15);
        color: var(--ink);
        box-shadow: 0 18px 50px rgba(0, 48, 41, 0.16);
      }
      .simulation-card.revealed .reveal-panel {
        display: block;
        animation: pop 0.35s ease both;
      }
      .simulation-card.revealed .fake-page {
        outline: 2px solid rgba(194, 65, 45, 0.7);
      }
      @keyframes pop {
        from {
          opacity: 0;
          transform: translateY(10px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .reveal-panel h3 {
        margin: 0 0 8px;
        color: var(--danger);
        font-size: 23px;
      }
      .reveal-panel p {
        margin: 0;
        color: #365d54;
        line-height: 1.55;
      }
      .red-flags {
        display: grid;
        gap: 8px;
        margin-top: 14px;
      }
      .red-flags div {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        color: #31584f;
        font-size: 14px;
      }

      section {
        padding: 78px 0;
      }
      section[id],
      #simulationCard {
        scroll-margin-top: 104px;
      }
      .section-head {
        margin-bottom: 34px;
        max-width: 820px;
      }
      .section-head h2 {
        margin: 0;
        font-size: clamp(34px, 4.8vw, 58px);
        line-height: 1;
        letter-spacing: -0.046em;
        color: var(--kvm-deep);
      }
      .section-head p {
        margin: 18px 0 0;
        color: #4d6b63;
        font-size: 18px;
        line-height: 1.65;
      }

      .band {
        background:
          radial-gradient(
            circle at 16% 0%,
            rgba(115, 215, 163, 0.2),
            transparent 26rem
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72),
            rgba(238, 249, 245, 0.7)
          );
        border-top: 1px solid rgba(0, 91, 78, 0.08);
        border-bottom: 1px solid rgba(0, 91, 78, 0.08);
      }

      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
      .card {
        position: relative;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: 0 16px 48px rgba(0, 48, 41, 0.08);
        overflow: hidden;
      }
      .card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--kvm-green), var(--kvm-mint));
        opacity: 0.9;
      }
      .card h3 {
        margin: 12px 0 10px;
        font-size: 23px;
        color: var(--kvm-dark);
        letter-spacing: -0.02em;
      }
      .card p {
        color: #4c665f;
        line-height: 1.6;
        margin: 0;
      }
      .card ul {
        margin: 14px 0 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 9px;
      }
      .card li {
        display: flex;
        gap: 9px;
        align-items: flex-start;
        color: #405f56;
        line-height: 1.45;
      }
      .card li::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--kvm-aqua);
        margin-top: 0.55em;
        flex: 0 0 auto;
      }
      .icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: linear-gradient(
          135deg,
          rgba(0, 124, 104, 0.11),
          rgba(115, 215, 163, 0.22)
        );
        color: var(--kvm-green);
      }
      .icon svg {
        width: 26px;
        height: 26px;
      }

      .flow {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }
      .flow-step {
        position: relative;
        background: var(--kvm-deep);
        color: white;
        border-radius: 24px;
        padding: 22px;
        min-height: 188px;
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0, 48, 41, 0.2);
      }
      .flow-step::before {
        content: attr(data-step);
        position: absolute;
        right: 16px;
        top: 8px;
        font-size: 72px;
        line-height: 1;
        font-weight: 900;
        color: rgba(115, 215, 163, 0.14);
      }
      .flow-step h3 {
        margin: 0 0 10px;
        font-size: 21px;
      }
      .flow-step p {
        margin: 0;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
      }

      .attack-list {
        display: grid;
        gap: 12px;
      }
      .attack {
        display: grid;
        grid-template-columns: 180px 1fr 1fr;
        gap: 16px;
        align-items: start;
        padding: 18px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(0, 91, 78, 0.12);
        box-shadow: 0 12px 35px rgba(0, 48, 41, 0.06);
      }
      .attack b {
        color: var(--kvm-green);
        font-size: 17px;
      }
      .attack span {
        display: block;
        color: #506b64;
        line-height: 1.5;
      }
      .attack small {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: #80938e;
        font-weight: 850;
        margin-bottom: 5px;
      }

      .deepfake-spotlight {
        display: grid;
        grid-template-columns: 0.94fr 1.06fr;
        gap: 22px;
        align-items: stretch;
      }
      .deepfake-panel {
        position: relative;
        border-radius: 32px;
        padding: 30px;
        overflow: hidden;
        background:
          radial-gradient(
            circle at top right,
            rgba(115, 215, 163, 0.22),
            transparent 22rem
          ),
          linear-gradient(145deg, #042f2b, #005a4d 58%, #073f37);
        color: white;
        box-shadow: 0 28px 78px rgba(0, 48, 41, 0.26);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      .deepfake-panel::after {
        content: "";
        position: absolute;
        right: -70px;
        bottom: -90px;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        border: 44px solid rgba(115, 215, 163, 0.09);
      }
      .deepfake-panel h3 {
        margin: 0 0 14px;
        font-size: 31px;
        letter-spacing: -0.035em;
      }
      .deepfake-panel p {
        margin: 0;
        color: rgba(255, 255, 255, 0.77);
        line-height: 1.62;
        font-size: 17px;
      }
      .signal-grid {
        display: grid;
        gap: 12px;
      }
      .signal {
        display: grid;
        grid-template-columns: 42px 1fr;
        gap: 12px;
        align-items: start;
        padding: 17px;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 91, 78, 0.12);
        box-shadow: 0 12px 35px rgba(0, 48, 41, 0.055);
      }
      .signal strong {
        display: block;
        color: var(--kvm-dark);
        margin-bottom: 4px;
      }
      .signal span {
        color: #4d6b63;
        line-height: 1.5;
      }
      .signal .mini-icon {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        background: linear-gradient(
          135deg,
          rgba(0, 124, 104, 0.12),
          rgba(115, 215, 163, 0.22)
        );
        color: var(--kvm-green);
        font-weight: 950;
      }
      .case-callout {
        margin-top: 22px;
        padding: 22px;
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 91, 78, 0.12);
        box-shadow: 0 16px 46px rgba(0, 48, 41, 0.07);
      }
      .case-callout h3 {
        margin: 0 0 10px;
        color: var(--kvm-dark);
        font-size: 23px;
      }
      .case-callout p {
        margin: 0;
        color: #4d6b63;
        line-height: 1.6;
      }
      .case-callout a {
        color: var(--kvm-green);
        font-weight: 850;
        text-decoration: none;
      }
      .case-callout a:hover {
        text-decoration: underline;
      }

      .classification {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .flag {
        padding: 26px;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 91, 78, 0.12);
        box-shadow: 0 18px 52px rgba(0, 48, 41, 0.08);
        min-height: 300px;
      }
      .flag .flag-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .flag h3 {
        margin: 0;
        font-size: 26px;
        letter-spacing: -0.03em;
      }
      .flag-dot {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.55);
      }
      .flag.green .flag-dot {
        background: #1fbf75;
      }
      .flag.yellow .flag-dot {
        background: #f2bf4b;
      }
      .flag.red .flag-dot {
        background: #d9553f;
      }
      .flag p {
        color: #4d6b63;
        line-height: 1.6;
      }
      .flag strong {
        color: var(--ink);
      }

      .split {
        display: grid;
        grid-template-columns: 0.88fr 1.12fr;
        gap: 28px;
        align-items: start;
      }
      .panel-dark {
        background:
          radial-gradient(
            circle at top right,
            rgba(115, 215, 163, 0.24),
            transparent 20rem
          ),
          linear-gradient(145deg, #052b25, #004a41 58%, #07352f);
        color: white;
        border-radius: 34px;
        padding: 30px;
        box-shadow: 0 28px 78px rgba(0, 48, 41, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .panel-dark h3 {
        font-size: 30px;
        margin: 0 0 14px;
        letter-spacing: -0.03em;
      }
      .panel-dark p {
        color: rgba(255, 255, 255, 0.74);
        line-height: 1.62;
      }
      .checklist {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }
      .check {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 12px;
        align-items: start;
        color: rgba(255, 255, 255, 0.86);
      }
      .check span:first-child {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(115, 215, 163, 0.18);
        color: #9dffcf;
        display: grid;
        place-items: center;
        font-weight: 900;
      }

      .accordion {
        display: grid;
        gap: 12px;
      }
      details {
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(0, 91, 78, 0.12);
        box-shadow: 0 12px 35px rgba(0, 48, 41, 0.05);
        overflow: hidden;
      }
      summary {
        cursor: pointer;
        padding: 18px 20px;
        font-weight: 850;
        color: var(--kvm-dark);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      summary::-webkit-details-marker {
        display: none;
      }
      summary::after {
        content: "+";
        font-size: 25px;
        color: var(--kvm-green);
      }
      details[open] summary::after {
        content: "−";
      }
      details p,
      details ul {
        padding: 0 20px 18px;
        margin: 0;
        color: #4c665f;
        line-height: 1.6;
      }
      details ul {
        padding-left: 36px;
      }

      .quiz {
        background:
          radial-gradient(
            circle at 12% 5%,
            rgba(115, 215, 163, 0.24),
            transparent 20rem
          ),
          linear-gradient(135deg, #06342e, #005247 55%, #087260);
        color: white;
        border-radius: 38px;
        padding: 32px;
        box-shadow: 0 28px 80px rgba(0, 48, 41, 0.28);
        overflow: hidden;
      }
      .quiz h2 {
        color: white;
        margin: 0 0 10px;
        font-size: clamp(32px, 4vw, 52px);
        letter-spacing: -0.04em;
      }
      .quiz p {
        color: rgba(255, 255, 255, 0.74);
        line-height: 1.6;
      }
      .quiz-card {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 26px;
        padding: 22px;
        margin-top: 22px;
      }
      .quiz-card h3 {
        margin: 0 0 16px;
        font-size: 22px;
      }
      .answers {
        display: grid;
        gap: 10px;
      }
      .answer {
        width: 100%;
        text-align: left;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 16px;
        padding: 14px 15px;
        color: white;
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
        transition: 0.18s ease;
      }
      .answer:hover {
        background: rgba(255, 255, 255, 0.16);
        transform: translateX(3px);
      }
      .answer.correct {
        background: rgba(115, 215, 163, 0.22);
        border-color: rgba(115, 215, 163, 0.55);
      }
      .answer.wrong {
        background: rgba(255, 109, 91, 0.18);
        border-color: rgba(255, 109, 91, 0.45);
      }
      .quiz-feedback {
        margin-top: 15px;
        color: rgba(255, 255, 255, 0.8);
        min-height: 28px;
        line-height: 1.55;
      }
      .quiz-controls {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 18px;
      }
      .score {
        font-weight: 900;
        color: #b9ffd8;
      }

      .timeline {
        position: relative;
        display: grid;
        gap: 18px;
      }
      .timeline::before {
        content: "";
        position: absolute;
        left: 24px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(var(--kvm-green), transparent);
      }
      .time-item {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 16px;
        position: relative;
      }
      .time-dot {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--kvm-deep);
        color: white;
        display: grid;
        place-items: center;
        font-weight: 900;
        box-shadow: 0 10px 26px rgba(0, 48, 41, 0.2);
        z-index: 1;
      }
      .time-box {
        background: rgba(255, 255, 255, 0.84);
        border: 1px solid rgba(0, 91, 78, 0.12);
        border-radius: 22px;
        padding: 20px;
        box-shadow: 0 14px 42px rgba(0, 48, 41, 0.07);
      }
      .time-box h3 {
        margin: 0 0 7px;
        color: var(--kvm-dark);
      }
      .time-box p {
        margin: 0;
        color: #4c665f;
        line-height: 1.55;
      }

      .final {
        padding: 78px 0 96px;
        background:
          radial-gradient(
            circle at 80% 12%,
            rgba(115, 215, 163, 0.25),
            transparent 22rem
          ),
          linear-gradient(135deg, #042f2b, #005a4d 58%, #073f37);
        color: white;
        position: relative;
        overflow: hidden;
      }
      .final::before {
        content: "";
        position: absolute;
        inset: auto -8% -38% auto;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        border: 80px solid rgba(115, 215, 163, 0.08);
      }
      .final h2 {
        margin: 0;
        font-size: clamp(40px, 6vw, 76px);
        line-height: 0.96;
        letter-spacing: -0.052em;
      }
      .final p {
        color: rgba(255, 255, 255, 0.75);
        max-width: 850px;
        font-size: 19px;
        line-height: 1.65;
      }
      .commitment {
        margin-top: 32px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }
      .commitment div {
        border-radius: 22px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.09);
        border: 1px solid rgba(255, 255, 255, 0.12);
        min-height: 146px;
      }
      .commitment b {
        display: block;
        color: #b9ffd8;
        margin-bottom: 8px;
      }
      .commitment span {
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.5;
      }
      footer {
        padding: 26px 0;
        color: rgba(255, 255, 255, 0.7);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

      .progress {
        position: fixed;
        left: 0;
        top: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--kvm-green), var(--kvm-mint));
        width: 0;
        z-index: 100;
      }
      .toast {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: min(420px, calc(100% - 40px));
        background: #062d28;
        color: white;
        border-radius: 22px;
        padding: 17px 18px;
        box-shadow: 0 18px 50px rgba(0, 48, 41, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.12);
        transform: translateY(140%);
        transition: transform 0.3s ease;
        z-index: 70;
      }
      .toast.visible {
        transform: translateY(0);
      }
      .toast b {
        color: #9dffcf;
      }
      .toast p {
        margin: 6px 0 0;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.45;
      }

      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* Destaque da simulação */
      .hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(520px, 1.1fr);
        gap: 54px;
        align-items: center;
      }
      .hero-copy strong {
        color: var(--kvm-dark);
      }
      .simulation-note {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
        padding: 13px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(0, 91, 78, 0.13);
        box-shadow: 0 12px 32px rgba(0, 48, 41, 0.08);
      }
      .simulation-note-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        color: var(--kvm-green);
        background: rgba(115, 215, 163, 0.18);
        flex: 0 0 auto;
      }
      .simulation-note-icon svg {
        width: 21px;
        height: 21px;
      }
      .simulation-note strong {
        display: block;
        font-size: 14px;
        color: var(--kvm-dark);
      }
      .simulation-note span:not(.simulation-note-icon) {
        display: block;
        margin-top: 2px;
        font-size: 13px;
        color: var(--muted);
      }

      .simulation-card {
        border: 2px solid rgba(0, 124, 104, 0.34);
        padding: 20px;
        box-shadow:
          0 28px 90px rgba(0, 48, 41, 0.22),
          0 0 0 8px rgba(115, 215, 163, 0.08);
      }
      .simulation-heading {
        position: relative;
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 14px;
        align-items: center;
        margin-bottom: 16px;
        padding: 15px 18px;
        color: white;
        border-radius: 22px;
        background: linear-gradient(135deg, #004f45, #008775);
        box-shadow: 0 16px 38px rgba(0, 79, 69, 0.25);
      }
      .simulation-heading::after {
        content: "";
        position: absolute;
        left: 37px;
        bottom: -9px;
        width: 18px;
        height: 18px;
        background: #006f61;
        transform: rotate(45deg);
        border-radius: 3px;
      }
      .simulation-heading-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        color: #062e28;
        background: linear-gradient(135deg, #9ce9bd, #39cfaa);
        position: relative;
        z-index: 1;
      }
      .simulation-heading-icon svg {
        width: 26px;
        height: 26px;
      }
      .simulation-heading span {
        display: block;
        color: #bfffe1;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.13em;
      }
      .simulation-heading strong {
        display: block;
        margin-top: 3px;
        font-size: 21px;
        line-height: 1.15;
      }
      .simulation-heading small {
        display: block;
        margin-top: 5px;
        color: rgba(255, 255, 255, 0.76);
        font-size: 13px;
        line-height: 1.4;
      }
      .simulation-card:not(.revealed) .device {
        animation: simulationFocus 2.8s ease-in-out infinite;
      }
      @keyframes simulationFocus {
        0%,
        100% {
          box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            0 24px 68px rgba(0, 34, 29, 0.24);
        }
        50% {
          box-shadow:
            inset 0 0 0 1px rgba(115, 215, 163, 0.22),
            0 30px 86px rgba(0, 124, 104, 0.34);
        }
      }
      .simulation-card.revealed .simulation-heading {
        background: linear-gradient(135deg, #7d2f20, #b54c38);
      }
      .simulation-card.revealed .simulation-heading::after {
        background: #9c3d2c;
      }
      .simulation-card.revealed .simulation-heading span {
        color: #ffe1da;
      }
      .device .btn-ghost,
      .quiz .btn-ghost {
        color: #e8fff6;
        border-color: rgba(184, 255, 225, 0.3);
        background: rgba(255, 255, 255, 0.06);
      }
      .device .btn-ghost:hover,
      .quiz .btn-ghost:hover {
        color: white;
        background: rgba(255, 255, 255, 0.13);
        border-color: rgba(184, 255, 225, 0.5);
      }

      /* Feedback do quiz */
      .quiz-feedback {
        min-height: 0;
        padding: 0;
        border-radius: 16px;
        border: 1px solid transparent;
        font-weight: 650;
      }
      .quiz-feedback:not(:empty) {
        padding: 14px 16px;
      }
      .quiz-feedback.correct {
        color: #d7ffea;
        background: rgba(46, 184, 125, 0.18);
        border-color: rgba(115, 215, 163, 0.38);
      }
      .quiz-feedback.wrong {
        color: #ffe4df;
        background: rgba(218, 79, 58, 0.2);
        border-color: rgba(255, 132, 111, 0.42);
      }

      @media (max-width: 980px) {
        .hero-grid,
        .split,
        .grid-2,
        .deepfake-spotlight {
          grid-template-columns: 1fr;
        }
        .hero-grid {
          gap: 34px;
        }
        .simulation-card {
          max-width: 680px;
          width: 100%;
          margin: 0 auto;
        }
        .grid-3,
        .classification,
        .commitment {
          grid-template-columns: 1fr;
        }
        .flow {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .attack {
          grid-template-columns: 1fr;
        }
        .nav {
          align-items: flex-start;
          flex-direction: column;
          padding: 15px 0;
        }
        .nav-links {
          justify-content: flex-start;
        }
        .brand-copy span {
          white-space: normal;
        }
        section[id],
        #simulationCard {
          scroll-margin-top: 210px;
        }
      }
      @media (max-width: 640px) {
        .container {
          width: min(100% - 26px, var(--max));
        }
        section,
        .hero {
          padding: 52px 0;
        }
        .flow {
          grid-template-columns: 1fr;
        }
        .simulation-heading {
          grid-template-columns: 44px 1fr;
          padding: 14px;
        }
        .simulation-heading-icon {
          width: 44px;
          height: 44px;
          border-radius: 14px;
        }
        .simulation-heading strong {
          font-size: 18px;
        }
        .simulation-card {
          padding: 14px;
        }
        .simulation-note {
          width: 100%;
          align-items: flex-start;
        }
        .fake-input {
          font-size: 13px;
        }
        .fake-page {
          min-height: auto;
        }
        .simulation-card,
        .quiz,
        .final .container {
          border-radius: 24px;
        }
        .commitment {
          grid-template-columns: 1fr;
        }
        .brand {
          align-items: flex-start;
        }
        .logo-shell {
          width: 136px;
        }
      }

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

      /* KVM KINETIC MOTION SYSTEM V2
       Scroll fluido, tipografia editorial e movimentos específicos por seção.
       O conteúdo e a paleta original permanecem preservados. */
      :root {
        --font-body:
          Inter, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
        --font-display:
          "Space Grotesk", "Arial Narrow", Inter, "Segoe UI", sans-serif;
        --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
        --motion-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --motion-smooth: cubic-bezier(0.22, 1, 0.36, 1);
        --motion-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
        --motion-shadow: 0 28px 78px rgba(0, 48, 41, 0.15);
        --motion-shadow-hover: 0 38px 96px rgba(0, 48, 41, 0.21);
        --timeline-progress: 0;
        --page-progress: 0;
      }

      html.lenis,
      html.lenis body {
        height: auto;
      }
      .lenis.lenis-smooth {
        scroll-behavior: auto !important;
      }
      .lenis.lenis-smooth [data-lenis-prevent] {
        overscroll-behavior: contain;
      }
      .lenis.lenis-stopped {
        overflow: hidden;
      }
      .lenis.lenis-scrolling iframe {
        pointer-events: none;
      }

      html {
        scroll-padding-top: 96px;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 124, 104, 0.45) rgba(238, 249, 245, 0.75);
      }

      body {
        position: relative;
        isolation: isolate;
        min-height: 100%;
        font-family: var(--font-body);
        font-optical-sizing: auto;
        font-kerning: normal;
        font-variant-ligatures: common-ligatures contextual;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
      }

      h1,
      h2,
      h3,
      .brand-copy strong,
      .simulation-heading strong,
      .attack b,
      .flag h3,
      .commitment b {
        font-family: var(--font-display);
        font-optical-sizing: auto;
      }

      .brand-copy strong,
      .nav-links a,
      .simulation-heading span,
      .security-seal,
      .device-url,
      .attack small,
      .score,
      .section-index,
      summary,
      footer {
        font-family: var(--font-mono);
      }

      .brand-copy strong,
      .simulation-heading span,
      .security-seal,
      .attack small,
      .section-index {
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      ::selection {
        background: rgba(40, 199, 162, 0.3);
        color: var(--kvm-deep);
      }

      ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
      }
      ::-webkit-scrollbar-track {
        background: rgba(238, 249, 245, 0.82);
      }
      ::-webkit-scrollbar-thumb {
        border: 2px solid rgba(238, 249, 245, 0.82);
        border-radius: 999px;
        background: linear-gradient(
          180deg,
          rgba(0, 124, 104, 0.72),
          rgba(40, 199, 162, 0.58)
        );
      }
      ::-webkit-scrollbar-thumb:hover {
        background: var(--kvm-green);
      }

      .premium-backdrop {
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        contain: strict;
      }

      .premium-backdrop::before {
        content: "";
        position: absolute;
        inset: -18%;
        opacity: 0.42;
        background:
          radial-gradient(
            ellipse at 14% 8%,
            rgba(115, 215, 163, 0.26),
            transparent 28%
          ),
          radial-gradient(
            ellipse at 90% 30%,
            rgba(40, 199, 162, 0.16),
            transparent 25%
          ),
          radial-gradient(
            ellipse at 48% 88%,
            rgba(0, 124, 104, 0.1),
            transparent 31%
          );
        transform: translate3d(0, calc(var(--page-progress) * -22px), 0)
          scale(1.04);
        transition: transform 0.08s linear;
        will-change: transform;
      }

      .premium-backdrop::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.18;
        background-image:
          linear-gradient(rgba(0, 124, 104, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 124, 104, 0.05) 1px, transparent 1px);
        background-size: 52px 52px;
        background-position: 0 calc(var(--page-progress) * -34px);
        mask-image: linear-gradient(
          to bottom,
          black 0%,
          rgba(0, 0, 0, 0.72) 46%,
          transparent 92%
        );
        -webkit-mask-image: linear-gradient(
          to bottom,
          black 0%,
          rgba(0, 0, 0, 0.72) 46%,
          transparent 92%
        );
        will-change: background-position;
      }

      .premium-orb {
        position: absolute;
        display: block;
        border-radius: 50%;
        filter: blur(76px);
        opacity: 0.12;
        will-change: transform;
      }
      .premium-orb-one {
        width: 370px;
        height: 370px;
        top: 6%;
        right: -150px;
        background: var(--kvm-mint);
        animation: ambientDriftA 18s ease-in-out infinite alternate;
      }
      .premium-orb-two {
        width: 320px;
        height: 320px;
        left: -150px;
        top: 49%;
        background: var(--kvm-aqua);
        animation: ambientDriftB 22s ease-in-out infinite alternate;
      }
      .premium-orb-three {
        width: 250px;
        height: 250px;
        right: 10%;
        bottom: -120px;
        background: var(--kvm-green);
        opacity: 0.08;
        animation: ambientDriftC 25s ease-in-out infinite alternate;
      }
      @keyframes ambientDriftA {
        to {
          transform: translate3d(-56px, 42px, 0) scale(1.08);
        }
      }
      @keyframes ambientDriftB {
        to {
          transform: translate3d(68px, -48px, 0) scale(0.92);
        }
      }
      @keyframes ambientDriftC {
        to {
          transform: translate3d(-36px, -58px, 0);
        }
      }

      .premium-cursor-glow {
        position: fixed;
        left: 0;
        top: 0;
        width: 260px;
        height: 260px;
        z-index: 0;
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
          circle,
          rgba(115, 215, 163, 0.12),
          rgba(40, 199, 162, 0.035) 45%,
          transparent 72%
        );
        transform: translate3d(-320px, -320px, 0);
        transition: opacity 0.42s ease;
        will-change: transform;
      }
      .premium-cursor-glow.is-visible {
        opacity: 1;
      }

      main {
        position: relative;
        z-index: 1;
      }
      section {
        position: relative;
        isolation: isolate;
        overflow: clip;
      }
      .grain {
        z-index: 1;
        opacity: 0.05;
        mix-blend-mode: multiply;
      }

      .progress {
        height: 4px;
        box-shadow: 0 0 18px rgba(40, 199, 162, 0.58);
        transition: width 0.08s linear;
      }
      .progress::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--kvm-mint);
        transform: translateY(-50%);
        box-shadow: 0 0 16px rgba(115, 215, 163, 0.82);
      }

      .topbar {
        transition:
          background 0.45s var(--motion-expo),
          box-shadow 0.45s var(--motion-expo),
          border-color 0.45s ease;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
      }
      .topbar::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -1px;
        width: min(760px, 72vw);
        height: 1px;
        opacity: 0;
        transform: translateX(-50%) scaleX(0.35);
        background: linear-gradient(
          90deg,
          transparent,
          rgba(40, 199, 162, 0.6),
          transparent
        );
        transition:
          opacity 0.45s ease,
          transform 0.7s var(--motion-expo);
      }
      .topbar.is-scrolled {
        background: rgba(249, 255, 252, 0.92);
        border-color: rgba(0, 91, 78, 0.15);
        box-shadow: 0 16px 44px rgba(0, 48, 41, 0.085);
      }
      .topbar.is-scrolled::after {
        opacity: 1;
        transform: translateX(-50%) scaleX(1);
      }

      .logo-shell {
        transition:
          transform 0.5s var(--motion-expo),
          box-shadow 0.5s var(--motion-expo),
          border-color 0.4s ease;
      }
      .brand:hover .logo-shell {
        transform: translateY(-2px);
        border-color: rgba(0, 124, 104, 0.24);
        box-shadow: 0 18px 42px rgba(0, 66, 57, 0.16);
      }

      .nav-links a {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        transition:
          color 0.3s ease,
          transform 0.3s var(--motion-expo),
          background 0.3s ease;
      }
      .nav-links a::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
        transform: scale(0.82);
        background: linear-gradient(
          135deg,
          rgba(0, 124, 104, 0.1),
          rgba(115, 215, 163, 0.16)
        );
        transition:
          opacity 0.3s ease,
          transform 0.4s var(--motion-expo);
      }
      .nav-links a:hover,
      .nav-links a.is-active {
        transform: translateY(-1px);
      }
      .nav-links a:hover::before,
      .nav-links a.is-active::before {
        opacity: 1;
        transform: scale(1);
      }

      .hero {
        min-height: calc(100svh - 76px);
        display: flex;
        align-items: center;
        isolation: isolate;
      }
      .hero::before {
        content: "";
        position: absolute;
        z-index: -1;
        width: min(760px, 72vw);
        height: min(760px, 72vw);
        left: -31%;
        top: -36%;
        border-radius: 46% 54% 58% 42% / 42% 46% 54% 58%;
        background: radial-gradient(
          circle at 62% 60%,
          rgba(115, 215, 163, 0.12),
          transparent 61%
        );
        filter: blur(2px);
        animation: heroMorph 16s ease-in-out infinite alternate;
      }
      .hero::after {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        opacity: 0.27;
        background: linear-gradient(
          112deg,
          transparent 0 42%,
          rgba(115, 215, 163, 0.09) 47%,
          transparent 54% 100%
        );
        background-size: 260% 100%;
        animation: heroLightPass 10s var(--motion-smooth) infinite;
        mask-image: linear-gradient(to bottom, black, transparent 92%);
        -webkit-mask-image: linear-gradient(to bottom, black, transparent 92%);
      }
      @keyframes heroMorph {
        to {
          transform: translate3d(5%, 5%, 0) scale(1.08);
          border-radius: 58% 42% 44% 56% / 54% 58% 42% 46%;
        }
      }
      @keyframes heroLightPass {
        0%,
        20% {
          background-position: 150% 0;
        }
        70%,
        100% {
          background-position: -80% 0;
        }
      }

      .hero h1 {
        font-family: var(--font-display);
        font-weight: 720;
        text-wrap: balance;
        letter-spacing: -0.062em;
        text-shadow: 0 18px 50px rgba(0, 63, 56, 0.075);
      }
      .hero h1 span {
        background: linear-gradient(
          110deg,
          var(--kvm-green),
          var(--kvm-aqua) 57%,
          var(--kvm-green)
        );
        background-size: 180% auto;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: titleGradient 7s ease-in-out infinite;
      }
      @keyframes titleGradient {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      .simulation-note {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition:
          transform 0.45s var(--motion-expo),
          box-shadow 0.45s var(--motion-expo),
          border-color 0.35s ease;
      }
      .simulation-note:hover {
        transform: translateY(-3px);
        border-color: rgba(0, 124, 104, 0.24);
        box-shadow: 0 20px 48px rgba(0, 48, 41, 0.12);
      }

      .btn {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition:
          transform 0.34s var(--motion-expo),
          box-shadow 0.34s var(--motion-expo),
          background 0.34s ease,
          border-color 0.34s ease;
      }
      .btn::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -50%;
        left: -92%;
        width: 42%;
        height: 200%;
        opacity: 0;
        transform: skewX(-18deg);
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.42),
          transparent
        );
        transition:
          left 0.75s var(--motion-expo),
          opacity 0.3s ease;
      }
      .btn:hover::before {
        left: 140%;
        opacity: 0.75;
      }
      .btn:hover {
        transform: translateY(-3px) scale(1.012);
      }
      .btn:active {
        transform: translateY(0) scale(0.985);
      }
      .btn-primary:hover {
        box-shadow: 0 22px 54px rgba(0, 124, 104, 0.34);
      }
      .btn-secondary:hover,
      .btn-ghost:hover {
        box-shadow: 0 16px 38px rgba(0, 48, 41, 0.1);
      }
      .btn:focus-visible,
      .answer:focus-visible,
      summary:focus-visible,
      .nav-links a:focus-visible {
        outline: 3px solid rgba(40, 199, 162, 0.38);
        outline-offset: 4px;
      }

      .motion-ripple {
        position: absolute;
        z-index: 4;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        pointer-events: none;
        background: rgba(255, 255, 255, 0.5);
        transform: translate(-50%, -50%) scale(0);
        animation: motionRipple 0.68s ease-out forwards;
      }
      @keyframes motionRipple {
        to {
          transform: translate(-50%, -50%) scale(18);
          opacity: 0;
        }
      }

      /* A simulação usa aurora e profundidade, sem bordas ou linhas giratórias. */
      .simulation-card {
        position: relative;
        transform: translateZ(0);
        transition:
          transform 0.55s var(--motion-expo),
          box-shadow 0.55s var(--motion-expo),
          border-color 0.4s ease;
        will-change: transform;
        isolation: isolate;
      }
      .simulation-card::before {
        width: 300px;
        height: 300px;
        right: -130px;
        top: -145px;
        z-index: 0;
        opacity: 0.6;
        filter: blur(12px);
        background: radial-gradient(
          circle,
          rgba(115, 215, 163, 0.56),
          rgba(40, 199, 162, 0.12) 42%,
          transparent 70%
        );
        animation: simulationAuroraDrift 8s ease-in-out infinite alternate;
      }
      .simulation-card::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        left: -150px;
        bottom: -175px;
        z-index: 0;
        pointer-events: none;
        border-radius: 50%;
        opacity: 0.46;
        filter: blur(20px);
        background: radial-gradient(
          circle,
          rgba(40, 199, 162, 0.4),
          rgba(0, 124, 104, 0.08) 46%,
          transparent 72%
        );
        animation: simulationAuroraDrift 10s ease-in-out -3s infinite
          alternate-reverse;
      }
      .simulation-card > * {
        position: relative;
        z-index: 1;
      }
      @keyframes simulationAuroraDrift {
        to {
          transform: translate3d(42px, 34px, 0) scale(1.14);
          opacity: 0.72;
        }
      }
      .simulation-card:not(.revealed) {
        animation: simulationBreath 5s ease-in-out infinite;
      }
      @keyframes simulationBreath {
        0%,
        100% {
          box-shadow:
            0 28px 90px rgba(0, 48, 41, 0.22),
            0 0 0 8px rgba(115, 215, 163, 0.08);
        }
        50% {
          box-shadow:
            0 36px 108px rgba(0, 72, 61, 0.3),
            0 0 0 11px rgba(115, 215, 163, 0.11);
        }
      }
      .simulation-card.revealed::before {
        background: radial-gradient(
          circle,
          rgba(255, 126, 103, 0.32),
          transparent 70%
        );
      }
      .simulation-card.revealed::after {
        background: radial-gradient(
          circle,
          rgba(194, 65, 45, 0.22),
          transparent 72%
        );
      }

      .simulation-heading {
        overflow: hidden;
      }
      .simulation-heading::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          circle at 18% 50%,
          rgba(255, 255, 255, 0.18),
          transparent 32%
        );
        transform: translateX(-18%);
        animation: headingGlow 5.4s ease-in-out infinite alternate;
      }
      @keyframes headingGlow {
        to {
          transform: translateX(70%);
          opacity: 0.58;
        }
      }
      .simulation-heading-icon {
        transition:
          transform 0.55s var(--motion-expo),
          box-shadow 0.55s ease;
        box-shadow: 0 12px 28px rgba(2, 48, 41, 0.18);
      }
      .simulation-card:not(.revealed):hover .simulation-heading-icon {
        transform: translateY(-2px) scale(1.06);
      }

      .device {
        transform: perspective(1200px) rotateX(var(--tilt-y, 0deg))
          rotateY(var(--tilt-x, 0deg))
          translate3d(var(--shift-x, 0), var(--shift-y, 0), 0);
        transform-style: preserve-3d;
        transition:
          transform 0.62s var(--motion-expo),
          box-shadow 0.55s var(--motion-expo);
        will-change: transform;
      }
      .simulation-card:hover .device {
        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.1),
          0 38px 96px rgba(0, 34, 29, 0.34);
      }
      .simulation-card.revealed .device {
        transform: none;
        animation: revealDevice 0.55s var(--motion-expo) both;
      }
      @keyframes revealDevice {
        0% {
          filter: saturate(1);
        }
        45% {
          filter: saturate(0.72) brightness(0.94);
        }
        100% {
          filter: none;
        }
      }

      .fake-page,
      .fake-doc {
        transition:
          transform 0.45s var(--motion-expo),
          background 0.35s ease,
          border-color 0.35s ease,
          box-shadow 0.45s var(--motion-expo);
      }
      .fake-doc:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.075);
        border-color: rgba(115, 215, 163, 0.23);
      }
      .fake-input {
        transition:
          border-color 0.3s ease,
          box-shadow 0.3s ease,
          background 0.3s ease;
      }
      .fake-input:focus {
        border-color: rgba(115, 215, 163, 0.64);
        box-shadow: 0 0 0 4px rgba(115, 215, 163, 0.1);
        background: rgba(255, 255, 255, 0.12);
      }
      .reveal-panel {
        box-shadow: 0 22px 60px rgba(0, 48, 41, 0.12);
      }
      .simulation-card.revealed .reveal-panel {
        animation: revealPanelIn 0.58s var(--motion-expo) both;
      }
      @keyframes revealPanelIn {
        from {
          opacity: 0;
          transform: translateY(16px) scale(0.97);
          filter: blur(7px);
        }
        to {
          opacity: 1;
          transform: none;
          filter: blur(0);
        }
      }

      /* Primitivas de animação. Cada seção usa uma combinação diferente. */
      .motion-mask,
      .motion-clip,
      .motion-scale,
      .motion-slide-left,
      .motion-slide-right,
      .motion-rise,
      .motion-skew,
      .motion-zoom {
        will-change: transform, opacity, clip-path, filter;
        backface-visibility: hidden;
        transform-style: preserve-3d;
      }

      .section-head h2 {
        font-family: var(--font-display);
        font-weight: 680;
        letter-spacing: -0.047em;
        text-wrap: balance;
      }
      .section-head p {
        text-wrap: pretty;
      }
      .section-head h2::after {
        content: "";
        display: block;
        width: min(150px, 36%);
        height: 4px;
        margin-top: 18px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          var(--kvm-green),
          var(--kvm-aqua),
          transparent
        );
        transform: scaleX(var(--heading-line, 0));
        transform-origin: left;
      }

      .section-index {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        color: var(--kvm-green);
        font-size: 10px;
        font-weight: 700;
        opacity: 0.7;
      }
      .section-index::before {
        content: "";
        width: 30px;
        height: 1px;
        background: currentColor;
      }

      .motion-surface,
      .motion-dark-surface {
        --spot-x: 50%;
        --spot-y: 50%;
        position: relative;
        transform: translateZ(0);
        transition:
          transform 0.48s var(--motion-expo),
          box-shadow 0.48s var(--motion-expo),
          border-color 0.38s ease,
          background 0.38s ease;
        isolation: isolate;
      }
      .motion-surface::after,
      .motion-dark-surface::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        border-radius: inherit;
        opacity: 0;
        transition: opacity 0.42s ease;
        background: radial-gradient(
          520px circle at var(--spot-x) var(--spot-y),
          rgba(115, 215, 163, 0.22),
          transparent 46%
        );
      }
      .motion-dark-surface::after {
        background: radial-gradient(
          520px circle at var(--spot-x) var(--spot-y),
          rgba(185, 255, 216, 0.12),
          transparent 46%
        );
      }
      .motion-surface > *,
      .motion-dark-surface > * {
        position: relative;
        z-index: 1;
      }
      .motion-surface:hover,
      .motion-dark-surface:hover {
        transform: translateY(-5px);
        box-shadow: var(--motion-shadow-hover);
        border-color: rgba(0, 124, 104, 0.24);
      }
      .motion-surface:hover::after,
      .motion-dark-surface:hover::after {
        opacity: 1;
      }

      /* 01. Fluxo da simulação: trilho horizontal e passos alternados. */
      #simulacao .flow {
        position: relative;
      }
      #simulacao .flow::before {
        content: "";
        position: absolute;
        left: 4%;
        right: 4%;
        top: 12px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(115, 215, 163, 0.55),
          transparent
        );
        transform: scaleX(var(--flow-line, 0));
        transform-origin: left;
        pointer-events: none;
      }
      #simulacao .flow-step {
        transition:
          background 0.4s ease,
          transform 0.45s var(--motion-expo),
          border-color 0.35s ease;
      }
      #simulacao .flow-step:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(115, 215, 163, 0.17);
      }

      /* 02. Fundamentos: cartões com leve profundidade individual. */
      #fundamentos .card:nth-child(2) {
        transform-origin: center bottom;
      }
      #fundamentos .icon {
        transition:
          transform 0.52s var(--motion-snap),
          box-shadow 0.45s ease;
      }
      #fundamentos .card:hover .icon {
        transform: translateY(-4px) scale(1.07);
        box-shadow: 0 14px 30px rgba(0, 124, 104, 0.14);
      }

      /* 03. Ameaças: linhas editoriais que entram lateralmente. */
      #ameacas .attack {
        overflow: hidden;
        position: relative;
      }
      #ameacas .attack::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18%;
        bottom: 18%;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(var(--kvm-green), var(--kvm-aqua));
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.65s var(--motion-expo);
      }
      #ameacas .attack:hover::before {
        transform: scaleY(1);
      }
      #ameacas .attack b {
        transition:
          color 0.3s ease,
          transform 0.4s var(--motion-expo);
      }
      #ameacas .attack:hover b {
        color: var(--kvm-dark);
        transform: translateX(4px);
      }

      /* 04. Deepfake: profundidade e parallax suave, sem órbitas. */
      #deepfake::before {
        content: "";
        position: absolute;
        inset: 12% -18% auto auto;
        width: 520px;
        height: 520px;
        border-radius: 48% 52% 44% 56%;
        background: radial-gradient(
          circle,
          rgba(40, 199, 162, 0.12),
          transparent 68%
        );
        transform: translate3d(0, var(--deepfake-parallax, 0px), 0);
        pointer-events: none;
        z-index: -1;
      }
      .deepfake-panel {
        transition:
          transform 0.55s var(--motion-expo),
          box-shadow 0.55s var(--motion-expo),
          border-color 0.4s ease;
      }
      .deepfake-panel:hover {
        transform: translateY(-6px);
        box-shadow: 0 36px 94px rgba(0, 48, 41, 0.31);
        border-color: rgba(185, 255, 216, 0.22);
      }
      .deepfake-panel::after {
        animation: none !important;
        transform: none !important;
      }

      /* 05. Classificação: cartões revelados por recorte horizontal. */
      #informacoes .flag {
        overflow: hidden;
      }
      #informacoes .flag-dot {
        transition:
          transform 0.5s var(--motion-snap),
          box-shadow 0.45s ease;
      }
      #informacoes .flag:hover .flag-dot {
        transform: scale(1.08);
        box-shadow:
          inset 0 0 0 8px rgba(255, 255, 255, 0.55),
          0 12px 26px rgba(0, 48, 41, 0.12);
      }

      /* 06. Boas práticas: painel e acordeão em direções opostas. */
      #boas-praticas .panel-dark {
        transform-origin: left center;
      }
      details {
        transition:
          transform 0.42s var(--motion-expo),
          box-shadow 0.42s var(--motion-expo),
          border-color 0.35s ease,
          background 0.35s ease;
      }
      details:hover {
        transform: translateX(3px);
        border-color: rgba(0, 124, 104, 0.22);
        box-shadow: 0 18px 46px rgba(0, 48, 41, 0.09);
      }
      details[open] {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(0, 124, 104, 0.22);
        box-shadow: 0 22px 56px rgba(0, 48, 41, 0.11);
      }
      summary::after {
        transition:
          transform 0.42s var(--motion-expo),
          color 0.3s ease;
      }
      details[open] summary::after {
        transform: rotate(180deg);
      }
      details[open] p,
      details[open] ul {
        animation: detailsIn 0.42s var(--motion-expo) both;
      }
      @keyframes detailsIn {
        from {
          opacity: 0;
          transform: translateY(-6px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* 07. Incidentes: a linha é desenhada conforme o usuário percorre a seção. */
      #incidentes .timeline::before {
        transform: scaleY(var(--timeline-progress));
        transform-origin: top;
        background: linear-gradient(
          var(--kvm-green),
          var(--kvm-aqua) 78%,
          transparent
        );
      }
      #incidentes .time-dot {
        transition:
          transform 0.55s var(--motion-snap),
          box-shadow 0.45s ease;
      }
      #incidentes .time-item.is-current .time-dot {
        transform: scale(1.08);
        box-shadow:
          0 0 0 7px rgba(115, 215, 163, 0.12),
          0 12px 26px rgba(0, 48, 41, 0.14);
      }

      /* 08. Quiz: zoom focal e varredura horizontal, sem elementos giratórios. */
      .quiz {
        position: relative;
        isolation: isolate;
        background-size:
          125% 125%,
          120% 120%;
        animation: quizBreath 14s ease-in-out infinite alternate;
      }
      .quiz::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        opacity: 0.5;
        background: linear-gradient(
          108deg,
          transparent 0 38%,
          rgba(115, 215, 163, 0.08) 48%,
          transparent 58% 100%
        );
        background-size: 230% 100%;
        animation: quizSweep 9s var(--motion-smooth) infinite;
      }
      @keyframes quizBreath {
        to {
          background-position:
            8% 4%,
            100% 100%;
        }
      }
      @keyframes quizSweep {
        0%,
        25% {
          background-position: 150% 0;
        }
        75%,
        100% {
          background-position: -80% 0;
        }
      }
      .score {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      .answer {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        touch-action: manipulation;
        transition:
          transform 0.28s var(--motion-expo),
          background 0.28s ease,
          border-color 0.28s ease,
          box-shadow 0.28s ease;
      }
      .answer::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(
          100deg,
          transparent 20%,
          rgba(255, 255, 255, 0.12) 48%,
          transparent 76%
        );
        transform: translateX(-120%);
        transition: transform 0.65s var(--motion-expo);
      }
      .answer:hover::before {
        transform: translateX(120%);
      }
      .answer:hover {
        transform: translateX(5px);
        box-shadow: 0 12px 28px rgba(0, 34, 29, 0.16);
      }
      .answer.correct {
        animation: answerCorrect 0.58s var(--motion-expo) both;
      }
      .answer.wrong {
        animation: answerWrong 0.46s ease both;
      }
      @keyframes answerCorrect {
        0% {
          transform: scale(0.985);
        }
        55% {
          transform: scale(1.015);
        }
        100% {
          transform: scale(1);
        }
      }
      @keyframes answerWrong {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        55% {
          transform: translateX(4px);
        }
        78% {
          transform: translateX(-2px);
        }
      }
      .quiz-feedback:not(:empty) {
        animation: feedbackIn 0.42s var(--motion-expo) both;
      }
      @keyframes feedbackIn {
        from {
          opacity: 0;
          transform: translateY(7px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .toast {
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transition:
          transform 0.45s var(--motion-expo),
          opacity 0.35s ease;
        opacity: 0;
      }
      .toast.visible {
        opacity: 1;
      }

      .final {
        background-size:
          120% 120%,
          140% 140%;
        animation: finalBreath 16s ease-in-out infinite alternate;
      }
      .final::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.1;
        background-image:
          linear-gradient(rgba(185, 255, 216, 0.17) 1px, transparent 1px),
          linear-gradient(90deg, rgba(185, 255, 216, 0.17) 1px, transparent 1px);
        background-size: 58px 58px;
        transform: translateY(calc(var(--page-progress) * -10px));
        mask-image: linear-gradient(to top, black, transparent 74%);
        -webkit-mask-image: linear-gradient(to top, black, transparent 74%);
      }
      @keyframes finalBreath {
        to {
          background-position:
            10% 8%,
            100% 100%;
        }
      }
      .commitment div {
        transition:
          transform 0.45s var(--motion-expo),
          background 0.35s ease,
          border-color 0.35s ease,
          box-shadow 0.45s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .commitment div:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.13);
        border-color: rgba(185, 255, 216, 0.22);
        box-shadow: 0 20px 48px rgba(0, 25, 22, 0.18);
      }

      @media (max-width: 980px) {
        body {
          overscroll-behavior-y: auto;
        }
        .hero {
          min-height: auto;
        }
        .premium-cursor-glow {
          display: none;
        }
        #simulacao .flow::before {
          display: none;
        }
        .motion-surface:hover,
        .motion-dark-surface:hover {
          transform: none;
          box-shadow: inherit;
        }
        .device {
          transform: none !important;
        }
      }

      @media (max-width: 640px) {
        html {
          scroll-padding-top: 188px;
        }
        body {
          overflow-x: hidden;
        }
        .topbar {
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }
        .nav-links {
          width: 100%;
          flex-wrap: nowrap;
          overflow-x: auto;
          overscroll-behavior-x: contain;
          scrollbar-width: none;
          padding-bottom: 2px;
        }
        .nav-links::-webkit-scrollbar {
          display: none;
        }
        .nav-links a {
          white-space: nowrap;
          min-height: 42px;
          display: inline-flex;
          align-items: center;
          flex: 0 0 auto;
        }
        .hero h1 {
          letter-spacing: -0.052em;
        }
        .simulation-card:not(.revealed) {
          animation-duration: 6.5s;
        }
        .simulation-card::before,
        .simulation-card::after {
          filter: blur(28px);
          opacity: 0.28;
        }
        .answer {
          min-height: 50px;
        }
        .btn {
          min-height: 48px;
        }
        .premium-backdrop::after {
          opacity: 0.1;
          background-size: 40px 40px;
        }
        .premium-orb-one {
          width: 230px;
          height: 230px;
          right: -120px;
        }
        .premium-orb-two {
          width: 210px;
          height: 210px;
          left: -130px;
        }
        .premium-orb-three {
          display: none;
        }
      }

      @media (hover: none), (pointer: coarse) {
        .premium-cursor-glow {
          display: none;
        }
        .motion-surface::after,
        .motion-dark-surface::after {
          display: none;
        }
        .motion-surface:hover,
        .motion-dark-surface:hover,
        .btn:hover,
        .answer:hover {
          transform: none;
        }
        .device {
          transform: none !important;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto !important;
        }
        .premium-backdrop::before,
        .premium-backdrop::after,
        .premium-orb,
        .hero::before,
        .hero::after,
        .hero h1 span,
        .simulation-card,
        .simulation-card::before,
        .simulation-card::after,
        .simulation-heading::before,
        .quiz,
        .quiz::before,
        .final {
          animation: none !important;
        }
        .motion-mask,
        .motion-clip,
        .motion-scale,
        .motion-slide-left,
        .motion-slide-right,
        .motion-rise,
        .motion-skew,
        .motion-zoom {
          opacity: 1 !important;
          transform: none !important;
          filter: none !important;
          clip-path: none !important;
        }
      }

      /* KVM TYPOGRAPHY FUSION V3
       Inter e Segoe UI permanecem como identidade principal.
       Space Grotesk e JetBrains Mono aparecem apenas em pontos de contraste. */
      :root {
        --font-primary:
          Inter, "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
        --font-display: var(--font-primary);
        --font-accent:
          "Space Grotesk", Inter, "Segoe UI Variable Display", "Segoe UI",
          sans-serif;
        --font-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
      }

      body,
      button,
      input,
      textarea,
      select {
        font-family: var(--font-primary);
        font-synthesis: none;
      }

      body {
        font-weight: 400;
        letter-spacing: -0.006em;
      }

      h1,
      h2,
      h3,
      h4,
      .brand-copy strong,
      .simulation-heading strong,
      .attack b,
      .flag h3,
      .commitment b,
      .fake-page h2,
      .btn,
      .answer,
      summary {
        font-family: var(--font-primary);
      }

      .hero h1 {
        font-family: var(--font-primary);
        font-weight: 850;
        letter-spacing: -0.064em;
        font-feature-settings:
          "ss01" 1,
          "cv02" 1,
          "cv03" 1;
      }

      .hero h1 span {
        font-family: var(--font-accent);
        font-weight: 660;
        letter-spacing: -0.067em;
      }

      .hero p,
      .section-head p,
      .card p,
      .attack p,
      .flag p,
      .time-box p,
      .deepfake-panel p,
      .quiz-feedback,
      .final p {
        font-family: var(--font-primary);
        font-weight: 420;
        letter-spacing: -0.008em;
      }

      .section-head h2 {
        font-family: var(--font-primary);
        font-weight: 790;
        letter-spacing: -0.052em;
        font-feature-settings:
          "ss01" 1,
          "cv02" 1;
      }

      /* Destaques editoriais pontuais. A fonte do arquivo premium continua dominante. */
      #ameacas .section-head h2,
      #deepfake .section-head h2,
      #quiz .section-head h2,
      #resumo h2,
      #deepfake .case-callout h3,
      #informacoes .flag h3 {
        font-family: var(--font-accent);
        font-weight: 650;
        letter-spacing: -0.048em;
      }

      #fundamentos .card h3,
      #simulacao .flow-step h3,
      #incidentes .time-box h3,
      #deepfake .deepfake-panel h3,
      #boas-praticas .panel-dark h3 {
        font-family: var(--font-primary);
        font-weight: 760;
        letter-spacing: -0.032em;
      }

      .brand-copy strong,
      .nav-links a {
        font-family: var(--font-primary);
        font-weight: 750;
        letter-spacing: 0.055em;
      }

      .brand-copy span {
        font-family: var(--font-primary);
        font-weight: 430;
        letter-spacing: -0.006em;
      }

      .simulation-heading span,
      .security-seal,
      .device-url,
      .attack small,
      .score,
      .section-index,
      .time-dot,
      .mini-icon,
      footer {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums slashed-zero;
      }

      .simulation-heading strong,
      .fake-page h2,
      .fake-doc strong,
      .reveal-panel h3 {
        font-family: var(--font-primary);
        font-weight: 760;
        letter-spacing: -0.025em;
      }

      .attack b,
      .commitment b {
        font-family: var(--font-primary);
        font-weight: 760;
        letter-spacing: -0.025em;
      }

      .flag h3,
      .case-callout h3 {
        text-wrap: balance;
      }

      /* Pequeno detalhe tipográfico: alguns títulos ganham uma linha cinética usando a própria paleta. */
      #ameacas .section-head h2,
      #deepfake .section-head h2,
      #quiz .section-head h2 {
        position: relative;
        display: inline-block;
      }

      #ameacas .section-head h2::after,
      #deepfake .section-head h2::after,
      #quiz .section-head h2::after {
        content: "";
        display: block;
        width: clamp(74px, 16vw, 180px);
        height: 3px;
        margin-top: 14px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          var(--kvm-green),
          var(--kvm-aqua),
          transparent
        );
        transform-origin: left center;
        transform: scaleX(0.38);
        opacity: 0.58;
        transition:
          transform 0.9s var(--motion-expo),
          opacity 0.45s ease;
      }

      #ameacas .section-head:hover h2::after,
      #deepfake .section-head:hover h2::after,
      #quiz .section-head:hover h2::after {
        transform: scaleX(1);
        opacity: 0.88;
      }

      @media (max-width: 760px) {
        body {
          letter-spacing: -0.003em;
        }
        .hero h1 {
          letter-spacing: -0.056em;
        }
        .hero h1 span {
          letter-spacing: -0.058em;
        }
        .section-head h2,
        #ameacas .section-head h2,
        #deepfake .section-head h2,
        #quiz .section-head h2,
        #resumo h2 {
          letter-spacing: -0.043em;
        }
        .brand-copy strong,
        .nav-links a {
          letter-spacing: 0.035em;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #ameacas .section-head h2::after,
        #deepfake .section-head h2::after,
        #quiz .section-head h2::after {
          transform: scaleX(1);
        }
      }

      /* KVM PERFORMANCE AND READABILITY PATCH V4 */
      .hero-copy {
        min-width: 0;
        overflow: visible;
      }
      .hero h1 {
        max-width: 100%;
        font-size: clamp(38px, 5.4vw, 68px);
        line-height: 1.04;
        letter-spacing: -0.055em;
        padding: 0.04em 0 0.12em;
        overflow: visible;
        text-wrap: balance;
      }
      .hero h1 span {
        line-height: 1.06;
        letter-spacing: -0.057em;
        padding-bottom: 0.03em;
      }

      /* O hover mantém a superfície escura e o contraste do texto. */
      #simulacao .flow-step:hover {
        background: linear-gradient(145deg, #07483f, #042f2b);
        border-color: rgba(115, 215, 163, 0.28);
        color: #fff;
      }
      #simulacao .flow-step:hover h3 {
        color: #fff;
      }
      #simulacao .flow-step:hover p {
        color: rgba(255, 255, 255, 0.78);
      }

      /* Revelações nativas: somente opacity e transform, sem blur ou clip-path durante o scroll. */
      .motion-mask,
      .motion-clip,
      .motion-scale,
      .motion-slide-left,
      .motion-slide-right,
      .motion-rise,
      .motion-skew,
      .motion-zoom {
        will-change: auto;
        backface-visibility: visible;
        transform-style: flat;
        filter: none !important;
        clip-path: none !important;
      }

      .motion-system-ready .motion-mask,
      .motion-system-ready .motion-clip,
      .motion-system-ready .motion-scale,
      .motion-system-ready .motion-slide-left,
      .motion-system-ready .motion-slide-right,
      .motion-system-ready .motion-rise,
      .motion-system-ready .motion-skew,
      .motion-system-ready .motion-zoom {
        opacity: 0;
        transition-property: opacity, transform;
        transition-duration: 0.32s, 0.46s;
        transition-timing-function: ease-out, var(--motion-expo);
        transition-delay: var(--motion-delay, 0ms);
      }

      .motion-system-ready .motion-mask {
        transform: translate3d(0, 22px, 0) scale(0.992);
      }
      .motion-system-ready .motion-clip {
        transform: translate3d(-24px, 0, 0) scaleX(0.975);
        transform-origin: left center;
      }
      .motion-system-ready .motion-scale {
        transform: translate3d(0, 14px, 0) scale(0.965);
      }
      .motion-system-ready .motion-slide-left {
        transform: translate3d(-34px, 0, 0);
      }
      .motion-system-ready .motion-slide-right {
        transform: translate3d(34px, 0, 0);
      }
      .motion-system-ready .motion-rise {
        transform: translate3d(0, 22px, 0);
      }
      .motion-system-ready .motion-skew {
        transform: translate3d(0, 20px, 0) skewY(0.8deg);
      }
      .motion-system-ready .motion-zoom {
        transform: translate3d(0, 16px, 0) scale(0.955);
      }

      .motion-system-ready
        :is(
          .motion-mask,
          .motion-clip,
          .motion-scale,
          .motion-slide-left,
          .motion-slide-right,
          .motion-rise,
          .motion-skew,
          .motion-zoom
        ).is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) skew(0) !important;
      }

      .section-visible .section-head {
        --heading-line: 1;
      }
      #simulacao.section-visible .flow {
        --flow-line: 1;
      }
      #incidentes.section-visible .timeline {
        --timeline-progress: 1;
      }
      #incidentes .timeline::before {
        transition: transform 0.72s var(--motion-expo);
      }

      /* Elementos fixos deixam de ser repintados a cada pixel da rolagem. */
      .premium-backdrop::before {
        transform: scale(1.035);
        transition: none;
        will-change: auto;
      }
      .premium-backdrop::after {
        background-position: 0 0;
        will-change: auto;
      }
      .final::after {
        transform: none;
      }
      .premium-orb {
        will-change: auto;
        filter: blur(58px);
      }
      .grain {
        display: none;
      }

      /* A barra usa composição por transform em vez de recalcular largura. */
      .progress {
        width: 100%;
        transform: scaleX(0);
        transform-origin: left center;
        transition: none;
        will-change: transform;
      }

      /* Contenção reduz repintura sem alterar a aparência. */
      .card,
      .attack,
      .signal,
      .case-callout,
      .flag,
      .time-box,
      .flow-step,
      details,
      .commitment > div {
        contain: paint;
      }

      .page-paused *,
      .page-paused *::before,
      .page-paused *::after {
        animation-play-state: paused !important;
      }

      @media (max-width: 980px) {
        .premium-orb {
          animation: none !important;
          filter: blur(42px);
        }
        .hero::after,
        .quiz,
        .quiz::before,
        .final {
          animation: none !important;
        }
        .simulation-note,
        .commitment div {
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        .motion-system-ready .motion-mask,
        .motion-system-ready .motion-clip,
        .motion-system-ready .motion-scale,
        .motion-system-ready .motion-slide-left,
        .motion-system-ready .motion-slide-right,
        .motion-system-ready .motion-rise,
        .motion-system-ready .motion-skew,
        .motion-system-ready .motion-zoom {
          transition-duration: 0.22s, 0.34s;
          transition-delay: min(var(--motion-delay, 0ms), 24ms);
        }
      }

      @media (max-width: 640px) {
        .hero h1 {
          font-size: clamp(34px, 9vw, 40px);
          line-height: 1.07;
          letter-spacing: -0.046em;
          padding-bottom: 0.16em;
        }
        .hero h1 span {
          line-height: 1.09;
          letter-spacing: -0.048em;
        }
        .topbar {
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        .premium-backdrop::after {
          opacity: 0.07;
        }
        .premium-cursor-glow {
          display: none !important;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .motion-system-ready .motion-mask,
        .motion-system-ready .motion-clip,
        .motion-system-ready .motion-scale,
        .motion-system-ready .motion-slide-left,
        .motion-system-ready .motion-slide-right,
        .motion-system-ready .motion-rise,
        .motion-system-ready .motion-skew,
        .motion-system-ready .motion-zoom {
          opacity: 1;
          transform: none !important;
          transition: none !important;
        }
      }

      /* Evita uma transição inversa no carregamento: os elementos recebem o estado inicial sem animar para oculto. */
      .motion-system-initializing
        :is(
          .motion-mask,
          .motion-clip,
          .motion-scale,
          .motion-slide-left,
          .motion-slide-right,
          .motion-rise,
          .motion-skew,
          .motion-zoom
        ) {
        transition: none !important;
      }

      /* KVM MOTION + PARALLAX V5
       Transições expressivas com custo baixo: opacity, transform e recortes curtos.
       O parallax usa um único requestAnimationFrame e só atualiza elementos próximos da tela. */
      :root {
        --parallax-page-slow: 0px;
        --parallax-page-grid: 0px;
        --hero-parallax-bg: 0px;
        --final-parallax-grid: 0px;
      }

      .motion-system-ready
        :is(
          .motion-mask,
          .motion-clip,
          .motion-scale,
          .motion-slide-left,
          .motion-slide-right,
          .motion-rise,
          .motion-skew,
          .motion-zoom
        ) {
        opacity: 0;
        will-change: transform, opacity, clip-path;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transition-property: opacity, transform, clip-path;
        transition-duration: 0.52s, 0.78s, 0.76s;
        transition-timing-function:
          ease-out, var(--motion-expo), var(--motion-expo);
        transition-delay: var(--motion-delay, 0ms);
      }

      .motion-system-ready .motion-mask {
        transform: translate3d(0, 46px, 0) scale(0.982);
        clip-path: inset(0 0 100% 0 round 8px) !important;
        transform-origin: left bottom;
      }
      .motion-system-ready .motion-clip {
        transform: translate3d(-34px, 0, 0) scaleX(0.965);
        clip-path: inset(0 100% 0 0 round 12px) !important;
        transform-origin: left center;
      }
      .motion-system-ready .motion-scale {
        transform: perspective(900px) translate3d(0, 30px, 0) scale(0.91)
          rotateX(3deg);
        transform-origin: center bottom;
      }
      .motion-system-ready .motion-slide-left {
        transform: translate3d(-68px, 0, 0) rotate(-0.55deg);
      }
      .motion-system-ready .motion-slide-right {
        transform: translate3d(68px, 0, 0) rotate(0.55deg);
      }
      .motion-system-ready .motion-rise {
        transform: translate3d(0, 44px, 0) scale(0.99);
      }
      .motion-system-ready .motion-skew {
        transform: translate3d(0, 38px, 0) skewY(1.15deg);
        transform-origin: left center;
      }
      .motion-system-ready .motion-zoom {
        transform: perspective(1000px) translate3d(0, 28px, 0) scale(0.885)
          rotateX(2.2deg);
        transform-origin: center center;
      }

      .motion-system-ready
        :is(
          .motion-mask,
          .motion-clip,
          .motion-scale,
          .motion-slide-left,
          .motion-slide-right,
          .motion-rise,
          .motion-skew,
          .motion-zoom
        ).is-visible {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 0) !important;
        transform: translate3d(0, 0, 0) scale(1) rotate(0) skew(0) !important;
      }

      .motion-settled {
        will-change: auto !important;
      }

      [data-parallax] {
        --parallax-y: 0px;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        will-change: auto;
      }
      [data-parallax].parallax-active {
        will-change: transform;
      }

      .hero-intro,
      #simulacao .flow,
      #deepfake .deepfake-spotlight,
      #informacoes .classification,
      #incidentes .timeline,
      .final .container {
        transform: translate3d(0, var(--parallax-y, 0px), 0);
        will-change: auto;
      }

      .device {
        transform: perspective(1200px) rotateX(var(--tilt-y, 0deg))
          rotateY(var(--tilt-x, 0deg))
          translate3d(
            var(--shift-x, 0px),
            calc(var(--shift-y, 0px) + var(--parallax-y, 0px)),
            0
          );
      }

      .premium-backdrop::before {
        transform: translate3d(0, var(--parallax-page-slow), 0) scale(1.05);
        transition: none;
        will-change: transform;
      }
      .premium-backdrop::after {
        inset: -90px;
        background-position: 0 0;
        transform: translate3d(0, var(--parallax-page-grid), 0) scale(1.02);
        will-change: transform;
      }

      .hero::before {
        animation-name: heroMorphParallax;
        will-change: transform, border-radius;
      }
      @keyframes heroMorphParallax {
        from {
          transform: translate3d(0, var(--hero-parallax-bg), 0) scale(1);
        }
        to {
          transform: translate3d(5%, calc(var(--hero-parallax-bg) + 5%), 0)
            scale(1.08);
          border-radius: 58% 42% 44% 56% / 54% 58% 42% 46%;
        }
      }

      #deepfake::before {
        transform: translate3d(0, var(--deepfake-parallax, 0px), 0);
        will-change: transform;
      }
      .final::after {
        transform: translate3d(0, var(--final-parallax-grid), 0);
        will-change: transform;
      }

      /* Mantém o destaque da simulação sem animar box-shadow a cada quadro. */
      .simulation-card:not(.revealed) {
        animation: none;
        box-shadow:
          0 30px 92px rgba(0, 48, 41, 0.24),
          0 0 0 9px rgba(115, 215, 163, 0.09);
      }

      @media (max-width: 980px) {
        .motion-system-ready
          :is(
            .motion-mask,
            .motion-clip,
            .motion-scale,
            .motion-slide-left,
            .motion-slide-right,
            .motion-rise,
            .motion-skew,
            .motion-zoom
          ) {
          transition-duration: 0.42s, 0.6s, 0.58s;
          transition-delay: min(var(--motion-delay, 0ms), 70ms);
        }
        .motion-system-ready .motion-slide-left {
          transform: translate3d(-36px, 0, 0);
        }
        .motion-system-ready .motion-slide-right {
          transform: translate3d(36px, 0, 0);
        }
        .motion-system-ready .motion-rise,
        .motion-system-ready .motion-mask {
          transform: translate3d(0, 32px, 0) scale(0.988);
        }
        .motion-system-ready .motion-scale,
        .motion-system-ready .motion-zoom {
          transform: translate3d(0, 24px, 0) scale(0.94);
        }
        .device {
          transform: translate3d(0, var(--parallax-y, 0px), 0) !important;
        }
        .hero-intro,
        #simulacao .flow,
        #deepfake .deepfake-spotlight,
        #informacoes .classification,
        #incidentes .timeline,
        .final .container {
          will-change: auto;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        [data-parallax] {
          --parallax-y: 0px !important;
          transform: none !important;
        }
        .premium-backdrop::before,
        .premium-backdrop::after,
        .hero::before,
        #deepfake::before,
        .final::after {
          transform: none !important;
        }
        .motion-system-ready
          :is(
            .motion-mask,
            .motion-clip,
            .motion-scale,
            .motion-slide-left,
            .motion-slide-right,
            .motion-rise,
            .motion-skew,
            .motion-zoom
          ) {
          opacity: 1;
          clip-path: none !important;
          transform: none !important;
          transition: none !important;
        }
      }