:root {
    --blue-950: #03142a;
    --blue-900: #061d39;
    --blue-800: #073d73;
    --blue-700: #0566c5;
    --blue-600: #087eff;
    --blue-500: #1598ff;
    --cyan-400: #36c5ff;
    --cyan-200: #a6e8ff;
    --orange-600: #f97300;
    --orange-500: #ff8a00;
    --orange-400: #ffa62b;
    --orange-200: #ffd79c;
    --ink: #071728;
    --ink-soft: #223b53;
    --muted: #64798d;
    --muted-light: #8a9caf;
    --surface: #f4faff;
    --surface-strong: #eaf6ff;
    --white: #ffffff;
    --success: #0cad78;
    --warning: #e88900;
    --danger: #dc4b5c;
    --glass: rgba(255, 255, 255, 0.7);
    --glass-strong: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(68, 168, 255, 0.2);
    --line: rgba(32, 130, 218, 0.14);
    --shadow-sm: 0 12px 34px rgba(5, 64, 111, 0.08);
    --shadow-md: 0 22px 58px rgba(5, 83, 150, 0.12);
    --shadow-lg: 0 34px 90px rgba(4, 74, 135, 0.17);
    --shadow-blue: 0 20px 46px rgba(8, 126, 255, 0.28);
    --shadow-orange: 0 20px 46px rgba(255, 138, 0, 0.25);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --container: 1240px;
    --header-height: 80px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 7% 6%, rgba(54, 197, 255, 0.14), transparent 24rem),
        radial-gradient(circle at 95% 24%, rgba(255, 138, 0, 0.1), transparent 25rem),
        linear-gradient(150deg, #ffffff 0%, #f5fbff 46%, #eaf7ff 100%);
    font-family: IRANSansWeb, IRANSans, Tahoma, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        linear-gradient(rgba(8, 126, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 126, 255, 0.025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

::selection {
    color: #fff;
    background: var(--blue-600);
}

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

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

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

svg {
    width: 20px;
    height: 20px;
}

.container {
    width: min(var(--container), calc(100% - 40px));
    max-width: none;
    padding-inline: 0;
}

.skip-link {
    position: fixed;
    top: -100px;
    right: 20px;
    z-index: 9999;
    padding: 12px 18px;
    border-radius: 12px;
    color: #fff;
    background: var(--blue-700);
}

.skip-link:focus {
    top: 20px;
}

.site-ambient {
    position: fixed;
    z-index: -2;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.ambient-blue {
    top: -190px;
    right: -170px;
    background: rgba(8, 126, 255, 0.2);
}

.ambient-orange {
    left: -190px;
    bottom: -220px;
    background: rgba(255, 138, 0, 0.13);
}

.glass-card,
.glass-panel {
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(239, 249, 255, 0.62));
    box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.announcement-bar {
    position: relative;
    z-index: 1040;
    min-height: 38px;
    border-bottom: 1px solid rgba(8, 126, 255, 0.09);
    color: #3f5f7d;
    background: rgba(241, 249, 255, 0.88);
    font-size: 0.78rem;
}

.announcement-inner {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.announcement-inner > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.announcement-inner > span i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange-500);
    box-shadow: 0 0 0 5px rgba(255, 138, 0, 0.11), 0 0 18px rgba(255, 138, 0, 0.55);
}

.announcement-inner a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blue-700);
    font-weight: 800;
}

.announcement-inner a svg {
    width: 15px;
    height: 15px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1035;
    border-bottom: 1px solid rgba(8, 126, 255, 0.1);
    background: rgba(255, 255, 255, 0.77);
    box-shadow: 0 9px 28px rgba(7, 72, 128, 0.04);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 15px 40px rgba(5, 65, 114, 0.1);
}

.navbar {
    min-height: var(--header-height);
    padding: 0;
}

.brand-signature {
    display: inline-flex;
    min-width: 185px;
    align-items: center;
    gap: 11px;
    color: var(--ink);
}

.brand-signature:hover {
    color: var(--ink);
}

.brand-symbol {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
}

.brand-symbol-main {
    position: absolute;
    inset: 2px 4px 5px 1px;
    border-radius: 14px 5px 15px 6px;
    background: linear-gradient(138deg, #5bd4ff 0%, var(--blue-600) 48%, #0459bd 100%);
    box-shadow: 0 13px 28px rgba(8, 126, 255, 0.34), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    transform: rotate(9deg);
}

.brand-symbol-main::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 15px;
    height: 5px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    transform: rotate(-8deg);
}

.brand-symbol-dot {
    position: absolute;
    left: 0;
    bottom: 1px;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
    box-shadow: 0 7px 18px rgba(255, 138, 0, 0.45);
}

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

.brand-copy strong {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-copy small {
    margin-top: 2px;
    color: #5e7790;
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    direction: ltr;
}

.nav-main {
    align-items: center;
    gap: 2px;
}

.nav-main .nav-link {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 5px;
    padding: 0 12px !important;
    border-radius: 12px;
    color: #4d657a;
    font-size: 0.87rem;
    font-weight: 800;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-main .nav-link svg {
    width: 14px;
    height: 14px;
}

.nav-main .nav-link:hover,
.nav-main .nav-link.active,
.nav-main .show > .nav-link {
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.075);
}

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

.header-login {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    color: #425c73;
    font-size: 0.85rem;
    font-weight: 850;
}

.header-login svg {
    width: 18px;
    height: 18px;
    color: var(--blue-600);
}

.btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn svg {
    width: 18px;
    height: 18px;
}

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

.btn-sm {
    min-height: 42px;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    font-size: 0.82rem;
}

.btn-lg {
    min-height: 56px;
    padding: 0.9rem 1.55rem;
}

.btn-primary-glow {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-600) 52%, #045fc6);
    box-shadow: var(--shadow-blue), inset 0 1px 1px rgba(255, 255, 255, 0.52);
}

.btn-primary-glow:hover,
.btn-primary-glow:focus {
    color: #fff;
    box-shadow: 0 25px 54px rgba(8, 126, 255, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.52);
}

.btn-orange-glow {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    background: linear-gradient(135deg, var(--orange-400), var(--orange-500) 52%, var(--orange-600));
    box-shadow: var(--shadow-orange), inset 0 1px 1px rgba(255, 255, 255, 0.52);
}

.btn-orange-glow:hover,
.btn-orange-glow:focus {
    color: #fff;
    box-shadow: 0 25px 54px rgba(255, 138, 0, 0.34), inset 0 1px 1px rgba(255, 255, 255, 0.52);
}

.btn-glass {
    border: 1px solid rgba(8, 126, 255, 0.2);
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(15px);
}

.btn-glass:hover,
.btn-glass:focus {
    border-color: rgba(8, 126, 255, 0.4);
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.95);
}

.btn-outline-brand {
    border: 1px solid rgba(8, 126, 255, 0.35);
    color: var(--blue-700);
    background: transparent;
}

.btn-outline-brand:hover {
    color: #fff;
    background: var(--blue-600);
}

.btn-light-glow {
    border: 1px solid rgba(255, 255, 255, 0.42);
    color: var(--blue-900);
    background: linear-gradient(135deg, #fff, #dff5ff);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.2);
}

.btn:disabled {
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.icon-button {
    display: inline-grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(8, 126, 255, 0.17);
    border-radius: 13px;
    color: #47677f;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 22px rgba(5, 73, 126, 0.07);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.icon-button:hover,
.icon-button.active {
    border-color: rgba(8, 126, 255, 0.4);
    color: var(--blue-600);
    background: #fff;
    transform: translateY(-2px);
}

.icon-button svg {
    width: 19px;
    height: 19px;
}

.favorite-button.active {
    color: #ff5470;
}

.favorite-button.active svg {
    fill: currentColor;
}

.mobile-menu-button {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(8, 126, 255, 0.18);
    border-radius: 14px;
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.78);
}

.mobile-navigation {
    width: min(390px, 92vw) !important;
    border: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(54, 197, 255, 0.18), transparent 18rem),
        linear-gradient(155deg, #fff, #edf8ff);
}

.mobile-navigation .offcanvas-header {
    padding: 22px;
    border-bottom: 1px solid var(--line);
}

.mobile-navigation .offcanvas-body {
    padding: 22px;
}

.mobile-nav-list {
    display: grid;
    gap: 8px;
}

.mobile-nav-list > a {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 15px;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #405b72;
    font-weight: 850;
}

.mobile-nav-list > a > span {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.mobile-nav-list > a > span svg {
    color: var(--blue-600);
}

.mobile-nav-list > a > svg {
    width: 16px;
    height: 16px;
}

.mobile-nav-list > a:hover,
.mobile-nav-list > a.active {
    border-color: var(--glass-border);
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
}

.mobile-nav-actions {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.mobile-nav-note {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    padding: 17px;
    border: 1px solid rgba(8, 126, 255, 0.15);
    border-radius: 17px;
    background: rgba(8, 126, 255, 0.055);
}

.mobile-nav-note > span {
    display: grid;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--blue-600);
}

.mobile-nav-note strong,
.mobile-nav-note small {
    display: block;
}

.mobile-nav-note strong {
    font-size: 0.82rem;
}

.mobile-nav-note small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.7;
}

.mega-menu {
    right: 50% !important;
    left: auto !important;
    width: 660px;
    margin-top: 16px !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(8, 126, 255, 0.17);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-lg);
    transform: translateX(50%);
    backdrop-filter: blur(24px);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
}

.mega-menu-lead {
    padding: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 0, rgba(54, 197, 255, 0.4), transparent 13rem),
        linear-gradient(145deg, var(--blue-900), #064881);
}

.mega-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
}

.mega-menu-lead h3 {
    margin: 22px 0 10px;
    font-size: 1.15rem;
    font-weight: 950;
}

.mega-menu-lead p {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    line-height: 1.9;
}

.mega-menu-lead a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
}

.mega-menu-lead a svg {
    width: 15px;
    height: 15px;
}

.mega-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px;
}

.mega-links a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px;
    border-radius: 15px;
    color: var(--ink);
}

.mega-links a:hover {
    background: rgba(8, 126, 255, 0.06);
}

.mega-links a > span {
    display: grid;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 12px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.08);
}

.mega-links strong,
.mega-links small {
    display: block;
}

.mega-links strong {
    font-size: 0.79rem;
    font-weight: 900;
}

.mega-links small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.68rem;
}

.section-space {
    padding: 92px 0;
}

.section-tint {
    position: relative;
    border-block: 1px solid rgba(8, 126, 255, 0.07);
    background: linear-gradient(145deg, rgba(225, 244, 255, 0.55), rgba(255, 255, 255, 0.35));
}

.section-heading {
    max-width: 750px;
}

.section-heading h2,
.section-title-large {
    margin: 17px 0 13px;
    color: var(--ink);
    font-size: clamp(1.85rem, 3.5vw, 3.1rem);
    font-weight: 950;
    line-height: 1.3;
    letter-spacing: -0.045em;
}

.section-heading p,
.section-copy {
    margin: 0;
    color: var(--muted);
    line-height: 2;
}

.narrow-heading {
    max-width: 760px;
}

.split-heading {
    display: flex;
    max-width: none;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
}

.split-heading > div:first-child {
    max-width: 760px;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(8, 126, 255, 0.16);
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 24px rgba(8, 126, 255, 0.07);
    font-size: 0.78rem;
    font-weight: 900;
}

.section-kicker i,
.section-kicker::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
    box-shadow: 0 0 0 5px rgba(255, 138, 0, 0.1);
}

.section-kicker::before {
    content: "";
}

.section-kicker:has(i)::before {
    display: none;
}

.section-kicker-dark {
    border-color: rgba(255, 255, 255, 0.16);
    color: #aeeaff;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.text-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--blue-700);
    font-size: 0.86rem;
    font-weight: 950;
}

.text-link svg {
    width: 17px;
    height: 17px;
    transition: transform 0.2s ease;
}

.text-link:hover svg {
    transform: translateX(-4px);
}

.hero-section {
    position: relative;
    padding: 90px 0 78px;
}

.hero-home::after {
    content: "";
    position: absolute;
    right: 8%;
    bottom: 10%;
    z-index: -1;
    width: 38%;
    height: 45%;
    border-radius: 50%;
    background: rgba(8, 126, 255, 0.08);
    filter: blur(80px);
}

.hero-title {
    max-width: 820px;
    margin: 24px 0 22px;
    font-size: clamp(2.65rem, 5.2vw, 5rem);
    font-weight: 950;
    line-height: 1.18;
    letter-spacing: -0.06em;
}

.hero-title span {
    color: transparent;
    background: linear-gradient(94deg, var(--blue-700), var(--cyan-400) 58%, var(--orange-500));
    -webkit-background-clip: text;
    background-clip: text;
}

.hero-description {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1.04rem;
    line-height: 2.05;
}

.hero-search {
    display: grid;
    grid-template-columns: 1.35fr 0.9fr 0.9fr auto;
    gap: 0;
    margin-top: 32px;
    padding: 8px;
    border-radius: 22px;
}

.search-field {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    min-width: 0;
    align-items: center;
    padding: 6px 17px;
    border-inline-end: 1px solid var(--line);
}

.search-field > span {
    grid-row: 1 / 3;
    color: var(--blue-600);
}

.search-field > span svg {
    width: 19px;
    height: 19px;
}

.search-field label {
    color: #334f68;
    font-size: 0.7rem;
    font-weight: 900;
}

.search-field input,
.search-field select {
    min-width: 0;
    padding: 2px 0;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.79rem;
}

.search-field input::placeholder {
    color: #97a7b7;
}

.search-field select {
    appearance: none;
    cursor: pointer;
}

.hero-search-button {
    min-height: 62px;
    padding-inline: 20px;
    border-radius: 16px;
}

.hero-quick-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-top: 17px;
    color: var(--muted);
    font-size: 0.75rem;
}

.hero-quick-links > span {
    font-weight: 850;
}

.hero-quick-links a {
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(8, 126, 255, 0.35);
    color: var(--blue-700);
    font-weight: 850;
}

.hero-trust-row {
    display: flex;
    max-width: 660px;
    align-items: center;
    gap: 15px;
    margin-top: 29px;
}

.trust-avatars {
    display: flex;
    direction: ltr;
}

.trust-avatars span {
    display: grid;
    width: 35px;
    height: 35px;
    place-items: center;
    margin-left: -8px;
    border: 3px solid #f6fbff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
    font-size: 0.61rem;
    font-weight: 900;
}

.trust-avatars span:nth-child(2) {
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
}

.trust-avatars span:nth-child(3) {
    background: linear-gradient(135deg, #7758f6, #4c35b8);
}

.trust-avatars span:last-child {
    color: var(--blue-700);
    background: #fff;
}

.hero-trust-row strong,
.hero-trust-row small {
    display: block;
}

.hero-trust-row strong {
    font-size: 0.8rem;
    font-weight: 950;
}

.hero-trust-row small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.75;
}

.hero-visual {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border: 1px solid rgba(8, 126, 255, 0.13);
    border-radius: 38px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.52), rgba(230, 246, 255, 0.4)),
        linear-gradient(145deg, #eef9ff, #dff2ff);
    box-shadow: var(--shadow-lg);
    isolation: isolate;
}

.hero-visual-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.55;
    background-image:
        linear-gradient(rgba(8, 126, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 126, 255, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

.visual-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
}

.visual-glow-blue {
    top: 10%;
    right: 8%;
    width: 210px;
    height: 210px;
    background: rgba(8, 126, 255, 0.28);
}

.visual-glow-orange {
    left: 4%;
    bottom: 8%;
    width: 180px;
    height: 180px;
    background: rgba(255, 138, 0, 0.2);
}

.matching-card {
    position: absolute;
    top: 103px;
    right: 44px;
    left: 44px;
    padding: 25px;
    border-radius: 27px;
    transform: perspective(900px) rotateY(4deg) rotateX(1deg);
}

.matching-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.matching-head > div > strong,
.matching-head > div > span {
    display: block;
}

.matching-live {
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 900;
}

.matching-live i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 5px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(12, 173, 120, 0.1);
}

.matching-head strong {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 950;
}

.matching-score {
    color: var(--blue-600);
    font-size: 1.8rem;
    font-weight: 950;
    direction: ltr;
}

.matching-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 16px;
    border: 1px solid rgba(8, 126, 255, 0.11);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.64);
}

.matching-logo,
.opportunity-logo,
.detail-logo,
.brand-mini-logo,
.table-brand > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-600) 55%, var(--blue-800));
    box-shadow: 0 12px 24px rgba(8, 126, 255, 0.25);
    font-weight: 950;
    direction: ltr;
}

.matching-logo {
    width: 50px;
    height: 50px;
    border-radius: 16px;
}

.matching-brand strong,
.matching-brand small {
    display: block;
}

.matching-brand strong {
    font-size: 0.86rem;
    direction: ltr;
    text-align: right;
}

.matching-brand small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.7rem;
}

.verified-mark {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    margin-inline-start: auto;
    border-radius: 50%;
    color: #fff;
    background: var(--success);
}

.verified-mark svg {
    width: 15px;
    height: 15px;
}

.matching-progress {
    height: 8px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(8, 126, 255, 0.1);
}

.matching-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-600), var(--cyan-400), var(--orange-500));
    box-shadow: 0 0 18px rgba(8, 126, 255, 0.5);
}

.matching-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.matching-metrics div {
    padding: 11px;
    border: 1px solid rgba(8, 126, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
}

.matching-metrics span {
    color: var(--blue-600);
}

.matching-metrics svg {
    width: 16px;
    height: 16px;
}

.matching-metrics small,
.matching-metrics strong {
    display: block;
}

.matching-metrics small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.59rem;
}

.matching-metrics strong {
    margin-top: 3px;
    font-size: 0.68rem;
}

.floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 17px;
}

.floating-card > span {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--blue-600);
}

.floating-card-bottom > span {
    background: var(--orange-500);
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    font-size: 0.7rem;
}

.floating-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.6rem;
}

.floating-card-top {
    top: 28px;
    left: 24px;
}

.floating-card-bottom {
    right: 23px;
    bottom: 30px;
}

.hero-stage-chip {
    position: absolute;
    left: 26px;
    bottom: 32px;
    padding: 8px 11px;
    border: 1px solid rgba(8, 126, 255, 0.15);
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.65rem;
    font-weight: 900;
    direction: ltr;
}

.trust-strip {
    padding: 0 0 22px;
}

.trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 17px 8px;
    border-radius: 22px;
}

.trust-strip-inner div {
    padding: 3px 18px;
    border-inline-end: 1px solid var(--line);
}

.trust-strip-inner div:last-child {
    border-inline-end: 0;
}

.trust-strip-inner strong,
.trust-strip-inner span {
    display: block;
    text-align: center;
}

.trust-strip-inner strong {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 950;
}

.trust-strip-inner span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.65rem;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.category-card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    padding: 19px;
    border-radius: 20px;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.category-card:hover {
    border-color: rgba(8, 126, 255, 0.38);
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}

.category-icon {
    display: grid;
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 16px;
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.1);
}

.category-icon.tone-orange {
    color: var(--orange-600);
    background: rgba(255, 138, 0, 0.1);
}

.category-icon.tone-purple {
    color: #6b4cf0;
    background: rgba(107, 76, 240, 0.1);
}

.category-icon.tone-green {
    color: var(--success);
    background: rgba(12, 173, 120, 0.1);
}

.category-icon.tone-navy {
    color: var(--blue-900);
    background: rgba(6, 29, 57, 0.08);
}

.category-card h3,
.category-card span {
    display: block;
}

.category-card h3 {
    margin: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-card div > span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.67rem;
}

.category-arrow {
    margin-inline-start: auto;
    color: #86a0b6;
}

.category-arrow svg {
    width: 16px;
    height: 16px;
}

.section-nav-buttons {
    display: flex;
    gap: 8px;
}

.opportunity-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.opportunity-card:hover {
    border-color: rgba(8, 126, 255, 0.37);
    box-shadow: var(--shadow-lg);
    transform: translateY(-7px);
}

.opportunity-cover {
    position: relative;
    display: flex;
    height: 156px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(140deg, #e9f7ff, #ccecff);
}

.opportunity-cover.tone-orange {
    background: linear-gradient(140deg, #fff5e5, #ffe0ad);
}

.opportunity-cover.tone-purple {
    background: linear-gradient(140deg, #f2edff, #ddd2ff);
}

.opportunity-cover.tone-green {
    background: linear-gradient(140deg, #e9fff6, #c7f4df);
}

.opportunity-cover.tone-navy {
    background: linear-gradient(140deg, #edf3f8, #ccdae7);
}

.opportunity-cover.tone-cyan {
    background: linear-gradient(140deg, #e9fdff, #c4f5fa);
}

.opportunity-logo {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border: 3px solid rgba(255, 255, 255, 0.78);
    border-radius: 22px;
    font-size: 1.15rem;
}

.tone-orange .opportunity-logo,
.brand-mini-logo.tone-orange,
.detail-logo.tone-orange,
.table-brand > span.tone-orange {
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
    box-shadow: 0 12px 24px rgba(255, 138, 0, 0.25);
}

.tone-purple .opportunity-logo,
.brand-mini-logo.tone-purple,
.detail-logo.tone-purple {
    background: linear-gradient(135deg, #967cff, #5a3fd5);
    box-shadow: 0 12px 24px rgba(90, 63, 213, 0.24);
}

.tone-green .opportunity-logo,
.brand-mini-logo.tone-green,
.detail-logo.tone-green {
    background: linear-gradient(135deg, #43dba5, #07865d);
    box-shadow: 0 12px 24px rgba(7, 134, 93, 0.22);
}

.tone-navy .opportunity-logo,
.brand-mini-logo.tone-navy,
.detail-logo.tone-navy {
    background: linear-gradient(135deg, #37597a, #071b32);
    box-shadow: 0 12px 24px rgba(7, 27, 50, 0.22);
}

.tone-cyan .opportunity-logo,
.brand-mini-logo.tone-cyan,
.detail-logo.tone-cyan {
    background: linear-gradient(135deg, #46dce8, #07829b);
    box-shadow: 0 12px 24px rgba(7, 130, 155, 0.22);
}

.opportunity-actions {
    position: absolute;
    top: 13px;
    left: 13px;
    z-index: 3;
    display: flex;
    gap: 7px;
}

.opportunity-actions .icon-button {
    width: 36px;
    height: 36px;
    border-color: rgba(255, 255, 255, 0.58);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
}

.opportunity-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    color: var(--blue-800);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 8px 20px rgba(5, 78, 134, 0.08);
    font-size: 0.62rem;
    font-weight: 950;
}

.cover-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
}

.cover-orb-one {
    top: -35px;
    right: 23%;
    width: 95px;
    height: 95px;
    background: rgba(255, 255, 255, 0.45);
}

.cover-orb-two {
    left: 17%;
    bottom: -45px;
    width: 125px;
    height: 125px;
    background: rgba(8, 126, 255, 0.08);
}

.opportunity-body {
    padding: 21px;
}

.opportunity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
}

.match-score {
    color: var(--success);
    direction: rtl;
}

.opportunity-body h3 {
    margin: 12px 0 9px;
    font-size: 1.03rem;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.opportunity-body h3 a:hover {
    color: var(--blue-700);
}

.opportunity-body > p {
    min-height: 54px;
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.85;
}

.opportunity-facts {
    display: grid;
    gap: 9px;
    margin: 17px 0;
    padding: 0;
    list-style: none;
}

.opportunity-facts li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #405c72;
    font-size: 0.69rem;
}

.opportunity-facts svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--blue-600);
}

.opportunity-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.opportunity-footer .text-link {
    font-size: 0.7rem;
}

.opportunity-footer > span {
    color: var(--muted);
    font-size: 0.62rem;
}

.path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.path-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    padding: 38px;
    border-radius: 30px;
}

.path-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(50px);
}

.path-card-investor::after {
    top: -110px;
    left: -90px;
    background: rgba(8, 126, 255, 0.18);
}

.path-card-brand::after {
    right: -90px;
    bottom: -110px;
    background: rgba(255, 138, 0, 0.16);
}

.path-card-number {
    position: absolute;
    top: 24px;
    left: 28px;
    color: rgba(8, 126, 255, 0.08);
    font-size: 5.5rem;
    font-weight: 950;
    line-height: 1;
}

.path-card-brand .path-card-number {
    color: rgba(255, 138, 0, 0.09);
}

.path-icon {
    display: grid;
    width: 61px;
    height: 61px;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-700));
    box-shadow: var(--shadow-blue);
}

.path-card-brand .path-icon {
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
    box-shadow: var(--shadow-orange);
}

.path-label {
    display: block;
    margin-top: 26px;
    color: var(--blue-700);
    font-size: 0.76rem;
    font-weight: 950;
}

.path-card-brand .path-label {
    color: var(--orange-600);
}

.path-card h3 {
    max-width: 470px;
    margin: 12px 0 14px;
    font-size: 1.75rem;
    font-weight: 950;
    line-height: 1.45;
}

.path-card > p {
    max-width: 500px;
    margin: 0;
    color: var(--muted);
    line-height: 1.95;
}

.path-card ul {
    display: grid;
    gap: 11px;
    margin: 25px 0 28px;
    padding: 0;
    list-style: none;
}

.path-card li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #3e5a71;
    font-size: 0.79rem;
    font-weight: 800;
}

.path-card li svg {
    width: 17px;
    height: 17px;
    color: var(--success);
}

.section-dark {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 80% 15%, rgba(54, 197, 255, 0.2), transparent 24rem),
        radial-gradient(circle at 10% 90%, rgba(255, 138, 0, 0.12), transparent 22rem),
        linear-gradient(135deg, #041426, #062f58 60%, #06467b);
}

.section-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

.section-dark-title {
    margin: 22px 0 16px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 950;
    line-height: 1.4;
    letter-spacing: -0.045em;
}

.section-dark-copy {
    margin: 0 0 27px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 2;
}

.process-list {
    position: relative;
    display: grid;
    gap: 10px;
}

.process-item {
    position: relative;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 17px;
    padding: 19px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
}

.process-item.active {
    border-color: rgba(54, 197, 255, 0.38);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.process-item > span {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 16px;
    color: #9ee5ff;
    background: rgba(54, 197, 255, 0.09);
    font-weight: 950;
}

.process-item h3 {
    margin: 2px 0 6px;
    font-size: 0.98rem;
    font-weight: 950;
}

.process-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
    line-height: 1.8;
}

.process-item > i {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange-500);
    box-shadow: 0 0 0 6px rgba(255, 138, 0, 0.1);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.service-card {
    padding: 27px;
    border-radius: 23px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.service-card:hover {
    border-color: rgba(8, 126, 255, 0.34);
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
}

.service-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    color: var(--blue-700);
    background: linear-gradient(145deg, rgba(54, 197, 255, 0.18), rgba(8, 126, 255, 0.08));
}

.service-card:nth-child(even) .service-icon {
    color: var(--orange-600);
    background: linear-gradient(145deg, rgba(255, 166, 43, 0.19), rgba(255, 138, 0, 0.08));
}

.service-card h3 {
    margin: 21px 0 11px;
    font-size: 1.02rem;
    font-weight: 950;
}

.service-card p {
    min-height: 106px;
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.95;
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    color: var(--blue-700);
    font-size: 0.75rem;
    font-weight: 950;
}

.service-card a svg {
    width: 15px;
    height: 15px;
}

.insight-panel {
    display: grid;
    grid-template-columns: 75px 1fr 210px;
    align-items: center;
    gap: 28px;
    padding: 34px;
    border-radius: 30px;
}

.insight-quote {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
    box-shadow: var(--shadow-orange);
}

.insight-content blockquote {
    max-width: 780px;
    margin: 18px 0 10px;
    font-size: 1.22rem;
    font-weight: 950;
    line-height: 1.75;
}

.insight-content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.9;
}

.insight-chart {
    display: grid;
    place-items: center;
}

.chart-ring {
    position: relative;
    display: grid;
    width: 155px;
    height: 155px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--blue-600) 0 72%, var(--orange-500) 72% 86%, rgba(8, 126, 255, 0.1) 86% 100%);
}

.chart-ring::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: #f5fbff;
}

.chart-ring span,
.chart-ring small {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.chart-ring span {
    color: var(--blue-700);
    font-size: 1.8rem;
    font-weight: 950;
}

.chart-ring small {
    max-width: 90px;
    margin-top: -28px;
    color: var(--muted);
    font-size: 0.6rem;
    line-height: 1.5;
}

.cta-panel {
    position: relative;
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 28px;
    overflow: hidden;
    padding: 38px;
    border-radius: 31px;
}

.cta-panel::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -110px;
    z-index: -1;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(255, 138, 0, 0.16);
    filter: blur(45px);
}

.cta-visual {
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-600) 58%, var(--blue-800));
    box-shadow: var(--shadow-blue);
    transform: rotate(-4deg);
}

.cta-visual svg {
    width: 34px;
    height: 34px;
}

.cta-content h2 {
    margin: 14px 0 9px;
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1.5;
}

.cta-content p {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.85;
}

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

.page-hero {
    position: relative;
    padding: 82px 0 58px;
}

.compact-page-hero {
    padding-bottom: 36px;
}

.page-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 38px;
    border-radius: 30px;
}

.page-hero-inner > div:first-child {
    max-width: 820px;
}

.page-hero h1,
.page-hero-center h1 {
    margin: 21px 0 14px;
    font-size: clamp(2.25rem, 4.8vw, 4.3rem);
    font-weight: 950;
    line-height: 1.3;
    letter-spacing: -0.055em;
}

.page-hero p,
.page-hero-center p {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 2;
}

.page-hero-stat {
    display: grid;
    flex: 0 0 auto;
    width: 145px;
    height: 145px;
    place-items: center;
    border: 1px solid rgba(8, 126, 255, 0.15);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(215, 241, 255, 0.6));
    box-shadow: inset 0 0 0 10px rgba(8, 126, 255, 0.035);
}

.page-hero-stat strong,
.page-hero-stat span {
    display: block;
    text-align: center;
}

.page-hero-stat strong {
    color: var(--blue-600);
    font-size: 2.7rem;
    font-weight: 950;
    line-height: 1;
}

.page-hero-stat span {
    margin-top: -36px;
    color: var(--muted);
    font-size: 0.66rem;
}

.page-hero-center {
    max-width: 870px;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 21px;
}

.catalog-search {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.62);
}

.catalog-search span {
    color: var(--blue-600);
}

.catalog-search input {
    width: 100%;
    min-height: 48px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.8rem;
}

.catalog-sort {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-inline-start: 1px solid var(--line);
}

.catalog-sort label {
    color: var(--muted);
    font-size: 0.68rem;
}

.catalog-sort select {
    border: 0;
    outline: 0;
    color: var(--ink-soft);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 850;
}

.view-switch {
    display: flex;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.52);
}

.view-switch button {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    color: #75899b;
    background: transparent;
}

.view-switch button.active {
    color: #fff;
    background: var(--blue-600);
    box-shadow: 0 8px 18px rgba(8, 126, 255, 0.22);
}

.catalog-sidebar {
    position: sticky;
    top: 110px;
    padding: 22px;
    border-radius: 23px;
}

.filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.filter-heading strong {
    font-size: 0.9rem;
    font-weight: 950;
}

.filter-heading button,
.link-button {
    padding: 0;
    border: 0;
    color: var(--blue-700);
    background: transparent;
    font-size: 0.68rem;
    font-weight: 900;
}

.filter-group {
    padding: 19px 0;
    border-bottom: 1px solid var(--line);
}

.filter-group > label:first-child {
    display: block;
    margin-bottom: 12px;
    color: #334f68;
    font-size: 0.75rem;
    font-weight: 950;
}

.check-row-ui {
    display: flex;
    min-height: 35px;
    align-items: center;
    gap: 9px;
    margin: 0;
    cursor: pointer;
}

.check-row-ui input,
.privacy-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.check-row-ui > span,
.privacy-check > span {
    position: relative;
    display: grid;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid rgba(8, 126, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.7);
}

.check-row-ui input:checked + span,
.privacy-check input:checked + span {
    border-color: var(--blue-600);
    background: var(--blue-600);
}

.check-row-ui input:checked + span::after,
.privacy-check input:checked + span::after {
    content: "";
    width: 8px;
    height: 5px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.check-row-ui strong {
    color: #50687d;
    font-size: 0.69rem;
    font-weight: 800;
}

.check-row-ui small {
    margin-inline-start: auto;
    color: #98a8b6;
    font-size: 0.61rem;
}

.form-range::-webkit-slider-thumb {
    background: var(--blue-600);
    box-shadow: 0 0 0 5px rgba(8, 126, 255, 0.1);
}

.form-range::-moz-range-thumb {
    background: var(--blue-600);
}

.range-output {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.61rem;
}

.range-output strong {
    color: var(--blue-700);
}

.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer;
}

.switch-row strong,
.switch-row small {
    display: block;
}

.switch-row strong {
    color: #405b72;
    font-size: 0.7rem;
}

.switch-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.59rem;
}

.switch-row input {
    position: absolute;
    opacity: 0;
}

.switch-row i {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 23px;
    border-radius: 999px;
    background: #c8d7e3;
    transition: background 0.2s ease;
}

.switch-row i::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(6, 36, 64, 0.2);
    transition: transform 0.2s ease;
}

.switch-row input:checked + i {
    background: var(--blue-600);
}

.switch-row input:checked + i::after {
    transform: translateX(-19px);
}

.catalog-result-head {
    display: flex;
    min-height: 47px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.catalog-result-head > div:first-child strong,
.catalog-result-head > div:first-child span {
    display: block;
}

.catalog-result-head strong {
    font-size: 0.9rem;
    font-weight: 950;
}

.catalog-result-head > div:first-child span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.65rem;
}

.active-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 10px;
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.08);
    font-size: 0.64rem;
    font-weight: 850;
}

.active-filter button {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.7);
}

.active-filter svg {
    width: 12px;
    height: 12px;
}

[data-catalog-grid].list-view > div {
    width: 100%;
}

[data-catalog-grid].list-view .opportunity-card {
    display: grid;
    grid-template-columns: 250px 1fr;
}

[data-catalog-grid].list-view .opportunity-cover {
    height: 100%;
    min-height: 250px;
}

[data-catalog-grid].list-view .opportunity-body > p {
    min-height: 0;
}

.empty-state {
    padding: 55px 25px;
    border-radius: 24px;
    text-align: center;
}

.empty-state > span {
    display: grid;
    width: 65px;
    height: 65px;
    place-items: center;
    margin: 0 auto;
    border-radius: 21px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.08);
}

.empty-state h3 {
    margin: 20px 0 8px;
    font-weight: 950;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
}

.catalog-pagination button {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: #597187;
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.72rem;
    font-weight: 850;
}

.catalog-pagination button.active {
    border-color: var(--blue-600);
    color: #fff;
    background: var(--blue-600);
    box-shadow: 0 10px 24px rgba(8, 126, 255, 0.22);
}

.catalog-pagination button:disabled {
    opacity: 0.45;
}

.mobile-filters {
    height: min(82vh, 720px) !important;
    border-radius: 25px 25px 0 0;
    background: #f7fcff;
}

.mobile-filters .offcanvas-header {
    border-bottom: 1px solid var(--line);
}

.mobile-filters h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 950;
}

.brands-hero,
.services-hero,
.about-hero,
.contact-hero {
    padding-top: 96px;
}

.brands-hero h1,
.about-hero h1 {
    margin: 23px 0 15px;
    font-size: clamp(2.4rem, 5vw, 4.65rem);
    font-weight: 950;
    line-height: 1.3;
    letter-spacing: -0.055em;
}

.brands-hero p,
.about-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 2.05;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 28px;
}

.mini-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 30px;
}

.mini-proof-row > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mini-proof-row > div > svg {
    color: var(--blue-600);
}

.mini-proof-row strong,
.mini-proof-row small {
    display: block;
}

.mini-proof-row strong {
    font-size: 0.75rem;
}

.mini-proof-row small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.63rem;
}

.brand-dashboard-preview {
    position: relative;
    min-height: 460px;
    padding: 25px;
    overflow: hidden;
    border-radius: 31px;
    transform: perspective(1000px) rotateY(-3deg) rotateX(1deg);
}

.brand-dashboard-preview::after {
    content: "";
    position: absolute;
    left: -70px;
    bottom: -80px;
    z-index: -1;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: rgba(255, 138, 0, 0.16);
    filter: blur(45px);
}

.dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 0.68rem;
    direction: ltr;
}

.dashboard-top i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(12, 173, 120, 0.1);
}

.dashboard-metric {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 25px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.63);
}

.dashboard-metric > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: var(--blue-600);
}

.dashboard-metric small,
.dashboard-metric strong {
    display: block;
}

.dashboard-metric small {
    color: var(--muted);
    font-size: 0.65rem;
}

.dashboard-metric strong {
    margin-top: 3px;
    font-size: 1.3rem;
}

.dashboard-metric em {
    margin-inline-start: auto;
    color: var(--success);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 950;
    direction: ltr;
}

.dashboard-bars {
    display: flex;
    height: 150px;
    align-items: end;
    justify-content: space-around;
    gap: 10px;
    margin-top: 24px;
    padding: 18px 18px 0;
    border-bottom: 1px solid var(--line);
    background-image: linear-gradient(rgba(8, 126, 255, 0.06) 1px, transparent 1px);
    background-size: 100% 33%;
}

.dashboard-bars span {
    width: 8%;
    min-width: 14px;
    border-radius: 9px 9px 2px 2px;
    background: linear-gradient(to top, var(--blue-600), var(--cyan-400));
    box-shadow: 0 0 18px rgba(8, 126, 255, 0.25);
}

.dashboard-bars span:nth-child(2n) {
    background: linear-gradient(to top, var(--orange-600), var(--orange-400));
    box-shadow: 0 0 18px rgba(255, 138, 0, 0.2);
}

.dashboard-list {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.dashboard-list div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.48);
    font-size: 0.7rem;
}

.dashboard-list i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dashboard-list .tone-blue {
    background: var(--blue-600);
}

.dashboard-list .tone-orange {
    background: var(--orange-500);
}

.dashboard-list .tone-green {
    background: var(--success);
}

.dashboard-list strong {
    margin-inline-start: auto;
}

.brand-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 17px;
}

.brand-info-grid article {
    position: relative;
    padding: 28px;
    overflow: hidden;
    border-radius: 23px;
}

.brand-info-grid article > span {
    position: absolute;
    top: 13px;
    left: 18px;
    color: rgba(8, 126, 255, 0.09);
    font-size: 3rem;
    font-weight: 950;
}

.brand-info-grid article > svg {
    width: 31px;
    height: 31px;
    color: var(--blue-600);
}

.brand-info-grid article:nth-child(even) > svg {
    color: var(--orange-500);
}

.brand-info-grid h3 {
    margin: 21px 0 10px;
    font-size: 0.95rem;
    font-weight: 950;
}

.brand-info-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.73rem;
    line-height: 1.95;
}

.readiness-board {
    display: grid;
    gap: 10px;
    padding: 26px;
    border-radius: 26px;
}

.readiness-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
}

.readiness-row > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.readiness-row > div > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    color: var(--success);
    background: rgba(12, 173, 120, 0.1);
}

.readiness-row > div svg {
    width: 16px;
    height: 16px;
}

.readiness-row strong {
    font-size: 0.77rem;
}

.readiness-row em {
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.08);
    font-size: 0.63rem;
    font-style: normal;
    font-weight: 900;
}

.brand-logo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.brand-logo-card {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 18px;
    border-radius: 19px;
}

.brand-mini-logo {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    font-size: 0.75rem;
}

.brand-logo-card h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.brand-logo-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.63rem;
}

.verified-chip,
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--success);
    background: rgba(12, 173, 120, 0.1);
    font-size: 0.61rem;
    font-weight: 900;
}

.verified-chip svg {
    width: 13px;
    height: 13px;
}

.service-offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.service-offer {
    padding: 33px;
    border-radius: 27px;
}

.service-offer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-index {
    color: rgba(8, 126, 255, 0.12);
    font-size: 3.4rem;
    font-weight: 950;
    line-height: 1;
}

.service-offer:nth-child(even) .service-index {
    color: rgba(255, 138, 0, 0.13);
}

.service-offer h2 {
    margin: 25px 0 11px;
    font-size: 1.3rem;
    font-weight: 950;
}

.service-offer > p {
    min-height: 58px;
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.95;
}

.service-offer ul {
    display: grid;
    gap: 10px;
    margin: 25px 0;
    padding: 19px 0;
    border-block: 1px solid var(--line);
    list-style: none;
}

.service-offer li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #445f75;
    font-size: 0.75rem;
    font-weight: 800;
}

.service-offer li svg {
    width: 16px;
    height: 16px;
    color: var(--success);
}

.when-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.when-service-grid article {
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

.when-service-grid article > span {
    display: grid;
    width: 49px;
    height: 49px;
    place-items: center;
    border-radius: 16px;
    color: #aeeaff;
    background: rgba(54, 197, 255, 0.09);
}

.when-service-grid h3 {
    margin: 21px 0 10px;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.6;
}

.when-service-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.74rem;
    line-height: 1.95;
}

.service-process {
    display: grid;
    grid-template-columns: 0.9fr 1.5fr;
    align-items: center;
    gap: 30px;
    padding: 34px;
    border-radius: 29px;
}

.service-process h2 {
    margin: 16px 0 9px;
    font-size: 1.65rem;
    font-weight: 950;
}

.service-process p {
    margin: 0;
    color: var(--muted);
}

.service-process ol {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.service-process li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.service-process li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: -18%;
    width: 36%;
    border-top: 1px dashed rgba(8, 126, 255, 0.35);
}

.service-process li span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--blue-600);
    font-weight: 950;
}

.service-process li:nth-child(even) span {
    background: var(--orange-500);
}

.service-process li strong {
    color: #435d73;
    font-size: 0.65rem;
}

.mission-card {
    padding: 31px;
    border-radius: 28px;
}

.mission-card > span {
    display: grid;
    width: 59px;
    height: 59px;
    place-items: center;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-700));
    box-shadow: var(--shadow-blue);
}

.mission-card > strong {
    display: block;
    margin-top: 22px;
    font-size: 1rem;
    font-weight: 950;
}

.mission-card p {
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 2;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.about-values-grid article {
    padding: 29px;
    border-radius: 25px;
}

.about-values-grid article > span {
    display: grid;
    width: 53px;
    height: 53px;
    place-items: center;
    border-radius: 17px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.09);
}

.about-values-grid article:nth-child(2) > span {
    color: var(--orange-600);
    background: rgba(255, 138, 0, 0.1);
}

.about-values-grid h2 {
    margin: 21px 0 10px;
    font-size: 1.05rem;
    font-weight: 950;
}

.about-values-grid p {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.95;
}

.about-timeline {
    display: grid;
    gap: 9px;
    padding: 25px;
    border-radius: 27px;
}

.about-timeline div {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.5);
}

.about-timeline div.active {
    border-color: rgba(8, 126, 255, 0.35);
    background: rgba(8, 126, 255, 0.07);
}

.about-timeline span {
    color: var(--blue-700);
    font-size: 0.65rem;
    font-weight: 950;
}

.about-timeline strong {
    font-size: 0.76rem;
}

.about-timeline small {
    color: var(--muted);
    font-size: 0.61rem;
}

.contact-info-panel,
.contact-form {
    padding: 32px;
    border-radius: 28px;
}

.contact-info-panel h2 {
    margin: 20px 0 12px;
    font-size: 1.65rem;
    font-weight: 950;
}

.contact-info-panel > p {
    margin: 0 0 25px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.95;
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.52);
}

.contact-channel > span {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.09);
}

.contact-channel:nth-of-type(even) > span {
    color: var(--orange-600);
    background: rgba(255, 138, 0, 0.1);
}

.contact-channel strong,
.contact-channel small {
    display: block;
}

.contact-channel strong {
    font-size: 0.75rem;
}

.contact-channel small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.62rem;
}

.contact-response {
    display: flex;
    gap: 12px;
    margin-top: 23px;
    padding: 15px;
    border-radius: 16px;
    background: rgba(12, 173, 120, 0.08);
}

.contact-response > i {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(12, 173, 120, 0.1);
}

.contact-response strong,
.contact-response small {
    display: block;
}

.contact-response strong {
    color: #087c59;
    font-size: 0.72rem;
}

.contact-response small {
    margin-top: 4px;
    color: #4b7667;
    font-size: 0.62rem;
    line-height: 1.8;
}

.form-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.form-heading h2 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 950;
}

.form-heading span {
    color: var(--orange-600);
    font-size: 0.64rem;
    font-weight: 900;
}

.form-label {
    margin-bottom: 8px;
    color: #405a70;
    font-size: 0.72rem;
    font-weight: 900;
}

.form-control,
.form-select {
    min-height: 52px;
    border: 1px solid rgba(8, 126, 255, 0.17);
    border-radius: 14px;
    color: var(--ink);
    background-color: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 1px 2px rgba(7, 47, 82, 0.025);
    font-size: 0.79rem;
}

textarea.form-control {
    min-height: 130px;
    padding-top: 13px;
    resize: vertical;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(8, 126, 255, 0.62);
    background-color: #fff;
    box-shadow: 0 0 0 0.24rem rgba(8, 126, 255, 0.09), 0 13px 30px rgba(8, 126, 255, 0.08);
}

.input-icon-wrap {
    position: relative;
}

.input-icon-wrap > span {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 2;
    color: var(--blue-600);
    transform: translateY(-50%);
}

.input-icon-wrap > span svg {
    width: 18px;
    height: 18px;
}

.input-icon-wrap .form-control {
    padding-right: 43px;
}

.privacy-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #526a7e;
    cursor: pointer;
}

.privacy-check strong {
    padding-top: 1px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.8;
}

.field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.62rem;
}

.auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 10%, rgba(54, 197, 255, 0.17), transparent 26rem),
        radial-gradient(circle at 90% 90%, rgba(255, 138, 0, 0.12), transparent 25rem),
        linear-gradient(145deg, #fff, #edf8ff);
}

.auth-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 30px 0 50px;
}

.auth-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.auth-brand-row > a:last-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--blue-700);
    font-size: 0.75rem;
    font-weight: 900;
}

.auth-brand-row > a:last-child svg {
    width: 16px;
    height: 16px;
}

.auth-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 670px;
    overflow: hidden;
    border-radius: 34px;
    box-shadow: var(--shadow-lg);
}

.auth-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 55px;
    color: #fff;
    background:
        radial-gradient(circle at 20% 10%, rgba(54, 197, 255, 0.32), transparent 18rem),
        radial-gradient(circle at 90% 90%, rgba(255, 138, 0, 0.14), transparent 18rem),
        linear-gradient(145deg, #03182e, #064579);
}

.auth-visual-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.27;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, #000, transparent 80%);
}

.auth-visual-copy,
.auth-feature-list,
.register-path-preview {
    position: relative;
    z-index: 1;
}

.auth-visual-copy h1 {
    max-width: 620px;
    margin: 24px 0 15px;
    font-size: clamp(2.1rem, 4vw, 3.75rem);
    font-weight: 950;
    line-height: 1.42;
    letter-spacing: -0.05em;
}

.auth-visual-copy p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    line-height: 2;
}

.auth-feature-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.auth-feature-list div {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 16px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.auth-feature-list span {
    display: grid;
    width: 41px;
    height: 41px;
    place-items: center;
    border-radius: 13px;
    color: #aeeaff;
    background: rgba(54, 197, 255, 0.1);
}

.auth-feature-list strong {
    font-size: 0.68rem;
}

.auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 55px;
    border: 0;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.86);
}

.auth-form-heading {
    margin-bottom: 27px;
}

.auth-icon {
    display: grid;
    width: 55px;
    height: 55px;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-700));
    box-shadow: var(--shadow-blue);
}

.auth-form-heading h2 {
    margin: 22px 0 8px;
    font-size: 1.55rem;
    font-weight: 950;
}

.auth-form-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 23px 0;
    color: var(--muted);
    font-size: 0.64rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--line);
}

.register-path-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.register-path-preview > div {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.06);
    text-align: center;
}

.register-path-preview > div > span {
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 14px;
    color: #9fe7ff;
    background: rgba(54, 197, 255, 0.1);
}

.register-path-preview > div:nth-child(2) > span {
    color: #ffd49b;
    background: rgba(255, 138, 0, 0.1);
}

.register-path-preview strong,
.register-path-preview small {
    display: block;
}

.register-path-preview strong {
    font-size: 0.75rem;
}

.register-path-preview small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.61rem;
}

.account-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.account-type-grid input {
    position: absolute;
    opacity: 0;
}

.account-type-grid label > span {
    display: grid;
    min-height: 128px;
    align-content: center;
    justify-items: center;
    padding: 14px;
    border: 1px solid rgba(8, 126, 255, 0.16);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    text-align: center;
}

.account-type-grid input:checked + span {
    border-color: var(--blue-600);
    background: rgba(8, 126, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(8, 126, 255, 0.07);
}

.account-type-grid svg {
    color: var(--blue-600);
}

.account-type-grid strong,
.account-type-grid small {
    display: block;
}

.account-type-grid strong {
    margin-top: 10px;
    font-size: 0.72rem;
}

.account-type-grid small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.6rem;
}

.detail-hero {
    padding: 55px 0 28px;
}

.breadcrumb-ui {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 17px;
    color: var(--muted);
    font-size: 0.65rem;
}

.breadcrumb-ui a:hover {
    color: var(--blue-700);
}

.breadcrumb-ui strong {
    color: var(--ink-soft);
    font-weight: 850;
}

.detail-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    border-radius: 28px;
}

.detail-brand-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 20px;
}

.detail-logo {
    width: 86px;
    height: 86px;
    border: 4px solid rgba(255, 255, 255, 0.78);
    border-radius: 27px;
    font-size: 1.35rem;
}

.detail-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.detail-badges > span:not(.verified-chip) {
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.08);
    font-size: 0.62rem;
    font-weight: 850;
}

.detail-brand-block h1 {
    margin: 10px 0 6px;
    font-size: 2rem;
    font-weight: 950;
    direction: ltr;
    text-align: right;
}

.detail-brand-block p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.85;
}

.detail-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.detail-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 15px;
}

.detail-summary-grid article {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px;
    border-radius: 18px;
}

.detail-summary-grid article > span {
    display: grid;
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 13px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.08);
}

.detail-summary-grid small,
.detail-summary-grid strong {
    display: block;
}

.detail-summary-grid small {
    color: var(--muted);
    font-size: 0.59rem;
}

.detail-summary-grid strong {
    margin-top: 4px;
    font-size: 0.67rem;
}

.detail-content-stack {
    display: grid;
    gap: 18px;
}

.detail-section {
    padding: 29px;
    border-radius: 25px;
}

.detail-section-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 19px;
}

.detail-section-head > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: var(--blue-600);
    background: rgba(8, 126, 255, 0.08);
}

.detail-section-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 950;
}

.detail-section > p {
    margin: 0;
    color: var(--muted);
    line-height: 2;
}

.detail-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.detail-highlight-grid div {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
}

.detail-highlight-grid small,
.detail-highlight-grid strong {
    display: block;
}

.detail-highlight-grid small {
    color: var(--muted);
    font-size: 0.58rem;
}

.detail-highlight-grid strong {
    margin-top: 5px;
    font-size: 0.72rem;
}

.financial-table {
    display: grid;
}

.financial-table div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 3px;
    border-bottom: 1px solid var(--line);
}

.financial-table div:last-child {
    border-bottom: 0;
}

.financial-table span {
    color: var(--muted);
    font-size: 0.72rem;
}

.financial-table strong {
    color: var(--ink-soft);
    font-size: 0.72rem;
}

.legal-note {
    display: flex;
    gap: 11px;
    margin-top: 18px;
    padding: 15px;
    border-radius: 15px;
    background: rgba(255, 138, 0, 0.08);
}

.legal-note span {
    color: var(--orange-600);
}

.legal-note p {
    margin: 0;
    color: #805b32;
    font-size: 0.65rem;
    line-height: 1.85;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.support-grid > div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
}

.support-grid > div > svg {
    color: var(--success);
}

.support-grid strong,
.support-grid small {
    display: block;
}

.support-grid strong {
    font-size: 0.7rem;
}

.support-grid small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.58rem;
}

.requirement-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.requirement-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.requirement-list li:last-child {
    border-bottom: 0;
}

.requirement-list span {
    color: var(--muted);
    font-size: 0.72rem;
}

.requirement-list strong {
    font-size: 0.72rem;
}

.detail-sidebar {
    position: sticky;
    top: 110px;
    padding: 28px;
    border-radius: 25px;
}

.detail-sidebar h2 {
    margin: 19px 0 11px;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.55;
}

.detail-sidebar > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.9;
}

.sidebar-checks {
    display: grid;
    gap: 10px;
    margin: 22px 0;
    padding: 18px 0;
    border-block: 1px solid var(--line);
}

.sidebar-checks span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #466177;
    font-size: 0.7rem;
    font-weight: 800;
}

.sidebar-checks svg {
    width: 16px;
    height: 16px;
    color: var(--success);
}

.detail-sidebar .btn + .btn {
    margin-top: 9px;
}

.detail-sidebar > small {
    display: block;
    margin-top: 15px;
    color: var(--muted);
    font-size: 0.59rem;
    line-height: 1.7;
    text-align: center;
}

.design-system-stack {
    display: grid;
    gap: 20px;
}

.design-block {
    padding: 30px;
    border-radius: 26px;
}

.design-block-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.design-block-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.design-block-head > div > span {
    color: var(--orange-500);
    font-size: 0.7rem;
    font-weight: 950;
}

.design-block-head h2 {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 950;
}

.design-block-head p {
    max-width: 610px;
    margin: 0;
    color: var(--muted);
    font-size: 0.7rem;
    line-height: 1.8;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.color-chip {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.color-chip > span {
    display: block;
    height: 78px;
}

.color-blue > span {
    background: var(--blue-600);
}

.color-cyan > span {
    background: var(--cyan-400);
}

.color-orange > span {
    background: var(--orange-500);
}

.color-ink > span {
    background: var(--ink);
}

.color-surface > span {
    background: var(--surface);
}

.color-chip strong,
.color-chip small {
    display: block;
    padding-inline: 12px;
}

.color-chip strong {
    padding-top: 11px;
    font-size: 0.7rem;
}

.color-chip small {
    padding-top: 4px;
    padding-bottom: 11px;
    color: var(--muted);
    font-size: 0.59rem;
    direction: ltr;
    text-align: right;
}

.component-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.alert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ui-alert {
    display: flex;
    gap: 11px;
    padding: 15px;
    border-radius: 15px;
}

.ui-alert > span {
    flex: 0 0 auto;
}

.ui-alert strong,
.ui-alert p {
    display: block;
}

.ui-alert strong {
    font-size: 0.72rem;
}

.ui-alert p {
    margin: 4px 0 0;
    font-size: 0.63rem;
}

.ui-alert-success {
    color: #087956;
    background: rgba(12, 173, 120, 0.09);
}

.ui-alert-info {
    color: #075ca7;
    background: rgba(8, 126, 255, 0.08);
}

.ui-alert-warning {
    color: #8d5d18;
    background: rgba(255, 138, 0, 0.1);
}

.status-blue {
    color: var(--blue-700);
    background: rgba(8, 126, 255, 0.09);
}

.status-orange {
    color: var(--orange-600);
    background: rgba(255, 138, 0, 0.1);
}

.status-green {
    color: var(--success);
    background: rgba(12, 173, 120, 0.1);
}

.ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.ui-table th {
    padding: 0 14px 8px;
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 850;
}

.ui-table td {
    padding: 12px 14px;
    border-block: 1px solid var(--line);
    color: #476177;
    background: rgba(255, 255, 255, 0.55);
    font-size: 0.68rem;
}

.ui-table td:first-child {
    border-inline-start: 1px solid var(--line);
    border-radius: 0 13px 13px 0;
}

.ui-table td:last-child {
    border-inline-end: 1px solid var(--line);
    border-radius: 13px 0 0 13px;
}

.table-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.table-brand > span {
    width: 35px;
    height: 35px;
    border-radius: 11px;
    font-size: 0.58rem;
}

.table-brand strong {
    color: var(--ink-soft);
    font-size: 0.7rem;
    direction: ltr;
}

.glass-modal {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    background: rgba(248, 253, 255, 0.95);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(24px);
}

.glass-modal .modal-header,
.glass-modal .modal-footer {
    border-color: var(--line);
}

.glass-modal .modal-header {
    align-items: flex-start;
}

.glass-modal .modal-title {
    margin-top: 13px;
    font-size: 1.15rem;
    font-weight: 950;
}

.site-footer {
    position: relative;
    padding: 65px 0 22px;
    border-top: 1px solid rgba(8, 126, 255, 0.1);
    background:
        radial-gradient(circle at 15% 100%, rgba(255, 138, 0, 0.08), transparent 20rem),
        linear-gradient(145deg, rgba(246, 252, 255, 0.9), rgba(230, 246, 255, 0.78));
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 0.72fr) 1.25fr;
    gap: 34px;
}

.footer-brand-column p {
    max-width: 290px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.95;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #087956;
    background: rgba(12, 173, 120, 0.08);
    font-size: 0.62rem;
    font-weight: 850;
}

.footer-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(12, 173, 120, 0.09);
}

.footer-links-column h3,
.footer-newsletter-column h3 {
    margin: 0 0 17px;
    font-size: 0.78rem;
    font-weight: 950;
}

.footer-links-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-links-column a {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.68rem;
}

.footer-links-column a:hover {
    color: var(--blue-700);
}

.footer-newsletter-column p {
    margin: 0 0 15px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.8;
}

.newsletter-form {
    display: flex;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
}

.newsletter-form input {
    flex: 1;
    min-width: 0;
    padding: 0 9px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 0.68rem;
}

.newsletter-form button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--blue-600);
}

.newsletter-form button svg {
    width: 16px;
    height: 16px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 47px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.62rem;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom > div {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
}

.compare-tray {
    position: fixed;
    right: 50%;
    bottom: 20px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 340px;
    padding: 10px 12px;
    border: 1px solid rgba(8, 126, 255, 0.2);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(50%, 30px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    backdrop-filter: blur(20px);
}

.compare-tray.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(50%, 0);
}

.compare-tray > div {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 7px;
}

.compare-count {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: var(--orange-500);
    font-size: 0.67rem;
    font-weight: 950;
}

.compare-tray strong {
    font-size: 0.68rem;
}

.compare-tray .icon-button {
    width: 34px;
    height: 34px;
}

.glass-toast {
    overflow: hidden;
    border: 1px solid rgba(8, 126, 255, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(20px);
}

.glass-toast .toast-body {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #405b72;
    font-size: 0.72rem;
    font-weight: 800;
}

.toast-icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--success);
}

.toast-icon svg {
    width: 16px;
    height: 16px;
}

.back-to-top {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 1020;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(8, 126, 255, 0.2);
    border-radius: 14px;
    color: var(--blue-700);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: rotate(90deg) translateX(15px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    transform: rotate(90deg) translateX(0);
}

.error-section {
    display: grid;
    min-height: calc(100vh - 200px);
    place-items: center;
    padding: 80px 0;
}

.error-card {
    max-width: 680px;
    padding: 55px 35px;
    border-radius: 28px;
    text-align: center;
}

.error-code {
    color: transparent;
    background: linear-gradient(135deg, var(--blue-600), var(--orange-500));
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(5rem, 15vw, 9rem);
    font-weight: 950;
    line-height: 1;
}

.error-card h1 {
    margin: 24px 0 12px;
    font-weight: 950;
}

.error-card p {
    margin-bottom: 25px;
    color: var(--muted);
}

.install-page {
    min-height: 100vh;
}

.install-shell {
    max-width: 1180px;
}

.install-checks {
    top: 30px;
}

.check-list {
    display: grid;
    gap: 10px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.55);
}

.check-row strong,
.check-row small {
    display: block;
}

.check-row strong {
    font-size: 0.78rem;
}

.check-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.65rem;
}

.check-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.is-ok .check-dot {
    background: var(--success);
    box-shadow: 0 0 0 6px rgba(12, 173, 120, 0.1);
}

.is-error .check-dot {
    background: var(--danger);
    box-shadow: 0 0 0 6px rgba(220, 75, 92, 0.1);
}

.server-status {
    padding: 14px 16px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 900;
}

.server-status.ready {
    color: #087956;
    background: rgba(12, 173, 120, 0.1);
}

.server-status.blocked {
    color: #a32c3d;
    background: rgba(220, 75, 92, 0.1);
}

.section-title {
    position: relative;
    padding-inline-start: 14px;
}

.section-title::before {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 0;
    width: 4px;
    height: 21px;
    border-radius: 5px;
    background: linear-gradient(to bottom, var(--blue-600), var(--orange-500));
}

.form-note {
    color: var(--muted);
    font-size: 0.68rem;
    text-align: center;
}

.success-icon {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #42d69f, #0c9c6d);
    box-shadow: 0 18px 40px rgba(12, 156, 109, 0.25);
    font-size: 2rem;
    font-weight: 900;
}

.install-summary {
    display: grid;
    gap: 10px;
    max-width: 620px;
    margin-inline: auto;
}

.install-summary div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 17px;
    border-radius: 14px;
    background: rgba(8, 126, 255, 0.055);
}

.install-summary span {
    color: var(--muted);
}

.install-summary strong {
    overflow-wrap: anywhere;
    direction: ltr;
}

@media (max-width: 1199.98px) {
    :root {
        --header-height: 72px;
    }

    .hero-section {
        padding-top: 70px;
    }

    .hero-visual {
        max-width: 650px;
        margin: 0 auto;
    }

    .category-grid,
    .services-grid,
    .brand-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1.4fr repeat(2, 0.8fr) 1.2fr;
    }

    .footer-links-column:nth-of-type(4) {
        display: none;
    }

    .detail-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .announcement-inner a {
        display: none;
    }

    .announcement-inner {
        justify-content: center;
    }

    .section-space {
        padding: 72px 0;
    }

    .hero-title {
        font-size: clamp(2.45rem, 8vw, 4.6rem);
    }

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

    .search-field {
        border: 1px solid var(--line);
        border-radius: 14px;
    }

    .search-field-main {
        grid-column: 1 / 3;
    }

    .hero-search-button {
        grid-column: 1 / 3;
    }

    .trust-strip-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 0;
    }

    .trust-strip-inner div:nth-child(2) {
        border-inline-end: 0;
    }

    .split-heading {
        align-items: flex-start;
    }

    .path-grid,
    .service-offer-grid,
    .auth-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .insight-panel {
        grid-template-columns: 65px 1fr;
    }

    .insight-chart {
        grid-column: 1 / 3;
    }

    .cta-panel {
        grid-template-columns: 75px 1fr;
    }

    .cta-actions {
        grid-column: 1 / 3;
        justify-content: center;
    }

    .catalog-sidebar {
        position: static;
    }

    .brand-dashboard-preview {
        max-width: 650px;
        margin-inline: auto;
    }

    .brand-logo-grid,
    .about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-process {
        grid-template-columns: 1fr;
    }

    .when-service-grid {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1.5fr repeat(2, 0.8fr);
    }

    .footer-newsletter-column {
        grid-column: 1 / 4;
    }

    .auth-visual-panel {
        min-height: 500px;
    }

    .auth-form-panel {
        min-height: 600px;
    }

    .detail-hero-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-actions {
        width: 100%;
    }

    .detail-actions .btn {
        flex: 1;
    }

    .detail-sidebar {
        position: static;
    }

    .color-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .alert-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .container,
    .auth-shell {
        width: min(100% - 28px, var(--container));
    }

    .announcement-bar {
        min-height: 34px;
    }

    .announcement-inner {
        min-height: 34px;
        font-size: 0.67rem;
    }

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

    .brand-copy small {
        display: none;
    }

    .section-space {
        padding: 58px 0;
    }

    .hero-section {
        padding: 55px 0 58px;
    }

    .hero-title {
        margin-top: 19px;
        font-size: clamp(2.25rem, 11vw, 3.6rem);
        letter-spacing: -0.05em;
    }

    .hero-description {
        font-size: 0.9rem;
    }

    .hero-search {
        grid-template-columns: 1fr;
        padding: 9px;
    }

    .search-field-main,
    .hero-search-button {
        grid-column: auto;
    }

    .search-field {
        min-height: 60px;
    }

    .hero-quick-links {
        line-height: 1.8;
    }

    .hero-trust-row {
        align-items: flex-start;
    }

    .hero-visual {
        min-height: 490px;
        border-radius: 28px;
    }

    .matching-card {
        top: 92px;
        right: 16px;
        left: 16px;
        padding: 18px;
        transform: none;
    }

    .matching-metrics {
        gap: 6px;
    }

    .matching-metrics div {
        padding: 8px;
    }

    .floating-card-top {
        top: 18px;
        left: 14px;
    }

    .floating-card-bottom {
        right: 15px;
        bottom: 21px;
    }

    .hero-stage-chip {
        display: none;
    }

    .trust-strip-inner {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .trust-strip-inner div,
    .trust-strip-inner div:nth-child(2) {
        padding: 12px;
        border-inline-end: 0;
        border-bottom: 1px solid var(--line);
    }

    .trust-strip-inner div:last-child {
        border-bottom: 0;
    }

    .split-heading {
        flex-direction: column;
    }

    .category-grid,
    .services-grid,
    .brand-info-grid,
    .brand-logo-grid,
    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .path-card {
        min-height: 0;
        padding: 28px;
    }

    .path-card h3 {
        font-size: 1.4rem;
    }

    .insight-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 28px;
        text-align: center;
    }

    .insight-chart {
        grid-column: auto;
    }

    .cta-panel {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 28px;
        text-align: center;
    }

    .cta-actions {
        grid-column: auto;
        width: 100%;
        flex-direction: column;
    }

    .page-hero {
        padding: 55px 0 35px;
    }

    .page-hero-inner {
        align-items: flex-start;
        flex-direction: column;
        padding: 27px;
    }

    .page-hero-stat {
        width: 110px;
        height: 110px;
    }

    .page-hero-stat strong {
        font-size: 2rem;
    }

    .page-hero-stat span {
        margin-top: -25px;
    }

    .page-hero h1,
    .page-hero-center h1,
    .brands-hero h1,
    .about-hero h1 {
        font-size: clamp(2rem, 10vw, 3.1rem);
    }

    .catalog-toolbar {
        flex-wrap: wrap;
    }

    .catalog-search {
        flex-basis: 100%;
    }

    .catalog-sort {
        flex: 1;
        border-inline-start: 0;
    }

    [data-catalog-grid].list-view .opportunity-card {
        display: block;
    }

    [data-catalog-grid].list-view .opportunity-cover {
        min-height: 160px;
    }

    .brand-dashboard-preview {
        min-height: 420px;
        padding: 20px;
        transform: none;
    }

    .brand-logo-card {
        grid-template-columns: 48px 1fr;
    }

    .brand-logo-card .verified-chip {
        grid-column: 1 / 3;
    }

    .readiness-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-process ol {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .service-process li {
        grid-template-columns: 42px 1fr;
        align-items: center;
        justify-items: start;
        text-align: right;
    }

    .service-process li:not(:last-child)::after {
        display: none;
    }

    .about-timeline div {
        grid-template-columns: 80px 1fr;
    }

    .about-timeline small {
        grid-column: 2;
    }

    .contact-info-panel,
    .contact-form {
        padding: 24px;
    }

    .auth-shell {
        padding-top: 18px;
    }

    .auth-brand-row .brand-copy strong {
        font-size: 0.85rem;
    }

    .auth-brand-row > a:last-child {
        font-size: 0.65rem;
    }

    .auth-visual-panel {
        min-height: 470px;
        padding: 35px 25px;
    }

    .auth-visual-copy h1 {
        font-size: 2.2rem;
    }

    .auth-feature-list {
        grid-template-columns: 1fr;
    }

    .auth-form-panel {
        min-height: 0;
        padding: 38px 24px;
    }

    .register-path-preview,
    .account-type-grid {
        grid-template-columns: 1fr;
    }

    .detail-brand-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-actions {
        flex-wrap: wrap;
    }

    .detail-actions .btn {
        flex-basis: 100%;
    }

    .detail-summary-grid,
    .detail-highlight-grid,
    .support-grid {
        grid-template-columns: 1fr;
    }

    .financial-table div,
    .requirement-list li {
        align-items: flex-start;
        flex-direction: column;
    }

    .design-block {
        padding: 23px;
    }

    .design-block-head {
        flex-direction: column;
    }

    .color-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand-column,
    .footer-newsletter-column {
        grid-column: 1 / 3;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .compare-tray {
        right: 14px;
        left: 14px;
        min-width: 0;
        transform: translateY(30px);
    }

    .compare-tray.show {
        transform: translateY(0);
    }

    .compare-tray strong {
        display: none;
    }

    .back-to-top {
        left: 14px;
        bottom: 84px;
    }

    .install-summary div {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .brand-symbol {
        width: 37px;
        height: 37px;
    }

    .brand-copy strong {
        max-width: 135px;
        font-size: 0.86rem;
    }

    .matching-brand {
        padding: 11px;
    }

    .matching-logo {
        width: 42px;
        height: 42px;
    }

    .matching-metrics strong {
        font-size: 0.58rem;
    }

    .floating-card {
        padding: 10px;
    }

    .floating-card small {
        display: none;
    }

    .color-grid {
        grid-template-columns: 1fr;
    }
}

.btn-brand {
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-600) 52%, #045fc6);
    box-shadow: var(--shadow-blue), inset 0 1px 1px rgba(255, 255, 255, 0.52);
}

.btn-brand:hover,
.btn-brand:focus {
    color: #fff;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 950;
}

.brand-mark-core {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;
    border-radius: 14px 5px 14px 5px;
    background: linear-gradient(135deg, var(--cyan-400), var(--blue-600) 58%, #045fc6);
    box-shadow: var(--shadow-blue);
    transform: rotate(9deg);
}

.brand-mark-core::after {
    content: "";
    position: absolute;
    left: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--orange-500);
}
.database-hero{padding-bottom:42px}.database-health-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px;color:#637b90;font-size:13px;font-weight:750}.database-health-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(22,138,230,.17)}.database-health-pill i{width:8px;height:8px;border-radius:50%}.database-health-pill.is-ready{color:#087a59}.database-health-pill.is-ready i{background:#13c98b;box-shadow:0 0 12px rgba(19,201,139,.62)}.database-health-pill.is-warning{color:#be6400}.database-health-pill.is-warning i{background:#ff9209;box-shadow:0 0 12px rgba(255,146,9,.62)}.database-overview-section{padding-top:30px}.database-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.database-summary-card{padding:24px;border-radius:22px}.database-summary-card>span{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;color:#087eff;background:linear-gradient(145deg,rgba(16,164,255,.15),rgba(8,126,255,.06));border:1px solid rgba(8,126,255,.12)}.database-summary-card>span svg{width:22px;height:22px}.database-summary-card strong{display:block;margin:17px 0 4px;font-size:26px;font-weight:950;color:#07111f}.database-summary-card p{margin:0;color:#6a8195;font-size:13px}.database-modules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:22px}.database-module-card{padding:27px;border-radius:25px}.database-module-heading{display:flex;gap:14px;align-items:flex-start}.database-module-heading>span{width:39px;min-width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#1da7ff,#087eff);box-shadow:0 11px 25px rgba(8,126,255,.22);color:#fff;font-weight:900}.database-module-heading h2{font-size:19px;font-weight:900;margin:1px 0 7px}.database-module-heading p{font-size:13px;line-height:1.8;color:#637a8e;margin:0}.database-table-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:19px}.database-table-list code{direction:ltr;display:inline-flex;padding:7px 9px;border-radius:9px;background:rgba(2,124,226,.065);border:1px solid rgba(2,124,226,.11);color:#176da9;font-size:11px}.database-warning-card{display:flex;align-items:flex-start;gap:17px;padding:27px;margin-top:20px;border-radius:24px;border-color:rgba(255,146,9,.3);background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,244,229,.72))}.database-warning-card>div:first-child{width:50px;min-width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:rgba(255,146,9,.1);color:#ef7900}.database-warning-card svg{width:25px;height:25px}.database-warning-card h2{font-size:20px;font-weight:900;margin:0 0 7px}.database-warning-card p{color:#6d8092;margin:0}.database-warning-card .database-table-list{margin-top:13px}@media(max-width:980px){.database-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.database-modules-grid{grid-template-columns:1fr}.database-module-card{padding:23px}.database-health-row{gap:9px 13px}}@media(max-width:520px){.database-summary-grid{grid-template-columns:1fr}.database-warning-card{flex-direction:column}.database-health-row{align-items:flex-start;flex-direction:column}}
.public-flash-stack{position:relative;z-index:30;padding-top:18px}.public-flash-stack:empty{display:none}.app-alert{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;padding:15px 17px;border:1px solid transparent;border-radius:17px;box-shadow:0 14px 38px rgba(19,84,143,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.app-alert>span{display:grid;width:35px;min-width:35px;height:35px;place-items:center;border-radius:11px}.app-alert>span svg{width:18px;height:18px}.app-alert p{margin:4px 0 0;font-size:.74rem;font-weight:750;line-height:1.8}.app-alert-success{color:#087555;border-color:rgba(9,173,119,.22);background:rgba(235,255,248,.9)}.app-alert-success>span{background:rgba(9,173,119,.1)}.app-alert-danger{color:#a63737;border-color:rgba(220,64,64,.2);background:rgba(255,243,243,.92)}.app-alert-danger>span{background:rgba(220,64,64,.09)}.app-alert-warning{color:#8a5711;border-color:rgba(255,146,9,.24);background:rgba(255,249,237,.94)}.app-alert-warning>span{background:rgba(255,146,9,.11)}.app-alert-info{color:#075d9e;border-color:rgba(8,126,255,.2);background:rgba(239,249,255,.94)}.app-alert-info>span{background:rgba(8,126,255,.09)}.password-field{position:relative}.password-field .form-control{padding-left:48px}.password-field>button{position:absolute;left:7px;top:50%;display:grid;width:36px;height:36px;padding:0;place-items:center;border:0;border-radius:11px;color:#5d7890;background:rgba(8,126,255,.07);transform:translateY(-50%)}.password-field>button:hover{color:#087eff;background:rgba(8,126,255,.12)}.password-field>button svg{width:17px;height:17px}.password-meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.password-meter:before{content:"";height:6px;border-radius:999px;background:rgba(8,126,255,.08)}.password-meter>span{position:absolute;height:6px;width:0;border-radius:999px;background:linear-gradient(90deg,#ff9209,#ffcf48);transition:.25s}.password-meter small{color:#71879a;font-size:.61rem;white-space:nowrap}.password-meter[data-strength="2"]>span{width:30%;background:#ef7e22}.password-meter[data-strength="3"]>span{width:55%;background:#ffc52c}.password-meter[data-strength="4"]>span{width:78%;background:#22b58b}.password-meter[data-strength="5"]>span{width:100%;background:#08a975}.otp-input{height:62px!important;font-size:1.42rem!important;font-weight:900!important;letter-spacing:.35em!important;text-align:center}.verification-note{display:flex;gap:12px;padding:16px;margin-bottom:22px;border:1px solid rgba(8,126,255,.13);border-radius:16px;color:#537087;background:rgba(8,126,255,.055)}.verification-note>span{display:grid;width:39px;min-width:39px;height:39px;place-items:center;border-radius:12px;color:#087eff;background:#fff}.verification-note>span svg{width:19px;height:19px}.verification-note p{margin:0;font-size:.68rem;line-height:1.9}.verification-note code{direction:ltr;color:#075f9f}.auth-grid-compact{min-height:610px}.auth-grid-register{min-height:810px}.auth-grid-register .auth-form-panel{padding-block:42px}.header-actions form,.account-topbar-actions form,.mobile-nav-actions form{margin:0}.header-account-link{max-width:175px}.header-account-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-page{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 10% 10%,rgba(54,197,255,.16),transparent 30rem),radial-gradient(circle at 90% 90%,rgba(255,146,9,.1),transparent 28rem),linear-gradient(145deg,#f9fdff,#eef8ff 55%,#fffaf4)}.account-shell{position:relative;z-index:2;display:grid;grid-template-columns:285px minmax(0,1fr);gap:20px;width:min(1440px,calc(100% - 40px));min-height:100vh;margin:0 auto;padding:20px 0}.account-sidebar{position:sticky;top:20px;display:flex;height:calc(100vh - 40px);flex-direction:column;padding:20px;border-radius:27px;overflow-y:auto}.account-sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 20px;border-bottom:1px solid var(--line)}.account-user-card{display:flex;align-items:center;gap:12px;padding:20px 4px 14px}.account-user-card img{width:52px;height:52px;object-fit:cover;border:3px solid rgba(255,255,255,.82);border-radius:17px;box-shadow:0 10px 24px rgba(8,126,255,.18)}.account-user-card strong,.account-user-card span{display:block}.account-user-card strong{max-width:165px;overflow:hidden;color:#0a1b2c;font-size:.8rem;font-weight:950;text-overflow:ellipsis;white-space:nowrap}.account-user-card span{margin-top:4px;color:#7590a5;font-size:.62rem}.profile-progress-card{padding:14px;border:1px solid rgba(8,126,255,.12);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(232,247,255,.62))}.profile-progress-card>div:first-child{display:flex;align-items:center;justify-content:space-between;color:#58758c;font-size:.64rem;font-weight:800}.profile-progress-card strong{color:#087eff}.profile-progress-track{height:7px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(8,126,255,.08)}.profile-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#36c5ff,#087eff);box-shadow:0 0 14px rgba(8,126,255,.35)}.account-navigation{display:grid;gap:6px;margin-top:18px}.account-navigation a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 13px;border:1px solid transparent;border-radius:14px;color:#526d83;font-size:.7rem;font-weight:850;transition:.2s}.account-navigation a>span{display:flex;align-items:center;gap:10px}.account-navigation a svg{width:18px;height:18px}.account-navigation a>svg{width:14px;height:14px;opacity:.45}.account-navigation a:hover,.account-navigation a.active{color:#087eff;border-color:rgba(8,126,255,.13);background:linear-gradient(145deg,rgba(8,126,255,.09),rgba(54,197,255,.035))}.account-navigation a.active{box-shadow:inset -3px 0 0 #087eff}.account-sidebar-note{display:flex;gap:10px;margin-top:auto;padding:14px;border:1px solid rgba(255,146,9,.18);border-radius:16px;background:rgba(255,146,9,.065)}.account-sidebar-note>span{display:grid;width:36px;min-width:36px;height:36px;place-items:center;border-radius:11px;color:#e97700;background:#fff}.account-sidebar-note strong,.account-sidebar-note small{display:block}.account-sidebar-note strong{font-size:.65rem}.account-sidebar-note small{margin-top:3px;color:#7b8995;font-size:.56rem;line-height:1.7}.account-main{min-width:0}.account-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:14px 18px;border-radius:24px}.account-topbar-title{display:flex;align-items:center;gap:12px}.account-topbar-title span,.account-topbar-title strong{display:block}.account-topbar-title span{color:#7890a4;font-size:.59rem}.account-topbar-title strong{margin-top:3px;font-size:.8rem;font-weight:950}.account-topbar-actions{display:flex;align-items:center;gap:9px}.account-topbar-actions .btn svg{width:16px;height:16px}.account-content{padding:28px 2px 50px}.account-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.account-page-heading h1{margin:12px 0 7px;font-size:clamp(1.7rem,3vw,2.6rem);font-weight:950;letter-spacing:-.04em}.account-page-heading p{max-width:740px;margin:0;color:#627c91;font-size:.74rem;line-height:1.9}.profile-score-pill,.security-status-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid rgba(8,126,255,.16);border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 10px 28px rgba(25,109,178,.08);white-space:nowrap}.profile-score-pill span{color:#6c8295;font-size:.62rem}.profile-score-pill strong{color:#087eff;font-size:.8rem}.security-status-pill{font-size:.67rem;font-weight:900}.security-status-pill svg{width:17px;height:17px}.security-status-pill.is-secure{color:#08795a;border-color:rgba(9,173,119,.2);background:rgba(239,255,248,.86)}.security-status-pill.is-warning{color:#99600f;border-color:rgba(255,146,9,.22);background:rgba(255,248,235,.88)}.account-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.account-stat-card{display:flex;align-items:center;gap:14px;padding:20px;border-radius:21px}.account-stat-icon{display:grid;width:49px;min-width:49px;height:49px;place-items:center;border-radius:15px}.account-stat-icon svg{width:23px;height:23px}.account-stat-icon.tone-blue{color:#087eff;background:rgba(8,126,255,.1)}.account-stat-icon.tone-green{color:#07966b;background:rgba(9,173,119,.1)}.account-stat-icon.tone-orange{color:#ea7900;background:rgba(255,146,9,.1)}.account-stat-icon.tone-purple{color:#714cdb;background:rgba(113,76,219,.1)}.account-stat-card small,.account-stat-card strong,.account-stat-card em{display:block}.account-stat-card small{color:#70889c;font-size:.59rem}.account-stat-card strong{margin:5px 0 3px;color:#0c1d2d;font-size:1rem;font-style:normal;font-weight:950}.account-stat-card em{color:#8295a5;font-size:.53rem;font-style:normal}.account-dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px}.account-panel{padding:24px;border-radius:24px}.account-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.account-panel-heading span,.account-panel-heading h2{display:block}.account-panel-heading>div>span{color:#7990a3;font-size:.59rem;font-weight:850}.account-panel-heading h2{margin:5px 0 0;font-size:1rem;font-weight:950}.panel-number{color:rgba(8,126,255,.13);font-size:2.25rem!important;font-weight:950;line-height:1}.account-action-list{display:grid;gap:9px}.account-action-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid rgba(8,126,255,.095);border-radius:16px;color:inherit;background:rgba(255,255,255,.52);transition:.2s}.account-action-list a:hover{border-color:rgba(8,126,255,.22);transform:translateY(-1px)}.account-action-list>a>svg{width:15px;height:15px;color:#91a5b5}.action-status{display:grid;width:39px;height:39px;place-items:center;border-radius:12px;color:#087eff;background:rgba(8,126,255,.08)}.action-status.is-done{color:#08795a;background:rgba(9,173,119,.1)}.action-status svg{width:19px;height:19px}.account-action-list strong,.account-action-list small{display:block}.account-action-list strong{font-size:.68rem}.account-action-list small{margin-top:4px;color:#7b91a3;font-size:.56rem;line-height:1.7}.activity-timeline{display:grid;gap:3px}.activity-item{position:relative;display:flex;gap:12px;min-height:52px;padding:8px 0}.activity-item:before{content:"";position:absolute;right:5px;top:26px;bottom:-14px;width:1px;background:rgba(8,126,255,.12)}.activity-item:last-child:before{display:none}.activity-item>i{position:relative;z-index:1;width:11px;min-width:11px;height:11px;margin-top:5px;border:3px solid #fff;border-radius:50%;background:#087eff;box-shadow:0 0 0 3px rgba(8,126,255,.13)}.activity-item strong,.activity-item small{display:block}.activity-item strong{font-size:.66rem}.activity-item small{margin-top:5px;color:#8498a8;font-size:.54rem;direction:ltr;text-align:right}.account-empty-state{display:grid;justify-items:center;gap:10px;padding:35px 15px;color:#8093a3;text-align:center}.account-empty-state>span{display:grid;width:48px;height:48px;place-items:center;border-radius:15px;background:rgba(8,126,255,.07)}.account-empty-state p{margin:0;font-size:.65rem}.account-form-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.account-form-main{min-width:0}.account-form-side{display:grid;align-content:start;gap:14px}.avatar-upload-card{text-align:center}.avatar-upload-card>img{width:118px;height:118px;object-fit:cover;border:5px solid rgba(255,255,255,.8);border-radius:34px;box-shadow:0 16px 40px rgba(8,126,255,.18)}.avatar-upload-control{display:flex;align-items:center;gap:10px;margin-top:17px;padding:12px;border:1px dashed rgba(8,126,255,.28);border-radius:14px;color:#496b84;background:rgba(8,126,255,.04);cursor:pointer;text-align:right}.avatar-upload-control svg{width:20px;height:20px;color:#087eff}.avatar-upload-control strong,.avatar-upload-control small{display:block}.avatar-upload-control strong{font-size:.62rem}.avatar-upload-control small{margin-top:3px;color:#8195a5;font-size:.52rem}.profile-guidance-card{text-align:center}.profile-guidance-card>span{display:grid;width:49px;height:49px;margin:0 auto 13px;place-items:center;border-radius:16px;color:#087eff;background:rgba(8,126,255,.08)}.profile-guidance-card h3{font-size:.8rem;font-weight:950}.profile-guidance-card p{margin:8px 0 0;color:#71899c;font-size:.6rem;line-height:1.9}.security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.security-form{display:grid;gap:14px}.security-form .btn{justify-self:start}.security-explainer{display:flex;gap:12px;margin-bottom:17px;padding:15px;border:1px solid rgba(8,126,255,.12);border-radius:15px;color:#5b7488;background:rgba(8,126,255,.05)}.security-explainer>span{display:grid;width:39px;min-width:39px;height:39px;place-items:center;border-radius:12px;color:#087eff;background:#fff}.security-explainer p{margin:0;font-size:.64rem;line-height:1.9}.security-explainer-success{color:#176e55;border-color:rgba(9,173,119,.16);background:rgba(9,173,119,.06)}.security-explainer-success>span{color:#07966b}.two-factor-setup-box{padding:16px;border:1px solid rgba(255,146,9,.2);border-radius:16px;background:rgba(255,146,9,.055)}.two-factor-setup-box p{margin:0 0 12px;color:#6d7680;font-size:.63rem;line-height:1.9}.secret-copy-row{display:flex;align-items:center;gap:8px}.secret-copy-row code{flex:1;overflow:auto;padding:12px;border-radius:12px;color:#075d9e;background:#fff;font-size:.7rem;direction:ltr}.two-factor-setup-box details{margin-top:12px}.two-factor-setup-box summary{color:#83601f;font-size:.59rem;cursor:pointer}.two-factor-setup-box textarea{width:100%;min-height:86px;margin-top:9px;padding:10px;border:1px solid rgba(8,126,255,.13);border-radius:12px;background:#fff;font-size:.55rem;resize:vertical}.two-factor-action-stack{display:grid;gap:16px}.security-inline-form{display:grid;grid-template-columns:140px 1fr;gap:9px}.security-danger-form{padding-top:16px;border-top:1px solid rgba(213,55,55,.1)}.recovery-codes-panel{margin-bottom:16px;border-color:rgba(255,146,9,.25);background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,248,235,.75))}.recovery-codes-panel>p{margin:-7px 0 17px;color:#718295;font-size:.64rem}.recovery-code-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.recovery-code-grid code{padding:11px;border:1px solid rgba(8,126,255,.12);border-radius:11px;color:#075f9f;background:#fff;text-align:center;direction:ltr;font-size:.68rem}.sessions-panel{margin-top:16px}.session-list{display:grid;gap:9px}.session-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:13px;border:1px solid rgba(8,126,255,.09);border-radius:16px;background:rgba(255,255,255,.5)}.session-item.is-current{border-color:rgba(9,173,119,.2);background:rgba(240,255,249,.65)}.session-device-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;color:#087eff;background:rgba(8,126,255,.08)}.session-device-icon svg{width:20px;height:20px}.session-device-copy strong,.session-device-copy small{display:block}.session-device-copy strong{font-size:.66rem}.session-device-copy strong em{display:inline-flex;margin-right:8px;padding:3px 7px;border-radius:999px;color:#08795a;background:rgba(9,173,119,.1);font-size:.48rem;font-style:normal}.session-device-copy small{margin-top:5px;color:#8497a7;font-size:.53rem;line-height:1.7}.account-sidebar-backdrop{display:none}.auth-status-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;overflow:hidden;padding:0;border-radius:23px}.auth-status-summary>div{padding:25px;background:rgba(255,255,255,.52)}.auth-status-summary span,.auth-status-summary strong{display:block}.auth-status-summary span{color:#72899d;font-size:.65rem}.auth-status-summary strong{margin-top:8px;font-size:1.05rem;font-weight:950}.feature-showcase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-showcase-card{padding:22px;border-radius:21px}.feature-showcase-card>span{display:grid;width:45px;height:45px;place-items:center;border-radius:14px;color:#087eff;background:rgba(8,126,255,.08)}.feature-showcase-card>span svg{width:21px;height:21px}.feature-showcase-card h2{margin:16px 0 8px;font-size:.83rem;font-weight:950}.feature-showcase-card p{margin:0;color:#70879a;font-size:.61rem;line-height:1.9}.auth-system-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px;border-radius:25px}.auth-system-cta h2{margin:11px 0 8px;font-size:1.35rem;font-weight:950}.auth-system-cta p{margin:0;color:#6c8396;font-size:.68rem}.auth-system-cta>div:last-child{display:flex;gap:9px;flex:0 0 auto}@media(max-width:1200px){.account-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1020px){.account-shell{grid-template-columns:250px minmax(0,1fr)}.account-form-grid{grid-template-columns:minmax(0,1fr) 280px}.security-grid{grid-template-columns:1fr}.recovery-code-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:991.98px){.account-shell{display:block;width:min(100% - 28px,900px);padding:14px 0}.account-sidebar{position:fixed;z-index:1100;top:0;right:0;width:min(310px,88vw);height:100vh;border-radius:0;transform:translateX(105%);transition:.25s}.account-sidebar.is-open{transform:translateX(0)}.account-sidebar-backdrop{position:fixed;z-index:1090;inset:0;display:block;visibility:hidden;background:rgba(3,19,34,.4);opacity:0;transition:.25s}.account-sidebar-backdrop.is-open{visibility:visible;opacity:1}.account-topbar{position:sticky;z-index:100;top:12px}.account-dashboard-grid,.account-form-grid{grid-template-columns:1fr}.account-form-side{grid-template-columns:repeat(2,minmax(0,1fr))}.account-form-side>.btn{grid-column:1/-1}.avatar-upload-card{grid-row:span 2}}@media(max-width:760px){.auth-grid-register .auth-form-panel{padding-block:35px}.account-page-heading{align-items:flex-start;flex-direction:column}.account-stat-grid{grid-template-columns:1fr}.account-topbar-actions .btn-glass{display:none}.account-dashboard-grid{grid-template-columns:1fr}.account-form-side{grid-template-columns:1fr}.avatar-upload-card{grid-row:auto}.security-inline-form{grid-template-columns:1fr}.session-item{grid-template-columns:auto 1fr}.session-item form{grid-column:1/-1}.session-item form .btn{width:100%}.feature-showcase-grid{grid-template-columns:1fr}.auth-status-summary{grid-template-columns:1fr}.auth-system-cta{align-items:flex-start;flex-direction:column}.auth-system-cta>div:last-child{width:100%;flex-wrap:wrap}.auth-system-cta .btn{flex:1}.recovery-code-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.auth-grid-register .auth-form-panel{padding:30px 20px}.account-shell{width:calc(100% - 18px)}.account-topbar{padding:12px}.account-topbar-title>div{display:none}.account-topbar-actions{margin-right:auto}.account-content{padding-top:22px}.account-panel{padding:19px}.account-stat-card{padding:17px}.recovery-code-grid{grid-template-columns:1fr}.account-page-heading .btn{width:100%}.profile-score-pill,.security-status-pill{width:100%;justify-content:center}.auth-system-cta>div:last-child{display:grid}.auth-system-cta .btn{width:100%}}
.password-meter{position:relative}.password-meter>span{top:0;right:0}