:root {
    --primary: #073f78;
    --primary-dark: #042b55;
    --primary-deep: #032143;

    --blue: #0876b9;
    --blue-bright: #1596d2;
    --blue-soft: #eaf6ff;

    --orange: #f58220;
    --orange-dark: #d96812;
    --orange-soft: #fff2e6;

    --gold: #ddb650;
    --gold-light: #f8e6ad;
    --gold-soft: #fff9e9;
    --gold-cream: #fffdf5;

    --heading: #202a3d;
    --text: #31394b;
    --muted: #697386;

    --border: #e2e8f0;
    --surface: #ffffff;
    --surface-soft: #f6f9fd;

    --container: 1200px;
    --header-height: 76px;

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    --shadow-small:
        0 10px 30px rgba(4, 43, 85, 0.07);

    --shadow-medium:
        0 20px 50px rgba(4, 43, 85, 0.12);

    --shadow-large:
        0 35px 90px rgba(4, 43, 85, 0.2);
}

/* =========================================================
   RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
    margin: 0;
    color: var(--text);
    background: var(--surface);
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

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

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

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

.container {
    width: min(
        calc(100% - 40px),
        var(--container)
    );
    margin-right: auto;
    margin-left: auto;
}

/* =========================================================
   GLOBAL
   ========================================================= */

.section {
    padding: 96px 0;
}

.section-soft {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(8, 118, 185, 0.07),
            transparent 28%
        ),
        var(--surface-soft);
}

.section-heading {
    width: min(720px, 100%);
    margin: 0 auto 52px;
    text-align: center;
}

.section-heading h2 {
    margin: 0 0 16px;
    color: var(--heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.04em;
}

.section-heading h2 strong {
    color: var(--primary);
}

.section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    color: var(--orange-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.eyebrow::before {
    width: 28px;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--orange)
        );
    border-radius: 20px;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 20px;
    color: var(--heading);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

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

.btn-large {
    min-height: 54px;
    padding: 0 24px;
}

.btn-primary {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    box-shadow:
        0 13px 28px rgba(7, 63, 120, 0.22);
}

.btn-primary:hover {
    box-shadow:
        0 17px 34px rgba(7, 63, 120, 0.3);
}

.btn-outline {
    color: var(--primary);
    background: #ffffff;
    border-color: rgba(7, 63, 120, 0.15);
    box-shadow:
        0 8px 22px rgba(4, 43, 85, 0.05);
}

.btn-outline:hover {
    color: var(--primary-dark);
    border-color: rgba(7, 63, 120, 0.3);
    box-shadow:
        0 12px 28px rgba(4, 43, 85, 0.09);
}

.btn-login {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38 0%,
            #f58220 52%,
            #e56612 100%
        );
    border-color: rgba(229, 102, 18, 0.2);
    box-shadow:
        0 11px 25px rgba(245, 130, 32, 0.22);
}

.btn-login:hover {
    color: #ffffff;
    border-color: rgba(216, 88, 8, 0.32);
    box-shadow:
        0 15px 32px rgba(245, 130, 32, 0.3);
}

.btn-light {
    color: var(--primary-dark);
    background: #ffffff;
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.12);
}

.btn-transparent {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-transparent:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* =========================================================
   HEADER
   ========================================================= */

.navbar {
    position: fixed;
    z-index: 1100;
    top: 0;
    right: 0;
    left: 0;
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        min-height 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.navbar.scrolled {
    min-height: 70px;
    border-bottom-color: rgba(7, 63, 120, 0.08);
    box-shadow:
        0 10px 35px rgba(4, 43, 85, 0.08);
}

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

.brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    width: 215px;
}

.brand img {
    width: 100%;
    max-height: 58px;
    object-fit: contain;
    object-position: left center;
}

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

.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 13px;
    color: #5d6879;
    font-size: 14px;
    font-weight: 600;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.nav-link::before {
    position: absolute;
    right: 13px;
    bottom: 3px;
    left: 13px;
    height: 3px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue),
            var(--orange)
        );
    border-radius: 99px;
    opacity: 0;
    transform: scaleX(0.25);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.nav-link::after {
    position: absolute;
    bottom: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    content: "";
    background: var(--orange);
    border: 2px solid #ffffff;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, 5px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link.active {
    color: var(--primary);
    font-weight: 800;
}

.nav-link.active::before {
    opacity: 1;
    transform: scaleX(1);
}

.nav-link.active::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nav-link-page::after {
    display: none;
}

.nav-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.mobile-nav-actions {
    display: none;
}

.mobile-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    background: var(--blue-soft);
    border-radius: 11px;
    cursor: pointer;
}

.mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--primary);
    border-radius: 20px;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.mobile-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
   HEADER SEARCH
   ========================================================= */

.header-search {
    position: relative;
    flex: 0 0 auto;
}

.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    color: var(--primary);
    background: var(--blue-soft);
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 11px;
    box-shadow:
        0 8px 20px rgba(7, 63, 120, 0.08);
    cursor: pointer;
    font-size: 19px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.search-toggle:hover {
    color: var(--primary-dark);
    background: #dcefff;
    box-shadow:
        0 12px 26px rgba(7, 63, 120, 0.13);
    transform: translateY(-2px);
}

.header-search.open .search-toggle {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-color: transparent;
    box-shadow:
        0 13px 28px rgba(7, 63, 120, 0.24);
}

.header-search-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: -235px;
    width: 420px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.12);
    border-radius: 14px;
    box-shadow:
        0 20px 45px rgba(4, 43, 85, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.header-search.open .header-search-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-search-field {
    display: grid;
    grid-template-columns: auto 1fr 46px;
    align-items: center;
    min-height: 46px;
    overflow: hidden;
    border: 1px solid rgba(8, 118, 185, 0.25);
    border-radius: 10px;
}

.header-search-field > i {
    margin-left: 13px;
    color: var(--muted);
}

.header-search-field input {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
    color: var(--heading);
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
}

.header-search-field input::placeholder {
    color: #8a94a6;
}

.header-search-field button {
    align-self: stretch;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    cursor: pointer;
    font-size: 16px;
}

.search-feedback {
    display: none;
    margin: 8px 4px 0;
    color: var(--muted);
    font-size: 11px;
}

.search-feedback.visible {
    display: block;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding:
        calc(var(--header-height) + 36px)
        0
        54px;
    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(8, 118, 185, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 9% 92%,
            rgba(245, 130, 32, 0.07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 55%,
            #f3f8fe 100%
        );
}


.hero-map-background {
    position: absolute;
    z-index: 0;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - var(--header-height));
    object-fit: cover;
    object-position: center center;
    opacity: 0.09;
    filter:
        saturate(0.88)
        contrast(0.94);
    pointer-events: none;
    user-select: none;
}

.hero::before {
    position: absolute;
    top: 65px;
    left: -280px;
    width: 560px;
    height: 560px;
    content: "";
    border: 1px solid rgba(7, 63, 120, 0.06);
    border-radius: 50%;
}

.hero::after {
    position: absolute;
    right: -240px;
    bottom: -260px;
    width: 560px;
    height: 560px;
    content: "";
    border: 1px solid rgba(245, 130, 32, 0.09);
    border-radius: 50%;
}

.hero-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.hero-orb-one {
    top: 185px;
    right: 5%;
    width: 14px;
    height: 14px;
    background: var(--orange);
    box-shadow:
        0 0 0 9px rgba(245, 130, 32, 0.1);
}

.hero-orb-two {
    bottom: 95px;
    left: 5%;
    width: 12px;
    height: 12px;
    background: var(--blue);
    box-shadow:
        0 0 0 8px rgba(8, 118, 185, 0.1);
}

.hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(535px, 1.05fr);
    align-items: center;
    gap: 48px;
}

.hero-copy {
    width: 100%;
    max-width: 590px;
    min-width: 0;
}

.hero-title {
    width: 100%;
    margin: 0;
    color: var(--heading);
    font-size: clamp(44px, 4.1vw, 56px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.055em;
}

.hero-title-line {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
}

.hero-title-highlight {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    padding: 6px 18px 11px;
    white-space: nowrap;
}

.hero-highlight-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: transparent;
    background:
        linear-gradient(
            100deg,
            #06477f 0%,
            #0878b8 55%,
            #1598ce 100%
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title-orbit {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: calc(100% + 48px);
    height: calc(100% + 38px);
    overflow: visible;
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        rotate(-3deg);
}

.hero-orbit-line {
    fill: none;
    stroke: url(#heroOrbitGradient);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.92;
}

.hero-orbit-dot {
    fill: #f58220;
    filter:
        drop-shadow(
            0 3px 5px rgba(245, 130, 32, 0.32)
        );
}

.hero-description {
    max-width: 575px;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 29px;
}

.button-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    color: var(--orange);
    background: var(--orange-soft);
    border-radius: 50%;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 26px;
    color: #5f6a7c;
    font-size: 12px;
    font-weight: 700;
}

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

.hero-points i {
    color: var(--blue);
}

.hero-visual {
    position: relative;
    min-width: 0;
}

.visual-glow {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 102%;
    height: 80%;
    background:
        radial-gradient(
            circle,
            rgba(8, 118, 185, 0.23),
            rgba(8, 118, 185, 0.04) 58%,
            transparent 74%
        );
    filter: blur(18px);
    transform: translate(-50%, -50%);
}

/* =========================================================
   CAROUSEL
   ========================================================= */

.dashboard-carousel {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 21px;
    box-shadow: var(--shadow-large);
}

.carousel-browser-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 50px;
    padding: 0 17px;
    background: #fbfcfe;
    border-bottom: 1px solid var(--border);
}

.browser-dots {
    display: flex;
    gap: 6px;
}

.browser-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.browser-dots span:nth-child(1) {
    background: #ff7268;
}

.browser-dots span:nth-child(2) {
    background: var(--gold);
}

.browser-dots span:nth-child(3) {
    background: #3ec17e;
}

.browser-address {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 17px;
    color: #768094;
    background: #f0f4f8;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 600;
}

.browser-address i {
    color: #2fa56c;
    font-size: 9px;
}

.browser-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: #788295;
    font-size: 10px;
    font-weight: 700;
}

.browser-status span {
    width: 7px;
    height: 7px;
    background: #30b978;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px rgba(48, 185, 120, 0.11);
}

.carousel-viewport {
    position: relative;
    overflow: hidden;
    background: #edf3f8;
    line-height: 0;
}

.carousel-track {
    display: flex;
    margin: 0;
    padding: 0;
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.carousel-slide {
    position: relative;
    display: block;
    flex: 0 0 100%;
    min-width: 100%;
    aspect-ratio: 2047 / 1116;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #edf3f8;
    line-height: 0;
}

.carousel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: top center;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(3, 33, 67, 0.85) 100%
        );
    pointer-events: none;
}

.slide-content {
    position: absolute;
    z-index: 2;
    right: 27px;
    bottom: 28px;
    left: 27px;
    color: #ffffff;
    line-height: 1.4;
}

.slide-content > span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 10px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.94);
    border-radius: 6px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.slide-content h2 {
    max-width: 470px;
    margin: 0 0 6px;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.25;
}

.slide-content p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    line-height: 1.5;
}

.carousel-control {
    position: absolute;
    z-index: 5;
    top: 55%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: var(--primary);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 50%;
    box-shadow:
        0 10px 25px rgba(4, 43, 85, 0.15);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        opacity 0.2s ease;
}

.dashboard-carousel:hover .carousel-control,
.dashboard-carousel:focus-within .carousel-control {
    opacity: 1;
}

.carousel-control:hover {
    color: #ffffff;
    background: var(--primary);
}

.carousel-prev {
    left: 16px;
}

.carousel-next {
    right: 16px;
}

.carousel-indicators {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: 14px;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
}

.carousel-indicator {
    width: 7px;
    height: 7px;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 99px;
    cursor: pointer;
    transition:
        width 0.25s ease,
        background-color 0.25s ease;
}

.carousel-indicator.active {
    width: 26px;
    background: var(--orange);
}

/* =========================================================
   PROOF STRIP
   ========================================================= */

.proof-strip {
    padding: 28px 0 30px;
    background: #ffffff;
    border-top: 1px solid rgba(7, 63, 120, 0.07);
    border-bottom: 1px solid var(--border);
}

.proof-strip-inner {
    display: block;
}

.proof-intro {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    text-align: center;
}

.proof-intro > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.proof-intro > span::before,
.proof-intro > span::after {
    width: 34px;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(245, 130, 32, 0.15),
            var(--orange)
        );
    border-radius: 99px;
}

.proof-intro > span::after {
    background:
        linear-gradient(
            90deg,
            var(--orange),
            rgba(245, 130, 32, 0.15)
        );
}

.proof-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(930px, 100%);
    margin: 0 auto;
    gap: 14px;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f9fe
        );
    border: 1px solid var(--border);
    border-radius: 14px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.proof-item:hover {
    border-color: rgba(8, 118, 185, 0.22);
    box-shadow: var(--shadow-small);
    transform: translateY(-3px);
}

.proof-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    color: var(--primary);
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.12);
    border-radius: 11px;
    place-items: center;
    font-size: 19px;
}

.proof-item strong {
    display: block;
    margin-bottom: 2px;
    color: var(--heading);
    font-size: 12px;
}

.proof-item p {
    margin: 0;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

/* =========================================================
   FEATURE EXPLORER V3 - CSS BUILT APPLICATION PREVIEW
   ========================================================= */

.feature-showcase-section {
    position: relative;
    display: flex;
    min-height: calc(100svh - var(--header-height));
    padding: 28px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(8, 118, 185, 0.1),
            transparent 27%
        ),
        radial-gradient(
            circle at 7% 88%,
            rgba(245, 130, 32, 0.06),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fd 100%
        );
    align-items: center;
}

.feature-explorer {
    position: relative;
}

.feature-radio {
    display: none;
}

.feature-explorer-grid {
    display: grid;
    grid-template-columns:
        minmax(250px, 0.42fr)
        minmax(0, 1.58fr);
    min-height: 650px;
    height: clamp(
        650px,
        calc(100svh - var(--header-height) - 56px),
        760px
    );
    gap: 20px;
    align-items: stretch;
}

/* =========================================================
   FEATURE SIDEBAR
   ========================================================= */

.feature-explorer-sidebar {
    display: grid;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    background:
        linear-gradient(
            155deg,
            #ffffff,
            #f3f7fc
        );
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 24px;
    box-shadow:
        0 22px 55px rgba(4, 43, 85, 0.08);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 12px;
}

.feature-sidebar-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.feature-sidebar-label::before {
    width: 26px;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--orange)
        );
    border-radius: 99px;
}

.feature-sidebar-summary {
    padding: 13px 14px;
    background: rgba(234, 246, 255, 0.7);
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 13px;
}

.feature-sidebar-summary strong,
.feature-sidebar-summary small {
    display: block;
}

.feature-sidebar-summary strong {
    color: var(--heading);
    font-size: 12px;
}

.feature-sidebar-summary small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.45;
}

.feature-tab-list {
    display: grid;
    min-height: 0;
    gap: 7px;
    grid-template-rows: repeat(6, minmax(56px, 1fr));
}

.feature-tab {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    min-height: 56px;
    padding: 8px 10px;
    color: #556176;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    align-items: center;
    gap: 10px;
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.feature-tab:hover {
    color: var(--primary);
    background: #ffffff;
    border-color: rgba(7, 63, 120, 0.1);
    transform: translateX(3px);
}

.feature-tab-icon {
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--primary);
    background: var(--blue-soft);
    border: 1px solid rgba(7, 63, 120, 0.06);
    border-radius: 12px;
    place-items: center;
    font-size: 18px;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.feature-tab-copy {
    display: block;
    min-width: 0;
}

.feature-tab-copy strong {
    display: block;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-tab-copy small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #8b95a6;
    font-size: 9px;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-tab-arrow {
    color: #a1aabc;
    font-size: 13px;
    transition:
        color 0.22s ease,
        transform 0.22s ease;
}

.feature-sidebar-footer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 13px;
}

.feature-sidebar-footer-icon {
    display: grid;
    width: 38px;
    height: 38px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 10px;
    place-items: center;
}

.feature-sidebar-footer strong,
.feature-sidebar-footer small {
    display: block;
}

.feature-sidebar-footer strong {
    color: var(--heading);
    font-size: 10px;
}

.feature-sidebar-footer small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
}

/* =========================================================
   ACTIVE FEATURE TAB
   ========================================================= */

#feature-tab-0:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-0"],
#feature-tab-1:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-1"],
#feature-tab-2:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-2"],
#feature-tab-3:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-3"],
#feature-tab-4:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-4"],
#feature-tab-5:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-5"] {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-color: transparent;
    box-shadow:
        0 13px 28px rgba(7, 63, 120, 0.2);
}

#feature-tab-0:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-0"]
    .feature-tab-icon,
#feature-tab-1:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-1"]
    .feature-tab-icon,
#feature-tab-2:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-2"]
    .feature-tab-icon,
#feature-tab-3:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-3"]
    .feature-tab-icon,
#feature-tab-4:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-4"]
    .feature-tab-icon,
#feature-tab-5:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-5"]
    .feature-tab-icon {
    color: var(--primary);
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

#feature-tab-0:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-0"]
    small,
#feature-tab-1:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-1"]
    small,
#feature-tab-2:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-2"]
    small,
#feature-tab-3:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-3"]
    small,
#feature-tab-4:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-4"]
    small,
#feature-tab-5:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-5"]
    small {
    color: rgba(255, 255, 255, 0.72);
}

#feature-tab-0:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-0"]
    .feature-tab-arrow,
#feature-tab-1:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-1"]
    .feature-tab-arrow,
#feature-tab-2:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-2"]
    .feature-tab-arrow,
#feature-tab-3:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-3"]
    .feature-tab-arrow,
#feature-tab-4:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-4"]
    .feature-tab-arrow,
#feature-tab-5:checked
    ~ .feature-explorer-grid
    .feature-tab[for="feature-tab-5"]
    .feature-tab-arrow {
    color: #ffffff;
    transform: translateX(3px);
}

/* =========================================================
   FEATURE PANEL
   ========================================================= */

.feature-panel-container {
    position: relative;
    min-width: 0;
    min-height: 0;
}

.feature-panel {
    position: relative;
    display: none;
    height: 100%;
    min-height: 0;
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 94% 4%,
            rgba(245, 130, 32, 0.13),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #063a70 0%,
            #052f5c 54%,
            #032143 100%
        );
    border-radius: 24px;
    box-shadow:
        0 28px 70px rgba(4, 43, 85, 0.2);
    animation:
        feature-panel-in 0.3s ease both;
}

#feature-tab-0:checked
    ~ .feature-explorer-grid
    .feature-panel-0,
#feature-tab-1:checked
    ~ .feature-explorer-grid
    .feature-panel-1,
#feature-tab-2:checked
    ~ .feature-explorer-grid
    .feature-panel-2,
#feature-tab-3:checked
    ~ .feature-explorer-grid
    .feature-panel-3,
#feature-tab-4:checked
    ~ .feature-explorer-grid
    .feature-panel-4,
#feature-tab-5:checked
    ~ .feature-explorer-grid
    .feature-panel-5 {
    display: flex;
    flex-direction: column;
}

@keyframes feature-panel-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.feature-panel-decoration {
    position: absolute;
    top: -190px;
    right: -150px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.feature-panel-decoration::after {
    position: absolute;
    top: 78px;
    left: 78px;
    width: 260px;
    height: 260px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.feature-panel-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 62px;
    margin-bottom: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.feature-panel-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
}

.feature-panel-number {
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    color: var(--primary-dark);
    background:
        linear-gradient(
            135deg,
            #ffb13b,
            var(--orange)
        );
    border-radius: 16px;
    box-shadow:
        0 15px 30px rgba(245, 130, 32, 0.22);
    place-items: center;
    font-size: 19px;
    font-weight: 800;
}

.feature-panel-heading h3 {
    overflow: hidden;
    margin: 0;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-panel-benefits {
    display: flex;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.feature-panel-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
}

.feature-panel-benefits i {
    color: #ffad38;
}

/* =========================================================
   CSS-BUILT APPLICATION PREVIEW
   ========================================================= */

.feature-app-window {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    box-shadow:
        0 22px 48px rgba(0, 0, 0, 0.24);
    flex: 1;
    flex-direction: column;
}

.feature-app-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    min-height: 44px;
    padding: 0 15px;
    background: #f8fafc;
    border-bottom: 1px solid #e5eaf1;
    align-items: center;
}

.feature-app-dots {
    display: flex;
    gap: 5px;
}

.feature-app-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.feature-app-dots span:nth-child(1) {
    background: #ff7268;
}

.feature-app-dots span:nth-child(2) {
    background: #f3b943;
}

.feature-app-dots span:nth-child(3) {
    background: #3ec17e;
}

.feature-app-address {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 280px;
    overflow: hidden;
    padding: 6px 13px;
    color: #768094;
    background: #edf2f7;
    border-radius: 99px;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-app-address i {
    color: #2fa56c;
}

.feature-app-online {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    color: #7b8596;
    font-size: 8px;
    font-weight: 700;
}

.feature-app-online span {
    width: 6px;
    height: 6px;
    background: #30b978;
    border-radius: 50%;
}

.feature-app-body {
    display: grid;
    min-height: 0;
    grid-template-columns: 66px minmax(0, 1fr);
    flex: 1;
}

.feature-app-sidebar {
    display: flex;
    padding: 17px 12px;
    background:
        linear-gradient(
            180deg,
            var(--primary),
            var(--primary-deep)
        );
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.feature-app-brand {
    display: grid;
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
    color: var(--primary);
    background: #ffffff;
    border-radius: 9px;
    place-items: center;
    font-size: 15px;
}

.feature-app-sidebar > span {
    width: 32px;
    height: 6px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 99px;
}

.feature-app-sidebar > span.active {
    width: 38px;
    height: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
}

.feature-app-main {
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    background: #f7f9fc;
}

.feature-app-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.feature-app-header > div {
    display: flex;
    flex-direction: column;
}

.feature-app-header small {
    color: #8791a3;
    font-size: 8px;
}

.feature-app-header strong {
    color: var(--heading);
    font-size: 15px;
}

.feature-app-header button,
.feature-app-card-heading button {
    display: inline-flex;
    min-height: 32px;
    padding: 0 12px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 8px;
    align-items: center;
    gap: 6px;
    font-size: 8px;
    font-weight: 700;
}

.feature-app-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 16px;
}

.feature-app-stats article {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 11px;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.feature-app-stat-icon {
    display: grid;
    width: 30px;
    height: 30px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 8px;
    place-items: center;
}

.feature-app-stats article > div {
    min-width: 0;
}

.feature-app-stats small,
.feature-app-stats strong {
    display: block;
}

.feature-app-stats small {
    color: #919aac;
    font-size: 7px;
}

.feature-app-stats strong {
    overflow: hidden;
    color: var(--heading);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-app-stat-value {
    color: var(--primary);
    font-size: 17px;
    font-weight: 800;
}

.feature-app-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    gap: 11px;
    margin-top: 12px;
}

.feature-app-table-card,
.feature-app-insight-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
}

.feature-app-card-heading {
    display: flex;
    min-height: 48px;
    padding: 9px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #edf0f4;
}

.feature-app-card-heading > div {
    min-width: 0;
}

.feature-app-card-heading strong,
.feature-app-card-heading small {
    display: block;
}

.feature-app-card-heading strong {
    color: var(--heading);
    font-size: 9px;
}

.feature-app-card-heading small {
    color: #929bac;
    font-size: 7px;
}

.feature-app-card-heading button {
    min-height: 27px;
    padding: 0 9px;
    color: var(--primary);
    background: var(--blue-soft);
}

.feature-app-table-head,
.feature-app-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 58px;
    align-items: center;
    gap: 8px;
}

.feature-app-table-head {
    min-height: 30px;
    padding: 0 12px;
    color: #8d97a8;
    background: #fbfcfe;
    border-bottom: 1px solid #e7ebf1;
    font-size: 7px;
    font-weight: 700;
}

.feature-app-table-row {
    min-height: 48px;
    padding: 7px 12px;
    border-bottom: 1px solid #edf0f4;
}

.feature-app-table-row:last-child {
    border-bottom: 0;
}

.feature-app-row-info {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.feature-app-row-info > span {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    color: var(--primary);
    background: #edf5fd;
    border-radius: 7px;
    place-items: center;
    font-size: 11px;
}

.feature-app-row-info > div {
    min-width: 0;
}

.feature-app-row-info strong,
.feature-app-row-info small {
    display: block;
}

.feature-app-row-info strong {
    overflow: hidden;
    color: var(--heading);
    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.feature-app-row-info small,
.feature-app-row-date {
    color: #929bac;
    font-size: 7px;
}

.feature-app-row-status {
    justify-self: start;
    padding: 4px 8px;
    color: #17714e;
    background: #def5ea;
    border-radius: 99px;
    font-size: 7px;
    font-weight: 700;
}

.feature-app-insight-card {
    padding-bottom: 12px;
}

.feature-app-ring {
    position: relative;
    display: grid;
    width: 126px;
    height: 126px;
    margin: 18px auto 13px;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--blue) 0 76%,
            var(--orange) 76% 87%,
            #e8eef5 87% 100%
        );
    place-items: center;
}

.feature-app-ring::before {
    position: absolute;
    width: 82px;
    height: 82px;
    content: "";
    background: #ffffff;
    border-radius: 50%;
}

.feature-app-ring > span {
    position: relative;
    z-index: 1;
    text-align: center;
}

.feature-app-ring strong,
.feature-app-ring small {
    display: block;
}

.feature-app-ring strong {
    color: var(--heading);
    font-size: 18px;
}

.feature-app-ring small {
    color: var(--muted);
    font-size: 7px;
}

.feature-app-legend {
    display: grid;
    gap: 7px;
    padding: 0 15px;
}

.feature-app-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #657084;
    font-size: 7px;
}

.feature-app-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.feature-app-legend i.primary {
    background: var(--blue);
}

.feature-app-legend i.orange {
    background: var(--orange);
}

.feature-app-progress {
    padding: 13px 15px 0;
}

.feature-app-progress > div {
    height: 6px;
    overflow: hidden;
    background: #edf1f6;
    border-radius: 99px;
}

.feature-app-progress > div span {
    display: block;
    width: 84%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue)
        );
    border-radius: inherit;
}

.feature-app-progress small {
    display: block;
    margin-top: 7px;
    color: #7b8596;
    font-size: 7px;
    text-align: center;
}

/* =========================================================
   FEATURE TABLET
   ========================================================= */

@media (max-width: 960px) {
    .feature-showcase-section {
        min-height: auto;
        padding: 64px 0;
    }

    .feature-explorer-grid {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
        gap: 16px;
    }

    .feature-explorer-sidebar {
        display: block;
        padding: 14px;
        border-radius: 20px;
    }

    .feature-sidebar-label {
        justify-content: center;
        width: 100%;
        margin: 2px 0 8px;
    }

    .feature-sidebar-summary,
    .feature-sidebar-footer {
        display: none;
    }

    .feature-tab-list {
        display: flex;
        padding: 2px 2px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .feature-tab {
        grid-template-columns: 38px auto;
        flex: 0 0 auto;
        min-height: 52px;
        width: auto;
        padding: 7px 13px 7px 7px;
        scroll-snap-align: start;
    }

    .feature-tab-icon {
        width: 38px;
        height: 38px;
    }

    .feature-tab-copy strong {
        overflow: visible;
        white-space: nowrap;
    }

    .feature-tab-copy small,
    .feature-tab-arrow {
        display: none;
    }

    .feature-panel {
        min-height: 620px;
    }
}

/* =========================================================
   FEATURE MOBILE
   ========================================================= */

@media (max-width: 640px) {
    .feature-showcase-section {
        padding: 48px 0;
    }

    .feature-explorer-grid {
        gap: 13px;
    }

    .feature-explorer-sidebar {
        padding: 12px 10px 8px;
        border-radius: 18px;
    }

    .feature-sidebar-label {
        margin-bottom: 10px;
        font-size: 9px;
    }

    .feature-tab-list {
        margin-right: -2px;
        margin-left: -2px;
    }

    .feature-tab {
        min-height: 45px;
        padding: 5px 10px 5px 5px;
        border-radius: 11px;
    }

    .feature-tab-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 15px;
    }

    .feature-tab-copy strong {
        font-size: 11px;
    }

    .feature-panel {
        min-height: auto;
        padding: 16px;
        border-radius: 19px;
    }

    .feature-panel-topbar {
        display: grid;
        min-height: 0;
        margin-bottom: 13px;
        gap: 11px;
    }

    .feature-panel-heading {
        gap: 12px;
    }

    .feature-panel-number {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 15px;
    }

    .feature-panel-heading h3 {
        font-size: 25px;
        white-space: normal;
    }

    .feature-panel-benefits {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .feature-panel-benefits::-webkit-scrollbar {
        display: none;
    }

    .feature-panel-benefits span {
        flex: 0 0 auto;
        padding: 6px 9px;
        font-size: 8px;
    }

    .feature-app-window {
        min-height: 410px;
        border-radius: 13px;
    }

    .feature-app-toolbar {
        grid-template-columns: auto 1fr;
        min-height: 39px;
        padding: 0 10px;
    }

    .feature-app-address {
        justify-self: end;
        max-width: 180px;
    }

    .feature-app-online {
        display: none;
    }

    .feature-app-body {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .feature-app-sidebar {
        padding: 12px 6px;
    }

    .feature-app-brand {
        width: 29px;
        height: 29px;
        font-size: 12px;
    }

    .feature-app-sidebar > span {
        width: 24px;
    }

    .feature-app-sidebar > span.active {
        width: 28px;
        height: 24px;
    }

    .feature-app-main {
        padding: 12px 10px;
        overflow-y: auto;
    }

    .feature-app-header button {
        min-height: 29px;
        padding: 0 9px;
    }

    .feature-app-stats {
        display: flex;
        margin-top: 12px;
        padding-bottom: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .feature-app-stats::-webkit-scrollbar {
        display: none;
    }

    .feature-app-stats article {
        flex: 0 0 190px;
    }

    .feature-app-content-grid {
        grid-template-columns: 1fr;
    }

    .feature-app-insight-card {
        display: none;
    }

    .feature-app-table-head,
    .feature-app-table-row {
        grid-template-columns: minmax(0, 1fr) 66px;
    }

    .feature-app-table-head span:last-child,
    .feature-app-row-date {
        display: none;
    }
}

@media (max-width: 430px) {
    .feature-showcase-section {
        padding: 42px 0;
    }

    .feature-panel {
        padding: 13px;
    }

    .feature-panel-heading h3 {
        font-size: 22px;
    }

    .feature-app-window {
        min-height: 380px;
    }

    .feature-app-header strong {
        font-size: 12px;
    }

    .feature-app-header button {
        font-size: 0;
    }

    .feature-app-header button i {
        font-size: 10px;
    }
}


/* =========================================================
   WORKFLOW
   ========================================================= */

.workflow-section {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
    background:
        radial-gradient(
            circle at 88% 50%,
            rgba(8, 118, 185, 0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #f8fbff 0%,
            #f3f8fd 100%
        );
}

.workflow-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(250px, 0.52fr)
        minmax(0, 1.48fr);
    align-items: center;
    gap: 54px;
}

/* =========================================================
   WORKFLOW COPY
   ========================================================= */

.workflow-copy {
    position: relative;
    z-index: 2;
}

.workflow-copy h2 {
    max-width: 390px;
    margin: 0 0 15px;
    color: var(--heading);
    font-size: clamp(34px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.workflow-copy h2 strong {
    display: block;
    color: var(--primary);
}

.workflow-copy > p {
    max-width: 390px;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}

/* =========================================================
   WORKFLOW PROMOTION
   ========================================================= */

.workflow-promo-link {
    display: inline-grid;
    grid-template-columns: 34px auto 28px;
    min-height: 48px;
    margin-top: 23px;
    padding: 6px 8px 6px 7px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(7, 63, 120, 0.12);
    border-radius: 12px;
    box-shadow:
        0 10px 24px rgba(4, 43, 85, 0.07);
    align-items: center;
    gap: 9px;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.workflow-promo-link > span {
    display: grid;
    width: 34px;
    height: 34px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38,
            var(--orange),
            var(--orange-dark)
        );
    border-radius: 9px;
    place-items: center;
    font-size: 14px;
}

.workflow-promo-link strong {
    font-size: 11px;
    white-space: nowrap;
}

.workflow-promo-link > i {
    display: grid;
    width: 28px;
    height: 28px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 50%;
    place-items: center;
    font-size: 11px;
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.workflow-promo-link:hover {
    border-color: rgba(8, 118, 185, 0.25);
    box-shadow:
        0 14px 30px rgba(4, 43, 85, 0.11);
    transform: translateY(-2px);
}

.workflow-promo-link:hover > i {
    color: #ffffff;
    background: var(--primary);
    transform: translateX(2px);
}

/* =========================================================
   WORKFLOW PROCESS AREA
   ========================================================= */

.workflow-process-area {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    min-height: 330px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.workflow-background-image {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -125px;
    left: auto;
    width: min(620px, 48vw);
    max-width: none;
    max-height: 540px;
    object-fit: contain;
    object-position: right center;
    opacity: 0.065;
    filter:
        saturate(0.82)
        contrast(0.9);
    mix-blend-mode: multiply;
    pointer-events: none;
    user-select: none;
    transform: translateY(-50%);
}

/* =========================================================
   WORKFLOW STEPS
   ========================================================= */

.workflow-list {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 14px;
}

.workflow-list::before {
    position: absolute;
    z-index: 0;
    top: 43px;
    right: 8%;
    left: 8%;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            rgba(7, 63, 120, 0.14),
            rgba(8, 118, 185, 0.48),
            rgba(245, 130, 32, 0.32)
        );
    border-radius: 99px;
}

.workflow-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 8px 4px 12px;
    text-align: center;
    border-radius: 15px;
    transition:
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.workflow-step:hover {
    background: rgba(255, 255, 255, 0.76);
    box-shadow:
        0 14px 30px rgba(4, 43, 85, 0.07);
    transform: translateY(-5px);
}

.step-icon {
    display: grid;
    width: 82px;
    height: 82px;
    margin: 0 auto 14px;
    color: var(--primary);
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eef6fd
        );
    border: 7px solid rgba(246, 249, 253, 0.96);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(7, 63, 120, 0.13),
        0 13px 28px rgba(4, 43, 85, 0.1);
    place-items: center;
    font-size: 24px;
    transition:
        color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.workflow-step:hover .step-icon {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    box-shadow:
        0 15px 32px rgba(7, 63, 120, 0.2);
    transform: scale(1.04);
}

.workflow-step > span {
    display: block;
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
}

.workflow-step h3 {
    margin: 4px 0;
    color: var(--heading);
    font-size: 14px;
    line-height: 1.35;
}

.workflow-step p {
    max-width: 145px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   ABOUT TYPOGRAPHY
   ========================================================= */

.about-copy h2 {
    margin: 0 0 18px;
    color: var(--heading);
    font-size: clamp(33px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.04em;
}

.about-copy h2 strong {
    color: var(--primary);
}

.about-copy > p {
    margin: 0;
    color: var(--muted);
}

/* =========================================================
   WORKFLOW TABLET
   ========================================================= */

@media (max-width: 960px) {
    .workflow-section {
        padding: 68px 0;
    }

    .workflow-layout {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .workflow-copy {
        width: min(620px, 100%);
        margin: 0 auto;
        text-align: center;
    }

    .workflow-copy h2,
    .workflow-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .workflow-promo-link {
        margin-right: auto;
        margin-left: auto;
    }

    .workflow-process-area {
        min-height: 360px;
    }

    .workflow-background-image {
        top: 50%;
        right: -120px;
        left: auto;
        width: min(580px, 68vw);
        max-width: none;
        max-height: 480px;
        opacity: 0.055;
        transform: translateY(-50%);
    }
}

/* =========================================================
   WORKFLOW MOBILE
   ========================================================= */

@media (max-width: 760px) {
    .workflow-process-area {
        min-height: auto;
    }

    .workflow-background-image {
        top: auto;
        right: -190px;
        bottom: -80px;
        left: auto;
        width: 500px;
        max-width: none;
        max-height: 500px;
        opacity: 0.04;
        transform: none;
    }

    .workflow-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .workflow-list::before {
        top: 7%;
        right: auto;
        bottom: 7%;
        left: 38px;
        width: 2px;
        height: auto;
    }

    .workflow-step {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        min-height: 82px;
        padding: 5px;
        column-gap: 15px;
        text-align: left;
        align-items: center;
    }

    .step-icon {
        grid-row: 1 / 5;
        width: 76px;
        height: 76px;
        margin: 0;
        font-size: 21px;
    }

    .workflow-step > span {
        align-self: end;
    }

    .workflow-step h3 {
        margin: 2px 0;
        font-size: 14px;
    }

    .workflow-step p {
        max-width: none;
        margin: 0;
        font-size: 10px;
    }
}

@media (max-width: 640px) {
    .workflow-section {
        padding: 60px 0;
    }

    .workflow-copy h2 {
        font-size: 34px;
    }

    .workflow-promo-link {
        grid-template-columns: 32px auto 27px;
        min-height: 46px;
    }

    .workflow-promo-link > span {
        width: 32px;
        height: 32px;
    }

    .workflow-promo-link strong {
        font-size: 10px;
    }
}

/* =========================================================
   DATABASE PRICING CARDS
   ========================================================= */

.pricing-cards-section {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(8, 118, 185, 0.08),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}

.pricing-section-heading {
    display: flex;
    width: min(1180px, 100%);
    margin: 0 auto 42px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
}

.pricing-section-heading .eyebrow {
    justify-content: center;
    margin: 0 0 10px;
    white-space: nowrap;
}

.pricing-section-heading h2 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(38px, 3.6vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.05em;
    white-space: nowrap;
}

.pricing-section-heading h2 strong {
    display: inline;
    color: var(--primary);
}

.pricing-section-heading p {
    width: min(850px, 100%);
    max-width: none;
    margin: 12px auto 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.pricing-card-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(270px, 1fr)
    );
    align-items: stretch;
    gap: 22px;
}

.pricing-card-db {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 34px 30px 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow:
        0 12px 34px rgba(4, 43, 85, 0.045);
    flex-direction: column;
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.pricing-card-db:hover {
    border-color: rgba(8, 118, 185, 0.24);
    box-shadow:
        0 22px 50px rgba(4, 43, 85, 0.1);
    transform: translateY(-5px);
}

.pricing-card-db.best-value {
    border: 2px solid var(--blue);
    box-shadow:
        0 24px 55px rgba(8, 118, 185, 0.13);
}

.pricing-card-db.best-choice {
    border: 2px solid var(--orange);
    box-shadow:
        0 24px 55px rgba(245, 130, 32, 0.18);
}

.pricing-card-db.best-choice:hover {
    border-color: var(--orange-dark);
    box-shadow:
        0 28px 60px rgba(245, 130, 32, 0.24);
}

.pricing-card-badge {
    position: absolute;
    z-index: 2;
    top: -14px;
    right: 24px;
    max-width: calc(100% - 48px);
    overflow: hidden;
    padding: 7px 14px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 99px;
    box-shadow:
        0 10px 25px rgba(7, 63, 120, 0.18);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pricing-card-db.best-choice .pricing-card-badge {
    background:
        linear-gradient(
            135deg,
            #ffad38 0%,
            #f58220 52%,
            #e56612 100%
        );
    box-shadow:
        0 11px 25px rgba(245, 130, 32, 0.24);
}

.pricing-card-header {
    min-height: 30px;
}

.pricing-card-header h3 {
    margin: 0;
    color: var(--heading);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.pricing-card-price {
    display: flex;
    min-width: 0;
    min-height: 42px;
    margin-top: 22px;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 5px;
    white-space: nowrap;
}

.pricing-card-price strong {
    min-width: 0;
    color: var(--primary-dark);
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.055em;
    white-space: nowrap;
}

.pricing-card-price span {
    flex: 0 0 auto;
    padding: 0;
    color: var(--muted);
    font-size: 9px;
    white-space: nowrap;
}

.pricing-card-divider {
    height: 1px;
    margin: 22px 0 20px;
    background: var(--border);
}

.pricing-card-features {
    display: grid;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    gap: 11px;
}

.pricing-card-features li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
    color: #536075;
    font-size: 11px;
    line-height: 1.45;
}

.pricing-card-feature-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--blue);
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.pricing-card-feature-copy {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.pricing-card-feature-copy > span {
    min-width: 0;
}

.pricing-card-feature-copy strong {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 10px;
    text-align: right;
}

.pricing-card-feature-copy small {
    flex: 0 0 auto;
    color: #9aa3b1;
    font-size: 9px;
    text-align: right;
}

.pricing-card-features li.excluded {
    color: #9ca4b1;
}

.pricing-card-features li.excluded .pricing-card-feature-icon {
    color: #b8bec8;
}

.pricing-card-button {
    width: 100%;
    min-height: 47px;
    margin-top: auto;
}

/* =========================================================
   DATABASE BLOG SHOWCASE
   ========================================================= */

.blog-showcase-section {
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: calc(100svh - var(--header-height));
    padding: 50px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(8, 118, 185, 0.055),
            transparent 26%
        ),
        #ffffff;
    align-items: center;
}

.blog-showcase-section > .container {
    position: relative;
    z-index: 2;
}

.blog-showcase-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.055;
    filter:
        saturate(0.46)
        contrast(0.88)
        brightness(1.08);
    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.72) 12%,
            #000000 38%,
            #000000 70%,
            rgba(0, 0, 0, 0.7) 88%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.72) 12%,
            #000000 38%,
            #000000 70%,
            rgba(0, 0, 0, 0.7) 88%,
            transparent 100%
        );
    pointer-events: none;
    user-select: none;
    transform: scale(1.035);
}

.blog-showcase-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 28px;
}

.blog-showcase-heading h2 {
    max-width: 800px;
    margin: 0;
    color: var(--heading);
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -0.045em;
}

.blog-showcase-heading h2 strong {
    color: var(--primary);
}

.blog-showcase-heading p {
    max-width: 650px;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.blog-showcase-all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding-bottom: 5px;
    color: var(--primary);
    border-bottom: 1px solid rgba(7, 63, 120, 0.28);
    font-size: 12px;
    font-weight: 800;
}

.blog-showcase-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(350px, 0.82fr);
    min-height: 530px;
    gap: 17px;
}

.blog-featured-card,
.blog-featured-cover {
    min-height: 530px;
}

.blog-featured-card {
    overflow: hidden;
    background: var(--primary-deep);
    border-radius: 23px;
    box-shadow:
        0 25px 60px rgba(4, 43, 85, 0.18);
}

.blog-featured-cover {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
}

.blog-featured-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.blog-featured-card:hover img {
    transform: scale(1.035);
}

.blog-cover-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: inherit;
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(245, 130, 32, 0.3),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
    place-items: center;
    font-size: 72px;
}

.blog-featured-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3, 33, 67, 0.05) 22%,
            rgba(3, 33, 67, 0.94) 100%
        );
}

.blog-featured-category {
    position: absolute;
    top: 22px;
    left: 22px;
    padding: 7px 11px;
    color: #ffffff;
    background: rgba(245, 130, 32, 0.92);
    border-radius: 99px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.blog-featured-content {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    color: #ffffff;
}

.blog-featured-content > span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 9px;
    font-weight: 600;
}

.blog-featured-content h3 {
    max-width: 690px;
    margin: 8px 0 10px;
    font-size: clamp(25px, 3vw, 39px);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.blog-featured-content p {
    max-width: 670px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
}

.blog-featured-content > strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 10px;
}

.blog-latest-list {
    display: grid;
    min-height: 0;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.blog-latest-card {
    display: grid;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 15px;
    grid-template-columns: 118px minmax(0, 1fr);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.blog-latest-card:hover {
    border-color: rgba(8, 118, 185, 0.24);
    box-shadow: var(--shadow-small);
    transform: translateY(-2px);
}

.blog-latest-cover {
    display: block;
    min-height: 0;
    overflow: hidden;
    background: var(--primary);
}

.blog-latest-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-latest-cover .blog-cover-placeholder {
    min-height: 100%;
    font-size: 28px;
}

.blog-latest-content {
    display: flex;
    min-width: 0;
    padding: 12px 13px;
    flex-direction: column;
}

.blog-latest-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.blog-latest-meta span {
    color: var(--orange-dark);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.blog-latest-meta small {
    color: #919aab;
    font-size: 7px;
}

.blog-latest-content h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 7px 0 5px;
    color: var(--heading);
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-latest-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 8px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-latest-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 7px;
}

.blog-latest-footer span,
.blog-latest-footer a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 7px;
}

.blog-latest-footer span {
    color: #7b8596;
}

.blog-latest-footer a {
    color: var(--primary);
    font-weight: 800;
}

.homepage-empty-state {
    display: grid;
    min-height: 360px;
    padding: 35px;
    color: var(--muted);
    background: #ffffff;
    border: 1px dashed rgba(7, 63, 120, 0.22);
    border-radius: 22px;
    text-align: center;
    place-items: center;
    align-content: center;
}

.homepage-empty-state > span {
    display: grid;
    width: 66px;
    height: 66px;
    margin-bottom: 16px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 50%;
    place-items: center;
    font-size: 27px;
}

.homepage-empty-state h3 {
    margin: 0;
    color: var(--heading);
    font-size: 22px;
}

.homepage-empty-state p {
    max-width: 430px;
    margin: 8px 0 0;
    font-size: 12px;
}

/* =========================================================
   ABOUT
   ========================================================= */

.about-section {
    background: var(--surface-soft);
}

.about-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 65px;
}

.about-visual {
    position: relative;
    display: grid;
    min-height: 380px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(245, 130, 32, 0.16),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
    border-radius: 24px;
    box-shadow: var(--shadow-medium);
    place-items: center;
}

.about-logo {
    position: relative;
    z-index: 2;
    width: min(320px, 72%);
    padding: 22px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
}

.about-logo img {
    width: 100%;
}

.about-pattern {
    position: absolute;
    right: -120px;
    bottom: -170px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
}

.about-copy > p + p {
    margin-top: 15px;
}

.about-values {
    display: grid;
    gap: 11px;
    margin-top: 25px;
}

.about-values span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #526075;
    font-size: 13px;
    font-weight: 600;
}

.about-values i {
    color: var(--blue);
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-section {
    position: relative;
    isolation: isolate;
    padding: 50px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(8, 118, 185, 0.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(245, 130, 32, 0.05),
            transparent 24%
        ),
        #ffffff;
}

.faq-section::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.68) 38%,
            rgba(255, 255, 255, 0.78) 100%
        );
    pointer-events: none;
}

.faq-section > .container {
    position: relative;
    z-index: 2;
}

.faq-section-background {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.12;
    filter:
        saturate(0.48)
        contrast(0.9)
        brightness(1.06);
    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.78) 12%,
            #000000 34%,
            #000000 72%,
            rgba(0, 0, 0, 0.76) 90%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(0, 0, 0, 0.78) 12%,
            #000000 34%,
            #000000 72%,
            rgba(0, 0, 0, 0.76) 90%,
            transparent 100%
        );
    pointer-events: none;
    user-select: none;
    transform: scale(1.04);
}

.faq-section .section-heading {
    position: relative;
    z-index: 2;
}

.faq-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(330px, 0.88fr);
    align-items: stretch;
    gap: 30px;
}

.faq-list {
    display: grid;
    align-content: start;
    gap: 10px;
}

.faq-item {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: 13px;
    box-shadow:
        0 8px 22px rgba(4, 43, 85, 0.035);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.faq-item:hover {
    border-color: rgba(8, 118, 185, 0.2);
    box-shadow:
        0 12px 28px rgba(4, 43, 85, 0.07);
    transform: translateY(-1px);
}

.faq-item.active {
    border-color: rgba(8, 118, 185, 0.3);
    box-shadow:
        0 14px 32px rgba(4, 43, 85, 0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 18px;
    padding: 19px 21px;
    color: var(--heading);
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
}

.faq-question i {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 50%;
    place-items: center;
    font-size: 11px;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.faq-item.active .faq-question i {
    color: #ffffff;
    background: var(--primary);
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    color: var(--muted);
    transition: max-height 0.35s ease;
}

.faq-answer p {
    margin: 0;
    padding: 0 21px 19px;
    font-size: 12px;
    line-height: 1.7;
}

.faq-section .support-card {
    height: 100%;
    min-height: 345px;
    box-shadow:
        0 24px 55px rgba(4, 43, 85, 0.17);
}

@media (max-width: 960px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .faq-section-background {
        object-position: center top;
        opacity: 0.1;
        transform: scale(1.08);
    }

    .faq-section .support-card {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .faq-section-background {
        object-position: 58% top;
        opacity: 0.07;
        transform: scale(1.12);
    }

    .faq-section::before {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(255, 255, 255, 0.74) 42%,
                rgba(255, 255, 255, 0.86) 100%
            );
    }

    .faq-question {
        padding: 17px;
        font-size: 12px;
    }

    .faq-answer p {
        padding: 0 17px 17px;
        font-size: 11px;
    }

    .faq-section .support-card {
        min-height: 290px;
    }
}


/* =========================================================
   SUPPORT
   ========================================================= */

.support-card {
    position: relative;
    isolation: isolate;
    min-height: 345px;
    padding: 36px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 84% 16%,
            rgba(255, 178, 65, 0.22),
            transparent 23%
        ),
        radial-gradient(
            circle at 18% 92%,
            rgba(21, 150, 210, 0.18),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #084b87 0%,
            var(--primary) 46%,
            var(--primary-deep) 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 21px;
    box-shadow:
        0 24px 55px rgba(4, 43, 85, 0.17);
}

.support-card::before {
    position: absolute;
    z-index: 0;
    top: -112px;
    right: -92px;
    width: 270px;
    height: 270px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(255, 255, 255, 0.035),
        0 0 0 70px rgba(255, 255, 255, 0.02);
    pointer-events: none;
}

.support-card::after {
    position: absolute;
    z-index: 0;
    right: 26px;
    bottom: 30px;
    width: 128px;
    height: 92px;
    content: "";
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.2) 1.4px,
            transparent 1.5px
        );
    background-size: 14px 14px;
    opacity: 0.42;
    pointer-events: none;
    transform: rotate(-7deg);
}

.support-card > div {
    position: relative;
    z-index: 3;
}

.support-card > div::after {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 46px;
    height: 3px;
    content: "";
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.72),
            transparent
        );
    border-radius: 99px;
    opacity: 0.55;
    transform: rotate(-35deg);
}

.support-label {
    display: inline-flex;
    margin-bottom: 17px;
    padding: 6px 12px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38 0%,
            #f58220 52%,
            #e56612 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    box-shadow:
        0 9px 22px rgba(245, 130, 32, 0.24);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.support-card h3 {
    max-width: 330px;
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.support-card p {
    max-width: 360px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.65;
}

.support-card .support-action-button {
    position: relative;
    z-index: 3;
    min-height: 47px;
    margin-top: 26px;
    padding-right: 20px;
    padding-left: 20px;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        0 13px 28px rgba(245, 130, 32, 0.28);
}

.support-card .support-action-button:hover {
    box-shadow:
        0 17px 34px rgba(245, 130, 32, 0.36);
}

.support-card .support-action-button i {
    font-size: 15px;
}

.support-icon {
    position: absolute;
    z-index: 1;
    right: 28px;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.13);
    font-size: 112px;
    filter:
        drop-shadow(
            0 12px 24px rgba(0, 0, 0, 0.16)
        );
    pointer-events: none;
    transform: rotate(-4deg);
}

@media (max-width: 960px) {
    .support-card {
        min-height: 310px;
    }
}

@media (max-width: 640px) {
    .support-card {
        min-height: 290px;
        padding: 28px 24px;
    }

    .support-card::before {
        top: -130px;
        right: -120px;
    }

    .support-card::after {
        right: 12px;
        bottom: 18px;
        width: 104px;
        height: 76px;
    }

    .support-card h3 {
        font-size: 26px;
    }

    .support-card p {
        font-size: 12px;
    }

    .support-icon {
        right: 18px;
        bottom: 14px;
        font-size: 92px;
    }
}


/* =========================================================
   CTA
   ========================================================= */

.cta-section {
    position: relative;
    overflow: hidden;
    padding: 74px 0;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 83% 25%,
            rgba(245, 130, 32, 0.23),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-deep)
        );
}

.cta-section::after {
    position: absolute;
    right: -160px;
    bottom: -230px;
    width: 430px;
    height: 430px;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.cta-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 35px;
}

.cta-copy > span {
    display: block;
    margin-bottom: 10px;
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.cta-copy h2 {
    max-width: 720px;
    margin: 0 0 11px;
    font-size: clamp(33px, 4vw, 48px);
    line-height: 1.14;
    letter-spacing: -0.04em;
}

.cta-copy p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 11px;
}


.cta-demo-button {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 13px 28px rgba(245, 130, 32, 0.26);
}

.cta-demo-button:hover {
    color: #ffffff;
    box-shadow:
        0 17px 34px rgba(245, 130, 32, 0.36);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    position: relative;
    padding: 34px 0 18px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(8, 118, 185, 0.05),
            transparent 23%
        ),
        #ffffff;
    border-top: 1px solid rgba(7, 63, 120, 0.07);
}

.footer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(390px, 1.35fr)
        minmax(280px, 1fr)
        minmax(130px, 0.48fr)
        minmax(200px, 0.7fr);
    align-items: start;
    column-gap: 30px;
    row-gap: 30px;
}

/* =========================================================
   FOOTER BRAND
   ========================================================= */

.footer-brand {
    min-width: 0;
}

/* =========================================================
   FOOTER LOGOS
   ========================================================= */

.footer-logo-group {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr);
    width: 100%;
    max-width: 410px;
    min-height: 78px;
    align-items: center;
    column-gap: 26px;
}

.footer-logo {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.footer-logo:hover {
    opacity: 0.92;
    transform: translateY(-2px);
}

.footer-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    transform: none;
}

.footer-logo-enotaris {
    width: 100%;
    max-width: 252px;
}

.footer-logo-zona {
    width: 100%;
    max-width: 252px;
}

.footer-logo-enotaris img,
.footer-logo-zona img {
    object-position: left center;
    transform: none;
}

.footer-logo-relation,
.footer-logo-divider {
    display: none !important;
}

/* =========================================================
   FOOTER ADDRESS
   ========================================================= */

.footer-company-address {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    width: 100%;
    max-width: 390px;
    margin: 18px 0 0;
    color: var(--muted);
    font-style: normal;
    gap: 12px;
}

.footer-company-icon {
    display: grid;
    width: 38px;
    height: 38px;
    color: var(--primary);
    background:
        linear-gradient(
            145deg,
            #f4f9ff,
            var(--blue-soft)
        );
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 11px;
    place-items: center;
    font-size: 15px;
}

.footer-company-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.footer-company-copy strong {
    display: block;
    margin-bottom: 4px;
    color: var(--heading);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.footer-company-copy span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55;
}

/* =========================================================
   FOOTER MAP
   ========================================================= */

.footer-map-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--blue-soft);
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 15px;
    box-shadow:
        0 12px 28px rgba(4, 43, 85, 0.07);
}

.footer-map-card iframe {
    display: block;
    width: 100%;
    height: 205px;
    border: 0;
}

/* =========================================================
   FOOTER SOCIAL ICONS
   ========================================================= */

.socials {
    display: flex;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.socials a {
    display: grid;
    width: 36px;
    height: 36px;
    color: var(--primary);
    background:
        linear-gradient(
            145deg,
            #f4f9ff,
            var(--blue-soft)
        );
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 50%;
    box-shadow:
        0 7px 16px rgba(4, 43, 85, 0.045);
    place-items: center;
    font-size: 14px;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.socials a:hover {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-color: transparent;
    box-shadow:
        0 10px 22px rgba(7, 63, 120, 0.18);
    transform: translateY(-3px);
}

.socials a[href^="mailto:"]:hover {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
}

.socials a[href*="instagram.com"]:hover {
    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );
    box-shadow:
        0 10px 22px rgba(225, 48, 108, 0.2);
}

.socials a[href*="wa.me"]:hover {
    background: #25d366;
    box-shadow:
        0 10px 22px rgba(37, 211, 102, 0.22);
}

.socials a[href*="zonakreatif.id"]:hover {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
}

/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-column {
    min-width: 0;
    padding-top: 2px;
}

.footer-column h4 {
    position: relative;
    margin: 0 0 15px;
    padding-bottom: 9px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.footer-column h4::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--orange)
        );
    border-radius: 99px;
}

.footer-column a {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.footer-column a:last-of-type {
    margin-bottom: 0;
}

.footer-column a:hover {
    color: var(--primary);
    transform: translateX(3px);
}

/* =========================================================
   FOOTER CERTIFIED
   ========================================================= */

.footer-legal-column {
    min-width: 190px;
}

.footer-certified {
    margin-top: 22px;
}

.footer-certified .footer-certified-heading {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 9px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.footer-certified .footer-certified-heading::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--orange)
        );
    border-radius: 99px;
}

.footer-certified-list {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
}

.footer-certified-item {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
}

.footer-certified-item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.footer-certified-divider {
    display: block;
    width: 1px;
    height: 42px;
    flex: 0 0 1px;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(7, 63, 120, 0.26),
            transparent
        );
}

/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding-top: 15px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    font-size: 10px;
    line-height: 1.5;
}

.footer-bottom span:last-child {
    color: var(--primary);
    font-weight: 700;
}

/* =========================================================
   FOOTER RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
    .footer-grid {
        grid-template-columns:
            minmax(330px, 1.2fr)
            minmax(240px, 0.9fr)
            minmax(120px, 0.45fr)
            minmax(180px, 0.65fr);
        column-gap: 24px;
        row-gap: 28px;
    }

    .footer-logo-group {
        max-width: 355px;
        min-height: 70px;
        column-gap: 22px;
    }

    .footer-logo-enotaris {
        max-width: 220px;
    }

    .footer-logo-zona {
        max-width: 252px;
    }

    .footer-certified-list {
        gap: 10px;
    }

    .footer-certified-item {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .footer-certified-item img {
        max-width: 50px;
        max-height: 50px;
    }

    .footer-certified-divider {
        height: 38px;
    }
}

@media (max-width: 960px) {
    .footer {
        padding-top: 34px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 34px;
        row-gap: 30px;
    }

    .footer-logo-group {
        max-width: 400px;
    }

    .footer-map-card iframe {
        height: 220px;
    }

    .footer-legal-column {
        min-width: 0;
    }
}

@media (max-width: 640px) {
    .footer {
        padding: 32px 0 18px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-logo-group {
        grid-template-columns:
            minmax(0, 1.65fr)
            minmax(0, 1fr);
        max-width: 340px;
        min-height: 64px;
        column-gap: 18px;
    }

    .footer-logo-enotaris {
        max-width: 205px;
    }

    .footer-logo-zona {
        max-width: 252px;
    }

    .footer-company-address {
        grid-template-columns: 36px minmax(0, 1fr);
        max-width: 100%;
        margin-top: 15px;
    }

    .footer-company-icon {
        width: 36px;
        height: 36px;
    }

    .footer-company-copy strong {
        font-size: 11px;
    }

    .footer-company-copy span {
        font-size: 9px;
    }

    .socials {
        margin-top: 13px;
    }

    .socials a {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .footer-map-card iframe {
        height: 210px;
    }

    .footer-certified {
        margin-top: 20px;
    }

    .footer-certified-list {
        gap: 12px;
    }

    .footer-certified-item {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }

    .footer-certified-item img {
        max-width: 54px;
        max-height: 54px;
    }

    .footer-certified-divider {
        height: 40px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
        margin-top: 25px;
        padding-top: 14px;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .footer-logo-group {
        max-width: 290px;
        min-height: 58px;
        column-gap: 14px;
    }

    .footer-logo-enotaris {
        max-width: 175px;
    }

    .footer-logo-zona {
        max-width: 175px;
    }

    .footer-column h4 {
        margin-bottom: 13px;
    }

    .footer-column a {
        margin-bottom: 7px;
    }

    .footer-map-card iframe {
        height: 190px;
    }
}


/* =========================================================
   ANIMATION
   ========================================================= */

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

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

.search-highlight {
    animation: section-highlight 1.2s ease;
}

@keyframes section-highlight {
    0% {
        box-shadow:
            inset 0 0 0 0 rgba(245, 130, 32, 0);
    }

    35% {
        box-shadow:
            inset 0 0 0 4px rgba(245, 130, 32, 0.2);
    }

    100% {
        box-shadow:
            inset 0 0 0 0 rgba(245, 130, 32, 0);
    }
}

/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1120px) {
    .brand {
        width: 190px;
    }

    .nav-inner {
        gap: 13px;
    }

    .nav-link {
        padding-right: 8px;
        padding-left: 8px;
        font-size: 13px;
    }

    .header-search-panel {
        right: -155px;
    }

    .hero-grid {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(470px, 1.1fr);
        gap: 38px;
    }

    .hero-title {
        font-size: 48px;
    }

    .proof-items {
        width: min(900px, 100%);
    }
}

@media (max-width: 1180px) {
    .pricing-section-heading h2 {
        font-size: clamp(34px, 4vw, 46px);
    }
}

/* =========================================================
   TABLET AND MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 960px) {
    .nav-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 10px;
    }

    .brand {
        width: 188px;
    }

    .nav-actions {
        margin-left: auto;
    }

    .nav-actions > .btn {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        z-index: 1102;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        width: 100%;
        max-height: calc(100dvh - var(--header-height));
        padding: 20px 18px 30px;
        background: #ffffff;
        border-top: 1px solid var(--border);
        box-shadow:
            0 25px 50px rgba(4, 43, 85, 0.15);
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-14px);
        transition:
            opacity 0.22s ease,
            visibility 0.22s ease,
            transform 0.22s ease;
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-link {
        min-height: 50px;
        padding: 0 17px;
        border-radius: 10px;
    }

    .nav-link::before {
        top: 10px;
        right: auto;
        bottom: 10px;
        left: 0;
        width: 4px;
        height: auto;
        transform: scaleY(0.2);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link.active {
        background: var(--blue-soft);
    }

    .nav-link.active::before {
        transform: scaleY(1);
    }

    .mobile-nav-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--border);
    }

    .header-search-panel {
        position: fixed;
        z-index: 1104;
        top: calc(var(--header-height) + 10px);
        right: 16px;
        left: 16px;
        width: auto;
    }

    .hero {
        padding:
            calc(var(--header-height) + 42px)
            0
            62px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .hero-copy {
        width: min(680px, 100%);
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
    }

    .hero-title-line {
        width: auto;
        white-space: normal;
    }

    .hero-title-highlight {
        width: max-content;
        margin-right: auto;
        margin-left: auto;
        padding: 5px 16px 10px;
    }

    .hero-title-orbit {
        width: calc(100% + 40px);
        height: calc(100% + 34px);
    }

    .hero-description {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
        text-wrap: balance;
    }

    .hero-buttons,
    .hero-points {
        justify-content: center;
    }

    .hero-visual {
        width: min(760px, 100%);
        margin: 0 auto;
    }

    .proof-items {
        width: 100%;
    }

    .about-layout,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .about-copy {
        width: min(680px, 100%);
        margin: 0 auto;
        text-align: center;
    }

    .about-values {
        width: max-content;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        text-align: left;
    }

    .about-visual {
        width: min(700px, 100%);
        min-height: 320px;
        margin: 0 auto;
    }

    .cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-copy h2,
    .cta-copy p {
        margin-right: auto;
        margin-left: auto;
    }

    .cta-actions {
        justify-content: center;
    }


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

    .blog-showcase-heading {
        align-items: flex-start;
    }

    .blog-showcase-grid {
        grid-template-columns: 1fr;
    }

    .blog-latest-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .blog-latest-card {
        min-height: 160px;
    }
}

@media (max-width: 960px) {
    .pricing-section-heading {
        margin-bottom: 32px;
    }

    .pricing-section-heading h2 {
        font-size: 38px;
        white-space: nowrap;
    }

    .pricing-section-heading p {
        width: min(680px, 100%);
        margin-top: 10px;
        font-size: 13px;
    }
}

@media (max-width: 760px) {
    .pricing-section-heading h2 {
        font-size: 34px;
        white-space: normal;
    }
}

/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 760px) {
    .section {
        padding: 80px 0;
    }

    .proof-items {
        grid-template-columns: 1fr;
        width: min(520px, 100%);
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {
    :root {
        --header-height: 70px;
    }

    .container {
        width: min(
            calc(100% - 28px),
            var(--container)
        );
    }

    .section {
        padding: 70px 0;
    }

    .navbar,
    .navbar.scrolled {
        min-height: var(--header-height);
    }

    .nav-inner {
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        gap: 7px;
    }

    .brand {
        width: 154px;
        min-width: 0;
    }

    .brand img {
        max-height: 51px;
    }

    .search-toggle,
    .mobile-toggle {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .mobile-toggle {
        padding: 8px;
    }

    .nav-actions {
        display: flex;
        width: 42px;
        margin: 0;
    }

    .nav-menu {
        top: var(--header-height);
        max-height: calc(100dvh - var(--header-height));
        padding: 18px 14px 28px;
    }

    .mobile-nav-actions {
        grid-template-columns: 1fr;
    }

    .header-search-panel {
        top: calc(var(--header-height) + 8px);
        right: 12px;
        left: 12px;
        padding: 8px;
    }

    .header-search-field {
        grid-template-columns: auto 1fr 44px;
    }

    .hero {
        padding:
            calc(var(--header-height) + 32px)
            0
            52px;
    }

    .hero-map-background {
        top: var(--header-height);
        height: calc(100% - var(--header-height));
        object-fit: cover;
        object-position: center center;
        opacity: 0.075;
    }

    .hero-grid {
        gap: 38px;
    }

    .hero-title {
        font-size: 37px;
        line-height: 1.1;
        letter-spacing: -0.045em;
    }

    .hero-title-line {
        width: 100%;
        white-space: normal;
    }

    .hero-title-highlight {
        width: max-content;
        max-width: 100%;
        margin-right: auto;
        margin-left: auto;
        padding: 5px 13px 9px;
        white-space: nowrap;
    }

    .hero-highlight-text {
        font-size: 0.96em;
    }

    .hero-title-orbit {
        width: calc(100% + 30px);
        height: calc(100% + 27px);
    }

    .hero-orbit-line {
        stroke-width: 4.2;
    }


    .hero-description {
        max-width: 100%;
        margin-top: 19px;
        font-size: 14px;
        line-height: 1.75;
        text-wrap: pretty;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 25px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-points {
        display: grid;
        grid-template-columns: 1fr;
        width: max-content;
        max-width: 100%;
        margin-top: 22px;
        margin-right: auto;
        margin-left: auto;
        gap: 10px;
        text-align: left;
    }

    .carousel-browser-bar {
        grid-template-columns: auto 1fr;
        min-height: 44px;
        padding: 0 12px;
    }

    .browser-address {
        justify-self: end;
        padding-right: 10px;
        padding-left: 10px;
    }

    .browser-status {
        display: none;
    }

    .carousel-slide {
        aspect-ratio: 16 / 10;
    }

    .slide-content {
        right: 17px;
        bottom: 28px;
        left: 17px;
    }

    .slide-content h2 {
        font-size: 15px;
    }

    .slide-content p {
        display: none;
    }

    .carousel-control {
        top: 56%;
        width: 36px;
        height: 36px;
        opacity: 1;
    }

    .carousel-prev {
        left: 8px;
    }

    .carousel-next {
        right: 8px;
    }

    .proof-strip {
        padding: 25px 0;
    }

    .proof-item {
        width: 100%;
        padding: 16px;
    }

    .proof-icon {
        width: 42px;
        height: 42px;
    }


    .pricing-cards-section,
    .blog-showcase-section {
        min-height: auto;
        padding: 60px 0;
    }

    .blog-showcase-background {
        opacity: 0.04;
        object-position: center top;
        transform: scale(1.08);
    }

    .pricing-section-heading,
    .blog-showcase-heading {
        margin-bottom: 28px;
    }

    .pricing-section-heading {
        margin-bottom: 28px;
    }

    .pricing-section-heading .eyebrow {
        margin-bottom: 8px;
    }

    .pricing-section-heading h2,
    .blog-showcase-heading h2 {
        font-size: 32px;
    }

    .pricing-section-heading h2 {
        line-height: 1.12;
        white-space: normal;
    }

    .pricing-section-heading p {
        width: min(620px, 100%);
        margin: 9px auto 0;
        font-size: 12px;
        line-height: 1.55;
    }

    .pricing-card-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card-db {
        padding: 30px 24px 24px;
    }

    .pricing-card-header {
        min-height: 0;
    }

    .blog-showcase-heading {
        display: grid;
        gap: 17px;
    }

    .blog-showcase-grid {
        min-height: auto;
    }

    .blog-featured-card,
    .blog-featured-cover {
        min-height: 430px;
    }

    .blog-featured-content {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .blog-featured-content h3 {
        font-size: 27px;
    }

    .blog-latest-list {
        grid-template-columns: 1fr;
    }

    .blog-latest-card {
        grid-template-columns: 105px minmax(0, 1fr);
        min-height: 145px;
    }

    .about-visual {
        min-height: 250px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {
    .brand {
        width: 140px;
    }

    .nav-inner {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        gap: 6px;
    }

    .nav-actions,
    .search-toggle,
    .mobile-toggle {
        width: 40px;
        height: 40px;
    }

    .hero-title {
        font-size: 33px;
    }

    .hero-highlight-text {
        font-size: 0.93em;
    }

    .hero-title-orbit {
        width: calc(100% + 24px);
        height: calc(100% + 23px);
    }

    .proof-item {
        align-items: flex-start;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
    .brand {
        width: 124px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-highlight-text {
        font-size: 0.9em;
    }

    .hero-description {
        font-size: 13px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   FINAL FIX - MOBILE MENU ICON
   Garis dibuat absolut agar panjang maksimal dan konsisten
   ========================================================= */

@media (max-width: 960px) {
    .mobile-toggle {
        position: relative;
        display: block;
        width: 46px;
        height: 46px;
        padding: 0;
        overflow: hidden;
        background: var(--blue-soft);
        border-radius: 11px;
    }

    .mobile-toggle span {
        position: absolute;
        right: 5px;
        left: 5px;
        display: block;
        width: auto !important;
        max-width: none !important;
        height: 3px;
        margin: 0 !important;
        background: var(--primary);
        border-radius: 999px;
        transform-origin: center;
        transition:
            top 0.22s ease,
            opacity 0.18s ease,
            transform 0.22s ease;
    }

    .mobile-toggle span:nth-child(1) {
        top: 13px;
    }

    .mobile-toggle span:nth-child(2) {
        top: 21.5px;
    }

    .mobile-toggle span:nth-child(3) {
        top: 30px;
    }

    .mobile-toggle.active span:nth-child(1) {
        top: 21.5px;
        transform: rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-toggle.active span:nth-child(3) {
        top: 21.5px;
        transform: rotate(-45deg);
    }
}

@media (max-width: 640px) {
    .mobile-toggle {
        width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 10px;
    }

    .mobile-toggle span {
        right: 4px;
        left: 4px;
        height: 3px;
    }

    .mobile-toggle span:nth-child(1) {
        top: 11px;
    }

    .mobile-toggle span:nth-child(2) {
        top: 19.5px;
    }

    .mobile-toggle span:nth-child(3) {
        top: 28px;
    }

    .mobile-toggle.active span:nth-child(1),
    .mobile-toggle.active span:nth-child(3) {
        top: 19.5px;
    }
}

@media (max-width: 430px) {
    .mobile-toggle {
        width: 40px;
        height: 40px;
        padding: 0;
    }

    .mobile-toggle span {
        right: 3px;
        left: 3px;
    }

    .mobile-toggle span:nth-child(1) {
        top: 10px;
    }

    .mobile-toggle span:nth-child(2) {
        top: 18.5px;
    }

    .mobile-toggle span:nth-child(3) {
        top: 27px;
    }

    .mobile-toggle.active span:nth-child(1),
    .mobile-toggle.active span:nth-child(3) {
        top: 18.5px;
    }
}

/* =========================================================
   FINAL FIX - MOBILE MENU PANEL
   Panel menu turun dari bawah navbar dan memenuhi layar
   ========================================================= */

@media (max-width: 960px) {
    .navbar {
        overflow: visible;
    }

    .nav-menu {
        position: absolute;
        z-index: 1200;
        top: 100%;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: calc(100dvh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
        margin: 0;
        padding: 20px 18px 30px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #ffffff;
        border-top: 1px solid var(--border);
        box-shadow:
            0 25px 50px rgba(4, 43, 85, 0.15);
    }

    .navbar.scrolled .nav-menu {
        height: calc(100dvh - 70px);
        max-height: calc(100dvh - 70px);
    }

    .nav-menu.open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-menu .nav-link {
        width: 100%;
        min-height: 50px;
        flex: 0 0 auto;
    }

    .mobile-nav-actions {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }
}

@media (max-width: 640px) {
    .navbar .nav-menu,
    .navbar.scrolled .nav-menu {
        height: calc(100dvh - 70px);
        max-height: calc(100dvh - 70px);
        padding: 18px 14px 28px;
    }
}

/* =========================================================
   LEGAL DOCUMENT PAGES
   Privacy Policy and Terms & Conditions
   ========================================================= */

html.legal-document {
    min-height: 100%;
    scroll-behavior: auto;
    scroll-padding-top: calc(var(--header-height) + 22px);
    overflow-anchor: none;
}

body.legal-body {
    min-height: 100%;
    margin: 0;
    background: var(--surface-soft);
    overflow-x: hidden;
    overflow-anchor: none;
}

body.legal-body.menu-open {
    overflow: hidden;
}

body.legal-body .legal-page {
    width: 100%;
    padding-top: var(--header-height);
}

body.legal-body .page-wrap {
    width: 100%;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(8, 118, 185, 0.075),
            transparent 26%
        ),
        radial-gradient(
            circle at 91% 18%,
            rgba(245, 130, 32, 0.065),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 48%,
            #f3f7fc 100%
        );
}

/* Initial language is selected in <head> before the first paint. */
.lang-content,
.toc-lang {
    display: none !important;
}

html[data-legal-lang="id"] .lang-content[data-lang="id"],
html[data-legal-lang="id"] .lang-content[data-content="id"],
html[data-legal-lang="en"] .lang-content[data-lang="en"],
html[data-legal-lang="en"] .lang-content[data-content="en"] {
    display: block !important;
}

html[data-legal-lang="id"] .toc-lang[data-lang="id"],
html[data-legal-lang="en"] .toc-lang[data-lang="en"] {
    display: flex !important;
}

html[data-legal-lang="id"] .toc-body.toc-lang[data-lang="id"],
html[data-legal-lang="en"] .toc-body.toc-lang[data-lang="en"] {
    display: grid !important;
}

/* =========================================================
   LEGAL HERO
   ========================================================= */

.legal-hero-section {
    padding: 34px 0 24px;
}

.legal-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    width: 100%;
    height: 280px;
    min-height: 280px;
    padding: 38px 46px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(245, 130, 32, 0.27),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(21, 150, 210, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #063a70 0%,
            #052f5c 54%,
            #032143 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    box-shadow: 0 26px 70px rgba(4, 43, 85, 0.2);
    align-items: stretch;
}

.legal-hero::before,
.legal-hero::after {
    position: absolute;
    z-index: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}

.legal-hero::before {
    top: -230px;
    right: -145px;
    width: 470px;
    height: 470px;
}

.legal-hero::after {
    right: 150px;
    bottom: -245px;
    width: 380px;
    height: 380px;
}

.legal-hero-banner {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.055;
    filter: saturate(0.7) contrast(0.9);
    pointer-events: none;
    user-select: none;
}

.legal-hero-orb {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
}

.legal-hero-orb-one {
    top: 54px;
    right: 52px;
    width: 13px;
    height: 13px;
    background: var(--orange);
    box-shadow: 0 0 0 9px rgba(245, 130, 32, 0.13);
}

.legal-hero-orb-two {
    right: 120px;
    bottom: 48px;
    width: 10px;
    height: 10px;
    background: var(--blue-bright);
    box-shadow: 0 0 0 8px rgba(21, 150, 210, 0.12);
}

.legal-hero-content {
    position: relative;
    z-index: 3;
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 20px;
}

.legal-hero-toolbar {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.legal-update {
    display: inline-flex;
    min-height: 38px;
    max-width: 100%;
    margin: 0;
    padding: 0 14px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.legal-update i {
    flex: 0 0 auto;
    color: #ffb13b;
    font-size: 12px;
}

.language-switcher {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    gap: 5px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.language-switcher button,
.lang-btn {
    min-height: 38px;
    padding: 0 15px;
    color: rgba(255, 255, 255, 0.84);
    background: transparent;
    border: 0;
    border-radius: 99px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.language-switcher button:hover,
.lang-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.language-switcher button.active,
.lang-btn.active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38,
            var(--orange),
            var(--orange-dark)
        );
    box-shadow: 0 10px 24px rgba(245, 130, 32, 0.28);
}

.legal-hero-copy {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 128px;
    flex-direction: column;
    justify-content: flex-end;
}

.legal-hero h1 {
    max-width: 100%;
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 3.5vw, 48px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.legal-hero p {
    width: min(920px, 100%);
    min-height: 44px;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

/* =========================================================
   LEGAL CONTENT
   ========================================================= */

.legal-content-section {
    padding: 18px 0 64px;
}

.legal-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(310px, 340px);
    align-items: start;
    gap: 24px;
}

.legal-document-column,
.legal-toc-column {
    min-width: 0;
}

.legal-toc-column {
    position: sticky;
    top: calc(var(--header-height) + 18px);
    align-self: start;
}

.doc-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(4, 43, 85, 0.1);
}

.doc-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue),
            var(--orange)
        );
}

.doc-head {
    position: relative;
    display: flex;
    min-height: 108px;
    padding: 27px 28px 22px;
    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(8, 118, 185, 0.08),
            transparent 24%
        ),
        linear-gradient(180deg, #ffffff, #fbfdff);
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.doc-title {
    margin: 0;
    color: var(--heading);
    font-size: clamp(24px, 3vw, 31px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.doc-subtitle {
    max-width: 640px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
}

.doc-badge {
    display: inline-flex;
    min-height: 38px;
    padding: 0 13px;
    color: var(--orange-dark);
    background: var(--orange-soft);
    border: 1px solid rgba(245, 130, 32, 0.17);
    border-radius: 99px;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.doc-badge i {
    color: var(--orange);
    font-size: 14px;
}

.doc-body {
    padding: 28px;
}

.callout {
    position: relative;
    padding: 17px 18px 17px 48px;
    color: #526075;
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.95),
            rgba(255, 255, 255, 0.95)
        );
    border: 1px solid rgba(8, 118, 185, 0.14);
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}

.callout > i:first-child {
    position: absolute;
    top: 17px;
    left: 17px;
    display: grid;
    width: 23px;
    height: 23px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-radius: 50%;
    place-items: center;
    font-size: 11px;
}

.callout strong {
    color: var(--primary-dark);
}

.divider-soft {
    height: 1px;
    margin: 22px 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(7, 63, 120, 0.14),
            transparent
        );
}

.markdown {
    color: var(--text);
}

.markdown h4 {
    position: relative;
    margin: 34px 0 18px;
    padding: 16px 18px 16px 22px;
    color: var(--heading);
    background: linear-gradient(135deg, #f6faff, #ffffff);
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-left: 4px solid var(--orange);
    border-radius: 13px;
    scroll-margin-top: calc(var(--header-height) + 28px);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.015em;
}

.markdown h4:first-child {
    margin-top: 8px;
}

.markdown h5 {
    margin: 24px 0 9px;
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
}

.markdown p,
.markdown li {
    color: #5f6a7c;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.85;
}

.markdown p {
    margin: 0 0 14px;
}

.markdown ul,
.markdown ol {
    margin: 0 0 18px;
    padding-left: 1.35rem;
}

.markdown li {
    margin-bottom: 9px;
    padding-left: 3px;
}

.markdown li::marker {
    color: var(--orange);
}

.markdown strong {
    color: var(--heading);
    font-weight: 800;
}

/* =========================================================
   DOCUMENT NAVIGATION
   ========================================================= */

.toc {
    width: 100%;
}

.toc-card {
    display: flex;
    width: 100%;
    max-height: calc(100dvh - var(--header-height) - 36px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(4, 43, 85, 0.1);
    flex-direction: column;
}

.toc-logo {
    position: relative;
    display: grid;
    min-height: 82px;
    padding: 15px 16px;
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(245, 130, 32, 0.1),
            transparent 30%
        ),
        linear-gradient(145deg, #ffffff, #f4f8fd);
    border-bottom: 1px solid var(--border);
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.toc-logo::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--primary), var(--blue), var(--orange));
}

.toc-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(7, 63, 120, 0.18);
    place-items: center;
    font-size: 18px;
}

.toc-brand-copy {
    min-width: 0;
}

.toc-brand-copy span,
.toc-brand-copy strong {
    display: block;
}

.toc-brand-copy span {
    margin-bottom: 3px;
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.toc-brand-copy strong {
    color: var(--heading);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
}

.toc-lang {
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.toc-body.toc-lang {
    min-height: 0;
    overflow-y: auto;
    flex: 1;
}

.toc-head {
    padding: 14px 16px;
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.92),
            rgba(255, 242, 230, 0.54)
        );
    border-bottom: 1px solid rgba(7, 63, 120, 0.08);
}

.toc-head h5 {
    margin: 0;
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.toc-body {
    display: grid;
    min-height: 0;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 63, 120, 0.28) transparent;
}

.toc-body::-webkit-scrollbar {
    width: 6px;
}

.toc-body::-webkit-scrollbar-track {
    background: transparent;
}

.toc-body::-webkit-scrollbar-thumb {
    background: rgba(7, 63, 120, 0.25);
    border-radius: 99px;
}

.toc a {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    min-height: 42px;
    padding: 9px 10px;
    color: #5d6879;
    border: 1px solid transparent;
    border-radius: 10px;
    align-items: start;
    gap: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.45;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.toc a .dot {
    width: 8px;
    height: 8px;
    margin-top: 3px;
    background: rgba(7, 63, 120, 0.18);
    border-radius: 50%;
}

.toc a:hover {
    color: var(--primary);
    background: var(--blue-soft);
    transform: translateX(2px);
}

.toc a.active {
    color: var(--primary-dark);
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.98),
            rgba(255, 242, 230, 0.8)
        );
    border-color: rgba(8, 118, 185, 0.17);
}

.toc a.active .dot {
    background: linear-gradient(135deg, var(--primary), var(--orange));
    box-shadow: 0 0 0 4px rgba(8, 118, 185, 0.08);
}

.toc-body .divider-soft {
    width: 100%;
    margin: 7px 0;
    grid-column: 1 / -1;
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.to-top {
    position: fixed;
    z-index: 1200;
    right: 22px;
    bottom: 22px;
    display: grid;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: linear-gradient(135deg, #ffad38, var(--orange), var(--orange-dark));
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    box-shadow: 0 14px 30px rgba(245, 130, 32, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    place-items: center;
    transform: translateY(10px);
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.to-top:hover {
    color: #ffffff;
    box-shadow: 0 18px 36px rgba(245, 130, 32, 0.36);
    transform: translateY(-3px);
}

/* =========================================================
   LEGAL RESPONSIVE
   ========================================================= */

@media (max-width: 960px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .legal-document-column {
        order: 2;
    }

    .legal-toc-column {
        position: static;
        order: 1;
    }

    .toc-card {
        max-height: none;
    }

    html[data-legal-lang="id"] .toc-lang[data-lang="id"],
    html[data-legal-lang="en"] .toc-lang[data-lang="en"] {
        display: block !important;
    }

    html[data-legal-lang="id"] .toc-body.toc-lang[data-lang="id"],
    html[data-legal-lang="en"] .toc-body.toc-lang[data-lang="en"] {
        display: grid !important;
    }

    .toc-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
        padding: 12px;
        gap: 7px;
    }

    .toc a {
        min-height: 48px;
        padding: 10px 11px;
        font-size: 10.5px;
    }
}

@media (max-width: 760px) {
    .legal-hero {
        height: 300px;
        min-height: 300px;
        padding: 32px 28px;
    }

    .legal-hero-content {
        gap: 16px;
    }

    .legal-hero-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
    }

    .language-switcher {
        justify-self: start;
    }

    .legal-hero-copy {
        min-height: 134px;
    }

    .legal-hero h1 {
        font-size: 38px;
        white-space: normal;
    }

    .legal-hero p {
        min-height: 50px;
        font-size: 12px;
        line-height: 1.65;
    }
}

@media (max-width: 640px) {
    .legal-hero-section {
        padding: 22px 0 18px;
    }

    .legal-hero {
        height: auto;
        min-height: 326px;
        padding: 26px 21px;
        border-radius: 19px;
    }

    .legal-update {
        width: max-content;
        min-height: 36px;
        padding: 0 11px;
        font-size: 8px;
        white-space: normal;
    }

    .language-switcher {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 13px;
    }

    .language-switcher button,
    .lang-btn {
        width: 100%;
        min-height: 40px;
        padding: 0 10px;
        border-radius: 9px;
        font-size: 10px;
    }

    .legal-hero-copy {
        min-height: 142px;
    }

    .legal-hero h1 {
        font-size: 32px;
    }

    .legal-hero p {
        margin-top: 12px;
        font-size: 11.5px;
    }

    .legal-content-section {
        padding-top: 10px;
        padding-bottom: 48px;
    }

    .doc-card {
        border-radius: 18px;
    }

    .doc-head {
        display: grid;
        min-height: 0;
        padding: 25px 20px 20px;
        gap: 14px;
    }

    .doc-title {
        font-size: 24px;
    }

    .doc-subtitle {
        font-size: 11px;
    }

    .doc-badge {
        justify-self: start;
    }

    .doc-body {
        padding: 20px;
    }

    .callout {
        padding: 15px 15px 15px 44px;
        font-size: 11px;
    }

    .callout > i:first-child {
        top: 15px;
        left: 14px;
    }

    .markdown h4 {
        margin-top: 27px;
        padding: 14px 14px 14px 17px;
        font-size: 15px;
    }

    .markdown h5 {
        font-size: 13px;
    }

    .markdown p,
    .markdown li {
        font-size: 12px;
        line-height: 1.8;
    }

    .toc-logo {
        min-height: 76px;
        padding: 13px 14px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
    }

    .toc-brand-mark {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .toc-brand-copy span {
        font-size: 8px;
    }

    .toc-brand-copy strong {
        font-size: 10px;
    }

    .toc-head {
        padding: 13px 14px;
    }

    .toc-head h5 {
        font-size: 12px;
    }

    .toc-body,
    html[data-legal-lang="id"] .toc-body.toc-lang[data-lang="id"],
    html[data-legal-lang="en"] .toc-body.toc-lang[data-lang="en"] {
        grid-template-columns: 1fr;
        padding: 9px;
        gap: 4px;
    }

    .toc a {
        min-height: 44px;
        padding: 9px 10px;
        font-size: 10px;
    }

    .to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 390px) {
    .legal-hero h1 {
        font-size: 29px;
    }

    .doc-body {
        padding: 17px;
    }
}

/* =========================================================
   STANDALONE BLOG LISTING AND DETAIL
   ========================================================= */

body.blog-standalone-body {
    background: var(--surface-soft);
}

/* =========================================================
   BLOG LISTING HERO
   ========================================================= */

.blog-index-page {
    min-height: 100vh;
}

.blog-index-hero {
    position: relative;
    isolation: isolate;
    padding:
        calc(var(--header-height) + 64px)
        0
        70px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(8, 118, 185, 0.14),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(245, 130, 32, 0.07),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f9ff 100%
        );
}

.blog-index-hero-background {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.065;
    filter:
        saturate(0.54)
        contrast(0.9);
    pointer-events: none;
    user-select: none;
}

.blog-index-decoration {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(7, 63, 120, 0.07);
    border-radius: 50%;
    pointer-events: none;
}

.blog-index-decoration-one {
    top: -240px;
    right: -160px;
    width: 470px;
    height: 470px;
}

.blog-index-decoration-two {
    bottom: -280px;
    left: -190px;
    width: 520px;
    height: 520px;
}

.blog-index-hero-inner {
    position: relative;
    z-index: 2;
}

.blog-index-hero-copy {
    width: min(850px, 100%);
    margin: 0 auto;
    text-align: center;
}

.blog-index-hero-copy .eyebrow {
    justify-content: center;
}

.blog-index-hero-copy h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(39px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.blog-index-hero-copy h1 strong {
    display: block;
    color: var(--primary);
}

.blog-index-hero-copy > p {
    width: min(720px, 100%);
    margin: 20px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}

.blog-index-hero-statistics {
    display: flex;
    margin-top: 28px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-index-hero-statistics span {
    display: inline-flex;
    min-height: 37px;
    padding: 0 14px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 99px;
    box-shadow:
        0 9px 22px rgba(4, 43, 85, 0.05);
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
}

.blog-index-hero-statistics i {
    color: var(--orange);
}

.blog-index-hero-statistics strong {
    color: var(--primary);
}

/* =========================================================
   BLOG LISTING CONTENT
   ========================================================= */

.blog-index-content {
    padding: 64px 0 88px;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(8, 118, 185, 0.05),
            transparent 25%
        ),
        var(--surface-soft);
}

.blog-index-layout {
    display: grid;
    grid-template-columns:
        minmax(250px, 280px)
        minmax(0, 1fr);
    align-items: start;
    gap: 30px;
}

.blog-index-filter-column,
.blog-index-results {
    min-width: 0;
}

.blog-index-filter-column {
    position: sticky;
    top: calc(var(--header-height) + 22px);
}

.blog-index-filter {
    padding: 23px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 20px;
    box-shadow:
        0 18px 45px rgba(4, 43, 85, 0.08);
}

.blog-index-filter-header {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    padding-bottom: 19px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 11px;
}

.blog-index-filter-header > span {
    display: grid;
    width: 43px;
    height: 43px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 12px;
    box-shadow:
        0 10px 22px rgba(7, 63, 120, 0.18);
    place-items: center;
    font-size: 16px;
}

.blog-index-filter-header small,
.blog-index-filter-header strong {
    display: block;
}

.blog-index-filter-header small {
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.blog-index-filter-header strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 12px;
    line-height: 1.4;
}

.blog-index-filter-group {
    min-width: 0;
    margin: 21px 0 0;
    padding: 0;
    border: 0;
}

.blog-index-filter-label {
    display: block;
    width: 100%;
    margin: 0 0 9px;
    padding: 0;
    color: var(--heading);
    font-size: 11px;
    font-weight: 800;
}

.blog-index-search-field {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 45px;
    background: #f8fbff;
    border: 1px solid rgba(7, 63, 120, 0.12);
    border-radius: 11px;
    align-items: center;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.blog-index-search-field:focus-within {
    background: #ffffff;
    border-color: rgba(8, 118, 185, 0.38);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.08);
}

.blog-index-search-field i {
    color: var(--primary);
    text-align: center;
}

.blog-index-search-field input {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0 12px 0 0;
    color: var(--heading);
    background: transparent;
    border: 0;
    outline: none;
    font-size: 11px;
}

.blog-index-search-field input::placeholder {
    color: #9099a8;
}

.blog-index-category-list {
    display: grid;
    gap: 6px;
}

.blog-index-category {
    position: relative;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    min-height: 38px;
    padding: 8px 10px;
    color: #5d6879;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    align-items: center;
    gap: 9px;
    font-size: 10px;
    font-weight: 600;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.blog-index-category:hover {
    color: var(--primary);
    background: var(--blue-soft);
}

.blog-index-category input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.blog-index-category-radio {
    position: relative;
    display: block;
    width: 17px;
    height: 17px;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.2);
    border-radius: 50%;
}

.blog-index-category input:checked ~ .blog-index-category-radio {
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-color: transparent;
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.08);
}

.blog-index-category input:checked ~ .blog-index-category-radio::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    content: "";
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.blog-index-category:has(input:checked) {
    color: var(--primary);
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.96),
            rgba(255, 242, 230, 0.55)
        );
    border-color: rgba(8, 118, 185, 0.14);
}

.blog-index-category-empty {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.blog-index-filter-actions {
    display: grid;
    margin-top: 23px;
    gap: 9px;
}

.blog-index-filter-actions .btn {
    width: 100%;
    min-height: 44px;
    font-size: 11px;
}

.blog-index-results-header {
    display: flex;
    min-height: 63px;
    margin-bottom: 20px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.blog-index-results-header > div > span {
    display: block;
    margin-bottom: 3px;
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.blog-index-results-header h2 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(23px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.blog-index-clear-filter {
    display: inline-flex;
    min-height: 38px;
    padding: 0 13px;
    color: var(--primary);
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 10px;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.blog-index-clear-filter:hover {
    border-color: rgba(8, 118, 185, 0.3);
    box-shadow:
        0 10px 24px rgba(4, 43, 85, 0.08);
    transform: translateY(-2px);
}

.blog-index-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* =========================================================
   BLOG LISTING CARD
   ========================================================= */

.blog-index-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 19px;
    box-shadow:
        0 12px 35px rgba(4, 43, 85, 0.055);
    flex-direction: column;
    transition:
        border-color 0.24s ease,
        box-shadow 0.24s ease,
        transform 0.24s ease;
}

.blog-index-card:hover {
    border-color: rgba(8, 118, 185, 0.22);
    box-shadow:
        0 22px 50px rgba(4, 43, 85, 0.11);
    transform: translateY(-5px);
}

.blog-index-card-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
}

.blog-index-card-cover > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.blog-index-card:hover .blog-index-card-cover > img {
    transform: scale(1.045);
}

.blog-index-card-placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.75);
    background:
        radial-gradient(
            circle at 74% 20%,
            rgba(245, 130, 32, 0.3),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
    place-items: center;
    font-size: 52px;
}

.blog-index-card-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(3, 33, 67, 0.35) 100%
        );
    pointer-events: none;
}

.blog-index-featured {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    min-height: 29px;
    padding: 0 10px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38,
            var(--orange)
        );
    border-radius: 99px;
    box-shadow:
        0 9px 22px rgba(245, 130, 32, 0.25);
    align-items: center;
    gap: 5px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blog-index-card-body {
    display: flex;
    min-height: 250px;
    padding: 20px;
    flex: 1;
    flex-direction: column;
}

.blog-index-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-index-category-chip {
    display: inline-flex;
    min-height: 27px;
    padding: 0 10px;
    color: var(--orange-dark);
    background: var(--orange-soft);
    border: 1px solid rgba(245, 130, 32, 0.14);
    border-radius: 99px;
    align-items: center;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.blog-index-card-meta > span:not(.blog-index-category-chip) {
    display: inline-flex;
    color: #8a94a5;
    align-items: center;
    gap: 5px;
    font-size: 8px;
    font-weight: 600;
}

.blog-index-card-body h3 {
    display: -webkit-box;
    overflow: hidden;
    margin: 14px 0 9px;
    color: var(--heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.025em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.blog-index-card-body h3 a {
    transition: color 0.2s ease;
}

.blog-index-card-body h3 a:hover {
    color: var(--primary);
}

.blog-index-card-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.blog-index-card-footer {
    display: flex;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(7, 63, 120, 0.07);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.blog-index-card-footer span,
.blog-index-card-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
}

.blog-index-card-footer span {
    overflow: hidden;
    color: #7c8799;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog-index-card-footer a {
    flex: 0 0 auto;
    color: var(--primary);
    font-weight: 800;
}

.blog-index-card-footer a i {
    transition: transform 0.2s ease;
}

.blog-index-card-footer a:hover i {
    transform: translateX(3px);
}

/* =========================================================
   BLOG LISTING EMPTY AND PAGINATION
   ========================================================= */

.blog-index-empty {
    display: grid;
    min-height: 440px;
    padding: 42px 28px;
    background: #ffffff;
    border: 1px dashed rgba(7, 63, 120, 0.22);
    border-radius: 22px;
    text-align: center;
    place-items: center;
    align-content: center;
}

.blog-index-empty > span {
    display: grid;
    width: 70px;
    height: 70px;
    margin-bottom: 17px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 50%;
    place-items: center;
    font-size: 29px;
}

.blog-index-empty h3 {
    margin: 0;
    color: var(--heading);
    font-size: 23px;
}

.blog-index-empty p {
    width: min(430px, 100%);
    margin: 9px auto 22px;
    color: var(--muted);
    font-size: 12px;
}

.blog-index-pagination {
    display: flex;
    margin-top: 30px;
    padding: 7px;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 13px;
    box-shadow:
        0 12px 30px rgba(4, 43, 85, 0.06);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.blog-index-pagination a,
.blog-index-pagination > span {
    display: grid;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    color: var(--primary);
    background: transparent;
    border-radius: 9px;
    place-items: center;
    font-size: 10px;
    font-weight: 700;
}

.blog-index-pagination a:hover {
    background: var(--blue-soft);
}

.blog-index-pagination > span.active {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
}

.blog-index-pagination > span.disabled {
    color: #a7afbc;
}

.blog-index-pagination > span.ellipsis {
    min-width: 25px;
    color: var(--muted);
}

/* =========================================================
   BLOG ARTICLE HERO
   ========================================================= */

.blog-article-page {
    min-height: 100vh;
}

.blog-article-hero {
    position: relative;
    isolation: isolate;
    padding:
        calc(var(--header-height) + 40px)
        0
        55px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 16%,
            rgba(245, 130, 32, 0.25),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
}

.blog-article-hero-background {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0.1;
    filter:
        saturate(0.5)
        contrast(0.9);
    mix-blend-mode: screen;
    pointer-events: none;
    user-select: none;
}

.blog-article-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
}

.blog-article-orb-one {
    top: 112px;
    right: 7%;
    width: 13px;
    height: 13px;
    background: var(--orange);
    box-shadow:
        0 0 0 9px rgba(245, 130, 32, 0.12);
}

.blog-article-orb-two {
    right: 18%;
    bottom: 45px;
    width: 10px;
    height: 10px;
    background: var(--blue-bright);
    box-shadow:
        0 0 0 8px rgba(21, 150, 210, 0.12);
}

.blog-article-breadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, 0.68);
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 9px;
    font-weight: 600;
}

.blog-article-breadcrumb a {
    color: rgba(255, 255, 255, 0.74);
    transition: color 0.2s ease;
}

.blog-article-breadcrumb a:hover {
    color: #ffffff;
}

.blog-article-breadcrumb i {
    color: rgba(255, 255, 255, 0.38);
    font-size: 8px;
}

.blog-article-breadcrumb span {
    overflow: hidden;
    color: #ffffff;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.blog-article-hero-copy {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
}

.blog-article-category {
    display: inline-flex;
    min-height: 29px;
    padding: 0 11px;
    color: var(--primary-dark);
    background: var(--gold);
    border-radius: 99px;
    align-items: center;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.blog-article-hero-copy h1 {
    margin: 17px 0 0;
    color: #ffffff;
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.055em;
}

.blog-article-hero-copy > p {
    width: min(780px, 100%);
    margin: 20px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
    line-height: 1.75;
}

.blog-article-meta {
    display: flex;
    margin-top: 25px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-article-meta span {
    display: inline-flex;
    min-height: 35px;
    padding: 0 12px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 600;
}

.blog-article-meta i {
    color: #ffad38;
}

/* =========================================================
   BLOG ARTICLE CONTENT
   ========================================================= */

.blog-article-content-section {
    padding: 55px 0 90px;
    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(245, 130, 32, 0.05),
            transparent 24%
        ),
        var(--surface-soft);
}

.blog-article-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(270px, 320px);
    align-items: start;
    gap: 28px;
}

.blog-article-card {
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 22px;
    box-shadow:
        0 20px 55px rgba(4, 43, 85, 0.09);
}

.blog-article-cover {
    width: 100%;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 8.6;
    background: #edf3f8;
}

.blog-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-body {
    padding: clamp(25px, 4vw, 48px);
}

.blog-article-content {
    color: #4f5b6f;
    font-size: 14px;
    line-height: 1.9;
    overflow-wrap: anywhere;
}

.blog-article-content > *:first-child {
    margin-top: 0;
}

.blog-article-content > *:last-child {
    margin-bottom: 0;
}

.blog-article-content h1,
.blog-article-content h2,
.blog-article-content h3,
.blog-article-content h4,
.blog-article-content h5,
.blog-article-content h6 {
    color: var(--heading);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.blog-article-content h2 {
    margin: 38px 0 15px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border);
    font-size: 27px;
}

.blog-article-content h3 {
    margin: 30px 0 12px;
    color: var(--primary);
    font-size: 21px;
}

.blog-article-content h4 {
    margin: 25px 0 10px;
    font-size: 17px;
}

.blog-article-content p {
    margin: 0 0 18px;
}

.blog-article-content a {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-color: rgba(8, 118, 185, 0.28);
    text-underline-offset: 3px;
}

.blog-article-content ul,
.blog-article-content ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.blog-article-content li {
    margin-bottom: 7px;
    padding-left: 3px;
}

.blog-article-content li::marker {
    color: var(--orange);
}

.blog-article-content blockquote {
    position: relative;
    margin: 28px 0;
    padding: 20px 22px 20px 25px;
    color: var(--primary-dark);
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.95),
            rgba(255, 242, 230, 0.55)
        );
    border-left: 4px solid var(--orange);
    border-radius: 0 14px 14px 0;
    font-weight: 600;
}

.blog-article-content img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 28px auto;
    border-radius: 15px;
    box-shadow:
        0 15px 35px rgba(4, 43, 85, 0.1);
}

.blog-article-content table {
    display: table;
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse;
    border: 1px solid var(--border);
    font-size: 11px;
}

.blog-article-content th,
.blog-article-content td {
    padding: 11px 12px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.blog-article-content th {
    color: var(--primary-dark);
    background: var(--blue-soft);
    font-weight: 800;
}

.blog-article-content pre {
    max-width: 100%;
    margin: 25px 0;
    padding: 18px;
    overflow-x: auto;
    color: #eaf6ff;
    background: var(--primary-deep);
    border-radius: 13px;
    font-size: 11px;
    line-height: 1.7;
}

.blog-article-content code {
    padding: 2px 5px;
    color: var(--primary-dark);
    background: var(--blue-soft);
    border-radius: 5px;
    font-size: 0.9em;
}

.blog-article-content pre code {
    padding: 0;
    color: inherit;
    background: transparent;
}

.blog-article-actions {
    display: flex;
    margin-top: 42px;
    padding-top: 25px;
    border-top: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 11px;
}

.blog-article-actions .btn {
    min-height: 47px;
}

/* =========================================================
   BLOG ARTICLE SIDEBAR
   ========================================================= */

.blog-article-sidebar {
    min-width: 0;
}

.blog-article-sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height) + 22px);
    display: grid;
    gap: 17px;
}

.blog-article-information-card,
.blog-article-explore-card {
    overflow: hidden;
    padding: 21px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 19px;
    box-shadow:
        0 16px 40px rgba(4, 43, 85, 0.075);
}

.blog-article-information-heading {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    padding-bottom: 17px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 11px;
}

.blog-article-information-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 12px;
    place-items: center;
    font-size: 16px;
}

.blog-article-information-heading small,
.blog-article-information-heading h2 {
    display: block;
}

.blog-article-information-heading small {
    color: var(--orange-dark);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.blog-article-information-heading h2 {
    margin: 2px 0 0;
    color: var(--heading);
    font-size: 15px;
    line-height: 1.35;
}

.blog-article-information-list {
    display: grid;
    margin-top: 17px;
    gap: 13px;
}

.blog-article-information-item {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
}

.blog-article-information-item > span {
    display: grid;
    width: 35px;
    height: 35px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 10px;
    place-items: center;
    font-size: 13px;
}

.blog-article-information-item small,
.blog-article-information-item strong {
    display: block;
}

.blog-article-information-item small {
    margin-bottom: 2px;
    color: #929bab;
    font-size: 8px;
}

.blog-article-information-item strong {
    color: var(--heading);
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.blog-article-explore-card {
    position: relative;
    isolation: isolate;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(245, 130, 32, 0.28),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep)
        );
    border-color: transparent;
}

.blog-article-explore-card > span {
    display: block;
    color: var(--gold);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blog-article-explore-card h2 {
    position: relative;
    z-index: 2;
    margin: 9px 0;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.blog-article-explore-card p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.65;
}

.blog-article-explore-card .btn {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: 18px;
    min-height: 43px;
    font-size: 10px;
}

.blog-article-explore-icon {
    position: absolute;
    z-index: 0;
    right: 13px;
    bottom: 4px;
    color: rgba(255, 255, 255, 0.08);
    font-size: 86px;
    pointer-events: none;
}

/* =========================================================
   BLOG RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .blog-index-layout {
        grid-template-columns:
            minmax(225px, 250px)
            minmax(0, 1fr);
        gap: 22px;
    }

    .blog-index-grid {
        gap: 16px;
    }

    .blog-index-card-body {
        padding: 17px;
    }

    .blog-article-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, 280px);
        gap: 22px;
    }
}

@media (max-width: 960px) {
    .blog-index-content,
    .blog-article-content-section {
        padding-top: 48px;
    }

    .blog-index-layout,
    .blog-article-layout {
        grid-template-columns: 1fr;
    }

    .blog-index-filter-column,
    .blog-article-sidebar-sticky {
        position: static;
    }

    .blog-index-filter {
        display: grid;
        grid-template-columns:
            minmax(220px, 0.8fr)
            minmax(0, 1fr);
        align-items: start;
        gap: 18px 24px;
    }

    .blog-index-filter-header,
    .blog-index-filter-actions {
        grid-column: 1 / -1;
    }

    .blog-index-filter-group {
        margin-top: 0;
    }

    .blog-index-filter-actions {
        grid-template-columns: 1fr 1fr;
        margin-top: 0;
    }

    .blog-article-sidebar-sticky {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .blog-index-hero {
        padding:
            calc(var(--header-height) + 48px)
            0
            55px;
    }

    .blog-index-hero-copy h1 {
        font-size: 39px;
    }

    .blog-index-grid {
        grid-template-columns: 1fr;
    }

    .blog-index-card-body {
        min-height: 230px;
    }

    .blog-article-hero-copy h1 {
        font-size: 42px;
    }
}

@media (max-width: 640px) {
    .blog-index-hero {
        padding:
            calc(var(--header-height) + 38px)
            0
            48px;
    }

    .blog-index-hero-copy h1 {
        font-size: 34px;
    }

    .blog-index-hero-copy > p {
        margin-top: 16px;
        font-size: 13px;
    }

    .blog-index-hero-statistics {
        display: grid;
        width: min(300px, 100%);
        margin-right: auto;
        margin-left: auto;
    }

    .blog-index-hero-statistics span {
        justify-content: center;
    }

    .blog-index-content,
    .blog-article-content-section {
        padding: 42px 0 65px;
    }

    .blog-index-filter {
        display: block;
        padding: 19px;
    }

    .blog-index-filter-group {
        margin-top: 19px;
    }

    .blog-index-filter-actions {
        grid-template-columns: 1fr;
        margin-top: 21px;
    }

    .blog-index-results-header {
        display: grid;
        min-height: 0;
        align-items: start;
    }

    .blog-index-clear-filter {
        width: max-content;
    }

    .blog-index-card-body {
        min-height: auto;
        padding: 18px;
    }

    .blog-index-card-footer {
        margin-top: 18px;
    }

    .blog-article-hero {
        padding:
            calc(var(--header-height) + 28px)
            0
            44px;
    }

    .blog-article-breadcrumb {
        margin-bottom: 22px;
    }

    .blog-article-hero-copy h1 {
        margin-top: 13px;
        font-size: 35px;
    }

    .blog-article-hero-copy > p {
        margin-top: 16px;
        font-size: 13px;
    }

    .blog-article-meta {
        display: grid;
        align-items: stretch;
    }

    .blog-article-meta span {
        justify-content: center;
    }

    .blog-article-cover {
        aspect-ratio: 16 / 10;
    }

    .blog-article-body {
        padding: 23px 19px;
    }

    .blog-article-content {
        font-size: 13px;
        line-height: 1.82;
    }

    .blog-article-content h2 {
        margin-top: 31px;
        font-size: 23px;
    }

    .blog-article-content h3 {
        font-size: 19px;
    }

    .blog-article-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .blog-article-actions {
        display: grid;
    }

    .blog-article-actions .btn {
        width: 100%;
    }

    .blog-article-sidebar-sticky {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .blog-index-hero-copy h1 {
        font-size: 31px;
    }

    .blog-index-card-body h3 {
        font-size: 17px;
    }

    .blog-index-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .blog-article-hero-copy h1 {
        font-size: 31px;
    }

    .blog-article-breadcrumb span {
        max-width: 180px;
    }
}

/* =========================================================
   HEADER SEARCH MONITORING STATE
   ========================================================= */

.header-search-field.is-invalid {
    border-color: rgba(180, 35, 24, 0.48);
    box-shadow:
        0 0 0 4px rgba(180, 35, 24, 0.08);
}

.header-search-field.is-invalid > i {
    color: #b42318;
}

.search-feedback.is-error {
    display: block;
    color: #b42318;
    font-weight: 700;
}

.search-feedback.is-success {
    display: block;
    color: #17714e;
    font-weight: 700;
}

.header-search-panel.is-submitting {
    pointer-events: none;
}

.header-search-panel.is-submitting .header-search-field {
    border-color: rgba(8, 118, 185, 0.35);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.08);
}

.header-search-panel.is-submitting
    .header-search-field
    input {
    opacity: 0.72;
}

/* =========================================================
   MONITORING PESANAN - TOTAL REDESIGN
   ========================================================= */

body.monitoring-body {
    background: var(--surface-soft);
}

.monitoring-page {
    min-height: 100vh;
}

.monitoring-hero {
    position: relative;
    isolation: isolate;
    padding:
        calc(var(--header-height) + 64px)
        0
        70px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 86% 16%,
            rgba(245, 130, 32, 0.28),
            transparent 25%
        ),
        radial-gradient(
            circle at 10% 88%,
            rgba(21, 150, 210, 0.2),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #073f78 0%,
            #052f5c 52%,
            #032143 100%
        );
}

.monitoring-hero::before,
.monitoring-hero::after {
    position: absolute;
    z-index: 0;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.monitoring-hero::before {
    top: -270px;
    right: -170px;
    width: 560px;
    height: 560px;
}

.monitoring-hero::after {
    bottom: -310px;
    left: -190px;
    width: 600px;
    height: 600px;
}

.monitoring-hero-orb {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
}

.monitoring-hero-orb-one {
    top: 145px;
    right: 7%;
    width: 13px;
    height: 13px;
    background: var(--orange);
    box-shadow: 0 0 0 9px rgba(245, 130, 32, 0.14);
}

.monitoring-hero-orb-two {
    right: 29%;
    bottom: 52px;
    width: 10px;
    height: 10px;
    background: var(--blue-bright);
    box-shadow: 0 0 0 8px rgba(21, 150, 210, 0.13);
}

.monitoring-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, 0.92fr);
    align-items: center;
    gap: 64px;
}

.monitoring-hero-copy {
    min-width: 0;
}

.monitoring-eyebrow {
    display: inline-flex;
    min-height: 34px;
    margin-bottom: 18px;
    padding: 0 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 99px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.monitoring-eyebrow i {
    color: #ffb13b;
    font-size: 14px;
}

.monitoring-hero-copy h1 {
    width: min(760px, 100%);
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 5.2vw, 70px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.monitoring-hero-copy h1 strong {
    display: block;
    color: #ffb13b;
}

.monitoring-hero-copy > p {
    width: min(680px, 100%);
    margin: 21px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
    line-height: 1.82;
}

.monitoring-open-search {
    margin-top: 27px;
}

.monitoring-hero-guide {
    padding: 24px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.monitoring-guide-top {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    align-items: center;
    gap: 13px;
}

.monitoring-guide-icon {
    display: grid;
    width: 48px;
    height: 48px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #ffb13b, var(--orange));
    border-radius: 14px;
    box-shadow: 0 13px 28px rgba(245, 130, 32, 0.25);
    place-items: center;
    font-size: 21px;
}

.monitoring-guide-top small,
.monitoring-guide-top strong {
    display: block;
}

.monitoring-guide-top small {
    color: #ffcc77;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.monitoring-guide-top strong {
    margin-top: 3px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.4;
}

.monitoring-guide-list {
    display: grid;
    margin-top: 18px;
    gap: 15px;
}

.monitoring-guide-list > div {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: flex-start;
    gap: 11px;
}

.monitoring-guide-list > div > span {
    display: grid;
    width: 30px;
    height: 30px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    place-items: center;
    font-size: 14px;
}

.monitoring-guide-list p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.65;
}

.monitoring-guide-list strong {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
    font-size: 13px;
}

.monitoring-content-section {
    padding: 55px 0 90px;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(8, 118, 185, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(245, 130, 32, 0.05),
            transparent 23%
        ),
        var(--surface-soft);
}

.monitoring-alert {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    margin-bottom: 24px;
    padding: 17px 18px;
    background: #ffffff;
    border: 1px solid rgba(185, 28, 28, 0.15);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(4, 43, 85, 0.07);
    align-items: center;
    gap: 13px;
}

.monitoring-alert > span {
    display: grid;
    width: 44px;
    height: 44px;
    color: #b42318;
    background: #fff0ee;
    border-radius: 12px;
    place-items: center;
    font-size: 20px;
}

.monitoring-alert strong,
.monitoring-alert p {
    display: block;
    margin: 0;
}

.monitoring-alert strong {
    color: #7a271a;
    font-size: 14px;
}

.monitoring-alert p {
    margin-top: 2px;
    color: #912018;
    font-size: 12px;
}

.monitoring-alert button {
    min-height: 38px;
    padding: 0 13px;
    color: #b42318;
    background: #fff0ee;
    border-radius: 9px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}

.monitoring-result {
    display: grid;
    gap: 24px;
}

.monitoring-overview-card,
.monitoring-summary-card,
.monitoring-notary-card,
.monitoring-service-sidebar,
.monitoring-service-details,
.monitoring-empty-state,
.monitoring-empty-services,
.monitoring-search-again {
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.09);
    border-radius: 22px;
    box-shadow: 0 18px 48px rgba(4, 43, 85, 0.08);
}

.monitoring-overview-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    min-height: 220px;
    padding: 30px 32px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 94% 8%,
            rgba(245, 130, 32, 0.11),
            transparent 28%
        ),
        linear-gradient(145deg, #ffffff, #f6faff);
    align-items: center;
    gap: 30px;
}

.monitoring-overview-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    content: "";
    background: linear-gradient(90deg, var(--primary), var(--blue), var(--orange));
}

.monitoring-overview-label {
    display: block;
    margin-bottom: 8px;
    color: var(--orange-dark);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.monitoring-order-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 13px;
}

.monitoring-order-heading h2 {
    min-width: 0;
    margin: 0;
    color: var(--heading);
    font-size: clamp(29px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.monitoring-order-meta {
    display: flex;
    margin-top: 21px;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.monitoring-order-meta > span {
    display: inline-flex;
    min-height: 34px;
    padding: 0 11px;
    color: #657084;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 99px;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
}

.monitoring-order-meta i {
    color: var(--primary);
}

.monitoring-overview-progress {
    display: grid;
    justify-items: center;
    text-align: center;
}

.monitoring-progress-ring {
    --progress-value: 0;
    position: relative;
    display: grid;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--blue) calc(var(--progress-value) * 1%),
            #e6edf5 0
        );
    place-items: center;
    transition: background 0.5s ease;
}

.monitoring-progress-ring::before {
    position: absolute;
    width: 102px;
    height: 102px;
    content: "";
    background: #ffffff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(7, 63, 120, 0.06);
}

.monitoring-progress-ring > div {
    position: relative;
    z-index: 1;
}

.monitoring-progress-ring strong,
.monitoring-progress-ring small {
    display: block;
}

.monitoring-progress-ring strong {
    color: var(--primary-dark);
    font-size: 29px;
    line-height: 1;
}

.monitoring-progress-ring small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.monitoring-overview-progress p {
    max-width: 225px;
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.monitoring-overview-progress p strong {
    color: var(--primary);
}

.monitoring-status,
.monitoring-commercial {
    display: inline-flex;
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 99px;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.monitoring-status-completed {
    color: #17714e;
    background: #e4f7ed;
    border-color: rgba(23, 113, 78, 0.12);
}

.monitoring-status-processing {
    color: #075985;
    background: #e6f5ff;
    border-color: rgba(7, 89, 133, 0.12);
}

.monitoring-status-overdue {
    color: #a44608;
    background: #fff2e6;
    border-color: rgba(164, 70, 8, 0.14);
}

.monitoring-status-pending {
    color: #667085;
    background: #f1f4f8;
    border-color: rgba(102, 112, 133, 0.12);
}

.monitoring-commercial-paid {
    color: #17714e;
    background: #e4f7ed;
}

.monitoring-commercial-invoiced {
    color: #a44608;
    background: #fff2e6;
}

.monitoring-commercial-offered {
    color: #075985;
    background: #e6f5ff;
}

.monitoring-commercial-pending {
    color: #667085;
    background: #f1f4f8;
}

.monitoring-summary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
    align-items: stretch;
    gap: 24px;
}

.monitoring-summary-card,
.monitoring-notary-card {
    padding: 25px;
}

.monitoring-section-heading {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
}

.monitoring-section-heading > span {
    display: grid;
    width: 46px;
    height: 46px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-radius: 13px;
    box-shadow: 0 11px 25px rgba(7, 63, 120, 0.18);
    place-items: center;
    font-size: 19px;
}

.monitoring-section-heading small,
.monitoring-section-heading h2 {
    display: block;
}

.monitoring-section-heading small {
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.monitoring-section-heading h2 {
    margin: 3px 0 0;
    color: var(--heading);
    font-size: 19px;
    line-height: 1.35;
}

.monitoring-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 20px;
    gap: 12px;
}

.monitoring-summary-grid article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    min-width: 0;
    padding: 14px;
    background: #f8fbff;
    border: 1px solid rgba(7, 63, 120, 0.07);
    border-radius: 13px;
    align-items: center;
    gap: 10px;
}

.monitoring-summary-grid article > span {
    display: grid;
    width: 38px;
    height: 38px;
    color: var(--primary);
    background: #ffffff;
    border-radius: 10px;
    place-items: center;
}

.monitoring-summary-grid small,
.monitoring-summary-grid strong {
    display: block;
}

.monitoring-summary-grid small {
    color: #8a94a5;
    font-size: 10px;
}

.monitoring-summary-grid strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 12px;
    line-height: 1.45;
}

.monitoring-progress-block {
    margin-top: 20px;
    padding: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.9),
            rgba(255, 242, 230, 0.55)
        );
    border: 1px solid rgba(8, 118, 185, 0.1);
    border-radius: 15px;
}

.monitoring-progress-block > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.monitoring-progress-block span,
.monitoring-progress-block strong {
    color: var(--heading);
    font-size: 12px;
    font-weight: 800;
}

.monitoring-progress-block strong {
    color: var(--primary);
    font-size: 17px;
}

.monitoring-progress-block p {
    margin: 11px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.monitoring-linear-progress {
    height: 10px;
    margin-top: 11px;
    overflow: hidden;
    background: rgba(7, 63, 120, 0.1);
    border-radius: 99px;
}

.monitoring-linear-progress > span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--blue), var(--orange));
    border-radius: inherit;
    transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.monitoring-notary-card {
    color: #ffffff;
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(245, 130, 32, 0.24),
            transparent 27%
        ),
        linear-gradient(145deg, var(--primary), var(--primary-deep));
    border-color: transparent;
}

.monitoring-section-heading-light {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.monitoring-section-heading-light > span {
    color: var(--primary-dark);
    background: linear-gradient(135deg, #ffb13b, var(--orange));
}

.monitoring-section-heading-light small {
    color: #ffcc77;
}

.monitoring-section-heading-light h2 {
    color: #ffffff;
}

.monitoring-notary-profile {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    margin-top: 21px;
    align-items: center;
    gap: 14px;
}

.monitoring-notary-profile img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.monitoring-notary-profile strong,
.monitoring-notary-profile span {
    display: block;
}

.monitoring-notary-profile strong {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.4;
}

.monitoring-notary-profile span {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.67);
    font-size: 11px;
}

.monitoring-notary-info {
    display: grid;
    margin-top: 21px;
    gap: 11px;
}

.monitoring-notary-info > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
}

.monitoring-notary-info > div > span {
    display: grid;
    width: 34px;
    height: 34px;
    color: #ffb13b;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    place-items: center;
}

.monitoring-notary-info p {
    margin: 0;
}

.monitoring-notary-info small,
.monitoring-notary-info strong {
    display: block;
}

.monitoring-notary-info small {
    color: rgba(255, 255, 255, 0.56);
    font-size: 10px;
}

.monitoring-notary-info strong {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 11px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.monitoring-map-button {
    display: inline-flex;
    width: 100%;
    min-height: 42px;
    margin-top: 19px;
    color: var(--primary-dark);
    background: #ffffff;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.monitoring-map-button:hover {
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.monitoring-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.monitoring-service-sidebar,
.monitoring-service-details {
    min-width: 0;
    padding: 23px;
}

.monitoring-service-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 20px);
}

.monitoring-service-helper {
    margin: 16px 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.6;
}

.monitoring-service-list {
    display: grid;
    max-height: 620px;
    padding-right: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(7, 63, 120, 0.24) transparent;
}

.monitoring-service-button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 16px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    color: var(--text);
    background: #f8fbff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 13px;
    cursor: pointer;
    text-align: left;
    align-items: center;
    gap: 10px;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.monitoring-service-button:hover {
    border-color: rgba(8, 118, 185, 0.22);
    transform: translateY(-2px);
}

.monitoring-service-button.is-active {
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.98),
            rgba(255, 242, 230, 0.62)
        );
    border-color: rgba(8, 118, 185, 0.24);
    box-shadow: 0 12px 27px rgba(4, 43, 85, 0.09);
}

.monitoring-service-number {
    display: grid;
    width: 36px;
    height: 36px;
    color: var(--primary);
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 10px;
    place-items: center;
    font-size: 11px;
    font-weight: 800;
}

.monitoring-service-button.is-active .monitoring-service-number {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-color: transparent;
}

.monitoring-service-copy {
    display: block;
    min-width: 0;
}

.monitoring-service-copy > small,
.monitoring-service-copy > strong {
    display: block;
}

.monitoring-service-copy > small {
    overflow: hidden;
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.monitoring-service-copy > strong {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--heading);
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.monitoring-service-badges {
    display: flex;
    margin-top: 7px;
    flex-wrap: wrap;
    gap: 5px;
}

.monitoring-service-badges .monitoring-status,
.monitoring-service-badges .monitoring-commercial {
    min-height: 22px;
    padding: 0 7px;
    font-size: 8.5px;
}

.monitoring-service-button > i {
    color: #a1aabc;
    font-size: 13px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.monitoring-service-button.is-active > i {
    color: var(--primary);
    transform: translateX(2px);
}

.monitoring-service-details {
    overflow: hidden;
}

.monitoring-service-detail[hidden] {
    display: none !important;
}

.monitoring-service-detail.is-active {
    animation: monitoring-panel-in 0.28s ease both;
}

@keyframes monitoring-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.monitoring-detail-header {
    display: flex;
    padding-bottom: 21px;
    border-bottom: 1px solid var(--border);
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.monitoring-detail-kicker {
    display: block;
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.monitoring-detail-header h2 {
    margin: 5px 0 0;
    color: var(--heading);
    font-size: clamp(25px, 3vw, 35px);
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.monitoring-detail-header p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.monitoring-detail-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.monitoring-detail-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 21px;
    gap: 10px;
}

.monitoring-detail-facts article {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    min-width: 0;
    padding: 13px;
    background: #f8fbff;
    border: 1px solid rgba(7, 63, 120, 0.07);
    border-radius: 12px;
    align-items: flex-start;
    gap: 9px;
}

.monitoring-detail-facts article > span {
    display: grid;
    width: 35px;
    height: 35px;
    color: var(--primary);
    background: #ffffff;
    border-radius: 10px;
    place-items: center;
    font-size: 15px;
}

.monitoring-detail-facts small,
.monitoring-detail-facts strong {
    display: block;
}

.monitoring-detail-facts small {
    color: #8c96a7;
    font-size: 9px;
}

.monitoring-detail-facts strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.monitoring-detail-progress {
    margin-top: 17px;
    padding: 17px 18px;
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.94),
            rgba(255, 255, 255, 0.96)
        );
    border: 1px solid rgba(8, 118, 185, 0.12);
    border-radius: 14px;
}

.monitoring-detail-progress > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.monitoring-detail-progress p {
    margin: 0;
}

.monitoring-detail-progress small,
.monitoring-detail-progress strong {
    display: block;
}

.monitoring-detail-progress small {
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.monitoring-detail-progress strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 12px;
}

.monitoring-detail-progress > div:first-child > span {
    color: var(--primary);
    font-size: 20px;
    font-weight: 800;
}

.monitoring-timeline-heading {
    margin-top: 28px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--border);
}

.monitoring-timeline-heading small {
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.monitoring-timeline-heading h3 {
    margin: 3px 0 0;
    color: var(--heading);
    font-size: 19px;
}

.monitoring-timeline {
    position: relative;
    display: grid;
    margin-top: 18px;
    gap: 0;
}

.monitoring-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    min-width: 0;
    padding-bottom: 14px;
    gap: 12px;
}

.monitoring-timeline-item:not(:last-child)::before {
    position: absolute;
    top: 42px;
    bottom: -1px;
    left: 20px;
    width: 2px;
    content: "";
    background: #e3e9f1;
}

.monitoring-timeline-marker {
    position: relative;
    z-index: 2;
}

.monitoring-timeline-marker > span {
    display: grid;
    width: 42px;
    height: 42px;
    color: #667085;
    background: #f1f4f8;
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(7, 63, 120, 0.08);
    place-items: center;
    font-size: 15px;
}

.monitoring-timeline-completed .monitoring-timeline-marker > span {
    color: #17714e;
    background: #e4f7ed;
}

.monitoring-timeline-processing .monitoring-timeline-marker > span {
    color: #075985;
    background: #e6f5ff;
}

.monitoring-timeline-overdue .monitoring-timeline-marker > span {
    color: #a44608;
    background: #fff2e6;
}

.monitoring-timeline-item.is-current .monitoring-timeline-marker > span {
    box-shadow:
        0 0 0 1px rgba(8, 118, 185, 0.18),
        0 0 0 6px rgba(8, 118, 185, 0.07);
}

.monitoring-timeline-card {
    min-width: 0;
    padding: 14px 15px;
    background: #fbfcfe;
    border: 1px solid rgba(7, 63, 120, 0.07);
    border-radius: 13px;
}

.monitoring-timeline-item.is-current .monitoring-timeline-card {
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.86),
            rgba(255, 255, 255, 0.98)
        );
    border-color: rgba(8, 118, 185, 0.17);
}

.monitoring-timeline-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.monitoring-timeline-title small,
.monitoring-timeline-title strong {
    display: block;
}

.monitoring-timeline-title small {
    color: var(--orange-dark);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.monitoring-timeline-title strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 13px;
    line-height: 1.45;
}

.monitoring-timeline-card > p {
    display: flex;
    margin: 9px 0 0;
    color: #7d8798;
    flex-wrap: wrap;
    gap: 8px 15px;
    font-size: 10px;
}

.monitoring-timeline-card > p span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.monitoring-timeline-card > p i {
    color: var(--primary);
}

.monitoring-timeline-empty {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 20px;
    background: #f8fbff;
    border: 1px dashed rgba(7, 63, 120, 0.18);
    border-radius: 14px;
    align-items: center;
    gap: 13px;
}

.monitoring-timeline-empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    color: var(--primary);
    background: #ffffff;
    border-radius: 13px;
    place-items: center;
    font-size: 20px;
}

.monitoring-timeline-empty strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
}

.monitoring-timeline-empty p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
}

.monitoring-search-again {
    display: flex;
    padding: 19px 21px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.monitoring-search-again > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.monitoring-search-again > div > span {
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 12px;
    place-items: center;
}

.monitoring-search-again p {
    margin: 0;
}

.monitoring-search-again small,
.monitoring-search-again strong {
    display: block;
}

.monitoring-search-again small {
    color: var(--muted);
    font-size: 10px;
}

.monitoring-search-again strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 13px;
}

.monitoring-empty-state {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    min-height: 410px;
    padding: 34px;
    align-items: center;
    gap: 42px;
}

.monitoring-empty-copy {
    text-align: center;
}

.monitoring-empty-icon {
    display: grid;
    width: 76px;
    height: 76px;
    margin: 0 auto 17px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-radius: 22px;
    box-shadow: 0 17px 38px rgba(7, 63, 120, 0.22);
    place-items: center;
    font-size: 31px;
}

.monitoring-empty-copy > small {
    color: var(--orange-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.monitoring-empty-copy h2 {
    margin: 7px 0 0;
    color: var(--heading);
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.035em;
}

.monitoring-empty-copy p {
    width: min(470px, 100%);
    margin: 13px auto 21px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.monitoring-empty-steps {
    display: grid;
    gap: 10px;
}

.monitoring-empty-steps article {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 16px;
    background: #f8fbff;
    border: 1px solid rgba(7, 63, 120, 0.07);
    border-radius: 14px;
    align-items: center;
    gap: 13px;
}

.monitoring-empty-steps article > span {
    display: grid;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--blue));
    border-radius: 13px;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.monitoring-empty-steps strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
}

.monitoring-empty-steps p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.monitoring-empty-services {
    padding: 42px 25px;
    text-align: center;
}

.monitoring-empty-services > span {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 15px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 50%;
    place-items: center;
    font-size: 29px;
}

.monitoring-empty-services h2 {
    margin: 0;
    color: var(--heading);
    font-size: 25px;
}

.monitoring-empty-services p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.header-search-panel.is-submitting .header-search-field button {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.header-search-panel.is-submitting .header-search-field button::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    content: "";
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: monitoring-search-spin 0.75s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes monitoring-search-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 1080px) {
    .monitoring-hero-layout {
        gap: 38px;
    }

    .monitoring-summary-layout {
        grid-template-columns: minmax(0, 1fr) minmax(290px, 340px);
    }

    .monitoring-detail-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .monitoring-hero-layout,
    .monitoring-summary-layout,
    .monitoring-workspace,
    .monitoring-empty-state {
        grid-template-columns: 1fr;
    }

    .monitoring-hero-copy {
        width: min(760px, 100%);
        margin: 0 auto;
        text-align: center;
    }

    .monitoring-hero-copy > p {
        margin-right: auto;
        margin-left: auto;
    }

    .monitoring-hero-guide {
        width: min(680px, 100%);
        margin: 0 auto;
    }

    .monitoring-service-sidebar {
        position: static;
    }

    .monitoring-service-list {
        display: flex;
        max-height: none;
        padding-bottom: 5px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .monitoring-service-button {
        flex: 0 0 300px;
        scroll-snap-align: start;
    }

    .monitoring-empty-state {
        gap: 30px;
    }
}

@media (max-width: 760px) {
    .monitoring-overview-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .monitoring-order-heading,
    .monitoring-order-meta {
        justify-content: center;
    }

    .monitoring-summary-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-detail-header {
        display: grid;
    }

    .monitoring-detail-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .monitoring-hero {
        padding:
            calc(var(--header-height) + 42px)
            0
            52px;
    }

    .monitoring-hero-copy h1 {
        font-size: 39px;
    }

    .monitoring-hero-copy > p {
        font-size: 14px;
    }

    .monitoring-open-search {
        width: 100%;
    }

    .monitoring-hero-guide,
    .monitoring-overview-card,
    .monitoring-summary-card,
    .monitoring-notary-card,
    .monitoring-service-sidebar,
    .monitoring-service-details,
    .monitoring-empty-state {
        padding: 20px;
        border-radius: 18px;
    }

    .monitoring-content-section {
        padding: 42px 0 65px;
    }

    .monitoring-alert {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .monitoring-alert > span {
        width: 40px;
        height: 40px;
    }

    .monitoring-alert button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .monitoring-order-heading h2 {
        font-size: 29px;
    }

    .monitoring-order-meta {
        display: grid;
        align-items: stretch;
    }

    .monitoring-order-meta > span {
        justify-content: center;
    }

    .monitoring-detail-facts {
        grid-template-columns: 1fr;
    }

    .monitoring-service-button {
        flex-basis: 278px;
    }

    .monitoring-timeline-title {
        display: grid;
    }

    .monitoring-timeline-title .monitoring-status {
        justify-self: start;
    }

    .monitoring-search-again {
        display: grid;
    }

    .monitoring-search-again .btn {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .monitoring-hero-copy h1 {
        font-size: 35px;
    }

    .monitoring-guide-top {
        grid-template-columns: 43px minmax(0, 1fr);
    }

    .monitoring-guide-icon {
        width: 43px;
        height: 43px;
    }

    .monitoring-progress-ring {
        width: 126px;
        height: 126px;
    }

    .monitoring-progress-ring::before {
        width: 94px;
        height: 94px;
    }

    .monitoring-service-button {
        flex-basis: 255px;
    }

    .monitoring-timeline-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
    }

    .monitoring-timeline-marker > span {
        width: 38px;
        height: 38px;
    }

    .monitoring-timeline-item:not(:last-child)::before {
        top: 38px;
        left: 18px;
    }
}

/* =========================================================
   MONITORING - STANDARD SCALE AND COMPLETED TIMELINE FIX
   ========================================================= */

body.monitoring-body .monitoring-hero {
    padding:
        calc(var(--header-height) + 46px)
        0
        50px;
}

body.monitoring-body .monitoring-hero-layout {
    grid-template-columns: 1fr;
    gap: 0;
}

body.monitoring-body .monitoring-hero-copy {
    width: min(760px, 100%);
}

body.monitoring-body .monitoring-hero-copy h1 {
    width: min(700px, 100%);
    font-size: clamp(38px, 4.2vw, 52px);
    line-height: 1.08;
}

body.monitoring-body .monitoring-hero-copy > p {
    width: min(650px, 100%);
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.72;
}

body.monitoring-body .monitoring-content-section {
    padding: 42px 0 72px;
}

body.monitoring-body .monitoring-status,
body.monitoring-body .monitoring-commercial {
    min-height: 27px;
    padding: 0 9px;
    font-size: 10.5px;
}

body.monitoring-body .monitoring-section-heading h2 {
    font-size: 18px;
}

body.monitoring-body .monitoring-section-heading small,
body.monitoring-body .monitoring-detail-kicker {
    font-size: 10.5px;
}

body.monitoring-body .monitoring-service-sidebar,
body.monitoring-body .monitoring-service-details {
    padding: 22px;
}

body.monitoring-body .monitoring-service-helper {
    font-size: 12px;
}

body.monitoring-body .monitoring-service-button {
    grid-template-columns: 34px minmax(0, 1fr) 15px;
    padding: 10px;
}

body.monitoring-body .monitoring-service-number {
    width: 34px;
    height: 34px;
    font-size: 11px;
}

body.monitoring-body .monitoring-service-copy > small {
    font-size: 10px;
}

body.monitoring-body .monitoring-service-copy > strong {
    font-size: 13px;
    line-height: 1.4;
}

body.monitoring-body .monitoring-service-badges .monitoring-status,
body.monitoring-body .monitoring-service-badges .monitoring-commercial {
    min-height: 22px;
    padding: 0 7px;
    font-size: 9.5px;
}

body.monitoring-body .monitoring-detail-header h2 {
    font-size: clamp(24px, 2.5vw, 32px);
}

body.monitoring-body .monitoring-detail-header p {
    font-size: 12.5px;
}

body.monitoring-body .monitoring-detail-facts small {
    font-size: 10px;
}

body.monitoring-body .monitoring-detail-facts strong {
    font-size: 12px;
}

body.monitoring-body .monitoring-timeline-heading h3 {
    font-size: 18px;
}

body.monitoring-body .monitoring-timeline-item {
    grid-template-columns: 38px minmax(0, 1fr);
    padding-bottom: 10px;
    gap: 10px;
}

body.monitoring-body .monitoring-timeline-item:not(:last-child)::before {
    top: 38px;
    left: 18px;
}

body.monitoring-body .monitoring-timeline-marker > span {
    width: 38px;
    height: 38px;
    font-size: 14px;
}

body.monitoring-body .monitoring-timeline-card {
    padding: 12px 14px;
}

body.monitoring-body .monitoring-timeline-title small {
    font-size: 10px;
}

body.monitoring-body .monitoring-timeline-title strong {
    font-size: 13.5px;
}

body.monitoring-body .monitoring-timeline-card > p {
    margin-top: 7px;
    font-size: 10.5px;
}

body.monitoring-body
    .monitoring-timeline-completed:not(:last-child)::before {
    background: #b9e8d0;
}

@media (max-width: 640px) {
    body.monitoring-body .monitoring-hero {
        padding:
            calc(var(--header-height) + 32px)
            0
            40px;
    }

    body.monitoring-body .monitoring-hero-copy h1 {
        font-size: 36px;
    }

    body.monitoring-body .monitoring-hero-copy > p {
        font-size: 15px;
    }
}

/* =========================================================
   MONITORING FINAL UI FIX V3
   ========================================================= */

body.monitoring-body .monitoring-order-heading {
    justify-content: flex-start;
}

/* =========================================================
   LOGIN PAGE - HOMEPAGE STYLE
   ========================================================= */

body.login-body {
    min-height: 100vh;
    color: var(--text);
    background: var(--surface);
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.login-body,
body.login-body * {
    box-sizing: border-box;
}

body.login-body a {
    text-decoration: none;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns:
        minmax(430px, 44%)
        minmax(0, 56%);
    background: var(--surface);
}

.login-form-panel {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(8, 118, 185, 0.06),
            transparent 31%
        ),
        #ffffff;
}

.login-form-inner {
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding: 44px clamp(38px, 6vw, 92px);
    align-items: center;
    justify-content: center;
}

.login-form-content {
    width: min(460px, 100%);
}

.login-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
}

.login-brand img {
    width: 206px;
    max-height: 76px;
    object-fit: contain;
    object-position: left center;
}

.login-brand-desktop {
    margin-bottom: 58px;
}

.login-mobile-header {
    display: none;
}

.login-heading {
    margin-bottom: 28px;
}

.login-heading h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(32px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.login-heading p {
    margin: 15px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.login-alert {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 13px;
}

.login-alert > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
}

.login-alert p {
    margin: 0;
    line-height: 1.5;
}

.login-alert button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    color: inherit;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
}

.login-alert-success {
    color: #176b4d;
    background: #f0fbf5;
    border-color: #c7ead8;
}

.login-alert-success > span {
    background: #dff5e9;
}

.login-alert-error {
    color: #a62b22;
    background: #fff4f3;
    border-color: #f1cbc7;
}

.login-alert-error > span {
    background: #fde5e2;
}

.login-form {
    display: grid;
    gap: 20px;
}

.login-field-group > label {
    display: block;
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
}

.login-field {
    display: grid;
    min-height: 54px;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 0 15px;
    background: #fbfdff;
    border: 1px solid #d6e0eb;
    border-radius: 13px;
    box-shadow:
        0 8px 24px rgba(4, 43, 85, 0.035);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.login-field:focus-within {
    background: #ffffff;
    border-color: rgba(8, 118, 185, 0.66);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.09),
        0 12px 30px rgba(4, 43, 85, 0.06);
}

.login-field.is-invalid {
    border-color: #d63939;
    box-shadow:
        0 0 0 4px rgba(214, 57, 57, 0.08);
}

.login-field > i {
    color: #8090a1;
    font-size: 17px;
}

.login-field input {
    width: 100%;
    height: 52px;
    padding: 0;
    color: var(--heading);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 14px;
    font-weight: 500;
}

.login-field input::placeholder {
    color: #98a5b4;
    opacity: 1;
}

.login-password-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: #738398;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.login-password-toggle:hover {
    color: var(--primary);
    background: var(--blue-soft);
}

.login-field-error {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin: 7px 0 0;
    color: #c2342b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.login-form-options {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-top: -2px;
}

.login-remember {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.login-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-remember > span {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: transparent;
    background: #ffffff;
    border: 1px solid #cfd9e5;
    border-radius: 6px;
    font-size: 14px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.login-remember input:checked + span {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.login-remember input:focus-visible + span {
    box-shadow: 0 0 0 4px rgba(8, 118, 185, 0.12);
}

.login-forgot-button {
    padding: 0;
    color: var(--primary);
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.login-forgot-button:hover {
    color: var(--orange-dark);
}

.login-submit-button {
    display: inline-flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 0 22px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff9b39
        );
    border: 0;
    border-radius: 13px;
    box-shadow:
        0 16px 32px rgba(245, 130, 32, 0.25);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.login-submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 20px 36px rgba(245, 130, 32, 0.31);
}

.login-submit-button:focus-visible {
    outline: 4px solid rgba(245, 130, 32, 0.18);
    outline-offset: 2px;
}

.login-submit-button:disabled {
    cursor: not-allowed;
    filter: saturate(0.7);
    opacity: 0.78;
}

.login-submit-button .login-text,
.login-submit-button .login-loading {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
}

.login-submit-button .login-loading.d-none,
.login-submit-button .login-text.d-none {
    display: none !important;
}

.login-register {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    color: var(--muted);
    font-size: 13px;
}

.login-register a {
    color: var(--primary);
    font-weight: 800;
}

.login-register a:hover {
    color: var(--orange-dark);
}

.login-legal-note {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    margin-top: 27px;
    padding-top: 20px;
    color: #778597;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    line-height: 1.6;
}

.login-legal-note > i {
    color: var(--primary);
    font-size: 16px;
}

.login-legal-note p {
    margin: 0;
}

.login-legal-note a {
    color: var(--primary);
    font-weight: 700;
}

.login-visual-panel {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100vh;
    padding:
        42px
        clamp(42px, 5.5vw, 88px)
        44px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 70% 28%,
            rgba(21, 150, 210, 0.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 25% 78%,
            rgba(245, 130, 32, 0.12),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep) 76%
        );
}

.login-visual-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 25%,
            #000 80%,
            transparent
        );
    pointer-events: none;
}

.login-visual-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.login-visual-orb-one {
    top: -140px;
    left: -100px;
    width: 430px;
    height: 430px;
    background:
        rgba(21, 150, 210, 0.14);
}

.login-visual-orb-two {
    right: -170px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    background:
        rgba(245, 130, 32, 0.08);
}

.login-home-link {
    position: absolute;
    z-index: 5;
    top: 42px;
    right: clamp(42px, 5.5vw, 88px);
    display: inline-flex;
    gap: 9px;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 700;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.login-home-link:hover {
    color: #ffffff;
    transform: translateX(-3px);
}

.login-home-link-mobile {
    display: none;
}

.login-visual-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(820px, 100%);
    margin: auto;
    padding-top: 44px;
    flex-direction: column;
    align-items: center;
}

.login-visual-heading {
    width: min(630px, 100%);
    margin: 0 auto 4px;
    text-align: center;
}

.login-visual-heading > span {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--gold-light);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.login-visual-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.login-visual-heading p {
    width: min(560px, 100%);
    margin: 13px auto 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 13.5px;
    line-height: 1.7;
}

.login-illustration-wrap {
    position: relative;
    width: min(690px, 100%);
    margin: -8px auto -2px;
    filter:
        drop-shadow(
            0 28px 55px rgba(0, 15, 40, 0.3)
        );
}

.login-visual-svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

.login-benefit-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: -12px;
    border-top:
        1px solid rgba(255, 255, 255, 0.13);
}

.login-benefit-grid article {
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    padding: 22px 22px 0;
    border-right:
        1px solid rgba(255, 255, 255, 0.13);
}

.login-benefit-grid article:first-child {
    padding-left: 0;
}

.login-benefit-grid article:last-child {
    padding-right: 0;
    border-right: 0;
}

.login-benefit-grid article > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.08);
    border:
        1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    font-size: 17px;
}

.login-benefit-grid strong {
    display: block;
    color: #ffffff;
    font-size: 12.5px;
    line-height: 1.4;
}

.login-benefit-grid p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10.5px;
    line-height: 1.6;
}

/* Login animated SVG */

.login-visual-svg .grid {
    stroke: #ebd7a0;
    stroke-opacity: 0.10;
}

.login-visual-svg .node {
    fill: #ebd7a0;
    fill-opacity: 0.9;
}

.login-visual-svg .line {
    stroke: #ebd7a0;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-opacity: 0.28;
}

.login-visual-svg .strokeNavy {
    fill: none;
    stroke: #153560;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-visual-svg .strokeBlue {
    fill: none;
    stroke: #07579c;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
}

.login-visual-svg .paper {
    fill: url("#paperGrad");
    stroke: #ebd7a0;
    stroke-width: 2;
    stroke-opacity: 0.25;
}

.login-visual-svg .chip {
    fill: url("#bgBlue");
    stroke: #ebd7a0;
    stroke-width: 2;
    stroke-opacity: 0.22;
}

.login-visual-svg .sealRing {
    fill: none;
    stroke: #ea791a;
    stroke-width: 8;
    stroke-opacity: 0.7;
}

.login-visual-svg .sealFill {
    fill: #ea791a;
    fill-opacity: 0.12;
}

.login-visual-svg .spark {
    stroke: url("#goldGlow");
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.65;
}

.login-visual-svg .float {
    animation:
        loginFloat
        4s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

.login-visual-svg .float2 {
    animation:
        loginFloatSecondary
        5.2s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

.login-visual-svg .pulse {
    animation:
        loginPulse
        2.2s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

.login-visual-svg .spin {
    animation:
        loginSpin
        9s
        linear
        infinite;
    transform-origin: 720px 360px;
}

.login-visual-svg .blink {
    animation:
        loginBlink
        1.6s
        ease-in-out
        infinite;
}

.login-visual-svg .write {
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation:
        loginWrite
        3.2s
        ease-in-out
        infinite;
}

.login-visual-svg .scan {
    stroke-dasharray: 14 16;
    animation:
        loginScan
        2.8s
        linear
        infinite;
}

@keyframes loginFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}

@keyframes loginFloatSecondary {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes loginPulse {
    0%,
    100% {
        opacity: 0.7;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loginBlink {
    0%,
    100% {
        opacity: 0.18;
    }

    50% {
        opacity: 0.9;
    }
}

@keyframes loginWrite {
    0% {
        opacity: 0.35;
        stroke-dashoffset: 520;
    }

    35% {
        opacity: 1;
    }

    60% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 0.35;
        stroke-dashoffset: 0;
    }
}

@keyframes loginScan {
    to {
        stroke-dashoffset: 120;
    }
}

/* Forgot-password modal */

body.login-body .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    box-shadow:
        0 28px 80px rgba(4, 43, 85, 0.22);
}

body.login-body .modal-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

body.login-body .modal-title {
    color: var(--heading);
    font-size: 18px;
    font-weight: 800;
}

body.login-body .modal-body {
    padding: 22px;
}

body.login-body .modal-body .form-label {
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
}

body.login-body .modal-body .form-control {
    min-height: 50px;
    border-color: #d6e0eb;
    border-radius: 11px;
}

body.login-body .modal-body .form-control:focus {
    border-color: rgba(8, 118, 185, 0.66);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.09);
}

body.login-body .modal-body .btn-primary {
    min-height: 50px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff9b39
        );
    border-color: transparent;
    border-radius: 11px;
    box-shadow:
        0 14px 28px rgba(245, 130, 32, 0.22);
}

@media (max-width: 1199px) {
    .login-shell {
        grid-template-columns:
            minmax(410px, 48%)
            minmax(0, 52%);
    }

    .login-form-inner {
        padding-right: 44px;
        padding-left: 44px;
    }

    .login-visual-panel {
        padding-right: 40px;
        padding-left: 40px;
    }

    .login-benefit-grid article {
        grid-template-columns: 34px minmax(0, 1fr);
        padding-right: 12px;
        padding-left: 12px;
    }

    .login-benefit-grid article > span {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 991px) {
    .login-shell {
        display: block;
        min-height: 100vh;
    }

    .login-visual-panel {
        display: none;
    }

    .login-form-panel {
        min-height: 100vh;
        background:
            radial-gradient(
                circle at 90% 2%,
                rgba(245, 130, 32, 0.09),
                transparent 28%
            ),
            radial-gradient(
                circle at 8% 20%,
                rgba(8, 118, 185, 0.09),
                transparent 30%
            ),
            #ffffff;
    }

    .login-form-inner {
        display: block;
        min-height: 100vh;
        padding:
            26px
            clamp(24px, 7vw, 70px)
            42px;
    }

    .login-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 48px;
    }

    .login-mobile-header .login-brand img {
        width: 170px;
    }

    .login-brand-desktop {
        display: none;
    }

    .login-home-link-mobile {
        position: static;
        display: inline-flex;
        color: var(--primary);
        font-size: 12px;
    }

    .login-home-link-mobile:hover {
        color: var(--orange-dark);
    }

    .login-form-content {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .login-form-inner {
        padding:
            22px
            20px
            34px;
    }

    .login-mobile-header {
        margin-bottom: 38px;
    }

    .login-mobile-header .login-brand img {
        width: 150px;
    }

    .login-heading h1 {
        font-size: 32px;
    }

    .login-heading p {
        font-size: 14px;
    }

    .login-form-options {
        gap: 12px;
    }

    .login-register {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-visual-svg .float,
    .login-visual-svg .float2,
    .login-visual-svg .pulse,
    .login-visual-svg .spin,
    .login-visual-svg .blink,
    .login-visual-svg .write,
    .login-visual-svg .scan {
        animation: none !important;
    }

    .login-visual-svg .write {
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
    }
}

/* =========================================================
   LOGIN FINAL LAYOUT, WRAP, AND ALIGNMENT
   ========================================================= */

/*
 * Area form dibuat sedikit lebih lebar dan tetap berada di
 * tengah kolom kiri.
 */
body.login-body .login-form-inner {
    padding:
        clamp(26px, 3.6vh, 40px)
        clamp(38px, 5vw, 74px);
}

body.login-body .login-form-content {
    width: min(540px, 100%);
    margin-right: auto;
    margin-left: auto;
}

/*
 * Logo dan judul dibuat sebagai satu kesatuan visual.
 */
body.login-body .login-brand-desktop {
    display: flex;
    width: 100%;
    margin:
        0
        auto
        clamp(18px, 2.6vh, 25px);
    align-items: center;
    justify-content: center;
}

body.login-body .login-brand-desktop img {
    width: min(280px, 78%);
    max-height: 100px;
    object-fit: contain;
    object-position: center;
}

body.login-body .login-heading {
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 16px;
    text-align: center;
}

body.login-body .login-heading::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 52px;
    height: 3px;
    margin: auto;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue),
            var(--orange)
        );
    border-radius: 99px;
}

body.login-body .login-heading h1 {
    margin: 0;
    text-align: center;
    text-wrap: balance;
}

/*
 * Form dirapatkan secukupnya agar komposisi tidak terlalu
 * panjang dan tidak menyisakan ruang kosong berlebihan.
 */
body.login-body .login-form {
    gap: 17px;
}

body.login-body .login-register {
    margin-top: 20px;
}

/*
 * Legal note memakai susunan ikon dan teks rata kiri.
 * Paragraf dibuat justify dengan baris terakhir tetap rata kiri.
 */
body.login-body .login-legal-note {
    display: grid;
    width: 100%;
    margin-top: 22px;
    padding: 18px 0 0;
    color: #778597;
    border-top: 1px solid var(--border);
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

body.login-body .login-legal-note > i {
    margin-top: 3px;
    color: var(--primary);
    font-size: 16px;
}

body.login-body .login-legal-note p {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #778597;
    font-size: 11.5px;
    line-height: 1.72;
    text-align: justify;
    text-align-last: left;
    word-break: normal;
    overflow-wrap: normal;
}

body.login-body .login-legal-note a {
    display: inline;
    color: var(--primary);
    font-weight: 700;
    white-space: nowrap;
}

/*
 * Tombol kembali ke beranda.
 */
body.login-body .login-home-button {
    display: inline-flex;
    min-height: 44px;
    padding: 0 17px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow:
        0 10px 24px rgba(0, 20, 52, 0.13);
    align-items: center;
    justify-content: center;
    gap: 9px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.login-body .login-home-button:hover {
    color: var(--primary);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow:
        0 14px 30px rgba(0, 20, 52, 0.2);
    transform: translateY(-2px);
}

body.login-body .login-home-button i {
    font-size: 14px;
}

/*
 * Komposisi panel kanan tetap rapat tanpa mengubah ilustrasi
 * maupun animasinya.
 */
body.login-body .login-visual-content {
    padding-top: 16px;
}

body.login-body .login-visual-heading {
    margin-bottom: -8px;
}

body.login-body .login-visual-heading h2 {
    text-wrap: balance;
}

body.login-body .login-illustration-wrap {
    margin-top: -20px;
    margin-bottom: -15px;
}

/*
 * Tiga benefit dibuat memiliki ruang teks yang lebih luas.
 * Judul dipertahankan satu baris pada desktop dan deskripsi
 * menggunakan wrapping yang lebih alami.
 */
body.login-body .login-benefit-grid {
    margin-top: -16px;
}

body.login-body .login-benefit-grid article {
    min-width: 0;
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding:
        21px
        14px
        0;
    align-items: flex-start;
}

body.login-body .login-benefit-grid article:first-child {
    padding-left: 0;
}

body.login-body .login-benefit-grid article:last-child {
    padding-right: 0;
}

body.login-body .login-benefit-grid article > span {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}

body.login-body .login-benefit-grid article > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

body.login-body .login-benefit-grid strong {
    width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    white-space: nowrap;
}

body.login-body .login-benefit-grid p {
    width: 100%;
    max-width: 175px;
    margin: 5px 0 0;
    font-size: 10.5px;
    line-height: 1.6;
    text-wrap: pretty;
    word-break: normal;
    overflow-wrap: normal;
}

/*
 * Desktop dengan tinggi layar terbatas.
 */
@media (min-width: 992px) and (max-height: 820px) {
    body.login-body .login-form-inner {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    body.login-body .login-brand-desktop {
        margin-bottom: 17px;
    }

    body.login-body .login-brand-desktop img {
        width: min(250px, 74%);
        max-height: 88px;
    }

    body.login-body .login-heading {
        margin-bottom: 20px;
        padding-bottom: 13px;
    }

    body.login-body .login-form {
        gap: 15px;
    }

    body.login-body .login-register {
        margin-top: 17px;
    }

    body.login-body .login-legal-note {
        margin-top: 17px;
        padding-top: 15px;
    }

    body.login-body .login-visual-content {
        padding-top: 8px;
    }

    body.login-body .login-illustration-wrap {
        width: min(625px, 100%);
        margin-top: -25px;
        margin-bottom: -22px;
    }

    body.login-body .login-benefit-grid {
        margin-top: -19px;
    }
}

/*
 * Desktop kecil dan tablet landscape.
 */
@media (min-width: 992px) and (max-width: 1199px) {
    body.login-body .login-form-content {
        width: min(510px, 100%);
    }

    body.login-body .login-benefit-grid article {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding-right: 10px;
        padding-left: 10px;
    }

    body.login-body .login-benefit-grid article:first-child {
        padding-left: 0;
    }

    body.login-body .login-benefit-grid article:last-child {
        padding-right: 0;
    }

    body.login-body .login-benefit-grid article > span {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    body.login-body .login-benefit-grid strong {
        font-size: 11px;
    }

    body.login-body .login-benefit-grid p {
        max-width: 150px;
        font-size: 9.5px;
    }
}

/*
 * Tablet dan mobile: panel kanan disembunyikan oleh style
 * utama. Logo dan tombol kembali tetap proporsional.
 */
@media (max-width: 991px) {
    body.login-body .login-form-inner {
        padding:
            24px
            clamp(24px, 7vw, 70px)
            38px;
    }

    body.login-body .login-form-content {
        width: min(520px, 100%);
    }

    body.login-body .login-mobile-header {
        gap: 18px;
    }

    body.login-body .login-mobile-header .login-brand {
        display: flex;
        min-width: 0;
        flex: 1;
        justify-content: flex-start;
    }

    body.login-body .login-mobile-header .login-brand img {
        width: min(190px, 100%);
        max-height: 70px;
        object-position: left center;
    }

    body.login-body .login-heading {
        margin-bottom: 24px;
        padding-bottom: 14px;
    }

    body.login-body .login-heading h1 {
        text-align: left;
    }

    body.login-body .login-heading::after {
        right: auto;
        left: 0;
        margin: 0;
    }

    body.login-body .login-home-link-mobile {
        position: static;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 14px;
        color: var(--primary);
        background: #ffffff;
        border: 1px solid rgba(7, 63, 120, 0.15);
        box-shadow:
            0 8px 22px rgba(4, 43, 85, 0.07);
    }

    body.login-body .login-home-link-mobile:hover {
        color: #ffffff;
        background: var(--primary);
        border-color: var(--primary);
    }

    body.login-body .login-legal-note p {
        max-width: 470px;
        text-wrap: pretty;
    }
}

@media (max-width: 575px) {
    body.login-body .login-form-inner {
        padding:
            20px
            20px
            32px;
    }

    body.login-body .login-mobile-header {
        margin-bottom: 32px;
    }

    body.login-body .login-mobile-header .login-brand img {
        width: min(165px, 100%);
    }

    body.login-body .login-heading {
        margin-bottom: 21px;
    }

    body.login-body .login-home-link-mobile {
        min-height: 40px;
        padding: 0 12px;
        font-size: 11px;
    }

    body.login-body .login-legal-note {
        padding-right: 0;
        padding-left: 0;
        gap: 8px;
    }

    body.login-body .login-legal-note p {
        flex-basis: 100%;
        max-width: 100%;
        font-size: 11px;
        line-height: 1.68;
        text-align: left;
        text-wrap: pretty;
    }
}

@media (max-width: 390px) {
    body.login-body .login-mobile-header {
        align-items: center;
    }

    body.login-body .login-mobile-header .login-brand img {
        width: min(145px, 100%);
    }

    body.login-body .login-home-link-mobile {
        width: 40px;
        min-width: 40px;
        padding: 0;
        font-size: 0;
    }

    body.login-body .login-home-link-mobile i {
        font-size: 15px;
    }
}

/* =========================================================
   REGISTER PAGE - HOMEPAGE STYLE
   ========================================================= */

body.register-body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: #ffffff;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.register-body,
body.register-body * {
    box-sizing: border-box;
}

body.register-body a {
    text-decoration: none;
}

.register-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns:
        minmax(650px, 1.12fr)
        minmax(460px, 0.88fr);
    align-items: start;
    background: #ffffff;
}

.register-form-panel {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(8, 118, 185, 0.07),
            transparent 25%
        ),
        radial-gradient(
            circle at 94% 34%,
            rgba(245, 130, 32, 0.055),
            transparent 22%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}

.register-form-inner {
    width: 100%;
    padding:
        34px
        clamp(38px, 5vw, 78px)
        52px;
}

.register-content {
    width: min(760px, 100%);
    margin: 0 auto;
}

.register-brand {
    display: inline-flex;
    width: fit-content;
    align-items: center;
}

.register-brand img {
    display: block;
    width: 250px;
    max-height: 94px;
    object-fit: contain;
}

.register-brand-desktop {
    display: flex;
    width: 100%;
    margin: 0 auto 22px;
    justify-content: center;
}

.register-brand-desktop img {
    object-position: center;
}

.register-mobile-header {
    display: none;
}

.register-heading {
    position: relative;
    margin-bottom: 28px;
    padding-bottom: 18px;
    text-align: center;
}

.register-heading::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 54px;
    height: 3px;
    margin: auto;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue),
            var(--orange)
        );
    border-radius: 99px;
}

.register-heading h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.register-heading p {
    width: min(590px, 100%);
    margin: 12px auto 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
    text-wrap: balance;
}

.register-alert {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-size: 12px;
}

.register-alert > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    font-size: 16px;
}

.register-alert p,
.register-alert ul {
    margin: 0;
    line-height: 1.55;
}

.register-alert button {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    color: inherit;
    background: transparent;
    border-radius: 8px;
    place-items: center;
    cursor: pointer;
}

.register-alert-success {
    color: #176b4d;
    background: #f0fbf5;
    border-color: #c7ead8;
}

.register-alert-success > span {
    background: #dff5e9;
}

.register-alert-error {
    color: #a62b22;
    background: #fff4f3;
    border-color: #f1cbc7;
}

.register-alert-error > span {
    background: #fde5e2;
}

.register-alert-list {
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: flex-start;
}

.register-alert-list strong {
    display: block;
    margin-bottom: 5px;
}

.register-alert-list ul {
    padding-left: 18px;
}

.register-form {
    display: grid;
    gap: 20px;
}

.register-section-card,
.register-confirmation-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(7, 63, 120, 0.1);
    border-radius: 20px;
    box-shadow:
        0 16px 42px rgba(4, 43, 85, 0.065);
}

.register-section-card::before,
.register-confirmation-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--blue),
            var(--orange)
        );
}

.register-section-card {
    padding: 25px;
}

.register-section-heading {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 23px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.register-section-heading > span {
    display: grid;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--blue)
        );
    border-radius: 13px;
    box-shadow:
        0 11px 24px rgba(7, 63, 120, 0.18);
    place-items: center;
    font-size: 18px;
}

.register-section-heading small,
.register-section-heading h2,
.register-section-heading p {
    display: block;
}

.register-section-heading small {
    margin-bottom: 2px;
    color: var(--orange-dark);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.register-section-heading h2 {
    margin: 0;
    color: var(--heading);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.register-section-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.55;
}

.register-field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 16px;
}

.register-field-span-5 {
    grid-column: span 5;
}

.register-field-span-6 {
    grid-column: span 6;
}

.register-field-span-7 {
    grid-column: span 7;
}

.register-field-span-12 {
    grid-column: span 12;
}

.register-field-group {
    min-width: 0;
}

.register-field-group > label {
    display: block;
    margin-bottom: 7px;
    color: var(--heading);
    font-size: 12px;
    font-weight: 700;
}

.register-control {
    position: relative;
    display: grid;
    min-height: 52px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 0 14px;
    background: #fbfdff;
    border: 1px solid #d6e0eb;
    border-radius: 12px;
    box-shadow:
        0 8px 22px rgba(4, 43, 85, 0.03);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.register-control:focus-within {
    background: #ffffff;
    border-color: rgba(8, 118, 185, 0.62);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.09),
        0 11px 26px rgba(4, 43, 85, 0.05);
}

.register-control > i {
    color: #8291a3;
    font-size: 16px;
    text-align: center;
}

.register-control .form-control,
.register-control .form-select {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0;
    color: var(--heading);
    background: transparent;
    border: 0 !important;
    border-radius: 0;
    outline: 0;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 500;
}

.register-control .form-control::placeholder {
    color: #98a5b4;
    opacity: 1;
}

.register-select-control .form-select {
    padding-right: 32px;
    cursor: pointer;
}

.register-textarea-control {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: flex-start;
    padding-top: 14px;
    padding-bottom: 12px;
}

.register-textarea-control > i {
    margin-top: 2px;
}

.register-textarea-control .form-control {
    min-height: 92px;
    height: auto;
    padding: 0;
    resize: vertical;
    line-height: 1.6;
}

.register-email-control {
    grid-template-columns: 22px minmax(0, 1fr) 30px;
}

.register-email-control .email-info-icon {
    position: static;
    display: grid;
    width: 28px;
    height: 28px;
    color: #718196;
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.11);
    border-radius: 50%;
    place-items: center;
    cursor: help;
    transform: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.register-email-control .email-info-icon.is-loading {
    color: var(--blue);
    background: var(--blue-soft);
    border-color: rgba(8, 118, 185, 0.22);
}

.register-email-control .email-info-icon.is-success {
    color: #17714e;
    background: #eaf8f1;
    border-color: #bfe4d2;
}

.register-email-control .email-info-icon.is-error {
    color: #b42318;
    background: #fff1ef;
    border-color: #efc7c2;
}

.register-control:has(.is-invalid),
.register-control:has(#email.is-invalid) {
    border-color: rgba(214, 57, 57, 0.62);
    box-shadow:
        0 0 0 4px rgba(214, 57, 57, 0.07);
}

.register-control:has(#email.is-valid) {
    border-color: rgba(47, 179, 68, 0.6);
    box-shadow:
        0 0 0 4px rgba(47, 179, 68, 0.07);
}

body.register-body #email.is-invalid,
body.register-body #email.is-valid {
    background-image: none !important;
}

.register-field-error {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 7px 0 0;
    color: #c2342b;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.5;
}

.register-confirmation-card {
    padding: 22px 24px;
}

.register-confirmation-copy {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.register-confirmation-copy > span {
    display: grid;
    width: 42px;
    height: 42px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 12px;
    place-items: center;
    font-size: 17px;
}

.register-confirmation-copy strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
}

.register-confirmation-copy p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.55;
}

.register-terms {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    color: #5e6b7e;
    cursor: pointer;
    font-size: 11.5px;
    line-height: 1.65;
}

.register-terms input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.register-terms-check {
    display: grid;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    color: transparent;
    background: #ffffff;
    border: 1px solid #cbd6e2;
    border-radius: 6px;
    place-items: center;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.register-terms input:checked + .register-terms-check {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

.register-terms input:focus-visible + .register-terms-check {
    box-shadow: 0 0 0 4px rgba(8, 118, 185, 0.1);
}

.register-terms a {
    color: var(--primary);
    font-weight: 800;
    white-space: nowrap;
}

.register-submit-button {
    display: inline-flex;
    width: 100%;
    min-height: 55px;
    padding: 0 24px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #ffad38 0%,
            var(--orange) 55%,
            var(--orange-dark) 100%
        );
    border: 0;
    border-radius: 13px;
    box-shadow:
        0 16px 32px rgba(245, 130, 32, 0.25);
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.register-submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 20px 38px rgba(245, 130, 32, 0.32);
}

.register-submit-button:disabled {
    cursor: not-allowed;
    filter: saturate(0.7);
    opacity: 0.78;
}

.register-login-link {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    color: var(--muted);
    font-size: 12px;
}

.register-login-link a {
    color: var(--primary);
    font-weight: 800;
}

.register-home-button {
    position: absolute;
    z-index: 5;
    top: 34px;
    right: 38px;
    display: inline-flex;
    min-height: 44px;
    padding: 0 17px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow:
        0 10px 24px rgba(0, 20, 52, 0.13);
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.register-home-button:hover {
    color: var(--primary);
    background: #ffffff;
    border-color: #ffffff;
    box-shadow:
        0 14px 30px rgba(0, 20, 52, 0.2);
    transform: translateY(-2px);
}

.register-home-button-mobile {
    display: none;
}

.register-visual-panel {
    position: sticky;
    top: 0;
    min-width: 0;
    min-height: 100vh;
    height: 100vh;
    padding:
        34px
        clamp(30px, 3.5vw, 54px)
        28px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 20% 5%,
            rgba(21, 150, 210, 0.25),
            transparent 29%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(245, 130, 32, 0.12),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep) 78%
        );
}

.register-visual-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 84%,
            transparent
        );
    pointer-events: none;
}

.register-visual-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.register-visual-orb-one {
    top: -170px;
    left: -130px;
    width: 450px;
    height: 450px;
    background: rgba(21, 150, 210, 0.12);
}

.register-visual-orb-two {
    right: -180px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    background: rgba(245, 130, 32, 0.07);
}

.register-visual-sticky {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 58px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.register-visual-heading {
    width: min(570px, 100%);
    margin: 0 auto -18px;
    text-align: center;
}

.register-visual-heading > span {
    display: block;
    margin-bottom: 8px;
    color: var(--gold-light);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.register-visual-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.register-visual-heading p {
    width: min(500px, 100%);
    margin: 11px auto 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 11.5px;
    line-height: 1.65;
    text-wrap: balance;
}

.register-illustration-wrap {
    position: relative;
    width: min(620px, 100%);
    max-height: calc(100vh - 245px);
    margin: -7px auto -12px;
    filter:
        drop-shadow(
            0 24px 48px rgba(0, 15, 40, 0.24)
        );
}

.register-visual-svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 245px);
    object-fit: contain;
}

.register-visual-note {
    display: grid;
    width: min(550px, 100%);
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: -7px auto 0;
    padding: 11px 13px;
    color: rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.register-visual-note > span {
    display: grid;
    width: 34px;
    height: 34px;
    color: var(--gold-light);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    place-items: center;
}

.register-visual-note p {
    margin: 0;
    font-size: 9.5px;
    line-height: 1.55;
}

/* Registration SVG */

.register-visual-svg .register-svg-ink {
    fill: #0f1b2d;
}

.register-visual-svg .register-svg-muted {
    fill: rgba(15, 27, 45, 0.65);
}

.register-visual-svg .register-svg-grid {
    fill: none;
    stroke: rgba(7, 87, 156, 0.1);
    stroke-width: 2;
}

.register-visual-svg .register-svg-chip {
    fill: url("#gSoftBlue");
    stroke: rgba(7, 87, 156, 0.18);
    stroke-width: 2;
}

.register-visual-svg .register-svg-card {
    fill: url("#gWhiteCard");
    stroke: rgba(21, 53, 96, 0.14);
    stroke-width: 2;
}

.register-visual-svg .register-svg-accent-line {
    fill: none;
    stroke: #07579c;
    stroke-width: 6;
    stroke-linecap: round;
    opacity: 0.35;
}

.register-visual-svg .register-svg-gold-line {
    fill: none;
    stroke: url("#gGlowGold");
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-visual-svg .register-svg-dot {
    fill: #ea791a;
}

.register-visual-svg .register-svg-dot-soft {
    fill: #ea791a;
    opacity: 0.12;
}

.register-visual-svg .register-svg-gold-dot {
    fill: #ebd7a0;
    opacity: 0.9;
}

.register-visual-svg .register-svg-icon-circle {
    fill: rgba(235, 215, 160, 0.22);
    stroke: rgba(235, 215, 160, 0.55);
    stroke-width: 1.8;
}

.register-visual-svg .register-svg-icon-stroke {
    fill: none;
    stroke: rgba(21, 53, 96, 0.82);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-visual-svg .register-svg-icon-accent {
    fill: none;
    stroke: rgba(234, 121, 26, 0.95);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-visual-svg .register-svg-scribble {
    fill: none;
    stroke: rgba(21, 53, 96, 0.2);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-visual-svg .register-svg-scribble-two {
    fill: none;
    stroke: rgba(7, 87, 156, 0.18);
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-visual-svg .register-svg-seal-ring {
    fill: none;
    stroke: rgba(234, 121, 26, 0.65);
    stroke-width: 3;
}

.register-visual-svg .register-svg-float {
    animation:
        registerSvgFloat
        5.6s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

.register-visual-svg .register-svg-float-two {
    animation:
        registerSvgFloatTwo
        7s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

.register-visual-svg .register-svg-dash {
    stroke-dasharray: 12 14;
    animation:
        registerSvgDash
        2.6s
        linear
        infinite;
}

.register-visual-svg .register-svg-route-draw {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation:
        registerSvgDraw
        4.2s
        ease-in-out
        infinite;
}

.register-visual-svg .register-svg-progress-dot {
    animation:
        registerSvgProgress
        4.2s
        ease-in-out
        infinite;
    transform-origin: 0 0;
}

.register-visual-svg .register-svg-pulse {
    animation:
        registerSvgPulse
        2.3s
        ease-in-out
        infinite;
    transform-origin: 50% 50%;
}

@keyframes registerSvgFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes registerSvgFloatTwo {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes registerSvgDash {
    to {
        stroke-dashoffset: 120;
    }
}

@keyframes registerSvgDraw {
    0% {
        opacity: 0.3;
        stroke-dashoffset: 1200;
    }

    30% {
        opacity: 1;
    }

    65% {
        stroke-dashoffset: 0;
    }

    100% {
        opacity: 0.3;
        stroke-dashoffset: 0;
    }
}

@keyframes registerSvgProgress {
    0% {
        opacity: 0.55;
        transform: translate(0, 0);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0.55;
        transform: translate(0, 560px);
    }
}

@keyframes registerSvgPulse {
    0%,
    100% {
        opacity: 0.75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@media (max-width: 1260px) {
    .register-shell {
        grid-template-columns:
            minmax(610px, 1.14fr)
            minmax(400px, 0.86fr);
    }

    .register-form-inner {
        padding-right: 38px;
        padding-left: 38px;
    }

    .register-visual-panel {
        padding-right: 26px;
        padding-left: 26px;
    }

    .register-visual-heading h2 {
        font-size: 29px;
    }
}

@media (max-width: 1060px) {
    .register-shell {
        display: block;
    }

    .register-visual-panel {
        display: none;
    }

    .register-form-panel {
        min-height: 100vh;
    }

    .register-form-inner {
        padding:
            24px
            clamp(24px, 6vw, 68px)
            42px;
    }

    .register-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 34px;
    }

    .register-mobile-header .register-brand {
        display: flex;
        min-width: 0;
        flex: 1;
    }

    .register-mobile-header .register-brand img {
        width: min(190px, 100%);
        max-height: 70px;
        object-position: left center;
    }

    .register-brand-desktop {
        display: none;
    }

    .register-home-button-mobile {
        position: static;
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 42px;
        padding: 0 14px;
        color: var(--primary);
        background: #ffffff;
        border: 1px solid rgba(7, 63, 120, 0.15);
        box-shadow:
            0 8px 22px rgba(4, 43, 85, 0.07);
    }

    .register-home-button-mobile:hover {
        color: #ffffff;
        background: var(--primary);
        border-color: var(--primary);
    }

    .register-content {
        width: min(780px, 100%);
    }
}

@media (max-width: 680px) {
    .register-form-inner {
        padding:
            20px
            18px
            34px;
    }

    .register-mobile-header {
        margin-bottom: 29px;
    }

    .register-mobile-header .register-brand img {
        width: min(165px, 100%);
    }

    .register-heading {
        margin-bottom: 23px;
        padding-bottom: 15px;
        text-align: left;
    }

    .register-heading::after {
        right: auto;
        left: 0;
        margin: 0;
    }

    .register-heading h1 {
        font-size: 34px;
    }

    .register-heading p {
        margin-right: 0;
        margin-left: 0;
        font-size: 13px;
        text-wrap: pretty;
    }

    .register-section-card {
        padding: 20px 17px;
        border-radius: 17px;
    }

    .register-section-heading {
        grid-template-columns: 43px minmax(0, 1fr);
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .register-section-heading > span {
        width: 43px;
        height: 43px;
    }

    .register-field-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .register-field-span-5,
    .register-field-span-6,
    .register-field-span-7,
    .register-field-span-12 {
        grid-column: auto;
    }

    .register-confirmation-card {
        padding: 20px 17px;
    }

    .register-login-link {
        flex-wrap: wrap;
    }
}

@media (max-width: 390px) {
    .register-mobile-header .register-brand img {
        width: min(145px, 100%);
    }

    .register-home-button-mobile {
        width: 40px;
        min-width: 40px;
        padding: 0;
        font-size: 0;
    }

    .register-home-button-mobile i {
        font-size: 15px;
    }

    .register-heading h1 {
        font-size: 31px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .register-visual-svg .register-svg-float,
    .register-visual-svg .register-svg-float-two,
    .register-visual-svg .register-svg-dash,
    .register-visual-svg .register-svg-route-draw,
    .register-visual-svg .register-svg-progress-dot,
    .register-visual-svg .register-svg-pulse {
        animation: none !important;
    }

    .register-visual-svg .register-svg-route-draw {
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
    }
}

/* =========================================================
   RESET PASSWORD PAGE - HOMEPAGE STYLE
   ========================================================= */

body.password-reset-body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background: #ffffff;
    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body.password-reset-body,
body.password-reset-body * {
    box-sizing: border-box;
}

body.password-reset-body a {
    text-decoration: none;
}

.password-reset-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns:
        minmax(430px, 44%)
        minmax(0, 56%);
    background: #ffffff;
}

.password-reset-form-panel {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(8, 118, 185, 0.065),
            transparent 29%
        ),
        #ffffff;
}

.password-reset-form-inner {
    display: flex;
    width: 100%;
    min-height: 100vh;
    padding:
        38px
        clamp(38px, 5.2vw, 82px);
    align-items: center;
    justify-content: center;
}

.password-reset-form-content {
    width: min(480px, 100%);
}

.password-reset-mobile-header {
    display: none;
}

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

.password-reset-brand img {
    display: block;
    width: 100%;
    object-fit: contain;
}

.password-reset-brand-desktop {
    display: flex;
    width: 100%;
    margin: 0 auto 34px;
    justify-content: center;
}

.password-reset-brand-desktop img {
    width: min(255px, 72%);
    max-height: 88px;
    object-position: center;
}

.password-reset-heading {
    margin-bottom: 24px;
    text-align: left;
}

.password-reset-heading h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(32px, 3.4vw, 43px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.password-reset-heading p {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
}

.password-reset-alert {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 18px;
    padding: 13px 14px;
    color: #a62b22;
    background: #fff4f3;
    border: 1px solid #f1cbc7;
    border-radius: 12px;
    font-size: 12px;
}

.password-reset-alert > span {
    display: grid;
    width: 34px;
    height: 34px;
    color: #a62b22;
    background: #fde5e2;
    border-radius: 10px;
    place-items: center;
    font-size: 15px;
}

.password-reset-alert strong {
    display: block;
    margin-bottom: 4px;
}

.password-reset-alert p,
.password-reset-alert ul {
    margin: 0;
    line-height: 1.55;
}

.password-reset-alert ul {
    padding-left: 17px;
}

.password-reset-form {
    display: grid;
    gap: 18px;
}

.password-reset-account {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 12px 13px;
    background:
        linear-gradient(
            135deg,
            rgba(234, 246, 255, 0.88),
            rgba(255, 255, 255, 0.96)
        );
    border: 1px solid rgba(8, 118, 185, 0.14);
    border-radius: 12px;
}

.password-reset-account > span {
    display: grid;
    width: 36px;
    height: 36px;
    color: var(--primary);
    background: #ffffff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 10px;
    place-items: center;
    font-size: 15px;
}

.password-reset-account small,
.password-reset-account strong {
    display: block;
}

.password-reset-account small {
    color: #8590a2;
    font-size: 9px;
}

.password-reset-account strong {
    overflow: hidden;
    margin-top: 2px;
    color: var(--heading);
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.password-reset-account > i {
    color: #27a66f;
    font-size: 15px;
}

.password-reset-field-group > label {
    display: block;
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 12.5px;
    font-weight: 700;
}

.password-reset-field {
    display: grid;
    min-height: 54px;
    grid-template-columns: 21px minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    padding: 0 13px 0 15px;
    background: #fbfdff;
    border: 1px solid #d6e0eb;
    border-radius: 13px;
    box-shadow:
        0 8px 24px rgba(4, 43, 85, 0.03);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.password-reset-field:focus-within {
    background: #ffffff;
    border-color: rgba(8, 118, 185, 0.66);
    box-shadow:
        0 0 0 4px rgba(8, 118, 185, 0.09),
        0 12px 30px rgba(4, 43, 85, 0.055);
}

.password-reset-field.is-invalid {
    border-color: #d63939;
    box-shadow:
        0 0 0 4px rgba(214, 57, 57, 0.07);
}

.password-reset-field > i {
    color: #8493a5;
    font-size: 16px;
}

.password-reset-field input {
    width: 100%;
    height: 52px;
    min-width: 0;
    padding: 0;
    color: var(--heading);
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 13.5px;
    font-weight: 500;
}

.password-reset-field input::placeholder {
    color: #98a5b4;
    opacity: 1;
}

.password-reset-toggle {
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #738398;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    place-items: center;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.password-reset-toggle:hover {
    color: var(--primary);
    background: var(--blue-soft);
}

.password-reset-field-error,
.password-reset-match-status {
    display: flex;
    margin: 7px 0 0;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.password-reset-field-error {
    color: #bd3028;
}

.password-reset-match-status {
    color: #7b8798;
}

.password-reset-match-status.is-success {
    color: #18734f;
}

.password-reset-match-status.is-error {
    color: #bd3028;
}

.password-reset-requirement {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    color: #627084;
    background: #f7faff;
    border: 1px solid rgba(7, 63, 120, 0.08);
    border-radius: 11px;
}

.password-reset-requirement > span {
    display: grid;
    width: 28px;
    height: 28px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 8px;
    place-items: center;
    font-size: 12px;
}

.password-reset-requirement p {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.5;
}

.password-reset-submit {
    display: inline-flex;
    width: 100%;
    min-height: 54px;
    padding: 0 22px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--orange),
            #ff9b39
        );
    border: 0;
    border-radius: 13px;
    box-shadow:
        0 16px 32px rgba(245, 130, 32, 0.25);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 13.5px;
    font-weight: 800;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.password-reset-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 20px 36px rgba(245, 130, 32, 0.31);
}

.password-reset-submit:disabled {
    cursor: not-allowed;
    filter: saturate(0.68);
    opacity: 0.78;
}

.password-reset-submit-text,
.password-reset-submit-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.password-reset-submit-text.d-none,
.password-reset-submit-loading.d-none {
    display: none !important;
}

.password-reset-login-link {
    display: inline-flex;
    width: 100%;
    margin-top: 22px;
    color: var(--primary);
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}

.password-reset-login-link:hover {
    color: var(--orange-dark);
}

/* =========================================================
   RESET PASSWORD VISUAL
   ========================================================= */

.password-reset-visual-panel {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100vh;
    padding:
        42px
        clamp(42px, 5.5vw, 88px)
        40px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 70% 28%,
            rgba(21, 150, 210, 0.3),
            transparent 30%
        ),
        radial-gradient(
            circle at 24% 80%,
            rgba(245, 130, 32, 0.12),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            var(--primary),
            var(--primary-deep) 76%
        );
}

.password-reset-visual-panel::before {
    position: absolute;
    inset: 0;
    content: "";
    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: 52px 52px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 83%,
            transparent
        );
    pointer-events: none;
}

.password-reset-visual-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.password-reset-visual-orb-one {
    top: -150px;
    left: -110px;
    width: 440px;
    height: 440px;
    background: rgba(21, 150, 210, 0.14);
}

.password-reset-visual-orb-two {
    right: -170px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    background: rgba(245, 130, 32, 0.08);
}

.password-reset-home-button {
    position: absolute;
    z-index: 8;
    top: 42px;
    right: clamp(42px, 5.5vw, 88px);
    display: inline-flex;
    min-height: 44px;
    padding: 0 17px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow:
        0 10px 24px rgba(0, 20, 52, 0.13);
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.password-reset-home-button:hover {
    color: var(--primary);
    background: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.password-reset-visual-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(760px, 100%);
    margin: auto;
    padding-top: 42px;
    flex-direction: column;
    align-items: center;
}

.password-reset-visual-heading {
    width: min(610px, 100%);
    text-align: center;
}

.password-reset-visual-heading > span {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--gold-light);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.password-reset-visual-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(29px, 3.1vw, 43px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.password-reset-visual-heading p {
    width: min(540px, 100%);
    margin: 12px auto 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 12.5px;
    line-height: 1.7;
}

.password-reset-security-stage {
    position: relative;
    width: min(620px, 100%);
    height: clamp(365px, 48vh, 455px);
    margin: 3px auto 0;
}

.password-reset-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.password-reset-ring::before,
.password-reset-ring::after {
    position: absolute;
    content: "";
    background: var(--orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px rgba(245, 130, 32, 0.08);
}

.password-reset-ring::before {
    top: 8%;
    left: 17%;
    width: 8px;
    height: 8px;
}

.password-reset-ring::after {
    right: 12%;
    bottom: 12%;
    width: 6px;
    height: 6px;
    background: var(--blue-bright);
    box-shadow:
        0 0 0 6px rgba(21, 150, 210, 0.08);
}

.password-reset-ring-one {
    width: 420px;
    height: 420px;
    transform: translate(-50%, -50%);
    animation:
        passwordResetSpin
        18s
        linear
        infinite;
}

.password-reset-ring-two {
    width: 320px;
    height: 320px;
    border-color: rgba(245, 130, 32, 0.13);
    transform: translate(-50%, -50%);
    animation:
        passwordResetSpinReverse
        14s
        linear
        infinite;
}

.password-reset-ring-three {
    width: 230px;
    height: 230px;
    border-color: rgba(21, 150, 210, 0.17);
    transform: translate(-50%, -50%);
    animation:
        passwordResetPulseRing
        4.2s
        ease-in-out
        infinite;
}

.password-reset-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--gold-light);
    border-radius: 50%;
    box-shadow:
        0 0 0 7px rgba(248, 230, 173, 0.07);
    animation:
        passwordResetParticle
        4s
        ease-in-out
        infinite;
}

.password-reset-particle-one {
    top: 22%;
    left: 14%;
}

.password-reset-particle-two {
    top: 30%;
    right: 12%;
    width: 6px;
    height: 6px;
    background: var(--orange);
    animation-delay: 1.2s;
}

.password-reset-particle-three {
    right: 23%;
    bottom: 14%;
    width: 7px;
    height: 7px;
    background: var(--blue-bright);
    animation-delay: 2.1s;
}

.password-reset-shield {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    display: flex;
    width: 230px;
    min-height: 250px;
    padding: 27px 23px 24px;
    overflow: hidden;
    background:
        linear-gradient(
            150deg,
            rgba(255, 255, 255, 0.98),
            rgba(237, 245, 252, 0.96)
        );
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 28px 28px 54px 54px;
    box-shadow:
        0 30px 70px rgba(0, 16, 42, 0.34);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    animation:
        passwordResetShieldFloat
        5s
        ease-in-out
        infinite;
}

.password-reset-shield::before {
    position: absolute;
    top: -35%;
    left: -75%;
    width: 45%;
    height: 170%;
    content: "";
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.85),
            transparent
        );
    transform: rotate(16deg);
    animation:
        passwordResetShieldShine
        4.8s
        ease-in-out
        infinite;
}

.password-reset-shield-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    background:
        radial-gradient(
            circle,
            rgba(8, 118, 185, 0.18),
            transparent 70%
        );
    filter: blur(10px);
    transform: translate(-50%, -55%);
}

.password-reset-shield-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 86px;
    height: 86px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--blue),
            var(--primary)
        );
    border: 7px solid rgba(234, 246, 255, 0.95);
    border-radius: 50%;
    box-shadow:
        0 16px 32px rgba(7, 63, 120, 0.22);
    place-items: center;
    font-size: 34px;
}

.password-reset-password-line {
    position: relative;
    z-index: 2;
    display: flex;
    margin-top: 22px;
    gap: 7px;
}

.password-reset-password-line span {
    width: 9px;
    height: 9px;
    background: var(--primary);
    border-radius: 50%;
    animation:
        passwordResetDot
        2.4s
        ease-in-out
        infinite;
}

.password-reset-password-line span:nth-child(2) {
    animation-delay: 0.12s;
}

.password-reset-password-line span:nth-child(3) {
    animation-delay: 0.24s;
}

.password-reset-password-line span:nth-child(4) {
    animation-delay: 0.36s;
}

.password-reset-password-line span:nth-child(5) {
    animation-delay: 0.48s;
}

.password-reset-password-line span:nth-child(6) {
    animation-delay: 0.6s;
}

.password-reset-password-line span:nth-child(7) {
    animation-delay: 0.72s;
}

.password-reset-password-line span:nth-child(8) {
    animation-delay: 0.84s;
}

.password-reset-secure-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    min-height: 31px;
    margin-top: 20px;
    padding: 0 11px;
    color: #17714e;
    background: #def5ea;
    border-radius: 99px;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 800;
}

.password-reset-floating-card {
    position: absolute;
    z-index: 6;
    display: grid;
    min-width: 174px;
    padding: 10px 11px;
    color: var(--heading);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    box-shadow:
        0 18px 38px rgba(0, 20, 52, 0.23);
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.password-reset-floating-card > span {
    display: grid;
    width: 30px;
    height: 30px;
    color: var(--primary);
    background: var(--blue-soft);
    border-radius: 8px;
    place-items: center;
    font-size: 12px;
}

.password-reset-floating-card small,
.password-reset-floating-card strong {
    display: block;
}

.password-reset-floating-card small {
    color: #8b95a6;
    font-size: 6.5px;
}

.password-reset-floating-card strong {
    margin-top: 2px;
    color: var(--heading);
    font-size: 8px;
    white-space: nowrap;
}

.password-reset-floating-card > i {
    color: #27a66f;
    font-size: 12px;
}

.password-reset-floating-key {
    top: 20%;
    right: 2%;
    animation:
        passwordResetFloatCard
        4.6s
        ease-in-out
        infinite;
}

.password-reset-floating-session {
    bottom: 21%;
    left: 1%;
    animation:
        passwordResetFloatCard
        5.2s
        0.9s
        ease-in-out
        infinite;
}

.password-reset-floating-lock {
    right: 6%;
    bottom: 11%;
    animation:
        passwordResetFloatCard
        4.9s
        1.7s
        ease-in-out
        infinite;
}

.password-reset-floating-lock > i {
    color: var(--orange);
}

.password-reset-security-points {
    display: flex;
    margin-top: -7px;
    color: rgba(255, 255, 255, 0.67);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 9px;
    font-weight: 600;
}

.password-reset-security-points span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.password-reset-security-points i {
    color: var(--gold-light);
}

@keyframes passwordResetSpin {
    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes passwordResetSpinReverse {
    to {
        transform:
            translate(-50%, -50%)
            rotate(-360deg);
    }
}

@keyframes passwordResetPulseRing {
    0%,
    100% {
        opacity: 0.5;
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.05);
    }
}

@keyframes passwordResetParticle {
    0%,
    100% {
        opacity: 0.45;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-12px);
    }
}

@keyframes passwordResetShieldFloat {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-9px);
    }
}

@keyframes passwordResetShieldShine {
    0%,
    20% {
        left: -75%;
    }

    60%,
    100% {
        left: 135%;
    }
}

@keyframes passwordResetDot {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.82);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes passwordResetFloatCard {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* =========================================================
   RESET PASSWORD RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .password-reset-shell {
        grid-template-columns:
            minmax(410px, 48%)
            minmax(0, 52%);
    }

    .password-reset-form-inner {
        padding-right: 42px;
        padding-left: 42px;
    }

    .password-reset-visual-panel {
        padding-right: 35px;
        padding-left: 35px;
    }

    .password-reset-floating-card {
        min-width: 158px;
    }
}

@media (max-width: 991px) {
    .password-reset-shell {
        display: block;
    }

    .password-reset-visual-panel {
        display: none;
    }

    .password-reset-form-panel {
        min-height: 100vh;
        background:
            radial-gradient(
                circle at 92% 3%,
                rgba(245, 130, 32, 0.08),
                transparent 28%
            ),
            radial-gradient(
                circle at 8% 20%,
                rgba(8, 118, 185, 0.09),
                transparent 30%
            ),
            #ffffff;
    }

    .password-reset-form-inner {
        display: block;
        min-height: 100vh;
        padding:
            25px
            clamp(24px, 7vw, 70px)
            40px;
    }

    .password-reset-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 46px;
    }

    .password-reset-mobile-header .password-reset-brand {
        min-width: 0;
        flex: 1;
    }

    .password-reset-mobile-header .password-reset-brand img {
        width: min(180px, 100%);
        max-height: 66px;
        object-position: left center;
    }

    .password-reset-brand-desktop {
        display: none;
    }

    .password-reset-mobile-back {
        display: inline-flex;
        min-height: 42px;
        padding: 0 14px;
        color: var(--primary);
        background: #ffffff;
        border: 1px solid rgba(7, 63, 120, 0.15);
        border-radius: 11px;
        box-shadow:
            0 8px 22px rgba(4, 43, 85, 0.07);
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 11px;
        font-weight: 700;
    }

    .password-reset-form-content {
        width: min(520px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .password-reset-form-inner {
        padding:
            20px
            20px
            32px;
    }

    .password-reset-mobile-header {
        margin-bottom: 35px;
    }

    .password-reset-mobile-header .password-reset-brand img {
        width: min(158px, 100%);
    }

    .password-reset-heading h1 {
        font-size: 31px;
    }

    .password-reset-heading p {
        font-size: 13px;
    }

    .password-reset-account {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .password-reset-account > i {
        display: none;
    }
}

@media (max-width: 390px) {
    .password-reset-mobile-header .password-reset-brand img {
        width: min(140px, 100%);
    }

    .password-reset-mobile-back {
        width: 40px;
        min-width: 40px;
        padding: 0;
        font-size: 0;
    }

    .password-reset-mobile-back i {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .password-reset-ring,
    .password-reset-particle,
    .password-reset-shield,
    .password-reset-shield::before,
    .password-reset-password-line span,
    .password-reset-floating-card {
        animation: none !important;
    }
}