:root {
    --hero-navy: #003049;
    --hero-navy-deep: #001e2d;
    --hero-orange: #f77f00;
    --hero-orange-hover: #ff941f;
    --hero-green: #1c9a52;
    --hero-ease: cubic-bezier(0.2, 0.75, 0.2, 1);
}

:root, [data-bs-theme="light"] {
    /* --- Cores do Background (Variações Light) --- */
    --bg-grad-radial-1: rgba(20, 111, 146, 0.11);
    --bg-grad-radial-2: rgba(247, 127, 0, 0.09);
    --bg-grad-linear-1: #fcfcfd;
    --bg-grad-linear-2: #f4f7f9;
    --bg-grad-linear-3: #e9f0f5;
    --hero-light-text: #001f30;
    --hero-light-text-soft: #455b66;
    --hero-light-text-muted: #5a727e;
    --hero-light-accent: #b85400;
    --hero-light-surface: #fcfcfd;
    --hero-light-line: rgba(0, 48, 73, 0.14);
    --hero-light-line-strong: rgba(0, 48, 73, 0.28);
    --hero-light-shadow: rgba(0, 31, 48, 0.18);
}

[data-bs-theme="dark"] {
    /* --- Cores do Background Dark --- */
    --bg-grad-radial-1: rgba(20, 111, 146, 0.35);
    --bg-grad-radial-2: rgba(247, 127, 0, 0.14);
    --bg-grad-linear-1: #001e2d;
    --bg-grad-linear-2: #003049;
    --bg-grad-linear-3: #04293d;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 344px;
    scroll-behavior: smooth;
}

body {
    min-width: 344px;
    margin: 0;
    overflow-x: hidden;
    font-family: system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.hero-section,
.hero-section button,
.hero-section a {
    font-family: system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(76px, 7vw, 108px);
    color: #ffffff;
    background: radial-gradient(circle at 15% 8%, var(--bg-grad-radial-1), transparent 34%),
    radial-gradient(circle at 90% 85%, var(--bg-grad-radial-2), transparent 30%),
    linear-gradient(145deg, var(--bg-grad-linear-1) 0%, var(--bg-grad-linear-2) 44%, var(--bg-grad-linear-3) 100%);
    font-size: 16px;
    line-height: 1.6;
}

.hero-section::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    content: "";
    opacity: 0.12;
    background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: linear-gradient(#000000, transparent 78%);
    mask-image: linear-gradient(#000000, transparent 78%);
}

.hero-section::after {
    position: absolute;
    z-index: -1;
    top: 10%;
    right: -220px;
    width: 560px;
    height: 560px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(255, 255, 255, 0.02),
    0 0 0 160px rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

.hero-container {
    width: calc(100% - 40px);
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 0;
}

.hero-row {
    --bs-gutter-x: clamp(44px, 7vw, 110px);
    --bs-gutter-y: 48px;
    align-items: flex-start;
    margin-bottom: 64px;
}

.hero-copy,
.hero-console-column {
    min-width: 0;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: #dcebf2;
    font-size: 0.6875rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-eyebrow-dot,
.hero-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--hero-green);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(28, 154, 82, 0.14);
}

.hero-title {
    max-width: 820px;
    margin: 0 0 26px;
    color: #ffffff;
    font-size: clamp(3rem, 4.5vw, 4.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.055em;
}

.hero-title span {
    color: #f7a84d;
}

.hero-lead {
    max-width: 690px;
    margin: 0 0 20px;
    color: #cad9e0;
    font-size: clamp(1.04rem, 1.3vw, 1.16rem);
    line-height: 1.65;
}

.hero-legacy {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.6;
}

.hero-legacy::before {
    width: 38px;
    height: 2px;
    flex: 0 0 38px;
    content: "";
    background: var(--hero-orange);
}

.hero-actions {
    gap: 12px;
    margin-bottom: 30px;
}

.hero-button {
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: transform 200ms var(--hero-ease),
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-button-primary {
    --bs-btn-color: #16100a;
    --bs-btn-bg: var(--hero-orange);
    --bs-btn-border-color: var(--hero-orange);
    --bs-btn-hover-color: #16100a;
    --bs-btn-hover-bg: var(--hero-orange-hover);
    --bs-btn-hover-border-color: var(--hero-orange-hover);
    --bs-btn-active-color: #16100a;
    --bs-btn-active-bg: var(--hero-orange);
    --bs-btn-active-border-color: var(--hero-orange);
    color: #16100a;
    background: var(--hero-orange);
    border-color: var(--hero-orange);
    box-shadow: 0 12px 28px rgba(247, 127, 0, 0.22);
}

.hero-button-primary:hover {
    color: #16100a;
    background: var(--hero-orange-hover);
    border-color: var(--hero-orange-hover);
    box-shadow: 0 15px 34px rgba(247, 127, 0, 0.3);
}

.hero-button-primary:active,
.hero-button-primary.active,
.hero-button-primary:first-child:active {
    color: #16100a;
    background: var(--hero-orange);
    border-color: var(--hero-orange);
    box-shadow: 0 8px 20px rgba(247, 127, 0, 0.2);
    transform: translateY(0);
}

.hero-button-secondary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, 0.07);
    --bs-btn-border-color: rgba(255, 255, 255, 0.38);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.68);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.68);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.38);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-button-secondary:hover,
.hero-button-secondary:active,
.hero-button-secondary.active,
.hero-button-secondary:first-child:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.68);
}

.hero-proof {
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    color: #b9ced8;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
}

.hero-proof li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hero-proof span {
    color: #65d58b;
}

.hero-console {
    position: relative;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(0, 23, 36, 0.72);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.hero-console::after {
    position: absolute;
    z-index: -1;
    right: 10%;
    bottom: -26px;
    left: 10%;
    height: 55px;
    content: "";
    background: rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    filter: blur(25px);
}

.hero-toolbar {
    gap: 20px;
    margin-bottom: 16px;
}

.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #d6e2e7;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-code-toggle {
    padding: 3px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 11px;
}

.hero-code-toggle .btn {
    --bs-btn-color: #b9cbd4;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--hero-navy);
    --bs-btn-active-bg: #ffffff;
    --bs-btn-active-border-color: #ffffff;
    min-height: 31px;
    padding: 5px 10px;
    color: #b9cbd4;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 0.6875rem;
    font-weight: 850;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: none;
}

.hero-code-toggle .btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.hero-code-toggle .btn.active,
.hero-code-toggle .btn.active:hover,
.hero-code-toggle .btn.active:active {
    color: var(--hero-navy);
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 31, 48, 0.1);
}

.hero-media {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    row-gap: 20px;
    min-height: 340px;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;
    background: radial-gradient(circle at 35% 42%, rgba(255, 255, 255, 0.12), transparent 42%),
    linear-gradient(135deg, #0b3e56, #062a3c);
}

.hero-product-column,
.hero-code-column {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.hero-product-image {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 24px 42px rgba(0, 18, 29, 0.34);
    object-fit: contain;
}

.hero-code-card {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 210px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;
}

.hero-code-image {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    background: #ffffff;
    border-radius: 10px;
    object-fit: contain;
}

.hero-code-caption {
    max-width: 100%;
    color: #c0d0d8;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: break-word;
    text-align: center;
}

.hero-identity {
    gap: 16px;
    margin: 14px 0;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;
}

.hero-identity-text {
    min-width: 0;
    margin: 0;
}

.hero-meta-label {
    display: block;
    margin-bottom: 4px;
    color: #87a5b3;
    font-size: 0.6875rem;
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.hero-lid {
    display: block;
    color: #ffffff;
    font-family: ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
    font-size: clamp(0.75rem, 0.95vw, 0.875rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.6;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.hero-copy-button {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, 0.07);
    --bs-btn-border-color: rgba(255, 255, 255, 0.2);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.35);
    min-width: 54px;
    min-height: 34px;
    padding: 6px 11px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.hero-copy-button:hover,
.hero-copy-button:active,
.hero-copy-button:first-child:active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
}

.hero-copy-button.is-copied,
.hero-copy-button.is-copied:hover {
    color: #d9f8e4;
    background: rgba(28, 154, 82, 0.24);
    border-color: rgba(101, 213, 139, 0.5);
}

.hero-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hero-flow li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 10px 8px;
    color: #819eac;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 800;
    line-height: 1.4;
    white-space: nowrap;
}

.hero-flow li span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.hero-flow li.is-complete {
    color: #a9d9ba;
}

.hero-flow li.is-current {
    color: #ffffff;
    background: rgba(247, 127, 0, 0.1);
    border-color: rgba(247, 127, 0, 0.45);
}

.hero-flow li.is-current span {
    color: #16100a;
    background: var(--hero-orange);
}

.hero-trust {
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    list-style: none;
}

.hero-trust > li {
    min-width: 0;
    flex: 0 0 25%;
    max-width: 25%;
    padding: 20px 24px;
}

.hero-trust > li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.hero-trust strong {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.hero-trust span {
    display: block;
    color: #94afbc;
    font-size: 0.6875rem;
    line-height: 1.5;
}

.hero-section :where(a, button):focus {
    outline: 0;
}

.hero-section :where(a, button):focus-visible {
    outline: 3px solid rgba(247, 127, 0, 0.55);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 30, 45, 0.75);
}

@media (min-width: 1261px) {
    .hero-copy {
        flex: 0 0 46.6%;
        max-width: 46.6%;
    }

    .hero-console-column {
        flex: 0 0 53.4%;
        max-width: 53.4%;
    }
}

@media (min-width: 1051px) and (max-width: 1260px) {
    .hero-row {
        --bs-gutter-x: 45px;
    }

    .hero-copy {
        flex: 0 0 45.5%;
        max-width: 45.5%;
    }

    .hero-console-column {
        flex: 0 0 54.5%;
        max-width: 54.5%;
    }
}

@media (max-width: 1050px) {
    .hero-section {
        padding-top: 80px;
    }

    .hero-row {
        --bs-gutter-x: 0;
        max-width: 920px;
        margin-inline: auto;
        margin-bottom: 48px;
    }

    .hero-copy {
        max-width: 800px;
    }

    .hero-console-column {
        max-width: 760px;
        margin-inline: auto;
    }

    .hero-trust > li {
        flex-basis: 50%;
        max-width: 50%;
    }

    .hero-trust > li:nth-child(3),
    .hero-trust > li:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, 0.09);
    }

    .hero-trust > li:nth-child(3) {
        border-left: 0;
    }
}

@media (min-width: 621px) {
    .hero-product-column {
        flex: 0 0 64%;
        max-width: 64%;
    }

    .hero-code-column {
        flex: 0 0 36%;
        max-width: 36%;
    }
}

@media (max-width: 820px) {
    .hero-title {
        font-size: clamp(2.85rem, 10vw, 4.8rem);
    }
}

@media (max-width: 620px) {
    .hero-section {
        padding-top: 62px;
    }

    .hero-container {
        width: calc(100% - 28px);
        padding-inline: 0;
    }

    .hero-row {
        --bs-gutter-y: 40px;
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: clamp(2.65rem, 12vw, 3.3rem);
        letter-spacing: -0.05em;
    }

    .hero-lead {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .hero-button {
        width: 100%;
    }

    .hero-proof {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-console {
        padding: 11px;
        border-radius: 21px;
    }

    .hero-toolbar {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .hero-product-column,
    .hero-code-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .hero-product-image {
        max-height: 300px;
    }

    .hero-code-card {
        width: min(100%, 190px);
    }

    .hero-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-trust > li {
        flex-basis: 100%;
        max-width: 100%;
    }

    .hero-trust > li + li,
    .hero-trust > li:nth-child(3) {
        border-top: 1px solid rgba(255, 255, 255, 0.09);
        border-left: 0;
    }
}

@media (max-width: 390px) {
    .hero-container {
        width: calc(100% - 22px);
        padding-inline: 0;
    }

    .hero-proof {
        grid-template-columns: 1fr;
    }

    .hero-identity {
        align-items: stretch !important;
        flex-direction: column;
    }

    .hero-copy-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-button {
        transition: none;
    }
}

/* --- Cores da Hero no Tema Light --- */
[data-bs-theme="light"] .hero-section {
    color: var(--hero-light-text);
}

[data-bs-theme="light"] .hero-section::before {
    background-image: linear-gradient(rgba(0, 48, 73, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 48, 73, 0.3) 1px, transparent 1px);
}

[data-bs-theme="light"] .hero-section::after {
    border-color: rgba(0, 48, 73, 0.1);
    box-shadow: 0 0 0 80px rgba(0, 48, 73, 0.018),
    0 0 0 160px rgba(0, 48, 73, 0.018);
}

[data-bs-theme="light"] .hero-eyebrow {
    color: #31566a;
}

[data-bs-theme="light"] .hero-title,
[data-bs-theme="light"] .hero-legacy {
    color: var(--hero-light-text);
}

[data-bs-theme="light"] .hero-title span {
    color: var(--hero-light-accent);
}

[data-bs-theme="light"] .hero-lead {
    color: var(--hero-light-text-soft);
}

[data-bs-theme="light"] .hero-button-secondary {
    --bs-btn-color: var(--hero-navy);
    --bs-btn-bg: rgba(0, 48, 73, 0.04);
    --bs-btn-border-color: var(--hero-light-line-strong);
    --bs-btn-hover-color: var(--hero-navy-deep);
    --bs-btn-hover-bg: rgba(0, 48, 73, 0.08);
    --bs-btn-hover-border-color: rgba(0, 48, 73, 0.46);
    --bs-btn-active-color: var(--hero-navy-deep);
    --bs-btn-active-bg: rgba(0, 48, 73, 0.1);
    --bs-btn-active-border-color: rgba(0, 48, 73, 0.5);
    color: var(--hero-navy);
    background: rgba(0, 48, 73, 0.04);
    border-color: var(--hero-light-line-strong);
}

[data-bs-theme="light"] .hero-button-secondary:hover,
[data-bs-theme="light"] .hero-button-secondary:active,
[data-bs-theme="light"] .hero-button-secondary.active,
[data-bs-theme="light"] .hero-button-secondary:first-child:active {
    color: var(--hero-navy-deep);
    background: rgba(0, 48, 73, 0.08);
    border-color: rgba(0, 48, 73, 0.46);
}

[data-bs-theme="light"] .hero-proof {
    color: #516b78;
}

[data-bs-theme="light"] .hero-proof span {
    color: #16803b;
}

[data-bs-theme="light"] .hero-console {
    border-color: var(--hero-light-line);
    background: linear-gradient(145deg, rgba(252, 252, 253, 0.96), rgba(237, 243, 246, 0.92)),
    rgba(244, 247, 249, 0.92);
    box-shadow: 0 32px 80px var(--hero-light-shadow);
}

[data-bs-theme="light"] .hero-console::after {
    background: rgba(0, 31, 48, 0.16);
}

[data-bs-theme="light"] .hero-status {
    color: #274b5d;
}

[data-bs-theme="light"] .hero-code-toggle {
    background: rgba(0, 48, 73, 0.05);
    border-color: rgba(0, 48, 73, 0.16);
}

[data-bs-theme="light"] .hero-code-toggle .btn {
    --bs-btn-color: #526d7a;
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--hero-navy-deep);
    --bs-btn-hover-bg: rgba(0, 48, 73, 0.08);
    --bs-btn-active-color: var(--hero-navy);
    --bs-btn-active-bg: var(--hero-light-surface);
    --bs-btn-active-border-color: var(--hero-light-surface);
    color: #526d7a;
}

[data-bs-theme="light"] .hero-code-toggle .btn:hover {
    color: var(--hero-navy-deep);
    background: rgba(0, 48, 73, 0.08);
}

[data-bs-theme="light"] .hero-code-toggle .btn.active,
[data-bs-theme="light"] .hero-code-toggle .btn.active:hover,
[data-bs-theme="light"] .hero-code-toggle .btn.active:active {
    color: var(--hero-navy);
    background: var(--hero-light-surface);
    box-shadow: 0 4px 14px rgba(0, 31, 48, 0.12);
}

[data-bs-theme="light"] .hero-media {
    border-color: rgba(0, 48, 73, 0.12);
    background: radial-gradient(circle at 35% 42%, rgba(252, 252, 253, 0.9), transparent 42%),
    linear-gradient(135deg, #eef4f7, #dfe9ee);
}

[data-bs-theme="light"] .hero-product-image {
    box-shadow: 0 24px 42px rgba(0, 31, 48, 0.16);
}

[data-bs-theme="light"] .hero-code-card {
    background: rgba(252, 252, 253, 0.76);
    border-color: var(--hero-light-line);
}

[data-bs-theme="light"] .hero-code-image {
    background: var(--hero-light-surface);
}

[data-bs-theme="light"] .hero-code-caption {
    color: #526c79;
}

[data-bs-theme="light"] .hero-identity {
    background: rgba(252, 252, 253, 0.72);
    border-color: var(--hero-light-line);
}

[data-bs-theme="light"] .hero-meta-label {
    color: var(--hero-light-text-muted);
}

[data-bs-theme="light"] .hero-lid {
    color: var(--hero-light-text);
}

[data-bs-theme="light"] .hero-copy-button {
    --bs-btn-color: var(--hero-navy);
    --bs-btn-bg: rgba(0, 48, 73, 0.05);
    --bs-btn-border-color: rgba(0, 48, 73, 0.22);
    --bs-btn-hover-color: var(--hero-navy-deep);
    --bs-btn-hover-bg: rgba(0, 48, 73, 0.09);
    --bs-btn-hover-border-color: rgba(0, 48, 73, 0.36);
    --bs-btn-active-color: var(--hero-navy-deep);
    --bs-btn-active-bg: rgba(0, 48, 73, 0.11);
    --bs-btn-active-border-color: rgba(0, 48, 73, 0.4);
    color: var(--hero-navy);
    background: rgba(0, 48, 73, 0.05);
    border-color: rgba(0, 48, 73, 0.22);
}

[data-bs-theme="light"] .hero-copy-button:hover,
[data-bs-theme="light"] .hero-copy-button:active,
[data-bs-theme="light"] .hero-copy-button:first-child:active {
    color: var(--hero-navy-deep);
    background: rgba(0, 48, 73, 0.09);
    border-color: rgba(0, 48, 73, 0.36);
}

[data-bs-theme="light"] .hero-copy-button.is-copied,
[data-bs-theme="light"] .hero-copy-button.is-copied:hover {
    color: #0c5d2c;
    background: rgba(28, 154, 82, 0.12);
    border-color: rgba(28, 154, 82, 0.38);
}

[data-bs-theme="light"] .hero-flow li {
    color: var(--hero-light-text-muted);
    border-color: rgba(0, 48, 73, 0.12);
}

[data-bs-theme="light"] .hero-flow li span {
    background: rgba(0, 48, 73, 0.08);
}

[data-bs-theme="light"] .hero-flow li.is-complete {
    color: #237a45;
}

[data-bs-theme="light"] .hero-flow li.is-current {
    color: #6f3900;
    background: rgba(247, 127, 0, 0.11);
    border-color: rgba(184, 84, 0, 0.46);
}

[data-bs-theme="light"] .hero-flow li.is-current span {
    color: #16100a;
    background: var(--hero-orange);
}

[data-bs-theme="light"] .hero-trust {
    background: rgba(252, 252, 253, 0.64);
    border-color: var(--hero-light-line);
}

[data-bs-theme="light"] .hero-trust > li {
    border-color: var(--hero-light-line);
}

[data-bs-theme="light"] .hero-trust strong {
    color: var(--hero-light-text);
}

[data-bs-theme="light"] .hero-trust span {
    color: var(--hero-light-text-muted);
}

[data-bs-theme="light"] .hero-section :where(a, button):focus-visible {
    outline-color: var(--hero-light-accent);
    box-shadow: 0 0 0 4px rgba(252, 252, 253, 0.92);
}