:root {
    --kc-bg: #05070d;
    --kc-bg-soft: #090d16;
    --kc-text: #f7f3ea;
    --kc-muted: rgba(247, 243, 234, 0.72);
    --kc-muted-soft: rgba(247, 243, 234, 0.54);
    --kc-gold: #d9b56f;
    --kc-gold-light: #f1d58f;
    --kc-border: rgba(255, 255, 255, 0.12);
    --kc-border-strong: rgba(217, 181, 111, 0.34);
    --kc-radius-xl: 38px;
    --kc-radius-lg: 28px;
    --kc-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
    --kc-transition: 260ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--kc-bg);
    color: var(--kc-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

.kc-container {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

/* Header */

.kc-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 22px 0;
    background: linear-gradient(
        180deg,
        rgba(5, 7, 13, 0.84),
        rgba(5, 7, 13, 0)
    );
    backdrop-filter: blur(18px);
}

.kc-brand {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--kc-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--kc-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Main */

.kc-main {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 4%, rgba(217, 181, 111, 0.16), transparent 34%),
        radial-gradient(circle at 86% 18%, rgba(92, 116, 255, 0.12), transparent 30%),
        linear-gradient(180deg, #05070d 0%, #090d16 45%, #05070d 100%);
}

.kc-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black 0%, black 54%, transparent 100%);
    pointer-events: none;
}

.kc-section {
    position: relative;
    padding: 110px 0;
}

.kc-eyebrow {
    margin: 0;
    color: var(--kc-gold-light);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.kc-section-head {
    max-width: 760px;
    margin-bottom: 44px;
}

.kc-section-head h2,
.kc-about h2,
.kc-statement h2 {
    margin: 16px 0 18px;
    color: var(--kc-text);
    font-size: clamp(2.25rem, 5vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.065em;
}

.kc-section-head p,
.kc-about p,
.kc-statement p {
    margin: 0;
    color: var(--kc-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}

/* Hero */

.kc-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 145px 0 95px;
    isolation: isolate;
}

.kc-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1040px;
}

.kc-hero h1 {
    margin: 20px 0 26px;
    color: var(--kc-text);
    font-size: clamp(4rem, 10vw, 9.4rem);
    line-height: 0.84;
    letter-spacing: -0.09em;
}

.kc-hero__lead {
    max-width: 680px;
    margin: 0;
    color: var(--kc-muted);
    font-size: clamp(1.08rem, 1.6vw, 1.34rem);
    line-height: 1.7;
}

.kc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.kc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -0.02em;
    transition:
        transform var(--kc-transition),
        box-shadow var(--kc-transition),
        border-color var(--kc-transition),
        background var(--kc-transition);
}

.kc-button--primary {
    color: #090a0d;
    background: linear-gradient(135deg, var(--kc-gold-light), #bf8e3d);
    box-shadow: 0 18px 48px rgba(217, 181, 111, 0.24);
}

.kc-button:hover {
    transform: translateY(-3px);
}

.kc-orb {
    position: absolute;
    z-index: 1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(20px);
}

.kc-orb--one {
    width: 620px;
    height: 620px;
    right: -180px;
    top: 120px;
    background: radial-gradient(circle, rgba(217, 181, 111, 0.22), transparent 68%);
}

.kc-orb--two {
    width: 460px;
    height: 460px;
    left: -170px;
    bottom: 70px;
    background: radial-gradient(circle, rgba(92, 116, 255, 0.14), transparent 68%);
}

/* Bento Cards */

.kc-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.kc-branch-card {
    position: relative;
    min-height: 330px;
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-lg);
    background:
        radial-gradient(circle at 16% 12%, rgba(217, 181, 111, 0.16), transparent 36%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.034));
    color: var(--kc-text);
    text-decoration: none;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    transition:
        transform var(--kc-transition),
        border-color var(--kc-transition),
        box-shadow var(--kc-transition),
        background var(--kc-transition);
}

.kc-branch-card--wide {
    grid-column: span 6;
    min-height: 260px;
}

.kc-branch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 100%),
        radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.13), transparent 32%);
    opacity: 0.82;
    transition: opacity var(--kc-transition);
}

.kc-branch-card::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -90px;
    right: -80px;
    border-radius: 999px;
    background: rgba(217, 181, 111, 0.18);
    filter: blur(12px);
    opacity: 0;
    transition:
        opacity var(--kc-transition),
        transform var(--kc-transition);
}

.kc-branch-card:hover {
    transform: translateY(-7px);
    border-color: var(--kc-border-strong);
    box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.42),
        0 0 46px rgba(217, 181, 111, 0.1);
}

.kc-branch-card:hover::after {
    opacity: 1;
    transform: scale(1.22);
}

.kc-branch-card > * {
    position: relative;
    z-index: 1;
}

.kc-branch-card__number {
    position: absolute;
    top: 26px;
    left: 30px;
    color: var(--kc-gold-light);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.kc-branch-card__tag {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid rgba(217, 181, 111, 0.22);
    border-radius: 999px;
    background: rgba(217, 181, 111, 0.08);
    color: var(--kc-gold-light);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kc-branch-card h3 {
    margin: 0 0 14px;
    color: var(--kc-text);
    font-size: clamp(1.7rem, 2.6vw, 3rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.kc-branch-card p {
    max-width: 620px;
    margin: 0 0 24px;
    color: var(--kc-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.kc-branch-card__link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: var(--kc-gold-light);
    font-weight: 900;
}

.kc-branch-card__link::after {
    content: "→";
    margin-left: 9px;
    transition: transform var(--kc-transition);
}

.kc-branch-card:hover .kc-branch-card__link::after {
    transform: translateX(6px);
}

/* About */

.kc-about__grid {
    display: grid;
    grid-template-columns: 0.82fr 1fr;
    gap: 70px;
    align-items: center;
}

.kc-about__image {
    padding: 10px;
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-xl);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035));
    box-shadow: var(--kc-shadow);
}

.kc-about__image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: calc(var(--kc-radius-xl) - 10px);
}

.kc-about__content {
    max-width: 680px;
}

.kc-about__content p + p {
    margin-top: 18px;
}

/* Statement */

.kc-statement {
    padding-top: 40px;
}

.kc-statement__box {
    position: relative;
    padding: clamp(36px, 7vw, 76px);
    border: 1px solid var(--kc-border);
    border-radius: var(--kc-radius-xl);
    background:
        radial-gradient(circle at 16% 16%, rgba(217, 181, 111, 0.18), transparent 34%),
        radial-gradient(circle at 92% 18%, rgba(92, 116, 255, 0.1), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.034));
    box-shadow: var(--kc-shadow);
    overflow: hidden;
}

.kc-statement__box p {
    max-width: 850px;
}

/* Footer */

.kc-footer {
    position: relative;
    padding: 46px 0;
    background: #05070d;
    border-top: 1px solid var(--kc-border);
    color: var(--kc-muted);
}

.kc-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.7fr;
    gap: 28px;
    align-items: start;
}

.kc-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kc-footer__brand strong {
    color: var(--kc-text);
}

.kc-footer__brand span {
    color: var(--kc-muted-soft);
}

.kc-footer__links,
.kc-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
}

.kc-footer__links a,
.kc-footer__legal a {
    color: var(--kc-muted);
    text-decoration: none;
    transition: color var(--kc-transition);
}

.kc-footer__links a:hover,
.kc-footer__legal a:hover {
    color: var(--kc-gold-light);
}

/* Responsive */

@media (max-width: 980px) {
    .kc-hero {
        min-height: auto;
        padding: 124px 0 78px;
    }

    .kc-about__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .kc-about__image {
        max-width: 560px;
    }

    .kc-footer__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .kc-container {
        width: min(100% - 28px, 1180px);
    }

    .kc-header {
        padding: 16px 0;
    }

    .kc-brand {
        min-height: 38px;
        padding: 0 14px;
        font-size: 0.74rem;
    }

    .kc-section {
        padding: 82px 0;
    }

    .kc-hero {
        padding: 108px 0 64px;
    }

    .kc-hero h1 {
        font-size: clamp(3.15rem, 17vw, 5.2rem);
        letter-spacing: -0.075em;
    }

    .kc-bento {
        grid-template-columns: 1fr;
    }

    .kc-branch-card,
    .kc-branch-card--wide {
        grid-column: auto;
        min-height: 300px;
    }

    .kc-branch-card {
        padding: 26px;
    }

    .kc-section-head {
        margin-bottom: 30px;
    }

    .kc-section-head h2,
    .kc-about h2,
    .kc-statement h2 {
        font-size: clamp(2.25rem, 12vw, 3.6rem);
    }
}

@media (max-width: 420px) {
    .kc-branch-card {
        min-height: 320px;
    }
}