:root {
    --ink: #0B1220;
    --ink2: #17233D;
    --muted: #5C667A;

    /* brand accents */
    --gold: #CEA152;
    --gold2: #E7C27A;
    --navy: #1F2F52;

    /* surfaces */
    --bg: #F6F8FC;
    --bg2: #FFFFFF;
    --card: #FFFFFF;
    --line: rgba(16, 24, 40, .10);

    --shadow: 0 18px 50px rgba(15, 23, 42, .08);
    --shadow2: 0 26px 70px rgba(15, 23, 42, .10);

    --r: 16px;
    --r2: 22px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(900px 500px at 10% 0%, rgba(206, 161, 82, .12), transparent 60%),
        radial-gradient(800px 480px at 90% 10%, rgba(31, 47, 82, .10), transparent 62%),
        linear-gradient(180deg, #FFFFFF, var(--bg) 60%, #FFFFFF);
    overflow-x: hidden;
}

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

.container {
    width: min(1120px, 92%);
    margin: 0 auto
}

.muted {
    color: var(--muted)
}

.small {
    font-size: 12px;
    color: rgba(15, 23, 42, .62)
}

.text-gold {
    color: var(--gold)
}

.hidden {
    display: none !important
}

/* subtle background FX */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none
}

.orb {
    position: absolute;
    width: 520px;
    height: 520px;
    filter: blur(40px);
    opacity: .65;
    border-radius: 50%
}

.orb--1 {
    left: -220px;
    top: -240px;
    background: radial-gradient(circle, rgba(206, 161, 82, .28), transparent 62%);
    animation: float1 14s ease-in-out infinite
}

.orb--2 {
    right: -260px;
    top: -80px;
    background: radial-gradient(circle, rgba(31, 47, 82, .22), transparent 62%);
    animation: float2 16s ease-in-out infinite
}

.orb--3 {
    left: 28%;
    bottom: -280px;
    background: radial-gradient(circle, rgba(206, 161, 82, .16), transparent 65%);
    animation: float3 18s ease-in-out infinite
}

.grid {
    position: absolute;
    inset: -2px;
    background:
        linear-gradient(to right, rgba(15, 23, 42, .06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 25% 15%, black 0, transparent 70%);
    opacity: .35;
}

@keyframes float1 {
    50% {
        transform: translate(40px, 35px) scale(1.03)
    }
}

@keyframes float2 {
    50% {
        transform: translate(-35px, 40px) scale(1.04)
    }
}

@keyframes float3 {
    50% {
        transform: translate(0, -35px) scale(1.02)
    }
}

/* progress bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 9999;
    background: linear-gradient(90deg, var(--gold), rgba(206, 161, 82, .20));
}

/* header */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .72);
    border-bottom: 1px solid var(--line);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 14px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px
}

.brand__logo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(206, 161, 82, .35);
    background: #fff;
}

.brand__name {
    font-weight: 900;
    letter-spacing: .12em
}

.brand__sub {
    font-size: 12px;
    color: rgba(15, 23, 42, .60);
    letter-spacing: .18em;
    text-transform: uppercase
}

.nav {
    display: flex;
    gap: 18px;
    align-items: center
}

.nav__link {
    font-weight: 900;
    color: rgba(15, 23, 42, .80);
    padding: 10px 10px;
    border-radius: 12px;
    transition: .25s ease;
}

.nav__link:hover {
    background: rgba(15, 23, 42, .04);
    transform: translateY(-1px)
}

.nav__link--active {
    background: rgba(206, 161, 82, .12);
    border: 1px solid rgba(206, 161, 82, .25);
}

.header__actions {
    display: flex;
    gap: 10px;
    align-items: center
}

/* buttons */
.btn {
    border: 1px solid rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .75);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: .25s ease;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .92)
}

.btn--gold {
    background: linear-gradient(180deg, rgba(206, 161, 82, .95), rgba(206, 161, 82, .80));
    border-color: rgba(206, 161, 82, .70);
    color: #140E06;
    box-shadow: 0 18px 40px rgba(206, 161, 82, .22);
}

.btn--ghost {
    background: rgba(255, 255, 255, .65)
}

.btn--small {
    padding: 9px 12px;
    border-radius: 14px
}

.btn__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(206, 161, 82, .55);
    animation: pulseDot 1.8s infinite;
}

@keyframes pulseDot {
    70% {
        box-shadow: 0 0 0 10px rgba(206, 161, 82, 0)
    }
}

/* burger */
.burger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: rgba(255, 255, 255, .70);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: rgba(15, 23, 42, .75);
    border-radius: 2px
}

.mobile-panel {
    display: none;
    padding: 14px 0 18px;
    border-top: 1px solid var(--line)
}

.mobile-panel.show {
    display: block
}

.mobile-link {
    display: block;
    padding: 12px 4%;
    font-weight: 900
}

.mobile-cta {
    margin: 10px 4% 0
}

/* hero */
.hero {
    padding: 54px 0 20px
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 24px;
    align-items: center
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(206, 161, 82, .30);
    background: rgba(206, 161, 82, .10);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 900;
}

.pill__spark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 18px rgba(206, 161, 82, .40)
}

.hero__title {
    margin: 14px 0 10px;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.05;
    letter-spacing: -.02em
}

.hero__desc {
    color: rgba(15, 23, 42, .74);
    line-height: 1.8;
    margin: 12px 0 16px
}

.hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px
}

.chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .70);
    font-weight: 900;
    font-size: 12px;
    color: rgba(15, 23, 42, .68);
}

/* sections */
.section {
    padding: 68px 0
}

.section--alt {
    background: linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(255, 255, 255, 0));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section__head {
    max-width: 820px;
    margin-bottom: 22px
}

.section__title {
    margin: 0;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -.02em
}

.section__desc {
    margin: 10px 0 0;
    color: rgba(15, 23, 42, .70);
    line-height: 1.8
}

/* panels/cards */
.panel {
    padding: 18px;
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow2);
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(700px 240px at 20% 0%, rgba(206, 161, 82, .12), transparent 60%);
    pointer-events: none;
}

/* mini “dashboard” */
.phone {
    width: min(420px, 100%);
    margin-left: auto;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow2);
    padding: 16px;
    position: relative;
}

.phone__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .9);
    box-shadow: 0 0 20px rgba(34, 197, 94, .18)
}

.badge {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(206, 161, 82, .28);
    background: rgba(206, 161, 82, .12);
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, .78);
}

.phone__screen {
    margin-top: 12px;
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: linear-gradient(180deg, rgba(246, 248, 252, .75), rgba(255, 255, 255, .92));
    padding: 14px;
}

.mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px
}

.mini-tile {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .90);
}

.mini-tile b {
    display: block
}

.mini-tile span {
    display: block;
    margin-top: 6px;
    color: rgba(15, 23, 42, .70);
    font-weight: 800
}

.chart {
    height: 140px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .10);
    background:
        radial-gradient(300px 160px at 25% 30%, rgba(206, 161, 82, .14), transparent 70%),
        radial-gradient(260px 160px at 70% 50%, rgba(31, 47, 82, .12), transparent 75%),
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 248, 252, .70));
    position: relative;
    overflow: hidden;
}

.sparkline {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(transparent 70%, rgba(206, 161, 82, .20) 0),
        linear-gradient(90deg, transparent 0 7%, rgba(206, 161, 82, .90) 7% 8%, transparent 8% 22%,
            rgba(206, 161, 82, .90) 22% 23%, transparent 23% 41%,
            rgba(206, 161, 82, .90) 41% 42%, transparent 42% 64%,
            rgba(206, 161, 82, .90) 64% 65%, transparent 65% 82%,
            rgba(206, 161, 82, .90) 82% 83%, transparent 83% 100%);
    opacity: .28;
    animation: drift 2.2s linear infinite;
}

@keyframes drift {
    to {
        transform: translateX(-24px)
    }
}

.hint {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .75);
    color: rgba(15, 23, 42, .70);
}

/* service cards */
.blocks-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px
}

.s-card {
    padding: 18px;
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.s-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(700px 240px at 20% 0%, rgba(206, 161, 82, .10), transparent 60%);
    pointer-events: none;
}

.s-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}

.s-badge {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(246, 248, 252, .85);
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, .72);
}

.s-badge--gold {
    border-color: rgba(206, 161, 82, .35);
    background: rgba(206, 161, 82, .14);
    color: rgba(15, 23, 42, .82)
}

.s-chip {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, .64);
}

.s-chip--gold {
    border-color: rgba(206, 161, 82, .35);
    background: rgba(206, 161, 82, .14)
}

.s-title {
    margin: 10px 0 8px;
    font-weight: 900
}

.s-problem {
    margin: 0 0 10px;
    color: rgba(15, 23, 42, .70);
    line-height: 1.75
}

.s-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px
}

.link {
    background: none;
    border: none;
    color: rgba(15, 23, 42, .84);
    font-weight: 900;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 14px;
    transition: .2s ease;
}

.link:hover {
    background: rgba(15, 23, 42, .04);
    transform: translateY(-1px)
}

.link--gold {
    color: var(--navy)
}

/* acknowledgements */
.ack {
    padding: 16px;
    border-radius: var(--r2);
    border: 1px solid rgba(206, 161, 82, .30);
    background: rgba(206, 161, 82, .10);
    color: rgba(15, 23, 42, .82);
    line-height: 1.8;
    box-shadow: var(--shadow);
}

/* split layout contact */
.split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    align-items: start
}

.form {
    padding: 18px;
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow2);
}

.form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.label {
    display: grid;
    gap: 8px;
    font-weight: 900;
    color: rgba(15, 23, 42, .85);
    margin-bottom: 12px
}

.input {
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .14);
    background: rgba(246, 248, 252, .80);
    color: rgba(15, 23, 42, .90);
    outline: none;
    transition: .2s ease;
}

.input:focus {
    border-color: rgba(206, 161, 82, .55);
    box-shadow: 0 0 0 6px rgba(206, 161, 82, .14)
}

.input--area {
    resize: vertical;
    min-height: 120px
}

.input.is-invalid {
    border-color: rgba(239, 68, 68, .55);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, .12)
}

.form__bottom {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px
}

/* legal */
.paper {
    padding: 18px;
    border-radius: var(--r2);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--shadow2);
    line-height: 1.9;
    color: rgba(15, 23, 42, .78);
}

.paper h2 {
    margin: 18px 0 10px;
    color: rgba(15, 23, 42, .95)
}

.paper ul {
    margin: 8px 0 0;
    padding-left: 18px
}

.divider {
    height: 1px;
    background: rgba(15, 23, 42, .10);
    margin: 18px 0
}

/* FAQ */
.faq {
    display: grid;
    gap: 10px
}

.faq__item {
    text-align: left;
    padding: 14px;
    border-radius: var(--r2);
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .90);
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .05);
}

.faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900
}

.faq__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(246, 248, 252, .90);
    transition: .2s ease;
}

.faq__a {
    max-height: 0;
    overflow: hidden;
    color: rgba(15, 23, 42, .72);
    line-height: 1.8;
    transition: max-height .25s ease;
    margin-top: 0;
}

.faq__item.is-open .faq__a {
    max-height: 220px;
    margin-top: 10px
}

.faq__item.is-open .faq__icon {
    transform: rotate(45deg);
    border-color: rgba(206, 161, 82, .35)
}

/* CTA strip */
.cta-strip {
    padding: 34px 0 60px
}

.cta-strip__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    border-radius: var(--r2);
    border: 1px solid rgba(31, 47, 82, .14);
    background: rgba(31, 47, 82, .06);
    padding: 18px;
    box-shadow: var(--shadow);
}

.cta-strip__inner h3 {
    margin: 0 0 6px;
    font-weight: 900
}

.cta-strip__inner p {
    margin: 0;
    color: rgba(15, 23, 42, .70)
}

.cta-strip__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* footer */
.footer {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .75)
}

.footer__inner {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.footer__brand {
    display: flex;
    gap: 12px;
    align-items: center
}

.footer__logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(206, 161, 82, .35)
}

.footer__brand p {
    margin: 4px 0 0;
    color: rgba(15, 23, 42, .62)
}

.footer__links {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

.footer__links a {
    color: rgba(15, 23, 42, .72);
    font-weight: 900
}

.footer__links a:hover {
    color: rgba(206, 161, 82, .95)
}

/* toast */
.toast {
    position: fixed;
    right: 16px;
    bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(206, 161, 82, .35);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow2);
    color: rgba(15, 23, 42, .92);
    font-weight: 900;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0)
}

/* reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: .7s cubic-bezier(.2, .8, .2, 1)
}

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

/* responsive */
@media (max-width: 980px) {
    .nav {
        display: none
    }

    .burger {
        display: flex
    }

    .hero__inner {
        grid-template-columns: 1fr
    }

    .blocks-grid {
        grid-template-columns: 1fr
    }

    .split {
        grid-template-columns: 1fr
    }

    .form__row {
        grid-template-columns: 1fr
    }
}

.cookie {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 9998;
    display: none;
}

.cookie.show {
    display: block
}

.cookie__inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 14px 14px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .12);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 55px rgba(15, 23, 42, .10);
}

.cookie__inner p {
    margin: 6px 0 0;
    color: rgba(15, 23, 42, .70);
    line-height: 1.6;
    max-width: 820px;
}

.cookie__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}