:root {
    color-scheme: light;
    --color-background: #f6f4ee;
    --color-background-alt: #ece8de;
    --color-surface: #ffffff;
    --color-surface-dark: #0c0c0c;
    --color-text-primary: #111111;
    --color-text-secondary: #69665e;
    --color-text-inverse: #f7f4ec;
    --color-panel-ink: #f7f4ec;
    --color-primary: #c39a45;
    --color-primary-hover: #a98032;
    --color-primary-soft: #eee1c2;
    --color-border: #d9d4c8;
    --color-border-strong: #beb6a6;
    --color-success: #39745a;
    --color-warning: #a9701c;
    --color-danger: #b44646;
    --color-success-soft: #e2ede7;
    --color-danger-soft: #f4e3e2;
    --color-overlay: rgba(17, 17, 17, .55);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .05);
    --shadow-md: 0 16px 38px rgba(0, 0, 0, .09);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --max-width: 1200px
}

[data-theme=dark] {
    color-scheme: dark;
    --color-background: #080808;
    --color-background-alt: #101010;
    --color-surface: #151515;
    --color-surface-dark: #030303;
    --color-text-primary: #f4f1e8;
    --color-text-secondary: #aaa69b;
    --color-text-inverse: #111111;
    --color-primary: #d2aa53;
    --color-primary-hover: #e0bb67;
    --color-primary-soft: #302714;
    --color-border: #2c2a25;
    --color-border-strong: #403c34;
    --color-success: #4f9c7c;
    --color-warning: #c68a3a;
    --color-danger: #d17575;
    --color-success-soft: #16261f;
    --color-danger-soft: #2a1918;
    --color-overlay: rgba(0, 0, 0, .7);
    --shadow-sm: 0 4px 18px rgba(0, 0, 0, .25);
    --shadow-md: 0 18px 44px rgba(0, 0, 0, .38)
}

*,
*:before,
*:after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0
}

img,
svg {
    display: block;
    max-width: 100%
}

img {
    height: auto
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

button {
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    cursor: pointer
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    list-style: none
}

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

    *,
    *:before,
    *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }
}

body {
    font-family: Plus Jakarta Sans, Segoe UI, sans-serif;
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
h4 {
    font-family: Manrope, Segoe UI, sans-serif;
    color: var(--color-text-primary);
    line-height: 1.1;
    font-weight: 700
}

h1 {
    font-size: clamp(2.2rem, 4.5vw, 4.25rem)
}

h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -.01em
}

h3 {
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem)
}

p {
    margin: 0
}

.body-large {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.7
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .4rem .85rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase
}

.eyebrow:before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor
}

.eyebrow--inverse {
    border-color: #d2aa5399;
    color: var(--color-primary)
}

.gold-rule {
    width: 3.5rem;
    height: 2px;
    margin: 1.25rem 0;
    background: var(--color-primary);
    border: 0
}

.gold-rule--center {
    margin-inline: auto
}

body {
    background: var(--color-background);
    transition: background .25s ease, color .25s ease
}

body.menu-open {
    overflow: hidden
}

.container {
    width: min(100% - 2rem, 1200px);
    margin-inline: auto
}

.section {
    padding: clamp(3.5rem, 3rem + 2vw, 5.5rem) 0
}

.section--alt {
    background: var(--color-background-alt)
}

.section--dark {
    background: radial-gradient(120% 140% at 15% 0%, rgba(195, 154, 69, .16), transparent 55%), linear-gradient(160deg, var(--color-surface-dark) 0%, #1a1712 55%, #201b12 100%);
    color: var(--color-panel-ink)
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 3rem;
    text-align: center
}

.section-heading--split {
    max-width: none;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    text-align: left
}

.section-heading p,
.cta-panel__content p,
.site-footer__copy {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 1.02rem
}

.skip-link {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    z-index: 100
}

.skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: auto;
    height: auto;
    padding: .85rem 1.25rem;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
    border-radius: 6px;
    background: var(--color-primary);
    color: #111;
    font-weight: 700;
    box-shadow: var(--shadow-md)
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px
}

@media(max-width:640px) {
    .section-heading--split {
        align-items: start;
        flex-direction: column
    }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.reveal--delay-1 {
    transition-delay: .08s
}

.reveal--delay-2 {
    transition-delay: .16s
}

.reveal--delay-3 {
    transition-delay: .24s
}

@media(prefers-reduced-motion:reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .85rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease
}

.button:hover {
    transform: translateY(-1px)
}

.button:active {
    transform: translateY(0)
}

.button:disabled,
.button[aria-disabled=true] {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

@media(prefers-reduced-motion:reduce) {
    .button:hover {
        transform: none
    }
}

.button--primary {
    color: #171310;
    background: var(--color-primary);
    box-shadow: var(--shadow-sm)
}

.button--primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md)
}

.button--dark {
    color: var(--color-panel-ink);
    background: var(--color-surface-dark);
    border-color: var(--color-surface-dark)
}

.button--dark:hover {
    background: color-mix(in srgb, var(--color-surface-dark) 85%, var(--color-primary) 15%)
}

.button--secondary {
    background: transparent;
    color: inherit;
    border-color: currentColor
}

.button--ghost {
    padding: .65rem 1.15rem;
    min-height: 2.75rem;
    background: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border-strong)
}

.button--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.button--text {
    min-height: auto;
    padding: .2rem 0;
    border: 0;
    border-radius: 0;
    color: var(--color-primary);
    position: relative
}

.button--text:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -.2rem;
    height: 1px;
    background: currentColor;
    transition: right .25s ease
}

.button--text:hover {
    transform: none
}

.button--text:hover:after {
    right: 0
}

.button--small {
    min-height: 2.6rem;
    padding-inline: 1.1rem;
    font-size: .77rem
}

.button--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none
}

.button--loading:after {
    content: "";
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: inherit;
    animation: button-spin .7s linear infinite
}

@media(prefers-reduced-motion:reduce) {
    .button--loading:after {
        animation-duration: 1.4s
    }
}

@keyframes button-spin {
    to {
        transform: rotate(360deg)
    }
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 1.75rem
}

.stat-card,
.feature-card {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    border-radius: 10px;
    padding: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.features-grid,
.stats-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong)
}

.feature-card__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 8px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-family: Manrope, Segoe UI, sans-serif;
    font-weight: 800;
    font-size: .9rem
}

.feature-card h3 {
    margin: 1rem 0 .6rem;
    font-size: 1.1rem
}

.feature-card p {
    margin: 0;
    color: var(--color-text-secondary)
}

.stat-card {
    text-align: center;
    border-radius: 8px
}

.stat-card strong {
    display: block;
    font-family: Manrope, Segoe UI, sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    color: var(--color-text-primary)
}

.stat-card span {
    color: var(--color-text-secondary);
    font-size: .92rem
}

@media(max-width:1024px) {

    .features-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {

    .features-grid,
    .stats-grid {
        grid-template-columns: 1fr
    }
}

.contact-form {
    display: grid;
    gap: 1.5rem
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem
}

.contact-form__field {
    display: grid;
    gap: .6rem
}

.contact-form__field span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-text-primary)
}

.contact-form__field small {
    font-weight: 400;
    color: var(--color-text-secondary)
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
    width: 100%;
    min-height: 3.1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    padding: .9rem 1.05rem;
    font: inherit;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder,
.contact-form__field select::placeholder {
    color: var(--color-text-secondary);
    opacity: .85
}

.contact-form__field input:hover,
.contact-form__field textarea:hover,
.contact-form__field select:hover {
    border-color: var(--color-border-strong)
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible,
.contact-form__field select:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft)
}

.contact-form__field input:disabled,
.contact-form__field textarea:disabled,
.contact-form__field select:disabled {
    background: var(--color-background-alt);
    color: var(--color-text-secondary);
    cursor: not-allowed;
    opacity: .7
}

.contact-form__field input:user-invalid,
.contact-form__field input.is-invalid,
.contact-form__field textarea:user-invalid,
.contact-form__field textarea.is-invalid,
.contact-form__field select:user-invalid,
.contact-form__field select.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-soft)
}

.contact-form__field input:user-valid,
.contact-form__field textarea:user-valid,
.contact-form__field select:user-valid {
    border-color: var(--color-success)
}

.contact-form__field textarea {
    min-height: 200px;
    resize: vertical
}

.contact-form__check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .92rem;
    color: var(--color-text-secondary)
}

.contact-form__check input[type=checkbox],
.contact-form__check input[type=radio] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: auto;
    margin-top: .15rem;
    accent-color: var(--color-primary);
    flex-shrink: 0
}

.contact-form__hint {
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--color-text-secondary)
}

.contact-form__hint--error {
    color: var(--color-danger)
}

.contact-form__hint--success {
    color: var(--color-success)
}

.contact-form__actions {
    display: flex;
    justify-content: center;
    padding-top: .5rem
}

.contact-form__submit {
    min-width: 240px;
    min-height: 3.4rem;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary);
    color: #171310;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease
}

.contact-form__submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md)
}

.contact-form__submit:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

@media(max-width:640px) {
    .contact-form__row {
        grid-template-columns: 1fr
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease
}

.theme-toggle:hover {
    border-color: var(--color-primary);
    color: var(--color-primary)
}

.theme-toggle:active {
    transform: scale(.94)
}

.theme-toggle svg {
    width: 1.15rem;
    height: 1.15rem
}

.theme-toggle .theme-toggle__sun {
    display: none
}

.theme-toggle .theme-toggle__moon,
[data-theme=dark] .theme-toggle .theme-toggle__sun {
    display: block
}

[data-theme=dark] .theme-toggle .theme-toggle__moon {
    display: none
}

.panel-visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4/5;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    overflow: hidden
}

.panel-visual:before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    width: 1.75rem;
    height: 1.75rem;
    border-top: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
    opacity: .75
}

.panel-visual:after {
    content: "";
    position: absolute;
    bottom: 1.4rem;
    right: 1.4rem;
    width: 1.75rem;
    height: 1.75rem;
    border-bottom: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
    opacity: .75
}

.panel-visual__icon {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--color-primary-soft)
}

.panel-visual__icon svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-primary-hover);
    stroke-width: 1.3
}

.panel-visual__index {
    position: absolute;
    top: 1.5rem;
    right: 1.6rem;
    font-family: Manrope, Segoe UI, sans-serif;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--color-text-secondary)
}

.panel-visual--dark {
    border-color: #ffffff1f;
    background: radial-gradient(140% 140% at 20% 0%, rgba(195, 154, 69, .14), transparent 55%), linear-gradient(165deg, var(--color-surface-dark) 0%, #1a1712 100%)
}

.panel-visual--dark .panel-visual__icon {
    background: #d2aa5329
}

.panel-visual--dark .panel-visual__icon svg {
    color: var(--color-primary)
}

.panel-visual--dark .panel-visual__index {
    color: #f7f4ec8c
}

.back-to-top {
    position: fixed;
    right: clamp(1rem, .6rem + 1.5vw, 2rem);
    bottom: clamp(1rem, .6rem + 1.5vw, 2rem);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: #171310;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease
}

.back-to-top:hover {
    background: var(--color-primary-hover)
}

.back-to-top svg {
    width: 1.15rem;
    height: 1.15rem
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

@media(prefers-reduced-motion:reduce) {
    .back-to-top {
        transition: opacity .15s linear, visibility .15s;
        transform: none
    }
}

@media(max-width:640px) {
    .back-to-top {
        width: 2.6rem;
        height: 2.6rem
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 0.5rem 0;
    background: transparent;
    transition: background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease
}

.site-header.is-scrolled {
    background: var(--color-surface);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--color-border)
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: .85rem
}

.brand {
    display: inline-flex;
    align-items: center
}

.brand__logo {
    display: block;
    height: 5rem;
    width: auto;
    object-fit: contain
}

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 1.75rem
}

.nav-desktop a,
.mobile-menu a {
    color: var(--color-text-secondary);
    transition: color .15s ease
}

.nav-desktop a:hover,
.mobile-menu a:hover,
.nav-desktop a.is-active,
.mobile-menu a.is-active {
    color: var(--color-text-primary)
}

.nav-desktop a.is-active {
    position: relative
}

.nav-desktop a.is-active:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.45rem;
    height: 1.5px;
    background: var(--color-primary)
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: transparent;
    transition: background .2s ease, border-color .2s ease
}

.mobile-toggle:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary)
}

.mobile-toggle span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--color-text-primary);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, width .2s ease
}

.mobile-toggle span:nth-child(1),
.mobile-toggle span:nth-child(3) {
    width: 20px
}

.mobile-toggle span:nth-child(2) {
    width: 13px
}

.mobile-toggle[aria-expanded=true] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    width: 20px
}

.mobile-toggle[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0)
}

.mobile-toggle[aria-expanded=true] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 20px
}

.mobile-menu,
.mobile-menu__backdrop {
    display: none
}

@media(max-width:768px) {
    .site-header {
        background: var(--color-surface);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 1px 0 var(--color-border)
    }

    .site-header__inner {
        gap: 1rem
    }

    .nav-desktop {
        display: none
    }

    .mobile-toggle {
        display: flex
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: block;
        pointer-events: none
    }

    .mobile-menu.is-open {
        pointer-events: auto
    }

    .mobile-menu__backdrop {
        position: absolute;
        inset: 0;
        display: block;
        z-index: 0;
        opacity: 0;
        background: var(--color-overlay);
        transition: opacity .3s ease;
        border: none;
        cursor: default
    }

    .mobile-menu.is-open .mobile-menu__backdrop {
        opacity: 1
    }

    .mobile-menu__panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: min(90vw, 22rem);
        height: 100%;
        background: var(--color-surface);
        box-shadow: -6px 0 48px #0000002e;
        transform: translate(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        overflow-x: hidden
    }

    .mobile-menu.is-open .mobile-menu__panel {
        transform: translate(0)
    }

    .mobile-menu__panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.4rem;
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0
    }

    .mobile-menu__panel-logo {
        height: 2.5rem;
        width: auto;
        object-fit: contain
    }

    .mobile-menu__panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-background-alt);
        color: var(--color-text-secondary);
        flex-shrink: 0;
        transition: background .2s ease, color .2s ease, border-color .2s ease
    }

    .mobile-menu__panel-close:hover {
        background: var(--color-primary-soft);
        color: var(--color-primary-hover);
        border-color: var(--color-primary)
    }

    .mobile-menu__nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: .5rem 0
    }

    .mobile-menu__nav a {
        display: flex;
        align-items: center;
        padding: .95rem 1.4rem;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: .01em;
        border-left: 2px solid transparent;
        transition: color .18s ease, background .18s ease, border-left-color .18s ease, padding-left .18s ease
    }

    .mobile-menu__nav a:hover {
        background: var(--color-primary-soft);
        border-left-color: var(--color-primary);
        padding-left: 1.75rem
    }

    .mobile-menu__nav a.is-active {
        color: var(--color-primary-hover);
        font-weight: 600;
        border-left-color: var(--color-primary);
        background: var(--color-primary-soft)
    }

    .mobile-menu__footer {
        flex-shrink: 0;
        padding: 1rem 1.4rem 1.6rem;
        border-top: 1px solid var(--color-border)
    }

    .mobile-menu__secondary {
        display: flex;
        flex-direction: column;
        gap: .15rem
    }

    .mobile-menu__secondary a {
        font-size: .8rem;
        padding: .5rem 0;
        letter-spacing: 0;
        transition: color .15s ease
    }

    .mobile-menu__theme {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .75rem 0;
        margin-top: .25rem;
        border-top: 1px solid var(--color-border)
    }
}

.site-footer {
    padding: 3.5rem 0 2.5rem;
    background: radial-gradient(120% 140% at 15% 0%, rgba(195, 154, 69, .16), transparent 55%), linear-gradient(160deg, var(--color-surface-dark) 0%, #1a1712 55%, #201b12 100%);
    color: var(--color-panel-ink)
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
    gap: 2rem
}

.site-footer__grid>div {
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.site-footer .brand__logo {
    height: 5rem
}

.site-footer__copy {
    max-width: 26rem;
    color: #f7f4ecad;
    line-height: 1.75
}

.site-footer h3 {
    margin: 0 0 .55rem;
    color: var(--color-panel-ink);
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase
}

.site-footer a {
    color: #f7f4ecad;
    font-size: .96rem;
    line-height: 1.6;
    transition: color .15s ease
}

.site-footer a:hover {
    color: var(--color-primary)
}

.site-footer__contact p {
    margin: 0;
    color: #f7f4ecad;
    line-height: 1.6
}

.footer-socials {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .35rem
}

.footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(247, 244, 236, .16);
    border-radius: 50%;
    background: #f7f4ec0d;
    color: #f7f4eccc;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease
}

.footer-social:hover {
    transform: translateY(-2px);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-hover)
}

.footer-social svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(247, 244, 236, .14);
    color: #f7f4ecad;
    font-size: .9rem
}

.site-footer__bottom a {
    color: #f7f4ecad
}

.site-footer__bottom a:hover {
    color: var(--color-primary)
}

@media(max-width:1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {
    .site-footer__grid {
        grid-template-columns: 1fr
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem
    }
}

.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(6rem, 5rem + 4vw, 8.5rem) 0 clamp(3.5rem, 3rem + 2vw, 5rem);
    background: radial-gradient(120% 140% at 15% 0%, rgba(195, 154, 69, .16), transparent 55%), linear-gradient(160deg, var(--color-surface-dark) 0%, #1a1712 55%, #201b12 100%);
    color: var(--color-panel-ink)
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 3rem
}

.hero__content p {
    max-width: 34rem;
    color: #f7f4ecb8;
    font-size: 1.05rem
}

.hero h1 {
    margin: .25rem 0 1.25rem;
    max-width: 16ch;
    color: var(--color-panel-ink)
}

.hero__trust {
    display: flex;
    gap: 1.5rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(247, 244, 236, .14);
    font-size: .88rem;
    color: #f7f4eca8
}

.hero__trust span {
    display: flex;
    align-items: center
}

.hero__trust span:before {
    content: "";
    display: inline-block;
    width: .35rem;
    height: .35rem;
    margin-right: .6rem;
    border-radius: 50%;
    background: var(--color-primary)
}

.hero__emblem {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: min(26rem, 100%);
    margin-inline: auto
}

.hero__emblem:before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(210, 170, 83, .35);
    border-radius: 50%
}

.hero__emblem:after {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(247, 244, 236, .12);
    border-radius: 50%
}

.hero__emblem-square {
    position: absolute;
    inset: 22%;
    border: 1px solid rgba(210, 170, 83, .55);
    transform: rotate(45deg)
}

.hero__emblem-mark {
    position: relative;
    z-index: 1;
    width: 40%;
    height: auto;
    opacity: .95
}

.hero__emblem-line {
    position: absolute;
    top: 50%;
    left: -6%;
    right: -6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(210, 170, 83, .7), transparent)
}

@media(prefers-reduced-motion:reduce) {
    .hero__emblem-square {
        transition: none
    }
}

.trust-strip {
    padding: 1.75rem 0 0
}

.trust-strip p {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--color-text-secondary)
}

.trust-strip__list {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap
}

.trust-strip__list span {
    padding: .7rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em
}

@media(max-width:768px) {
    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center
    }

    .hero__trust {
        justify-content: center
    }

    .hero__content,
    .section-heading {
        text-align: center
    }

    .hero__actions {
        justify-content: center
    }

    .hero__content p {
        margin-inline: auto
    }

    .hero__emblem {
        order: -1;
        width: min(18rem, 70vw)
    }
}

@media(max-width:480px) {
    .hero__emblem {
        width: min(14rem, 60vw)
    }
}

.process-intro {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center
}

.process-intro h3 {
    margin: 0 0 .9rem;
    line-height: 1.1
}

.process-intro p {
    margin: 0;
    color: var(--color-text-secondary)
}

.process-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem
}

.process-steps:before {
    content: "";
    position: absolute;
    top: 1.4rem;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: var(--color-border-strong)
}

.process-step {
    position: relative;
    text-align: left
}

.process-step__index {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    margin-bottom: 1.1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-text-secondary);
    font-family: Manrope, Segoe UI, sans-serif;
    font-weight: 700;
    transition: border-color .3s ease, color .3s ease, background .3s ease
}

.process-step.is-active .process-step__index {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover)
}

.process-step h4 {
    margin: 0 0 .5rem;
    font-size: 1.1rem
}

.process-step p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.7
}

@media(max-width:1024px) {
    .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem
    }

    .process-steps:before {
        display: none
    }
}

@media(max-width:640px) {
    .process-steps {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        padding-left: 1.4rem;
        border-left: 1px solid var(--color-border-strong)
    }

    .process-step__index {
        width: 2.4rem;
        height: 2.4rem;
        margin-left: -2.2rem
    }
}

.showcase-rows,
.about-rows {
    display: grid;
    gap: 4rem
}

.showcase-row,
.about-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 2.75rem;
    align-items: center
}

.showcase-row--reverse,
.about-row--reverse {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr)
}

.showcase-row--reverse .showcase-row__content,
.showcase-row--reverse .about-row__content,
.about-row--reverse .showcase-row__content,
.about-row--reverse .about-row__content {
    order: 2
}

.showcase-row--reverse .showcase-row__media,
.showcase-row--reverse .about-row__media,
.about-row--reverse .showcase-row__media,
.about-row--reverse .about-row__media {
    order: 1
}

.showcase-row__index,
.about-row__index {
    display: inline-block;
    margin-bottom: .85rem;
    color: var(--color-primary-hover);
    font-family: Manrope, Segoe UI, sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em
}

.showcase-row__content h2,
.showcase-row__content h3,
.about-row__content h2 {
    margin: 0 0 .85rem;
    line-height: 1.1
}

.showcase-row__content p,
.about-row__content p {
    margin: 0;
    max-width: 46rem;
    color: var(--color-text-secondary);
    line-height: 1.8
}

.showcase-row__content a,
.about-row__content a {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: .2em
}

@media(max-width:640px) {

    .showcase-row,
    .showcase-row--reverse,
    .about-row,
    .about-row--reverse {
        grid-template-columns: 1fr;
        gap: 1.75rem
    }

    .showcase-row--reverse .showcase-row__content,
    .showcase-row--reverse .showcase-row__media,
    .about-row--reverse .about-row__content,
    .about-row--reverse .about-row__media {
        order: initial
    }

    .panel-visual {
        aspect-ratio: 16/10;
        max-width: 26rem;
        margin-inline: auto
    }
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem
}

.pricing-card {
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm)
}

.pricing-card--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md)
}

.pricing-card__tag {
    display: inline-flex;
    margin-bottom: .85rem;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.pricing-card h3 {
    margin: 0 0 .65rem;
    font-size: 1.2rem
}

.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: 1rem;
    font-family: Manrope, Segoe UI, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary)
}

.pricing-card__price small {
    font-size: .92rem;
    font-weight: 500;
    color: var(--color-text-secondary)
}

.pricing-card ul {
    display: grid;
    gap: .7rem;
    padding: 0;
    margin: 0 0 1.35rem
}

.pricing-card li {
    position: relative;
    padding-left: 1.15rem;
    color: var(--color-text-secondary)
}

.pricing-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .4rem;
    height: 1px;
    background: var(--color-primary)
}

@media(max-width:1024px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {
    .pricing-grid {
        grid-template-columns: 1fr
    }
}

.faq-layout {
    max-width: 820px
}

.faq-browser {
    min-width: 0
}

.faq-browser h2 {
    margin: 0 0 1.6rem;
    font-size: clamp(1.75rem, 3vw, 2.2rem)
}

.faq-tabs {
    display: flex;
    gap: 1.4rem;
    margin-bottom: 1.25rem;
    padding: 0 0 .65rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none
}

.faq-tabs::-webkit-scrollbar {
    display: none
}

.faq-tab {
    position: relative;
    padding: .4rem 0;
    flex: 0 0 max-content;
    color: var(--color-text-secondary);
    font-size: .86rem;
    font-weight: 700;
    transition: color .2s ease
}

.faq-tab:hover {
    color: var(--color-text-primary)
}

.faq-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px
}

.faq-tab.is-active {
    color: var(--color-primary-hover)
}

.faq-tab.is-active:after {
    position: absolute;
    right: 0;
    bottom: -.7rem;
    left: 0;
    height: 2px;
    background: var(--color-primary);
    content: ""
}

.faq-list {
    display: grid
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 0
}

.faq-item[hidden] {
    display: none
}

.faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    gap: 1.5rem;
    padding: 1.15rem 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text-primary)
}

.faq-item__question span:first-child {
    display: block
}

.faq-item__question small {
    display: none
}

.faq-item__icon {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--color-text-primary);
    font-size: 0;
    transform: rotate(45deg) translate(-2px, 2px);
    transition: transform .2s ease
}

.faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease
}

.faq-item__answer p {
    overflow: hidden;
    margin: 0;
    padding-right: 3.5rem;
    padding-top: 0;
    font-size: .96rem;
    line-height: 1.75;
    color: var(--color-text-secondary)
}

.faq-item.is-open .faq-item__answer {
    grid-template-rows: 1fr
}

.faq-item.is-open .faq-item__answer p {
    padding-top: 0;
    padding-bottom: 1.15rem
}

.faq-item.is-open .faq-item__icon {
    transform: rotate(225deg) translate(-2px, 2px)
}

@media(max-width:480px) {
    .faq-tabs {
        margin-inline: -.15rem
    }

    .faq-tab {
        flex-grow: 0
    }

    .faq-item__answer p {
        padding-right: 0
    }
}

.cta-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 2.4rem + 3vw, 5.5rem) clamp(1.5rem, 1rem + 2vw, 4rem);
    border-radius: 12px;
    text-align: center;
    background: radial-gradient(120% 140% at 15% 0%, rgba(195, 154, 69, .16), transparent 55%), linear-gradient(160deg, var(--color-surface-dark) 0%, #1a1712 55%, #201b12 100%);
    color: var(--color-panel-ink)
}

.cta-panel__content {
    position: relative;
    z-index: 1;
    max-width: 42rem;
    margin: 0 auto
}

.cta-panel__content h2 {
    margin: 0 0 1rem;
    line-height: 1.05;
    color: var(--color-panel-ink)
}

.cta-panel__content p {
    margin: 0 auto;
    color: #f7f4ecb8 !important;
    font-size: 1.1rem;
    line-height: 1.65
}

.cta-panel .hero__actions {
    justify-content: center
}

.cta-panel .gold-rule {
    margin-inline: auto
}

.content-page {
    min-height: 100vh
}

.content-page__hero {
    min-height: 260px;
    padding: clamp(6.5rem, 5.5rem + 3vw, 8.5rem) 0 clamp(2.75rem, 2.25rem + 2vw, 3.75rem);
    display: flex;
    align-items: center;
    background: radial-gradient(120% 140% at 15% 0%, rgba(195, 154, 69, .16), transparent 55%), linear-gradient(160deg, var(--color-surface-dark) 0%, #1a1712 55%, #201b12 100%);
    color: var(--color-panel-ink)
}

.content-page__hero h1 {
    max-width: 20ch;
    margin: 0 0 .75rem;
    color: var(--color-panel-ink);
    line-height: 1.05
}

.content-page__hero p {
    max-width: 34rem;
    margin: 0;
    color: #f7f4ecb8;
    font-size: 1rem;
    line-height: 1.65
}

.content-page__body {
    padding: clamp(3rem, 2.5rem + 2vw, 5rem) 0
}

.legal-document .legal-section {
    max-width: 860px;
    margin: 0
}

.legal-section+.legal-section {
    margin-top: 2.75rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--color-border)
}

.legal-section h2 {
    margin: 0 0 1rem;
    font-size: 1.7rem;
    line-height: 1.15
}

.legal-section p {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 1.7
}

.legal-section ul {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
    color: var(--color-text-primary);
    line-height: 1.8;
    list-style: disc
}

.legal-section li+li {
    margin-top: .35rem
}

.contact-page {
    max-width: 1020px;
    margin: 0 auto
}

.contact-page__intro {
    margin-bottom: 2.5rem;
    text-align: center
}

.contact-page__intro h2 {
    margin: 0;
    line-height: 1.15
}

.contact-page__details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem
}

.contact-detail {
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    text-align: center
}

.contact-detail strong {
    display: block;
    margin-bottom: .35rem;
    color: var(--color-text-primary)
}

.contact-detail a,
.contact-detail span {
    color: var(--color-text-secondary)
}

.contact-detail a:hover {
    color: var(--color-primary-hover)
}

@media(max-width:640px) {
    .contact-page__details {
        grid-template-columns: 1fr
    }
}



[data-theme=dark] .brand__logo {
    filter: brightness(0) invert(1);

}

.site-footer .brand__logo {
        filter: brightness(0) invert(1);

}